:root {
    --bg-outer: #141412;
    --bg-app: #1A1A18;
    --text-main: #F2E8D8;
    --text-muted: #A79C8E;
    --accent-green: #cfa149;
    --accent-green-glow: rgba(155, 228, 71, 0.25);
    --accent-primary: #D6A84F;
    --accent-primary-glow: rgba(214, 168, 79, 0.22);
    --accent-danger: #B8463A;
    --accent-danger-glow: rgba(184, 70, 58, 0.20);
    --border-color: #343025;
    --card-bg: #20201E;
    --tag-bg: #24231F;
    
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-outer);
    font-family: var(--font-main);
    color: var(--text-main);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.app-window {
    background-color: var(--bg-app);
    width: 100%;

    height: 900px;
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    display: grid;
    grid-template-columns: 260px 1fr 340px;
    overflow: hidden;
}

/* Scrollbar styling for a native feel */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #343025; border-radius: 10px; }

/* =========================================
   LEFT SIDEBAR
========================================= */
.sidebar-left {
    padding: 24px 0 24px 24px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
}

.logo-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 24px;
    margin-bottom: 32px;
}

.logo-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 16px;
    color: var(--accent-green);
}

.logo-icon { width: 20px; height: 20px; }

.icon-btn {
    background: var(--card-bg);
    border: none;
    color: var(--text-muted);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.icon-btn svg ,
.icon-btn .ph { width: 16px; height: 16px; }

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
    padding-right: 24px;
}

.avatar { border-radius: 50%; background-color: #343025; }
.avatar-md { width: 44px; height: 44px; }
.avatar-sm { width: 36px; height: 36px; }
.avatar-micro { width: 24px; height: 24px; border: 2px solid var(--bg-app); border-radius: 50%; margin-left: -8px;}
.avatar-micro:first-child { margin-left: 0; }

.user-info { display: flex; flex-direction: column; flex: 1; }
.greeting { font-size: 12px; color: var(--text-muted); }
.name { font-size: 14px; font-weight: 600; }
.chevron { width: 16px; height: 16px; color: var(--text-muted); }

.main-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 24px 10px 0;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    position: relative;
    transition: color 0.2s;
}

.nav-item svg ,

.nav-item .ph { width: 20px; height: 20px; }
.nav-item:hover { color: var(--text-main); }
.nav-item.active { color: var(--text-main); }

.active-indicator {
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background-color: var(--accent-green);
    border-radius: 0 4px 4px 0;
}

.nav-item.active svg ,

.nav-item.active .ph { color: var(--accent-green); }

.badge {
    margin-left: auto;
    background-color: var(--accent-green);
    color: #141412;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 12px;
}

.nav-spacer { height: 24px; }

.bottom-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 24px;
}

.btn-create {
    margin-right: 24px;
    background: linear-gradient(90deg, var(--accent-primary), #C9973F);
    color: #141412;
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px var(--accent-primary-glow);
    transition: transform 0.2s;
}

/* =========================================
   MAIN FEED
========================================= */
.feed-main {
    padding: 32px 320px;
    overflow-y: auto;
}

.feed-header {
    margin-bottom: 32px;
}
.feed-header h1 {
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.logo-icon-inline { width: 20px; height: 20px; color: var(--accent-green); }
.feed-header p {
    font-size: 13px;
    color: var(--text-muted);
}

.post { margin-bottom: 40px; }

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

.post-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-info { display: flex; flex-direction: column; }
.author-info strong { font-size: 14px; }
.author-info span { font-size: 12px; color: var(--text-muted); }

.post-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icon-btn-green {
    background: var(--tag-bg);
    color: var(--accent-green);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.icon-btn-green svg ,
.icon-btn-green .ph { width: 14px; height: 14px; }

.btn-following {
    background-color: var(--card-bg);
    color: var(--text-main);
    border: none;
    padding: 6px 16px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.post-image-placeholder {
    width: 100%;
    height: 400px;
    border-radius: 16px;
    background: linear-gradient(145deg, #74a0ad, #e7cbb2, #473238);
    margin-bottom: 16px;
}
.post-image-placeholder.partial { height: 100px; }

.post-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.action-group {
    display: flex;
    gap: 20px;
}

.action-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}
.action-btn svg ,
.action-btn .ph { width: 20px; height: 20px; }

.btn-collect {
    background-color: var(--accent-green);
    color: #141412;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.post-text {
    font-size: 14px;
    line-height: 1.5;
    color: #A79C8E;
    margin-bottom: 16px;
}

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

.tag {
    background-color: var(--tag-bg);
    color: #A79C8E;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
}

/* =========================================
   RIGHT SIDEBAR
========================================= */
.sidebar-right {
    padding: 32px 24px;
    overflow-y: auto;
}

.widget { margin-bottom: 40px; }

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

.widget h2 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}
.widget-header h2 { margin-bottom: 0; }

.highlight-pink { color: var(--accent-primary); }

.nav-arrows {
    display: flex;
    gap: 8px;
}

.arrow-btn {
    background-color: var(--tag-bg);
    border: none;
    color: var(--text-muted);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.arrow-btn.active {
    background-color: var(--accent-green);
    color: #141412;
}
.arrow-btn svg ,
.arrow-btn .ph { width: 14px; height: 14px; }

.moments-list {
    display: flex;
    gap: 12px;
    overflow-x: hidden;
}

.moment-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.moment-ring {
    padding: 2px;
    border-radius: 50%;
}
.gradient-1 { background: linear-gradient(45deg, #9BE447, #10b981); }
.gradient-2 { background: linear-gradient(45deg, #3b82f6, #8b5cf6); }
.gradient-3 { background: linear-gradient(45deg, #6b7280, #9ca3af); }
.gradient-4 { background: linear-gradient(45deg, #8b5cf6, #d946ef); }

.moment-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--bg-app);
}

.moment-item span {
    font-size: 11px;
    color: var(--text-muted);
}

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

.event-card {
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.event-bg-1 { background: linear-gradient(135deg, #20201E, #1A1A18); }
.event-bg-2 { background: linear-gradient(135deg, #20201E, #1A1A18); border: 1px solid rgba(155, 228, 71, 0.1); }

.event-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
}
.badge-orange { background: linear-gradient(90deg, var(--accent-primary), #B98B38); color: #141412; }

.event-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.event-card h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}

.event-time {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.event-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.event-avatars { display: flex; }

.event-attendees {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.3;
}

.bg-flower {
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 100px;
    height: 100px;
    z-index: 1;
}

/* Platzhalter-Farben für Avatare */
.placeholder-avatar-1 { background: linear-gradient(45deg, #e66465, #9198e5); }
.placeholder-avatar-2 { background: linear-gradient(45deg, #5c7b99, #1c2733); }
.placeholder-avatar-3 { background: linear-gradient(45deg, #c074b2, #8ab5e8); }
.placeholder-avatar-4 { background: linear-gradient(45deg, #ff9a9e, #fecfef); }
.placeholder-avatar-5 { background: linear-gradient(45deg, #a18cd1, #fbc2eb); }
.placeholder-avatar-6 { background: linear-gradient(45deg, #84fab0, #8fd3f4); }
.placeholder-avatar-7 { background: linear-gradient(45deg, #fccb90, #d57eeb); }
.placeholder-avatar-8 { background: linear-gradient(45deg, #e0c3fc, #8ec5fc); }
.placeholder-avatar-9 { background: linear-gradient(45deg, #4facfe, #00f2fe); }

/* =========================================
   RESPONSIVE DESIGN
========================================= */
@media (max-width: 1200px) {
    .app-window {
        grid-template-columns: 240px 1fr 300px;
    }
}

@media (max-width: 992px) {
    .app-window {
        grid-template-columns: 220px 1fr;
    }
    .sidebar-right {
        display: none;
    }
}

@media (max-width: 768px) {
    body { padding: 0; }
    .app-window {
        grid-template-columns: 1fr;
        height: 100vh;
        border-radius: 0;
    }
    .sidebar-left {
        display: none;
    }
    .feed-main {
        padding: 20px;
    }
}
/* =========================================
   ADDED FUNCTION STATES
========================================= */
.sidebar-toggle svg ,
/* =========================================
   ADDED FUNCTION STATES
========================================= */
.sidebar-toggle .ph {
    transition: transform 0.2s;
}

.app-window.sidebar-collapsed {
    grid-template-columns: 88px 1fr 340px;
}

.app-window.sidebar-collapsed .sidebar-left {
    padding-left: 20px;
}

.app-window.sidebar-collapsed .logo-section {
    padding-right: 20px;
    gap: 10px;
}

.app-window.sidebar-collapsed .sidebar-toggle svg ,

.app-window.sidebar-collapsed .sidebar-toggle .ph {
    transform: rotate(180deg);
}

.app-window.sidebar-collapsed .logo-brand span,
.app-window.sidebar-collapsed .user-info,
.app-window.sidebar-collapsed .chevron,
.app-window.sidebar-collapsed .nav-item span,
.app-window.sidebar-collapsed .btn-create {
    display: none;
}

.app-window.sidebar-collapsed .user-profile {
    justify-content: center;
    padding-right: 20px;
}

.app-window.sidebar-collapsed .nav-item {
    gap: 0;
    justify-content: center;
    padding-right: 20px;
}

.sidebar-left {
    position: relative;
}

.user-profile {
    position: relative;
    cursor: pointer;
}

.profile-menu {
    position: absolute;
    top: 128px;
    left: 24px;
    right: 24px;
    display: none;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    z-index: 40;
}

.profile-menu.open {
    display: flex;
    flex-direction: column;
}

.profile-menu a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 12px;
    border-radius: 12px;
}

.profile-menu a:hover {
    background-color: var(--tag-bg);
    color: var(--text-main);
}

.app-window.sidebar-collapsed .profile-menu {
    left: 12px;
    right: auto;
    min-width: 180px;
}

.moments-list {
    scroll-behavior: smooth;
}

.moments-list::-webkit-scrollbar {
    display: none;
}

.moment-item {
    flex: 0 0 auto;
}

.post-image-placeholder.tone-2 { background: linear-gradient(145deg, #c074b2, #8ab5e8, #20201E); }
.post-image-placeholder.tone-3 { background: linear-gradient(145deg, #283647, #6fa2a3, #dac3ad); }
.post-image-placeholder.tone-4 { background: linear-gradient(145deg, #3b2950, #7b61ff, #D6A84F); }
.post-image-placeholder.tone-5 { background: linear-gradient(145deg, #20332a, #9BE447, #141412); }
.post-image-placeholder.tone-6 { background: linear-gradient(145deg, #141412, #516079, #e6c1a7); }

body.modal-open {
    overflow: hidden;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 26%, rgba(155, 228, 71, 0.13), transparent 35%),
        radial-gradient(circle at 76% 76%, rgba(214, 168, 79, 0.11), transparent 33%),
        rgba(8, 9, 12, 0.72);
    backdrop-filter: blur(0px) saturate(105%);
    -webkit-backdrop-filter: blur(0px) saturate(105%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease, backdrop-filter 0.38s ease, -webkit-backdrop-filter 0.38s ease;
    z-index: 100;
}

.modal-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.composer-modal {
    position: relative;
    width: min(560px, 100%);
    background:
        linear-gradient(145deg, rgba(32, 32, 30, 0.96), rgba(20, 20, 18, 0.98)),
        var(--bg-app);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow:
        0 42px 120px rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(155, 228, 71, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transform: translateY(34px) scale(0.94);
    opacity: 0;
    transition: transform 0.46s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
}

.modal-backdrop.open .composer-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.composer-modal::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(155, 228, 71, 0.13), transparent),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 36%);
    opacity: 0.78;
}

.composer-orb {
    position: absolute;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    filter: blur(24px);
    opacity: 0.42;
    pointer-events: none;
}

.composer-orb-one {
    top: -82px;
    right: -54px;
    background: rgba(155, 228, 71, 0.55);
}

.composer-orb-two {
    left: -84px;
    bottom: -86px;
    background: rgba(214, 168, 79, 0.34);
}

.composer-handle {
    position: relative;
    z-index: 2;
    width: 42px;
    height: 4px;
    margin: 14px auto 0;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.14);
}

.composer-header,
.composer-footer,
.composer-body {
    position: relative;
    z-index: 2;
}

.composer-header,
.composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
}

.composer-header {
    padding-top: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.composer-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(12, 13, 17, 0.25);
}

.composer-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: var(--accent-green);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.composer-kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-green);
    box-shadow: 0 0 14px var(--accent-green-glow);
}

.composer-header h2 {
    font-size: 20px;
    line-height: 1.1;
    margin-bottom: 6px;
}

.composer-header p {
    color: var(--text-muted);
    font-size: 12px;
}

.modal-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.07);
    color: #D8CDBE;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.modal-close:hover {
    transform: rotate(90deg) scale(1.05);
    background: rgba(155, 228, 71, 0.13);
    color: var(--accent-green);
}

.composer-body {
    padding: 22px 24px 24px;
}

.composer-author-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.composer-author {
    margin-bottom: 0;
}

.composer-audience {
    border: 1px solid rgba(155, 228, 71, 0.18);
    background: rgba(155, 228, 71, 0.08);
    color: var(--accent-green);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.composer-input-shell {
    position: relative;
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        rgba(32, 32, 30, 0.76);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.composer-input-shell:focus-within {
    border-color: rgba(155, 228, 71, 0.45);
    box-shadow:
        0 0 0 4px rgba(155, 228, 71, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transform: translateY(-1px);
}

.composer-body textarea {
    width: 100%;
    min-height: 152px;
    resize: vertical;
    background: transparent;
    color: var(--text-main);
    border: 0;
    padding: 18px 18px 52px;
    font-family: var(--font-main);
    font-size: 14px;
    line-height: 1.55;
    outline: none;
}

.composer-body textarea::placeholder {
    color: rgba(181, 183, 192, 0.62);
}

.composer-body textarea:focus {
    border-color: transparent;
    box-shadow: none;
}

.composer-preview-strip {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    display: flex;
    gap: 8px;
    pointer-events: none;
}

.composer-preview-strip span {
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.composer-preview-strip span:nth-child(1) { width: 72px; }
.composer-preview-strip span:nth-child(2) { width: 42px; }
.composer-preview-strip span:nth-child(3) { width: 58px; background: rgba(155, 228, 71, 0.10); }

.composer-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.composer-tool {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.06);
    color: #D8CDBE;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    padding: 9px 13px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.composer-tool span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(155, 228, 71, 0.12);
    color: var(--accent-green);
    font-size: 11px;
    font-weight: 800;
}

.composer-tool:hover {
    transform: translateY(-2px);
    background: rgba(155, 228, 71, 0.10);
    border-color: rgba(155, 228, 71, 0.20);
    color: var(--text-main);
}


/* Patch 642: Composer feeling and poll panels */
.composer-option-panels {
    margin-top: 12px;
}

.composer-option-panel {
    padding: 14px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        rgba(22, 23, 21, 0.78);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 18px 42px rgba(0, 0, 0, 0.18);
}

.composer-option-panel[hidden] {
    display: none !important;
}

.composer-panel-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.composer-panel-title strong {
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.2;
}

.composer-panel-title span {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
    text-align: right;
}

.composer-feeling-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.composer-feeling-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.055);
    color: #D8CDBE;
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.composer-feeling-choice:hover {
    transform: translateY(-1px);
    border-color: rgba(155, 228, 71, 0.22);
    background: rgba(155, 228, 71, 0.09);
    color: var(--text-main);
}

.composer-feeling-choice.is-active {
    border-color: rgba(214, 168, 79, 0.42);
    background: linear-gradient(135deg, rgba(214, 168, 79, 0.24), rgba(155, 228, 71, 0.11));
    color: var(--text-main);
    box-shadow: 0 10px 24px rgba(214, 168, 79, 0.12);
}

.composer-poll-question,
.composer-poll-options input {
    width: 100%;
    min-height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        rgba(32, 32, 30, 0.82);
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
    line-height: 1.35;
    padding: 10px 12px;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.composer-poll-question::placeholder,
.composer-poll-options input::placeholder {
    color: rgba(181, 183, 192, 0.56);
}

.composer-poll-question:focus,
.composer-poll-options input:focus {
    border-color: rgba(155, 228, 71, 0.42);
    box-shadow: 0 0 0 4px rgba(155, 228, 71, 0.08);
    background: rgba(32, 32, 30, 0.94);
}

.composer-poll-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.composer-poll-options input:first-child:nth-last-child(1),
.composer-poll-options input:nth-child(3),
.composer-poll-options input:nth-child(4),
.composer-poll-options input:nth-child(5),
.composer-poll-options input:nth-child(6) {
    grid-column: 1 / -1;
}

.composer-add-poll-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(155, 228, 71, 0.18);
    background: rgba(155, 228, 71, 0.08);
    color: var(--accent-green);
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.composer-add-poll-option:hover:not(:disabled) {
    transform: translateY(-1px);
    background: rgba(155, 228, 71, 0.13);
    border-color: rgba(155, 228, 71, 0.30);
    color: var(--text-main);
}

.composer-add-poll-option:disabled {
    cursor: not-allowed;
    opacity: 0.46;
}

.hnt-preview-ai-toggle input {
    width: 16px;
    height: 16px;
    margin: 0;
}

.modal-close-secondary {
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.composer-submit {
    margin-right: 0;
    padding: 11px 26px;
    border-radius: 999px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.composer-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 34px rgba(155, 228, 71, 0.28);
}

.modal-backdrop.open .composer-kicker,
.modal-backdrop.open .composer-header h2,
.modal-backdrop.open .composer-header p,
.modal-backdrop.open .composer-author-row,
.modal-backdrop.open .composer-input-shell,
.modal-backdrop.open .composer-tools,
.modal-backdrop.open .composer-footer {
    animation: composerStepIn 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.modal-backdrop.open .composer-header h2 { animation-delay: 0.02s; }
.modal-backdrop.open .composer-header p { animation-delay: 0.04s; }
.modal-backdrop.open .composer-author-row { animation-delay: 0.08s; }
.modal-backdrop.open .composer-input-shell { animation-delay: 0.12s; }
.modal-backdrop.open .composer-tools { animation-delay: 0.16s; }
.modal-backdrop.open .composer-footer { animation-delay: 0.20s; }

@keyframes composerStepIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-backdrop,
    .composer-modal,
    .modal-backdrop.open .composer-kicker,
    .modal-backdrop.open .composer-header h2,
    .modal-backdrop.open .composer-header p,
    .modal-backdrop.open .composer-author-row,
    .modal-backdrop.open .composer-input-shell,
    .modal-backdrop.open .composer-tools,
    .modal-backdrop.open .composer-footer {
        animation: none;
        transition: none;
    }
}

@media (max-width: 992px) {
    .app-window.sidebar-collapsed {
        grid-template-columns: 88px 1fr;
    }
}

@media (max-width: 768px) {
    .app-window.sidebar-collapsed {
        grid-template-columns: 1fr;
    }

    .modal-backdrop {
        align-items: flex-end;
        padding: 16px;
    }

    .composer-modal {
        width: 100%;
        border-radius: 28px;
        transform: translateY(42px) scale(0.98);
    }

    .composer-header,
    .composer-footer,
    .composer-body {
        padding-left: 18px;
        padding-right: 18px;
    }


    .composer-panel-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .composer-panel-title span {
        text-align: left;
    }

    .composer-poll-options {
        grid-template-columns: 1fr;
    }

    .composer-poll-options input {
        grid-column: 1 / -1;
    }
}


/* =========================================
   PROFILE VIEW - Lens style extension
========================================= */
.profile-window {
    grid-template-columns: 260px minmax(0, 1fr) 340px;
}

.profile-main {
    padding: 32px 0;
    overflow-y: auto;
}

.profile-main > .profile-hero-card,
.profile-main > .profile-tabs,
.profile-main > .profile-progress-card,
.profile-main > .profile-composer-card,
.profile-main > .profile-post-card {
    width: min(calc(100% - 64px), 720px);
    margin-left: auto;
    margin-right: auto;
}

.profile-hero-card,
.profile-progress-card,
.profile-composer-card,
.profile-post-card,
.profile-pass-card,
.profile-stats-widget,
.profile-about-widget,
.profile-albums-widget {
    background: rgba(32, 32, 30, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

.profile-hero-card {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    margin-bottom: 18px;
}

.profile-cover {
    position: relative;
    min-height: 220px;
    background:
        radial-gradient(circle at 18% 18%, rgba(155, 228, 71, 0.16), transparent 28%),
        radial-gradient(circle at 82% 22%, rgba(214, 168, 79, 0.14), transparent 30%),
        linear-gradient(135deg, rgba(72, 82, 94, 0.72), rgba(25, 27, 33, 0.96)),
        linear-gradient(120deg, #2c3240, #1A1A18 55%, #2b3039);
    overflow: hidden;
}

.profile-cover::before,
.profile-cover::after {
    content: "";
    position: absolute;
    inset: auto;
    pointer-events: none;
}

.profile-cover::before {
    width: 460px;
    height: 460px;
    left: 50%;
    top: 54%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(155, 228, 71, 0.14) 0 5deg, transparent 5deg 12deg);
    opacity: 0.42;
    filter: blur(0.2px);
}

.profile-cover::after {
    left: 0;
    right: 0;
    bottom: 0;
    height: 58%;
    background: linear-gradient(180deg, transparent, rgba(26, 26, 24, 0.96));
}

.cover-noise {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0 48%, rgba(255,255,255,0.05) 50%, transparent 52%),
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 100% 100%, 28px 28px, 28px 28px;
    opacity: 0.32;
}

.profile-cover-action {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    background: rgba(32, 32, 30, 0.82);
    color: var(--text-main);
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(12px);
}

.profile-cover-action svg ,

.profile-cover-action .ph { width: 16px; height: 16px; }

.profile-identity-panel {
    position: relative;
    display: flex;
    gap: 24px;
    padding: 0 26px 26px;
    margin-top: -58px;
    z-index: 4;
}

.profile-avatar-wrap {
    position: relative;
    flex: 0 0 auto;
}

.profile-avatar {
    width: 132px;
    height: 132px;
    border: 8px solid rgba(26, 26, 24, 0.94);
    box-shadow:
        0 0 0 2px rgba(155, 228, 71, 0.28),
        0 18px 36px rgba(0, 0, 0, 0.45);
}

.profile-avatar-edit,
.profile-level {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 18, 0.94);
    color: var(--accent-green);
    border: 1px solid rgba(155, 228, 71, 0.24);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.profile-avatar-edit {
    top: -2px;
    right: 4px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
}

.profile-avatar-edit svg ,

.profile-avatar-edit .ph { width: 16px; height: 16px; }

.profile-level {
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    border-radius: 999px;
    padding: 8px 13px;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 800;
}

.profile-copy {
    flex: 1;
    padding-top: 72px;
    min-width: 0;
}

.profile-name-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.profile-name-row h1 {
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.05em;
    margin-bottom: 8px;
    text-shadow: 0 0 28px rgba(155, 228, 71, 0.18);
}

.profile-name-row p {
    color: #A79C8E;
    font-size: 14px;
}

.profile-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 0 0 auto;
}

.profile-soft-btn,
.profile-edit-btn {
    border-radius: 999px;
    white-space: nowrap;
}

.profile-edit-btn {
    margin-right: 0;
    padding: 10px 16px;
}

.profile-badges-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: #D8CDBE;
    font-size: 12px;
    font-weight: 700;
}

.profile-rank-pill,
.profile-status-pill {
    border-radius: 999px;
    padding: 7px 12px;
}

.profile-rank-pill {
    color: var(--accent-green);
    background: rgba(155, 228, 71, 0.08);
    border: 1px solid rgba(155, 228, 71, 0.20);
}

.profile-status-pill {
    color: #141412;
    background: var(--accent-green);
}

.profile-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px;
    margin-bottom: 18px;
    background: rgba(32, 32, 30, 0.70);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 22px;
}

.profile-tabs a {
    flex: 0 0 auto;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 999px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease;
}

.profile-tabs a span { color: var(--accent-green); margin-left: 4px; }
.profile-tabs a.active,
.profile-tabs a:hover {
    background: rgba(155, 228, 71, 0.11);
    color: var(--text-main);
}

.profile-progress-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 18px;
}

.progress-orb {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, var(--bg-app) 58%, transparent 60%),
        conic-gradient(var(--accent-green) 0 72%, rgba(255,255,255,0.08) 72% 100%);
    box-shadow: 0 0 30px rgba(155, 228, 71, 0.16);
}

.progress-orb span {
    font-size: 16px;
    font-weight: 800;
    color: var(--accent-green);
}

.profile-progress-card h2 {
    font-size: 18px;
    margin-bottom: 4px;
}

.profile-progress-card p {
    color: var(--text-muted);
    font-size: 13px;
}

.progress-pills {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.progress-pills span {
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    color: #D8CDBE;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 700;
}

.progress-pills .done {
    color: var(--accent-green);
    background: rgba(155, 228, 71, 0.09);
    border-color: rgba(155, 228, 71, 0.18);
    text-decoration: line-through;
    text-decoration-color: rgba(155, 228, 71, 0.55);
}

.profile-composer-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    border-radius: 24px;
    padding: 18px;
    margin-bottom: 22px;
}

.profile-compose-fake {
    min-height: 46px;
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.045);
    border-radius: 14px;
    padding: 0 16px;
    font-size: 13px;
    cursor: text;
}

.profile-composer-btn {
    margin-right: 0;
    border-radius: 14px;
    padding: 14px 18px;
}

.profile-compose-tools {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.profile-compose-tools button {
    border: 0;
    background: transparent;
    color: #D8CDBE;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    padding: 10px 8px;
    cursor: pointer;
}

.profile-compose-tools button:hover { color: var(--accent-green); }

.profile-post-card {
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 22px;
}

.profile-post-media {
    width: 100%;
    height: 300px;
    border-radius: 20px;
    margin: 16px 0;
}

.tone-hunt {
    background:
        radial-gradient(circle at 30% 28%, rgba(155, 228, 71, 0.26), transparent 20%),
        radial-gradient(circle at 74% 68%, rgba(214, 168, 79, 0.18), transparent 24%),
        linear-gradient(135deg, #111319, #343a46 48%, #181b20);
}

.compact-profile-post .post-text { margin-bottom: 12px; }

.profile-rightbar {
    padding-top: 32px;
}

.profile-pass-card {
    position: relative;
    border-radius: 28px;
    min-height: 300px;
    padding: 24px;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(circle at center 42%, rgba(155, 228, 71, 0.16), transparent 34%),
        linear-gradient(145deg, rgba(37, 43, 33, 0.88), rgba(23, 24, 30, 0.96));
}

.profile-pass-card::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(155, 228, 71, 0.14) 0 4deg, transparent 4deg 10deg);
    opacity: 0.55;
}

.pass-brand,
.pass-code,
.profile-pass-card h2,
.profile-pass-card p,
.pass-avatar {
    position: relative;
    z-index: 2;
}

.pass-brand {
    display: inline-block;
    color: var(--accent-green);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin-bottom: 42px;
}

.pass-avatar {
    width: 96px;
    height: 96px;
    margin: 0 auto 18px;
    border: 5px solid rgba(26, 26, 24, 0.88);
    box-shadow: 0 0 0 2px rgba(155, 228, 71, 0.20);
}

.profile-pass-card h2 { margin-bottom: 4px; }
.profile-pass-card p { color: var(--text-muted); font-size: 12px; }
.pass-code {
    display: inline-flex;
    margin-top: 22px;
    border-radius: 999px;
    background: rgba(26, 26, 24, 0.7);
    color: #D8CDBE;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 800;
}

.profile-stats-widget,
.profile-about-widget,
.profile-albums-widget {
    border-radius: 22px;
    padding: 20px;
}

.profile-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.profile-stat-grid div {
    border-radius: 16px;
    background: rgba(255,255,255,0.045);
    padding: 14px;
}

.profile-stat-grid strong {
    display: block;
    color: var(--accent-green);
    font-size: 22px;
    margin-bottom: 4px;
}

.profile-stat-grid span,
.profile-about-widget p,
.about-list span {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.about-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.about-list span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.about-list strong { color: var(--text-main); }

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

.album-grid span {
    aspect-ratio: 1;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(155, 228, 71, 0.18), rgba(255, 255, 255, 0.04));
}

@media (max-width: 1200px) {
    .profile-main {
        padding: 28px 0;
    }

    .profile-main > .profile-hero-card,
    .profile-main > .profile-tabs,
    .profile-main > .profile-progress-card,
    .profile-main > .profile-composer-card,
    .profile-main > .profile-post-card {
        width: min(calc(100% - 48px), 720px);
    }
}

@media (max-width: 992px) {
    .profile-window {
        grid-template-columns: 220px minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .profile-main {
        padding: 18px 0;
    }

    .profile-main > .profile-hero-card,
    .profile-main > .profile-tabs,
    .profile-main > .profile-progress-card,
    .profile-main > .profile-composer-card,
    .profile-main > .profile-post-card {
        width: calc(100% - 36px);
    }

    .profile-cover { min-height: 180px; }
    .profile-identity-panel {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 18px 22px;
    }

    .profile-copy {
        padding-top: 0;
        width: 100%;
    }

    .profile-name-row {
        flex-direction: column;
        align-items: center;
    }

    .profile-name-row h1 { font-size: 34px; }
    .profile-actions { width: 100%; justify-content: center; flex-wrap: wrap; }
    .profile-composer-card { grid-template-columns: 1fr; }
    .profile-composer-btn { width: 100%; }
    .profile-compose-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-post-media { height: 220px; }
}

/* =========================================
   PROFILE CLEANUP - flatter content cards
   User request: max 10px radii, only hero as real card
========================================= */
.profile-window .profile-hero-card,
.profile-window .profile-tabs,
.profile-window .profile-progress-card,
.profile-window .profile-composer-card,
.profile-window .profile-post-card,
.profile-window .profile-cover,
.profile-window .profile-cover-action,
.profile-window .profile-soft-btn,
.profile-window .profile-edit-btn,
.profile-window .profile-rank-pill,
.profile-window .profile-status-pill,
.profile-window .profile-tabs a,
.profile-window .progress-pills span,
.profile-window .profile-compose-fake,
.profile-window .profile-composer-btn,
.profile-window .profile-post-media,
.profile-window .btn-collect {
    border-radius: 10px;
}

.profile-window .profile-hero-card {
    background: rgba(32, 32, 30, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

.profile-window .profile-tabs,
.profile-window .profile-progress-card,
.profile-window .profile-composer-card,
.profile-window .profile-post-card {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.profile-window .profile-tabs {
    padding: 0;
    margin-top: 4px;
    margin-bottom: 28px;
    gap: 18px;
}

.profile-window .profile-tabs a {
    padding: 8px 0;
    background: transparent;
}

.profile-window .profile-tabs a.active,
.profile-window .profile-tabs a:hover {
    background: transparent;
    color: var(--text-main);
}

.profile-window .profile-progress-card {
    padding: 0;
    margin-bottom: 32px;
}

.profile-window .profile-composer-card {
    padding: 0;
    margin-bottom: 32px;
}

.profile-window .profile-post-card {
    padding: 0;
    margin-bottom: 40px;
}

.profile-window .profile-compose-fake {
    background: var(--card-bg);
}

.profile-window .progress-pills span,
.profile-window .profile-rank-pill {
    background: var(--tag-bg);
}

.profile-window .progress-pills .done {
    background: rgba(155, 228, 71, 0.08);
}

.profile-window .profile-avatar,
.profile-window .profile-avatar-edit,
.profile-window .progress-orb,
.profile-window .avatar,
.profile-window .moment-ring,
.profile-window .moment-avatar {
    border-radius: 50%;
}


/* =========================================
   PROFILE EDIT PAGE - Lens/HNT style
   Structure follows the reference screen, styling stays in the current dark template.
========================================= */
.profile-edit-main {
    padding: 32px 0;
    overflow-y: auto;
}

.edit-profile-shell {
    width: min(calc(100% - 64px), 680px);
    margin: 0 auto;
}

.settings-card {
    background: rgba(32, 32, 30, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    box-shadow: none;
}

.edit-profile-head {
    overflow: hidden;
    margin-bottom: 28px;
}

.edit-head-profile {
    min-height: 190px;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 34px 42px;
    background:
        radial-gradient(circle at 18% 20%, rgba(155, 228, 71, 0.10), transparent 26%),
        radial-gradient(circle at 82% 12%, rgba(214, 168, 79, 0.08), transparent 30%),
        linear-gradient(135deg, rgba(33, 35, 43, 0.98), rgba(25, 26, 32, 0.98));
    position: relative;
}

.edit-head-profile::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: -110px;
    top: -150px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(155, 228, 71, 0.10) 0 5deg, transparent 5deg 12deg);
    opacity: 0.38;
    pointer-events: none;
}

.edit-head-profile > * {
    position: relative;
    z-index: 1;
}

.edit-avatar-wrap {
    position: relative;
    flex: 0 0 auto;
}

.edit-avatar {
    width: 96px;
    height: 96px;
    border: 4px solid rgba(26, 26, 24, 0.92);
    box-shadow: 0 0 0 2px rgba(155, 228, 71, 0.24), 0 18px 38px rgba(0, 0, 0, 0.34);
}

.edit-avatar-btn {
    position: absolute;
    right: -8px;
    bottom: 5px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    background: var(--card-bg);
    color: var(--accent-green);
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.36);
}

.edit-avatar-btn svg ,

.edit-avatar-btn .ph {
    width: 17px;
    height: 17px;
}

.edit-head-profile h1 {
    font-size: 34px;
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: -0.04em;
}

.edit-head-profile p {
    color: var(--accent-green);
    font-size: 18px;
    font-weight: 600;
}

.settings-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    min-height: 74px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    overflow-x: auto;
}

.settings-tabs::-webkit-scrollbar {
    display: none;
}

.settings-tabs a,
.settings-tabs button {
    position: relative;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    text-decoration: none;
    padding: 25px 12px 23px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.settings-tabs a.active,
.settings-tabs a:hover,
.settings-tabs button:hover {
    color: var(--text-main);
}

.settings-tabs a.active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 3px;
    border-radius: 10px 10px 0 0;
    background: var(--accent-green);
    box-shadow: 0 0 18px rgba(155, 228, 71, 0.35);
}

.settings-tabs button {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
}

.settings-tabs button svg ,

.settings-tabs button .ph {
    width: 22px;
    height: 22px;
}

.edit-form-card {
    padding: 52px 42px;
}

.profile-edit-form {
    display: grid;
    gap: 26px;
}

.form-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
}

.form-row.compact {
    grid-template-columns: 150px minmax(220px, 360px);
}

.form-row.align-top {
    align-items: start;
}

.form-row label {
    color: #F2E8D8;
    font-size: 15px;
    font-weight: 700;
    text-align: right;
}

.form-row input,
.form-row textarea,
.form-row select {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--text-main);
    min-height: 54px;
    padding: 0 18px;
    font: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.form-row textarea {
    min-height: 150px;
    resize: vertical;
    padding-top: 16px;
    line-height: 1.5;
}

.form-row select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 23px) 50%,
        calc(100% - 16px) 50%;
    background-size: 7px 7px, 7px 7px;
    background-repeat: no-repeat;
    padding-right: 46px;
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
    border-color: rgba(155, 228, 71, 0.45);
    background: rgba(255, 255, 255, 0.075);
    box-shadow: 0 0 0 4px rgba(155, 228, 71, 0.08);
}

.form-actions {
    display: flex;
    justify-content: center;
    gap: 18px;
    padding-top: 26px;
}

.edit-cancel,
.edit-save {
    min-width: 132px;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    text-decoration: none;
    margin: 0;
}

.edit-save {
    padding-left: 34px;
    padding-right: 34px;
}

.profile-edit-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1200px) {
    .edit-profile-shell {
        width: min(calc(100% - 48px), 680px);
    }
}

@media (max-width: 768px) {
    .profile-edit-main {
        padding: 18px 0;
    }

    .edit-profile-shell {
        width: calc(100% - 36px);
    }

    .edit-head-profile {
        min-height: auto;
        padding: 30px 20px;
        align-items: center;
        text-align: center;
        flex-direction: column;
        gap: 16px;
    }

    .edit-head-profile h1 {
        font-size: 30px;
    }

    .settings-tabs {
        padding: 0 12px;
        min-height: 62px;
    }

    .settings-tabs a,
    .settings-tabs button {
        padding-top: 20px;
        padding-bottom: 19px;
        font-size: 13px;
    }

    .edit-form-card {
        padding: 28px 20px;
    }

    .form-row,
    .form-row.compact {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .form-row label {
        text-align: left;
    }

    .form-actions {
        flex-direction: column-reverse;
    }

    .edit-cancel,
    .edit-save {
        width: 100%;
    }
}

/* =========================================
   PROFILE EDIT MOBILE FIX - keep content inside the existing mobile content column
   Do not touch the right sidebar desktop layout.
========================================= */
@media (max-width: 768px) {
    .profile-window {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .profile-edit-main {
        grid-column: 1 / -1;
        width: 100%;
        max-width: 100vw;
        min-width: 0;
        padding: 16px 0 28px;
        overflow-x: hidden;
    }

    .edit-profile-shell {
        width: 100%;
        max-width: 620px;
        margin: 0 auto;
        padding: 0 16px;
        min-width: 0;
    }

    .settings-card,
    .edit-profile-head,
    .edit-form-card,
    .profile-edit-form,
    .form-row,
    .form-row.compact {
        min-width: 0;
        max-width: 100%;
    }

    .edit-head-profile {
        padding-left: 16px;
        padding-right: 16px;
    }

    .settings-tabs {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .edit-form-card {
        padding-left: 16px;
        padding-right: 16px;
    }

    .form-row input,
    .form-row textarea,
    .form-row select {
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 420px) {
    .edit-profile-shell {
        padding-left: 14px;
        padding-right: 14px;
    }

    .edit-form-card {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* =========================================
   CUP DETAIL PAGE - HNT/Lens style
   Keeps the existing left and right sidebar untouched.
========================================= */
.cup-detail-main {
    padding: 32px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.cup-detail-shell {
    width: min(calc(100% - 64px), 680px);
    margin: 0 auto;
}

.cup-hero-card,
.cup-panel {
    background: rgba(32, 32, 30, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    box-shadow: none;
    overflow: hidden;
}

.cup-cover-art {
    min-height: 178px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(26, 26, 24, 0.08), rgba(26, 26, 24, 0.72)),
        url('assets/quick-cup-cover.jpg') center / cover no-repeat;
}

.cup-cover-shade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 30%, rgba(155, 228, 71, 0.10), transparent 28%),
        linear-gradient(90deg, rgba(26, 26, 24, 0.35), transparent 46%, rgba(26, 26, 24, 0.18));
    pointer-events: none;
}

.cup-date-tile {
    position: absolute;
    left: 24px;
    bottom: -28px;
    width: 70px;
    height: 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 18, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.38);
}

.cup-date-tile::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 18px;
    background: linear-gradient(90deg, var(--accent-primary), #B98B38);
}

.cup-date-tile span {
    margin-top: 13px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cup-date-tile strong {
    color: var(--text-main);
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.04em;
}

.cup-cover-actions {
    position: absolute;
    right: 20px;
    bottom: 18px;
    display: flex;
    gap: 10px;
    z-index: 2;
}

.cup-action-btn,
.cup-icon-btn {
    border: 0;
    border-radius: 10px;
    background: rgba(32, 32, 30, 0.92);
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.cup-action-btn {
    padding: 11px 14px;
}

.cup-action-btn:hover,
.cup-icon-btn:hover {
    transform: translateY(-1px);
    color: var(--accent-green);
}

.cup-action-btn svg ,

.cup-action-btn .ph {
    width: 18px;
    height: 18px;
}

.cup-hero-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    padding: 42px 28px 24px;
    align-items: end;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cup-meta {
    color: #A79C8E;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cup-title-block h1 {
    font-size: 28px;
    line-height: 1.08;
    letter-spacing: -0.04em;
    margin-bottom: 14px;
}

.cup-info-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #A79C8E;
    font-size: 13px;
    line-height: 1.45;
}

.cup-info-line span:not(:last-child)::after {
    content: "•";
    color: rgba(255, 255, 255, 0.28);
    margin-left: 8px;
}

.cup-info-line .cup-status {
    color: #D6A84F;
    font-weight: 800;
}

.cup-info-line .cup-status::after {
    color: rgba(255, 255, 255, 0.28);
}

.cup-countdown {
    display: grid;
    gap: 8px;
    justify-items: end;
}

.countdown-label {
    color: #A79C8E;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.countdown-boxes {
    display: flex;
    gap: 8px;
}

.countdown-boxes div {
    width: 52px;
    min-height: 58px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.countdown-boxes strong {
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.04em;
}

.countdown-boxes span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    margin-top: 4px;
}

.cup-tabs-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 0 24px;
    min-height: 78px;
}

.cup-tabs {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.cup-tabs::-webkit-scrollbar {
    display: none;
}

.cup-tabs a {
    position: relative;
    flex: 0 0 auto;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    padding: 28px 0 24px;
}

.cup-tabs a.active,
.cup-tabs a:hover {
    color: var(--text-main);
}

.cup-tabs a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 10px 10px 0 0;
    background: var(--accent-green);
    box-shadow: 0 0 18px rgba(155, 228, 71, 0.35);
}

.cup-join-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cup-join-btn {
    margin: 0;
    padding: 12px 16px;
    border-radius: 10px;
    white-space: nowrap;
}

.cup-icon-btn {
    width: 42px;
    height: 42px;
}

.cup-icon-btn svg ,

.cup-icon-btn .ph {
    width: 20px;
    height: 20px;
}

.cup-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(210px, 0.85fr);
    gap: 18px;
    margin-top: 28px;
}

.cup-content-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cup-panel {
    padding: 24px;
}

.cup-panel h2 {
    font-size: 20px;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -0.03em;
}

.cup-panel p {
    color: #F2E8D8;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 18px;
}

.cup-panel p:last-child {
    margin-bottom: 0;
}

.cup-lead {
    color: var(--text-main) !important;
    font-size: 16px !important;
    font-weight: 800;
    line-height: 1.55 !important;
}

.cup-side-stack {
    display: grid;
    gap: 18px;
    align-content: start;
}

.cup-data-list {
    list-style: none;
    display: grid;
    gap: 15px;
}

.cup-data-list li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    color: #A79C8E;
    font-size: 13px;
    line-height: 1.45;
}

.cup-data-list svg ,

.cup-data-list .ph {
    width: 20px;
    height: 20px;
    color: #A79C8E;
}

.cup-data-list strong {
    color: var(--text-main);
}

.cup-join-panel {
    background:
        radial-gradient(circle at 100% 100%, rgba(155, 228, 71, 0.13), transparent 42%),
        rgba(32, 32, 30, 0.62);
}

.cup-panel-btn {
    width: 100%;
    margin: 2px 0 0;
    border-radius: 10px;
}

.cup-score-list {
    display: grid;
    gap: 10px;
}

.cup-score-list div {
    display: grid;
    gap: 2px;
    padding: 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
}

.cup-score-list strong {
    color: var(--accent-green);
    font-size: 15px;
}

.cup-score-list span {
    color: var(--text-muted);
    font-size: 12px;
}

@media (max-width: 1200px) {
    .cup-detail-shell {
        width: min(calc(100% - 48px), 680px);
    }

    .cup-hero-body {
        grid-template-columns: 1fr;
    }

    .cup-countdown {
        justify-items: start;
    }
}

@media (max-width: 768px) {
    .cup-detail-main {
        padding: 16px 0 28px;
        width: 100%;
        max-width: 100vw;
    }

    .cup-detail-shell {
        width: 100%;
        max-width: 620px;
        padding: 0 16px;
        min-width: 0;
    }

    .cup-cover-art {
        min-height: 158px;
    }

    .cup-date-tile {
        width: 62px;
        height: 74px;
        left: 16px;
        bottom: -24px;
    }

    .cup-cover-actions {
        right: 12px;
        bottom: 12px;
        gap: 8px;
    }

    .cup-action-btn {
        width: 42px;
        height: 42px;
        padding: 0;
        font-size: 0;
    }

    .cup-hero-body {
        padding: 38px 18px 20px;
        gap: 20px;
    }

    .cup-title-block h1 {
        font-size: 24px;
    }

    .countdown-boxes {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
    }

    .countdown-boxes div {
        width: auto;
    }

    .cup-tabs-row {
        grid-template-columns: 1fr;
        padding: 0 18px 16px;
        gap: 12px;
    }

    .cup-tabs a {
        padding-top: 22px;
        padding-bottom: 18px;
    }

    .cup-join-actions {
        display: grid;
        grid-template-columns: 1fr 42px 42px;
        width: 100%;
    }

    .cup-content-grid,
    .cup-content-grid.compact {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 20px;
    }

    .cup-panel {
        padding: 20px 18px;
    }
}

@media (max-width: 420px) {
    .cup-detail-shell {
        padding-left: 14px;
        padding-right: 14px;
    }

    .cup-cover-art {
        min-height: 140px;
    }

    .cup-meta,
    .cup-info-line {
        font-size: 12px;
    }

    .cup-join-actions {
        grid-template-columns: 1fr 38px 38px;
    }

    .cup-icon-btn {
        width: 38px;
        height: 38px;
    }
}


/* Phase 16: Cup detail lower content without visual cards */
.cup-content-grid .cup-panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 8px 0 0;
    overflow: visible;
}

.cup-content-grid .cup-panel h2 {
    position: relative;
    display: inline-flex;
    padding-bottom: 10px;
    margin-bottom: 22px;
}

.cup-content-grid .cup-panel h2::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 2px dashed rgba(155, 228, 71, 0.56);
    filter: drop-shadow(0 0 8px rgba(155, 228, 71, 0.18));
}

.cup-content-grid .cup-panel p,
.cup-content-grid .cup-data-list li,
.cup-content-grid .cup-score-list span {
    color: #D8CDBE;
}

.cup-content-grid .cup-join-panel {
    background: transparent;
}

.cup-content-grid .cup-score-list {
    gap: 16px;
}

.cup-content-grid .cup-score-list div {
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.cup-content-grid .cup-panel-btn {
    width: auto;
    min-width: 180px;
    padding-left: 18px;
    padding-right: 18px;
}


@media (max-width: 768px) {
    .cup-content-grid .cup-panel {
        padding: 6px 0 0;
    }

    .cup-content-grid .cup-panel-btn {
        width: 100%;
    }
}

/* =========================================
   CUP OVERVIEW PAGE - grid inspired by product overview
========================================= */
.cups-main {
    padding: 32px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.cups-shell {
    width: min(calc(100% - 64px), 680px);
    margin: 0 auto;
}

.cups-toolbar {
    margin-bottom: 28px;
}

.cups-toolbar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 22px;
}

.cups-main-tabs {
    display: flex;
    align-items: center;
    gap: 30px;
    min-width: 0;
}

.cups-main-tabs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    color: #A79C8E;
    text-decoration: none;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.cups-main-tabs a.active {
    color: var(--text-main);
}

.cups-main-tabs a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 99px;
    background: var(--accent-green);
    box-shadow: 0 0 16px rgba(155, 228, 71, 0.30);
}

.cups-main-tabs svg,
.cups-toolbar-actions svg,
.cups-filter-row svg ,

.cups-main-tabs .ph,
.cups-toolbar-actions .ph,
.cups-filter-row .ph {
    width: 20px;
    height: 20px;
}

.cups-main-tabs a.active svg ,

.cups-main-tabs a.active .ph {
    color: var(--accent-green);
}

.cups-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.cups-search-btn,
.cups-sort-btn,
.cups-filter-row button {
    border: 0;
    background: transparent;
    color: #A79C8E;
    cursor: pointer;
}

.cups-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

.cups-search-btn:hover,
.cups-sort-btn:hover,
.cups-filter-row button:hover {
    color: var(--accent-green);
}

.cups-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.cups-sort-btn svg ,

.cups-sort-btn .ph {
    width: 16px;
    height: 16px;
}

.cups-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.cups-filter-row::-webkit-scrollbar {
    display: none;
}

.cups-filter-row a,
.cups-filter-row button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    background: rgba(32, 32, 30, 0.72);
    color: #A79C8E;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.cups-filter-row a.active,
.cups-filter-row a:hover {
    color: #141412;
    background: var(--accent-green);
    box-shadow: 0 8px 24px var(--accent-green-glow);
}

.cups-filter-row button {
    width: 42px;
    padding: 0;
    flex: 0 0 42px;
}

.cups-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 30px;
}

.cup-list-card {
    display: block;
    min-width: 0;
    color: var(--text-main);
    text-decoration: none;
}

.cup-card-media {
    position: relative;
    min-height: 168px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: #20201E;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.cup-list-card:hover .cup-card-media {
    transform: translateY(-2px);
    border-color: rgba(155, 228, 71, 0.28);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

.cup-card-media::before,
.cup-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cup-card-media::before {
    background: radial-gradient(circle at 78% 16%, rgba(155, 228, 71, 0.16), transparent 30%), linear-gradient(180deg, transparent, rgba(10, 11, 14, 0.72));
    z-index: 1;
}

.cup-card-media::after {
    opacity: 0.30;
    background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(155, 228, 71, 0.18) 0deg 5deg, transparent 5deg 12deg);
    mask-image: radial-gradient(circle at 50% 50%, black 0 34%, transparent 35%);
}

.cup-card-media.quick-cup {
    background: url('assets/quick-cup-cover.jpg') center / cover no-repeat;
}

.cup-card-media.bayou-cup {
    background: linear-gradient(145deg, #19120d, #432018 44%, #121712);
}

.cup-card-media.summer-cup {
    background: linear-gradient(145deg, #263315, #6e4b18 48%, #17181f);
}

.cup-card-media.loadout-cup {
    background: linear-gradient(145deg, #201d22, #5b2633 44%, #141412);
}

.cup-card-media.bounty-cup {
    background: linear-gradient(145deg, #15201a, #36492c 45%, #1A1A18);
}

.cup-card-media.console-cup {
    background: linear-gradient(145deg, #1A1A18, #293952 48%, #141412);
}

.cup-card-media.bloodline-cup {
    background: linear-gradient(145deg, #1b1111, #5c1616 48%, #141412);
}

.cup-card-media.hall-cup {
    background: linear-gradient(145deg, #1c1b12, #4d3f19 48%, #141412);
}

.cup-card-status,
.cup-card-date {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 900;
}

.cup-card-status {
    top: 12px;
    right: 12px;
    min-height: 30px;
    padding: 0 12px;
    background: rgba(245, 246, 250, 0.94);
    color: #141412;
    font-size: 12px;
}

.cup-card-status.live {
    background: var(--accent-green);
}

.cup-card-status.ended {
    background: rgba(32, 32, 30, 0.92);
    color: #F2E8D8;
}

.cup-card-date {
    left: 12px;
    bottom: 12px;
    width: 58px;
    height: 58px;
    flex-direction: column;
    gap: 1px;
    background: rgba(20, 20, 18, 0.94);
    color: var(--text-main);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

.cup-card-date strong {
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.04em;
}

.cup-card-date small {
    color: var(--accent-green);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.cup-list-card h2 {
    margin: 0 0 5px;
    color: var(--text-main);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.cup-list-card p {
    color: #A79C8E;
    font-size: 14px;
    line-height: 1.35;
}

.cup-action-btn {
    text-decoration: none;
}

@media (max-width: 1200px) {
    .cups-shell {
        width: min(calc(100% - 48px), 680px);
    }
}

@media (max-width: 768px) {
    .cups-main {
        padding: 16px 0 28px;
        width: 100%;
        max-width: 100vw;
    }

    .cups-shell {
        width: 100%;
        max-width: 620px;
        padding: 0 16px;
        min-width: 0;
    }

    .cups-toolbar-top {
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 18px;
    }

    .cups-main-tabs {
        gap: 20px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .cups-main-tabs::-webkit-scrollbar {
        display: none;
    }

    .cups-toolbar-actions {
        gap: 8px;
    }

    .cups-sort-btn {
        font-size: 0;
        width: 38px;
        height: 38px;
        justify-content: center;
        border-radius: 10px;
        background: rgba(32, 32, 30, 0.72);
    }

    .cups-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .cup-card-media {
        min-height: 190px;
    }
}

@media (max-width: 420px) {
    .cups-shell {
        padding-left: 14px;
        padding-right: 14px;
    }

    .cups-main-tabs a {
        font-size: 14px;
        min-height: 50px;
    }

    .cups-filter-row a {
        min-height: 40px;
        padding: 0 15px;
        font-size: 13px;
    }

    .cup-card-media {
        min-height: 170px;
    }
}

/* =========================================
   LFG OVERVIEW PAGE - follower-list inspired layout
========================================= */
.lfg-main {
    padding: 32px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.lfg-shell {
    width: min(calc(100% - 64px), 680px);
    margin: 0 auto;
}

.lfg-toolbar {
    margin-bottom: 26px;
}

.lfg-toolbar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 20px;
}

.lfg-main-tabs {
    display: flex;
    align-items: center;
    gap: 28px;
    min-width: 0;
}

.lfg-main-tabs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 54px;
    color: #A79C8E;
    text-decoration: none;
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
}

.lfg-main-tabs a span {
    color: var(--accent-green);
    font-size: 13px;
    font-weight: 900;
}

.lfg-main-tabs a.active {
    color: var(--text-main);
}

.lfg-main-tabs a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 99px;
    background: var(--accent-green);
    box-shadow: 0 0 16px rgba(155, 228, 71, 0.30);
}

.lfg-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.lfg-search-btn,
.lfg-sort-btn,
.lfg-filter-row button {
    border: 0;
    background: transparent;
    color: #A79C8E;
    cursor: pointer;
}

.lfg-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

.lfg-search-btn:hover,
.lfg-sort-btn:hover,
.lfg-filter-row button:hover {
    color: var(--accent-green);
}

.lfg-search-btn svg,
.lfg-sort-btn svg,
.lfg-filter-row svg ,

.lfg-search-btn .ph,
.lfg-sort-btn .ph,
.lfg-filter-row .ph {
    width: 20px;
    height: 20px;
}

.lfg-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.lfg-sort-btn svg ,

.lfg-sort-btn .ph {
    width: 16px;
    height: 16px;
}

.lfg-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.lfg-filter-row::-webkit-scrollbar {
    display: none;
}

.lfg-filter-row a,
.lfg-filter-row button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    background: rgba(32, 32, 30, 0.72);
    color: #A79C8E;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.lfg-filter-row a.active,
.lfg-filter-row a:hover {
    color: #141412;
    background: var(--accent-green);
    box-shadow: 0 8px 24px var(--accent-green-glow);
}

.lfg-filter-row button {
    width: 42px;
    padding: 0;
    flex: 0 0 42px;
}

.lfg-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.lfg-card {
    min-width: 0;
    min-height: 132px;
    padding: 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(32, 32, 30, 0.74);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    column-gap: 14px;
    row-gap: 14px;
    align-items: center;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.lfg-card:hover {
    transform: translateY(-2px);
    border-color: rgba(155, 228, 71, 0.22);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.24);
}

.lfg-card.featured {
    background:
        radial-gradient(circle at 12% 20%, rgba(155, 228, 71, 0.10), transparent 30%),
        rgba(32, 32, 30, 0.80);
}

.lfg-user {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.lfg-avatar {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border: 2px solid rgba(155, 228, 71, 0.20);
}

.lfg-user h2 {
    margin: 0 0 4px;
    font-size: 17px;
    line-height: 1.15;
    font-weight: 900;
    color: var(--text-main);
    letter-spacing: -0.03em;
}

.lfg-user p {
    margin: 0;
    color: #A79C8E;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
}

.lfg-tags {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lfg-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(26, 26, 24, 0.58);
    color: #A79C8E;
    font-size: 11px;
    font-weight: 800;
}

.lfg-join-btn {
    align-self: start;
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    color: #141412;
    background: var(--accent-green);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(155, 228, 71, 0.20);
}

.lfg-join-btn.muted {
    color: #F2E8D8;
    background: rgba(26, 26, 24, 0.64);
    box-shadow: none;
}

@media (max-width: 1200px) {
    .lfg-shell {
        width: min(calc(100% - 48px), 680px);
    }
}

@media (max-width: 768px) {
    .lfg-main {
        padding: 16px 0 28px;
        width: 100%;
        max-width: 100vw;
    }

    .lfg-shell {
        width: 100%;
        max-width: 620px;
        padding: 0 16px;
        min-width: 0;
    }

    .lfg-toolbar-top {
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 18px;
    }

    .lfg-main-tabs {
        gap: 20px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .lfg-main-tabs::-webkit-scrollbar {
        display: none;
    }

    .lfg-toolbar-actions {
        gap: 8px;
    }

    .lfg-sort-btn {
        font-size: 0;
        width: 38px;
        height: 38px;
        justify-content: center;
        border-radius: 10px;
        background: rgba(32, 32, 30, 0.72);
    }

    .lfg-list-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .lfg-shell {
        padding-left: 14px;
        padding-right: 14px;
    }

    .lfg-main-tabs a {
        font-size: 14px;
        min-height: 50px;
    }

    .lfg-filter-row a {
        min-height: 40px;
        padding: 0 15px;
        font-size: 13px;
    }

    .lfg-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .lfg-join-btn {
        width: 100%;
    }
}


/* =========================================
   LFG DETAIL PAGE - screenshot inspired detail layout
========================================= */
.lfg-detail-main {
    padding: 32px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.lfg-detail-shell {
    width: min(calc(100% - 64px), 680px);
    margin: 0 auto;
}

.lfg-detail-hero,
.lfg-detail-panel {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(32, 32, 30, 0.62);
    overflow: hidden;
}

.lfg-detail-cover {
    min-height: 230px;
    position: relative;
    display: flex;
    align-items: end;
    justify-content: center;
    padding: 32px 26px 28px;
    background:
        radial-gradient(circle at 16% 20%, rgba(155, 228, 71, 0.16), transparent 28%),
        radial-gradient(circle at 82% 12%, rgba(214, 168, 79, 0.16), transparent 26%),
        linear-gradient(180deg, rgba(14, 15, 18, 0.10), rgba(14, 15, 18, 0.80)),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 26px),
        linear-gradient(135deg, #2c332e 0%, #191a20 48%, #34252b 100%);
}

.lfg-detail-cover::before,
.lfg-detail-cover::after {
    content: "";
    position: absolute;
    inset: auto auto 0 0;
    width: 44%;
    height: 78%;
    opacity: 0.42;
    background:
        linear-gradient(45deg, transparent 0 20%, rgba(155, 228, 71, 0.10) 20% 28%, transparent 28% 100%),
        radial-gradient(circle at 30% 35%, rgba(0,0,0,0.45), transparent 30%);
    clip-path: polygon(0 18%, 62% 0, 100% 74%, 36% 100%, 0 76%);
    pointer-events: none;
}

.lfg-detail-cover::after {
    inset: auto 0 0 auto;
    transform: scaleX(-1);
    background:
        linear-gradient(45deg, transparent 0 22%, rgba(214, 168, 79, 0.10) 22% 30%, transparent 30% 100%),
        radial-gradient(circle at 30% 35%, rgba(0,0,0,0.45), transparent 30%);
}

.lfg-cover-art-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.42)),
        linear-gradient(180deg, transparent 58%, rgba(0,0,0,0.26));
}

.lfg-back-btn,
.lfg-report-btn,
.lfg-apply-btn {
    border: 0;
    border-radius: 10px;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.lfg-back-btn {
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    background: rgba(26, 26, 24, 0.88);
}

.lfg-back-btn svg ,

.lfg-back-btn .ph {
    width: 18px;
    height: 18px;
}

.lfg-title-center {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
    max-width: 560px;
}

.lfg-title-center h1 {
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.05;
    letter-spacing: -0.055em;
    text-shadow: 0 12px 30px rgba(0, 0, 0, 0.48);
}

.lfg-status-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.lfg-status-pills span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    color: #c7cad3;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(10px);
    font-size: 12px;
    font-weight: 900;
}

.lfg-status-pills .hot {
    color: #141412;
    background: var(--accent-green);
    box-shadow: 0 10px 26px rgba(155, 228, 71, 0.22);
}

.lfg-report-btn {
    position: absolute;
    right: 16px;
    bottom: 24px;
    z-index: 3;
    min-height: 42px;
    padding: 0 16px;
    background: linear-gradient(135deg, var(--accent-danger), #8F332B);
    box-shadow: 0 10px 24px var(--accent-danger-glow);
}

.lfg-back-btn:hover,
.lfg-report-btn:hover,
.lfg-apply-btn:hover {
    transform: translateY(-1px);
}

.lfg-detail-owner-row {
    min-height: 88px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px 24px;
    background: rgba(20, 20, 18, 0.48);
}

.lfg-owner {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.lfg-owner-avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border: 2px solid rgba(155, 228, 71, 0.20);
}

.lfg-owner strong {
    display: block;
    font-size: 16px;
    line-height: 1.2;
}

.lfg-owner span {
    display: block;
    margin-top: 3px;
    color: #A79C8E;
    font-size: 13px;
    line-height: 1.35;
}

.lfg-hero-stats {
    display: flex;
    align-items: center;
    gap: 24px;
    color: #A79C8E;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.lfg-hero-stats strong {
    color: #F2E8D8;
}

.lfg-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.38fr) minmax(220px, 0.78fr);
    gap: 18px;
    margin-top: 28px;
}

.lfg-detail-left,
.lfg-detail-side {
    display: grid;
    gap: 18px;
    align-content: start;
}

.lfg-detail-panel {
    padding: 24px;
}

.lfg-detail-panel h2,
.lfg-section-title-row h2 {
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
}

.lfg-section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 16px;
}

.lfg-section-title-row span {
    color: #A79C8E;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.lfg-detail-panel p {
    color: #c4bdaf;
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 22px;
}

.lfg-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
}

.lfg-detail-tags span {
    color: #F2E8D8;
    font-size: 13px;
    font-weight: 900;
}

.lfg-slot-list {
    display: grid;
    gap: 12px;
}

.lfg-slot {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 70px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(26, 26, 24, 0.36);
}

.lfg-slot-avatar,
.lfg-slot-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
}

.lfg-slot strong {
    display: block;
    color: #F2E8D8;
    font-size: 15px;
    line-height: 1.25;
}

.lfg-slot span {
    color: #A79C8E;
    font-size: 13px;
}

.lfg-slot.empty {
    color: #A79C8E;
}

.lfg-slot-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.045);
    color: #A79C8E;
}

.lfg-slot-icon svg ,

.lfg-slot-icon .ph {
    width: 21px;
    height: 21px;
}

.lfg-apply-panel label {
    display: block;
    color: #c4bdaf;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 12px;
}

.lfg-apply-panel textarea {
    width: 100%;
    min-height: 118px;
    resize: vertical;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    outline: 0;
    background: rgba(20, 20, 18, 0.52);
    color: var(--text-main);
    padding: 14px;
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
}

.lfg-apply-panel textarea::placeholder {
    color: #8f887f;
}

.lfg-apply-panel textarea:focus {
    border-color: rgba(155, 228, 71, 0.42);
    box-shadow: 0 0 0 3px rgba(155, 228, 71, 0.08);
}

.lfg-apply-btn {
    width: 100%;
    min-height: 46px;
    margin-top: 14px;
    background: linear-gradient(135deg, var(--accent-primary), #B98B38);
    box-shadow: 0 10px 26px var(--accent-primary-glow);
}

.lfg-info-list {
    display: grid;
    gap: 15px;
}

.lfg-info-list div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    color: #A79C8E;
    font-size: 13px;
    line-height: 1.35;
}

.lfg-info-list dt,
.lfg-info-list dd {
    margin: 0;
}

.lfg-info-list dd {
    color: #F2E8D8;
    font-weight: 900;
    text-align: right;
}

.lfg-join-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1200px) {
    .lfg-detail-shell {
        width: min(calc(100% - 48px), 680px);
    }

    .lfg-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .lfg-detail-main {
        padding: 16px 0 28px;
        width: 100%;
        max-width: 100vw;
    }

    .lfg-detail-shell {
        width: 100%;
        max-width: 620px;
        padding: 0 16px;
        min-width: 0;
    }

    .lfg-detail-cover {
        min-height: 210px;
        padding: 76px 18px 28px;
        align-items: end;
    }

    .lfg-back-btn {
        left: 14px;
        right: auto;
        top: 14px;
        min-height: 38px;
    }

    .lfg-report-btn {
        right: 14px;
        bottom: 14px;
        min-height: 38px;
        padding: 0 13px;
    }

    .lfg-title-center {
        justify-items: start;
        text-align: left;
        width: 100%;
        padding-right: 82px;
    }

    .lfg-status-pills {
        justify-content: flex-start;
    }

    .lfg-title-center h1 {
        font-size: 28px;
    }

    .lfg-detail-owner-row {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .lfg-hero-stats {
        flex-wrap: wrap;
        gap: 10px 18px;
        white-space: normal;
    }

    .lfg-detail-grid {
        gap: 16px;
        margin-top: 18px;
    }

    .lfg-detail-left,
    .lfg-detail-side {
        gap: 16px;
    }

    .lfg-detail-panel {
        padding: 20px 18px;
    }
}

@media (max-width: 420px) {
    .lfg-detail-shell {
        padding-left: 14px;
        padding-right: 14px;
    }

    .lfg-title-center {
        padding-right: 0;
    }

    .lfg-report-btn {
        position: static;
        z-index: 3;
        margin-top: 14px;
        width: 100%;
    }

    .lfg-detail-cover {
        display: grid;
        justify-items: stretch;
        align-items: end;
    }

    .lfg-status-pills span {
        min-height: 24px;
        padding: 0 10px;
        font-size: 11px;
    }

    .lfg-detail-tags {
        gap: 10px 14px;
    }
}

/* Phase 20: LFG detail lower content without visual cards */
.lfg-detail-grid .lfg-detail-panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 8px 0 0;
    overflow: visible;
}

.lfg-detail-grid .lfg-detail-panel h2,
.lfg-detail-grid .lfg-section-title-row h2 {
    position: relative;
    display: inline-flex;
    padding-bottom: 10px;
    margin-bottom: 22px;
}

.lfg-detail-grid .lfg-detail-panel h2::after,
.lfg-detail-grid .lfg-section-title-row h2::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 2px dashed rgba(155, 228, 71, 0.56);
    filter: drop-shadow(0 0 8px rgba(155, 228, 71, 0.18));
}

.lfg-detail-grid .lfg-detail-panel p,
.lfg-detail-grid .lfg-info-list div {
    color: #D8CDBE;
}

.lfg-detail-grid .lfg-detail-tags span {
    color: #F2E8D8;
}

.lfg-detail-grid .lfg-slot {
    background: transparent;
    border-radius: 0;
    padding: 8px 0;
}

.lfg-detail-grid .lfg-slot + .lfg-slot {
    border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.lfg-detail-grid .lfg-slot-icon {
    background: rgba(255, 255, 255, 0.045);
}

.lfg-detail-grid .lfg-apply-panel textarea {
    background: rgba(32, 32, 30, 0.62);
}

@media (max-width: 768px) {
    .lfg-detail-grid .lfg-detail-panel {
        padding: 6px 0 0;
    }
}

/* Phase 21: LFG detail order - info up, apply full width below */
.lfg-detail-grid {
    align-items: start;
}

.lfg-side-info-panel {
    align-self: start;
}

.lfg-apply-wide {
    grid-column: 1 / -1;
    margin-top: 6px;
}

.lfg-apply-wide textarea {
    min-height: 126px;
}

@media (min-width: 769px) {
    .lfg-apply-wide {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(240px, 0.42fr);
        gap: 14px 24px;
        align-items: end;
    }

    .lfg-apply-wide h2,
    .lfg-apply-wide label,
    .lfg-apply-wide textarea {
        grid-column: 1;
    }

    .lfg-apply-wide .lfg-apply-btn {
        grid-column: 2;
        align-self: end;
        margin-top: 0;
        min-height: 52px;
    }
}

@media (max-width: 1200px) {
    .lfg-apply-wide {
        grid-column: auto;
        margin-top: 0;
    }
}

/* =========================================
   GAMIFICATION PAGE - badge collection layout
========================================= */
.gamification-main {
    padding: 32px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.gamification-shell {
    width: min(calc(100% - 64px), 680px);
    margin: 0 auto;
}

.gamification-tabs {
    display: flex;
    align-items: center;
    gap: 34px;
    min-width: 0;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(155, 228, 71, 0.14);
}

.gamification-tabs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 54px;
    color: #A79C8E;
    text-decoration: none;
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
}

.gamification-tabs a span {
    color: var(--accent-green);
    font-size: 13px;
    font-weight: 900;
}

.gamification-tabs a.active {
    color: var(--accent-green);
}

.gamification-tabs a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 99px;
    background: var(--accent-green);
    box-shadow: 0 0 16px rgba(155, 228, 71, 0.30);
}

.gamification-progress-panel {
    position: relative;
    padding: 28px 28px 24px;
    margin-bottom: 26px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 15% 20%, rgba(155, 228, 71, 0.10), transparent 34%),
        radial-gradient(circle at 90% 12%, rgba(218, 102, 143, 0.08), transparent 28%),
        rgba(19, 20, 25, 0.74);
    overflow: hidden;
}

.gamification-progress-panel::after {
    content: "";
    position: absolute;
    inset: auto -70px -120px auto;
    width: 260px;
    height: 260px;
    background: repeating-conic-gradient(from 0deg, rgba(155, 228, 71, 0.12) 0deg 6deg, transparent 6deg 12deg);
    opacity: 0.28;
    pointer-events: none;
}

.gamification-kicker {
    margin-bottom: 12px;
    color: var(--accent-green);
    font-size: 13px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.gamification-progress-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.gamification-progress-head h1 {
    margin: 0 0 12px;
    color: var(--text-main);
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -0.055em;
    font-weight: 950;
}

.gamification-progress-head p {
    max-width: 560px;
    color: #D8CDBE;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 600;
}

.gamification-profile-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    color: #141412;
    background: var(--accent-green);
    text-decoration: none;
    font-size: 12px;
    font-weight: 950;
    box-shadow: 0 8px 24px rgba(155, 228, 71, 0.22);
    white-space: nowrap;
}

.gamification-stat-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin: 24px 0 22px;
}

.game-stat {
    min-width: 72px;
    min-height: 72px;
    padding: 12px 10px;
    border-radius: 10px;
    border: 1px solid rgba(155, 228, 71, 0.14);
    background: rgba(26, 26, 24, 0.58);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.game-stat strong {
    color: var(--text-main);
    font-size: 25px;
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 950;
}

.game-stat span {
    margin-top: 7px;
    color: #A79C8E;
    font-size: 12px;
    font-weight: 900;
}

.gamification-progress-line {
    position: relative;
    z-index: 1;
}

.game-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
    color: #D8CDBE;
    font-size: 13px;
    font-weight: 900;
}

.game-progress-track {
    width: 100%;
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.game-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-primary), #C9973F);
    box-shadow: 0 0 18px rgba(155, 228, 71, 0.28);
}

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

.badge-card {
    position: relative;
    min-width: 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(19, 20, 25, 0.72);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.badge-card:hover {
    transform: translateY(-2px);
    border-color: rgba(155, 228, 71, 0.22);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26);
}

.badge-card.locked::after {
    content: attr(data-status);
    position: absolute;
    left: 12px;
    right: 12px;
    top: 76px;
    color: rgba(255, 255, 255, 0.22);
    font-size: 17px;
    font-weight: 950;
    text-align: center;
    letter-spacing: -0.055em;
    pointer-events: none;
}

.badge-card.locked .badge-medallion {
    filter: saturate(0.66) brightness(0.72);
}

.badge-medallion {
    position: relative;
    width: calc(100% - 26px);
    aspect-ratio: 1;
    margin: 13px auto 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, #1a1b20 0 48%, transparent 49%),
        radial-gradient(circle at 50% 50%, #40392c 0 60%, #8a7351 61% 64%, #191a1e 65% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), 0 18px 38px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.badge-medallion::before {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,0.12), transparent 22%),
        linear-gradient(145deg, rgba(243, 206, 137, 0.20), rgba(0,0,0,0.20));
    border: 1px solid rgba(223, 184, 118, 0.18);
}

.badge-medallion::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.055) 0deg 6deg, transparent 6deg 18deg);
    mix-blend-mode: screen;
    opacity: 0.32;
}

.badge-medallion span {
    position: relative;
    z-index: 1;
    width: 58%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d6c4a7;
    font-size: 42px;
    line-height: 1;
    font-weight: 950;
    text-shadow: 0 4px 14px rgba(0,0,0,0.65);
}

.badge-medallion.wolf span { font-size: 38px; }
.badge-medallion.android span { color: var(--accent-green); }
.badge-medallion.bug span { color: #d6c4a7; }
.badge-medallion.hunter span { color: #f0d28c; }
.badge-medallion.complete span { color: var(--accent-green); }
.badge-medallion.chat span { font-size: 50px; letter-spacing: -0.12em; padding-right: 5px; }
.badge-medallion.cup span { color: #f1d071; }

.badge-card-body {
    margin-top: 12px;
    padding: 14px 14px 18px;
    border-top: 1px solid rgba(155, 228, 71, 0.10);
    background: rgba(0, 0, 0, 0.10);
}

.badge-card-body h2 {
    margin: 0 0 6px;
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.22;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.badge-card-body p {
    margin: 0;
    color: #D8CDBE;
    font-size: 13px;
    font-weight: 700;
}

.badge-card.unlocked .badge-card-body p {
    color: var(--accent-green);
}

@media (max-width: 1200px) {
    .gamification-shell {
        width: min(calc(100% - 48px), 680px);
    }
}

@media (max-width: 768px) {
    .gamification-main {
        width: 100%;
        max-width: 100vw;
        padding: 16px 0 28px;
    }

    .gamification-shell {
        width: 100%;
        max-width: 620px;
        padding: 0 16px;
        min-width: 0;
    }

    .gamification-tabs {
        gap: 24px;
        overflow-x: auto;
        scrollbar-width: none;
        margin-bottom: 20px;
    }

    .gamification-tabs::-webkit-scrollbar {
        display: none;
    }

    .gamification-tabs a {
        min-height: 50px;
        font-size: 14px;
    }

    .gamification-progress-panel {
        padding: 22px 18px 20px;
    }

    .gamification-progress-head {
        display: block;
    }

    .gamification-progress-head h1 {
        font-size: 26px;
    }

    .gamification-profile-link {
        margin-top: 16px;
    }

    .game-progress-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .badge-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .badge-card.locked::after {
        top: 34%;
        font-size: 15px;
    }
}

@media (max-width: 420px) {
    .gamification-shell {
        padding-left: 14px;
        padding-right: 14px;
    }

    .gamification-stat-row {
        gap: 8px;
    }

    .game-stat {
        min-width: 0;
        flex: 1 1 0;
    }

    .badge-medallion span {
        font-size: 34px;
    }

    .badge-card-body {
        padding: 12px 12px 15px;
    }

    .badge-card-body h2 {
        font-size: 14px;
    }
}


.gamification-section {
    margin-top: 26px;
}

.gamification-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.gamification-section-head span {
    display: block;
    margin-bottom: 6px;
    color: var(--accent-primary);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.075em;
}

.gamification-section-head h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 22px;
    line-height: 1.05;
    letter-spacing: -0.055em;
    font-weight: 950;
}

.gamification-section-head p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 850;
    text-align: right;
}

.badge-grid-featured {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gamification-reward-pill {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid rgba(214, 168, 79, 0.28);
    background: rgba(20, 20, 18, 0.70);
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: -0.02em;
    backdrop-filter: blur(10px);
}

.badge-medallion img,
.quest-icon img {
    position: relative;
    z-index: 1;
    display: block;
    width: 72%;
    height: 72%;
    object-fit: contain;
}

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

.quest-card,
.gamification-empty-card,
.xp-history-item {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 10% 0%, rgba(214, 168, 79, 0.08), transparent 34%),
        rgba(19, 20, 25, 0.72);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.16);
}

.quest-card {
    padding: 16px;
}

.quest-card.completed {
    border-color: rgba(214, 168, 79, 0.22);
}

.quest-card-top {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 15px;
}

.quest-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    border: 1px solid rgba(214, 168, 79, 0.22);
    background:
        radial-gradient(circle at 42% 30%, rgba(255,255,255,0.12), transparent 24%),
        rgba(26, 26, 24, 0.74);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    font-size: 25px;
    font-weight: 950;
}

.quest-card h3,
.xp-history-item h3,
.gamification-empty-card h2 {
    margin: 0 0 6px;
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.22;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.quest-card p,
.xp-history-item p,
.gamification-empty-card p {
    margin: 0;
    color: #D8CDBE;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
}

.quest-meta-row,
.quest-reward-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
}

.quest-meta-row {
    margin-bottom: 10px;
}

.quest-meta-row strong,
.quest-reward-row strong {
    color: var(--accent-primary);
    font-weight: 950;
}

.quest-reward-row {
    margin-top: 12px;
}

.gamification-empty-card {
    padding: 18px;
}

.gamification-empty-card-wide {
    grid-column: 1 / -1;
}

.xp-history-list {
    display: grid;
    gap: 10px;
}

.xp-history-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
}

.xp-history-item > strong {
    min-width: 58px;
    color: var(--accent-primary);
    font-size: 18px;
    font-weight: 950;
    letter-spacing: -0.045em;
}

@media (max-width: 768px) {
    .gamification-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .gamification-section-head p {
        text-align: left;
    }

    .badge-grid-featured,
    .quest-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   CROWNS PAGE - virtual currency overview
========================================= */
.crowns-main {
    padding: 32px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.crowns-shell {
    width: min(calc(100% - 64px), 680px);
    margin: 0 auto;
}

.crowns-action-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 24px;
}

.crowns-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    color: #F2E8D8;
    background: rgba(32, 32, 30, 0.62);
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.crowns-action svg ,

.crowns-action .ph {
    width: 15px;
    height: 15px;
}

.crowns-action:hover {
    color: var(--text-main);
    background: rgba(52, 54, 64, 0.78);
    transform: translateY(-1px);
}

.crowns-action.primary {
    color: #141412;
    background: var(--accent-primary);
    box-shadow: 0 10px 26px var(--accent-primary-glow);
}

.crowns-hero {
    position: relative;
    min-height: 262px;
    padding: 28px 28px 26px;
    margin-bottom: 24px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 86% 30%, rgba(155, 228, 71, 0.15), transparent 23%),
        radial-gradient(circle at 10% 15%, rgba(68, 118, 255, 0.10), transparent 30%),
        linear-gradient(130deg, rgba(10, 11, 15, 0.94), rgba(19, 20, 25, 0.78) 58%, rgba(32, 25, 18, 0.80));
    overflow: hidden;
}

.crowns-hero::before {
    content: "♛";
    position: absolute;
    right: 26px;
    top: -30px;
    color: rgba(155, 228, 71, 0.08);
    font-size: 230px;
    line-height: 1;
    font-weight: 950;
    transform: rotate(-8deg);
    pointer-events: none;
}

.crowns-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.50), transparent 58%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 58px);
    pointer-events: none;
}

.crowns-hero-glow {
    position: absolute;
    right: 26px;
    bottom: 34px;
    width: 180px;
    height: 80px;
    border-radius: 999px;
    background: rgba(155, 228, 71, 0.12);
    filter: blur(28px);
    pointer-events: none;
}

.crowns-hero-copy,
.crowns-claim,
.crowns-stats {
    position: relative;
    z-index: 1;
}

.crowns-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 0 13px;
    margin-bottom: 18px;
    border-radius: 999px;
    border: 1px solid rgba(155, 228, 71, 0.16);
    color: #d5d0c2;
    background: rgba(12, 13, 17, 0.46);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.crowns-hero h1 {
    margin: 0 0 14px;
    color: var(--text-main);
    font-size: 40px;
    line-height: 1;
    letter-spacing: -0.06em;
    font-weight: 950;
}

.crowns-hero p {
    max-width: 560px;
    margin: 0;
    color: #D8CDBE;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 650;
}

.crowns-claim {
    position: absolute;
    top: 28px;
    right: 28px;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    color: #141412;
    background: var(--accent-green);
    box-shadow: 0 12px 30px rgba(155, 228, 71, 0.24);
    font-size: 12px;
    font-weight: 950;
    cursor: default;
}

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

.crowns-stat {
    min-height: 72px;
    padding: 15px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(11, 12, 16, 0.46);
    backdrop-filter: blur(8px);
}

.crowns-stat span {
    display: block;
    margin-bottom: 8px;
    color: #A79C8E;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.crowns-stat strong {
    color: var(--text-main);
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.06em;
    font-weight: 900;
}

.crowns-section {
    margin-top: 24px;
    padding: 26px 28px 28px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(19, 20, 25, 0.72);
}

.crowns-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.crowns-section-head span {
    display: block;
    margin-bottom: 8px;
    color: var(--accent-green);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.crowns-section-head h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 24px;
    line-height: 1.08;
    letter-spacing: -0.055em;
    font-weight: 950;
}

.crowns-section-head p {
    margin: 0 0 4px;
    color: #D8CDBE;
    font-size: 12px;
    font-weight: 850;
    text-align: right;
}

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

.earning-row {
    min-height: 80px;
    padding: 16px 16px 16px 18px;
    border-radius: 10px;
    border: 1px solid rgba(155, 228, 71, 0.10);
    background: rgba(10, 11, 15, 0.35);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.earning-row h3 {
    margin: 0 0 7px;
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.16;
    letter-spacing: -0.035em;
    font-weight: 950;
}

.earning-row p {
    margin: 0;
    color: #D8CDBE;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 650;
}

.earning-row strong {
    flex: 0 0 auto;
    min-width: 46px;
    min-height: 34px;
    padding: 0 11px;
    border-radius: 999px;
    color: #141412;
    background: #fff6b2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 950;
}

.crowns-history {
    padding-bottom: 22px;
}

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

.crowns-history-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 42px;
    padding: 0 2px;
    color: #D8CDBE;
    font-size: 13px;
    font-weight: 750;
    border-bottom: 1px dashed rgba(155, 228, 71, 0.14);
}

.crowns-history-list strong {
    color: var(--accent-green);
    font-weight: 950;
}

.crowns-history-list strong.negative {
    color: #B8463A;
}

@media (max-width: 1200px) {
    .crowns-shell {
        width: min(calc(100% - 48px), 680px);
    }

    .crowns-action-bar {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .crowns-action-bar::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 768px) {
    .crowns-main {
        width: 100%;
        max-width: 100vw;
        padding: 16px 0 28px;
    }

    .crowns-shell {
        width: 100%;
        max-width: 620px;
        padding: 0 16px;
        min-width: 0;
    }

    .crowns-action-bar {
        gap: 8px;
        margin-bottom: 16px;
    }

    .crowns-action {
        min-height: 36px;
        padding: 0 12px;
        font-size: 11px;
    }

    .crowns-hero {
        padding: 22px 18px 20px;
    }

    .crowns-hero::before {
        right: -12px;
        top: -8px;
        font-size: 150px;
    }

    .crowns-claim {
        position: relative;
        top: auto;
        right: auto;
        margin-top: 18px;
    }

    .crowns-hero h1 {
        font-size: 33px;
    }

    .crowns-stats,
    .crowns-earning-grid {
        grid-template-columns: 1fr;
    }

    .crowns-section {
        padding: 22px 18px 20px;
    }

    .crowns-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .crowns-section-head p {
        text-align: left;
    }
}

@media (max-width: 420px) {
    .crowns-shell {
        padding-left: 14px;
        padding-right: 14px;
    }

    .crowns-stats {
        gap: 8px;
    }

    .crowns-stat strong {
        font-size: 23px;
    }
}

/* Phase 24: Crowns lower content without visual cards */
.crowns-section {
    margin-top: 28px;
    padding: 8px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.crowns-section-head {
    align-items: flex-start;
    margin-bottom: 24px;
}

.crowns-section-head h2 {
    position: relative;
    display: inline-flex;
    padding-bottom: 10px;
    margin-bottom: 0;
}

.crowns-section-head h2::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 2px dashed rgba(155, 228, 71, 0.56);
    filter: drop-shadow(0 0 8px rgba(155, 228, 71, 0.18));
}

.crowns-earning-grid {
    gap: 0 24px;
}

.earning-row {
    min-height: 68px;
    padding: 14px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.earning-row strong {
    min-width: 44px;
    min-height: 30px;
    background: rgba(155, 228, 71, 0.15);
    color: var(--accent-green);
    border: 1px solid rgba(155, 228, 71, 0.24);
}

.crowns-history-list {
    gap: 0;
}

.crowns-history-list div {
    padding: 12px 0;
    min-height: 0;
}

@media (max-width: 768px) {
    .crowns-section {
        padding: 6px 0 0;
    }

    .crowns-section-head {
        margin-bottom: 18px;
    }

    .crowns-earning-grid {
        gap: 0;
    }
}

/* Phase 25: Contracts / weekly assignments page */
.contracts-main {
    padding: 32px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.contracts-shell {
    width: min(calc(100% - 64px), 680px);
    margin: 0 auto;
}

.contracts-tabs {
    margin-bottom: 24px;
}

.contracts-hero {
    position: relative;
    min-height: 274px;
    padding: 34px 34px 32px;
    margin-bottom: 24px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 88% 18%, rgba(155, 228, 71, 0.18), transparent 24%),
        radial-gradient(circle at 9% 18%, rgba(196, 60, 52, 0.18), transparent 32%),
        linear-gradient(130deg, rgba(20, 12, 10, 0.82), rgba(12, 13, 16, 0.92) 58%, rgba(30, 29, 16, 0.75));
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    align-items: center;
    gap: 24px;
}

.contracts-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: 0.24;
    pointer-events: none;
}

.contracts-hero::after {
    content: "XP";
    position: absolute;
    right: 24px;
    bottom: -38px;
    color: rgba(155, 228, 71, 0.055);
    font-size: 140px;
    font-weight: 950;
    letter-spacing: -0.10em;
    line-height: 1;
    pointer-events: none;
}

.contracts-hero-glow {
    position: absolute;
    left: -18%;
    bottom: -45%;
    width: 430px;
    height: 310px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(155, 228, 71, 0.15), transparent 68%);
    filter: blur(18px);
    pointer-events: none;
}

.contracts-hero-copy,
.contracts-hero-stats {
    position: relative;
    z-index: 1;
}

.contracts-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(155, 228, 71, 0.20);
    background: rgba(155, 228, 71, 0.09);
    color: var(--accent-green);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contracts-hero h1 {
    max-width: 470px;
    margin: 22px 0 18px;
    color: var(--text-main);
    font-size: clamp(37px, 5vw, 58px);
    line-height: 0.95;
    letter-spacing: -0.065em;
    font-weight: 950;
}

.contracts-hero p {
    max-width: 500px;
    margin: 0;
    color: #A79C8E;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 750;
}

.contracts-hero-stats {
    display: grid;
    gap: 12px;
}

.contracts-hero-stats div {
    min-height: 86px;
    padding: 18px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 9, 12, 0.68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.contracts-hero-stats strong {
    display: block;
    color: var(--text-main);
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 950;
}

.contracts-hero-stats span {
    display: block;
    margin-top: 8px;
    color: #A79C8E;
    font-size: 13px;
    font-weight: 850;
}

.contracts-week-panel {
    position: relative;
    padding: 24px 26px 26px;
    margin-bottom: 26px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(19, 20, 25, 0.68);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
}

.contracts-week-panel span {
    color: var(--accent-green);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contracts-week-panel h2 {
    margin: 7px 0 0;
    color: var(--text-main);
    font-size: 23px;
    line-height: 1.05;
    letter-spacing: -0.05em;
    font-weight: 950;
}

.contracts-week-panel strong {
    color: var(--text-main);
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 950;
}

.contracts-progress-track,
.contract-progress {
    grid-column: 1 / -1;
    height: 8px;
    border-radius: 999px;
    background: rgba(8, 9, 12, 0.62);
    overflow: hidden;
}

.contracts-progress-track span,
.contract-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-green));
    box-shadow: 0 0 18px rgba(155, 228, 71, 0.16);
}

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

.contract-card {
    min-height: 244px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    background:
        radial-gradient(circle at 88% 0%, rgba(155, 228, 71, 0.08), transparent 42%),
        rgba(19, 20, 25, 0.60);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    display: flex;
    flex-direction: column;
}

.contract-card.complete,
.contract-card.active {
    border-color: rgba(155, 228, 71, 0.18);
    background:
        radial-gradient(circle at 84% 0%, rgba(155, 228, 71, 0.13), transparent 45%),
        radial-gradient(circle at 12% 8%, rgba(196, 60, 52, 0.08), transparent 42%),
        rgba(19, 20, 25, 0.66);
}

.contract-card-top {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.contract-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    color: var(--accent-green);
    background: rgba(155, 228, 71, 0.11);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.contract-icon svg ,

.contract-icon .ph {
    width: 20px;
    height: 20px;
}

.contract-card small {
    display: block;
    margin: 0 0 6px;
    color: #A79C8E;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 900;
}

.contract-card h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 19px;
    line-height: 1.08;
    letter-spacing: -0.05em;
    font-weight: 950;
}

.contract-card-top strong {
    color: var(--accent-green);
    font-size: 15px;
    font-weight: 950;
    white-space: nowrap;
}

.contract-card p {
    margin: 24px 0 22px;
    color: #A79C8E;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 750;
}

.contract-progress-meta {
    margin-top: auto;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 950;
}

.contract-progress {
    height: 7px;
    margin-bottom: 14px;
}

.contract-card b {
    color: var(--accent-green);
    font-size: 13px;
    font-weight: 950;
}

@media (max-width: 1200px) {
    .contracts-shell {
        width: min(calc(100% - 48px), 680px);
    }
}

@media (max-width: 768px) {
    .contracts-main {
        width: 100%;
        max-width: 100vw;
        padding: 16px 0 28px;
    }

    .contracts-shell {
        width: 100%;
        max-width: 620px;
        padding: 0 16px;
        min-width: 0;
    }

    .contracts-tabs {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .contracts-tabs::-webkit-scrollbar {
        display: none;
    }

    .contracts-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 26px 20px 22px;
    }

    .contracts-hero h1 {
        font-size: 40px;
    }

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

    .contracts-hero-stats div {
        min-height: 74px;
        padding: 15px;
    }

    .contracts-hero-stats strong {
        font-size: 25px;
    }

    .contracts-week-panel {
        padding: 22px 18px;
    }

    .contracts-grid {
        grid-template-columns: 1fr;
    }

    .contract-card {
        min-height: 0;
        padding: 18px;
    }
}

@media (max-width: 420px) {
    .contracts-shell {
        padding-left: 14px;
        padding-right: 14px;
    }

    .contracts-hero h1 {
        font-size: 34px;
    }

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

    .contract-card-top {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .contract-card-top strong {
        grid-column: 2;
    }
}


/* =========================================
   CROWNS SHOP PAGE
========================================= */
.crowns-shop-main {
    padding-top: 32px;
}

.crowns-shop-shell {
    width: min(calc(100% - 64px), 680px);
}

.crowns-shop-actions {
    margin-bottom: 22px;
}

.crowns-shop-head {
    min-height: 120px;
    padding: 24px 28px;
    margin-bottom: 24px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 94% 18%, rgba(155, 228, 71, 0.11), transparent 26%),
        linear-gradient(135deg, rgba(11, 12, 16, 0.88), rgba(22, 19, 18, 0.72));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.crowns-shop-kicker {
    display: block;
    margin-bottom: 8px;
    color: #D8CDBE;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.crowns-shop-head h1 {
    margin: 0 0 8px;
    color: var(--text-main);
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 950;
}

.crowns-shop-head p {
    max-width: 520px;
    margin: 0;
    color: #D8CDBE;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 650;
}

.crowns-balance-pill {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    color: #222326;
    background: #fff6b2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 950;
    box-shadow: 0 14px 34px rgba(255, 246, 178, 0.12);
}

.crowns-balance-pill svg ,

.crowns-balance-pill .ph {
    width: 15px;
    height: 15px;
}

.crowns-shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.shop-item-card {
    position: relative;
    min-height: 232px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: radial-gradient(circle at 100% 100%, rgba(214, 168, 79, 0.10), transparent 34%), linear-gradient(145deg, rgb(13 14 18 / 0%), rgb(22 20 17 / 0%));
    overflow: hidden;
}

.shop-item-card::after {
    content: "";
    position: absolute;
    right: -18px;
    bottom: -28px;
    width: 126px;
    height: 92px;
    background: rgba(214, 168, 79, 0.09);
    filter: blur(26px);
    pointer-events: none;
}

.shop-item-meta,
.shop-item-footer {
    position: relative;
    z-index: 1;
}

.shop-item-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.shop-rarity {
    min-height: 24px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.08);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.shop-rarity.common {
    color: #f4efe4;
    background: rgba(255, 255, 255, 0.08);
}

.shop-rarity.rare,
.shop-rarity.legendary {
    color: #f5c84d;
    background: rgba(245, 200, 77, 0.12);
}

.shop-rarity.epic,
.shop-rarity.event {
    color: #3a2938;
    background: #ffe8ff;
}

.shop-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(10, 11, 15, 0.50);
    display: grid;
    place-items: center;
    color: var(--text-main);
}

.shop-item-icon svg ,

.shop-item-icon .ph {
    width: 25px;
    height: 25px;
}

.shop-item-card h2 {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    color: var(--text-main);
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -0.045em;
    font-weight: 900;
}

.shop-item-type {
    position: relative;
    z-index: 1;
    margin: 0 0 28px;
    color: #A79C8E;
    font-size: 12px;
    font-weight: 700;
}

.shop-item-description {
    position: relative;
    z-index: 1;
    min-height: 48px;
    margin: 0 0 20px;
    color: #A79C8E;
    font-size: 13px;
    line-height: 1.42;
    font-weight: 650;
}

.shop-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.shop-item-footer strong {
    color: var(--text-main);
    font-size: 18px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.shop-item-footer strong span {
    color: #fff6b2;
    margin-right: 4px;
}

.shop-item-footer button {
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    color: var(--text-main);
    background: rgba(214, 168, 79, 0.18);
    box-shadow: 0 10px 30px rgba(214, 168, 79, 0.14);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease;
}

.shop-item-footer button:hover {
    transform: translateY(-1px);
    background: rgba(214, 168, 79, 0.30);
}

@media (max-width: 1200px) {
    .crowns-shop-shell {
        width: min(calc(100% - 48px), 680px);
    }
}

@media (max-width: 768px) {
    .crowns-shop-main {
        width: 100%;
        max-width: 100vw;
        padding: 16px 0 28px;
    }

    .crowns-shop-shell {
        width: 100%;
        max-width: 620px;
        padding: 0 16px;
        min-width: 0;
    }

    .crowns-shop-head {
        padding: 20px 18px;
        align-items: flex-start;
        flex-direction: column;
    }

    .crowns-shop-grid {
        grid-template-columns: 1fr;
    }

    .shop-item-card {
        min-height: 0;
        padding: 18px;
    }
}

@media (max-width: 420px) {
    .crowns-shop-shell {
        padding-left: 14px;
        padding-right: 14px;
    }

    .shop-item-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================
   CROWNS INVENTORY PAGE
========================================= */
.crowns-inventory-head {
    min-height: 104px;
    align-items: center;
}

.inventory-active-section {
    margin-bottom: 24px;
    padding: 24px 26px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(145deg, rgba(13, 14, 18, 0.90), rgba(22, 20, 17, 0.64));
}

.inventory-section-heading {
    margin-bottom: 18px;
}

.inventory-section-heading span {
    display: block;
    margin-bottom: 8px;
    color: #A79C8E;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.inventory-section-heading h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 950;
}

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

.inventory-slot-row {
    min-height: 62px;
    padding: 14px 14px 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background:
        radial-gradient(circle at 100% 100%, rgba(214, 168, 79, 0.10), transparent 35%),
        rgba(255, 255, 255, 0.025);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.inventory-slot-row span {
    display: block;
    margin-bottom: 4px;
    color: #A79C8E;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.inventory-slot-row strong {
    display: block;
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.15;
    font-weight: 900;
}

.inventory-slot-row button,
.inventory-card-action {
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    color: var(--text-main);
    background: rgba(214, 168, 79, 0.86);
    box-shadow: 0 10px 30px rgba(214, 168, 79, 0.14);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease;
}

.inventory-slot-row button:hover,
.inventory-card-action:hover {
    transform: translateY(-1px);
    background: var(--accent-primary);
}


.inventory-slot-row button.danger,
.inventory-card-action.danger {
    color: var(--text-main);
    background: rgba(184, 70, 58, 0.86);
    box-shadow: 0 10px 30px var(--accent-danger-glow);
}

.inventory-slot-row button.danger:hover,
.inventory-card-action.danger:hover {
    background: var(--accent-danger);
}

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

.inventory-item-card {
    position: relative;
    min-height: 180px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 100% 100%, rgba(214, 168, 79, 0.10), transparent 34%),
        linear-gradient(145deg, rgba(13, 14, 18, 0.90), rgba(22, 20, 17, 0.68));
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 16px;
    overflow: hidden;
}

.inventory-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(10, 11, 15, 0.34);
    display: grid;
    place-items: center;
    color: var(--text-main);
}

.inventory-icon svg ,

.inventory-icon .ph {
    width: 26px;
    height: 26px;
}

.inventory-item-body {
    min-width: 0;
}

.inventory-badges {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.inventory-active-badge {
    min-height: 24px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: #f5c84d;
    background: rgba(245, 200, 77, 0.12);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.inventory-item-card h2 {
    margin: 0 0 5px;
    color: var(--text-main);
    font-size: 17px;
    line-height: 1.16;
    letter-spacing: -0.04em;
    font-weight: 900;
}

.inventory-item-card .shop-item-type {
    margin-bottom: 22px;
}

.inventory-item-card .shop-item-description {
    min-height: 40px;
    margin-bottom: 22px;
}

.inventory-date {
    display: block;
    color: #A79C8E;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;
}

.inventory-card-action {
    align-self: end;
    margin-top: auto;
}

@media (max-width: 768px) {
    .inventory-active-section {
        padding: 20px 18px;
    }

    .inventory-active-grid,
    .inventory-grid {
        grid-template-columns: 1fr;
    }

    .inventory-item-card {
        min-height: 0;
        grid-template-columns: 48px minmax(0, 1fr);
        padding: 18px;
    }

    .inventory-card-action {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 420px) {
    .inventory-slot-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .inventory-item-card {
        grid-template-columns: 1fr;
    }

    .inventory-card-action {
        grid-column: auto;
    }
}

/* =========================================
   HALL OF FAME PAGE
========================================= */
.hall-main {
    padding: 32px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.hall-shell {
    width: min(calc(100% - 64px), 680px);
    margin: 0 auto;
}

.hall-hero {
    position: relative;
    min-height: 300px;
    padding: 34px 32px 30px;
    margin-bottom: 30px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 50% 2%, rgba(155, 228, 71, 0.14), transparent 24%),
        radial-gradient(circle at 14% 18%, rgba(155, 228, 71, 0.08), transparent 32%),
        linear-gradient(145deg, rgba(20, 20, 18, 0.86), rgba(8, 9, 12, 0.94));
    overflow: hidden;
    text-align: center;
}

.hall-hero::after {
    content: "";
    position: absolute;
    inset: auto -80px -140px auto;
    width: 300px;
    height: 300px;
    background: repeating-conic-gradient(from 0deg, rgba(155, 228, 71, 0.12) 0deg 6deg, transparent 6deg 14deg);
    opacity: 0.26;
    pointer-events: none;
}

.hall-trophy {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    margin: 0 auto 14px;
    color: var(--accent-green);
    filter: drop-shadow(0 0 16px rgba(155, 228, 71, 0.22));
}

.hall-trophy svg ,

.hall-trophy .ph {
    width: 100%;
    height: 100%;
}

.hall-kicker {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 8px;
    color: var(--accent-green);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.hall-hero h1 {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 0 auto 10px;
    color: var(--text-main);
    font-size: clamp(30px, 4.8vw, 43px);
    line-height: 1.02;
    letter-spacing: -0.065em;
    font-weight: 950;
}

.hall-hero p {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin: 0 auto;
    color: #D8CDBE;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 650;
}

.hall-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
}

.hall-stats div {
    min-height: 84px;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid rgba(155, 228, 71, 0.12);
    background: rgba(8, 9, 12, 0.50);
    text-align: left;
}

.hall-stats span {
    display: block;
    margin-bottom: 10px;
    color: #A79C8E;
    font-size: 11px;
    font-weight: 850;
}

.hall-stats strong {
    color: var(--text-main);
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.06em;
    font-weight: 950;
}

.hall-section {
    margin-top: 28px;
}

.hall-section-title {
    margin-bottom: 20px;
}

.hall-section-title span {
    display: block;
    margin-bottom: 7px;
    color: #A79C8E;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hall-section-title h2 {
    position: relative;
    display: inline-flex;
    margin: 0;
    padding-bottom: 10px;
    color: var(--text-main);
    font-size: 24px;
    line-height: 1.08;
    letter-spacing: -0.055em;
    font-weight: 950;
}

.hall-section-title h2::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 2px dashed rgba(155, 228, 71, 0.56);
    filter: drop-shadow(0 0 8px rgba(155, 228, 71, 0.18));
}

.hall-podium {
    display: grid;
    grid-template-columns: 1fr 1.16fr 1fr;
    align-items: end;
    gap: 14px;
}

.hall-winner {
    min-width: 0;
    padding: 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    background:
        radial-gradient(circle at 72% 10%, rgba(155, 228, 71, 0.10), transparent 34%),
        rgba(19, 20, 25, 0.55);
}

.hall-winner-main {
    padding-top: 22px;
    transform: translateY(-10px);
    border-color: rgba(155, 228, 71, 0.20);
    background:
        radial-gradient(circle at 50% 6%, rgba(155, 228, 71, 0.16), transparent 35%),
        rgba(19, 20, 25, 0.68);
}

.hall-place {
    margin-bottom: 8px;
    color: #A79C8E;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hall-winner h3 {
    margin: 0 0 14px;
    color: var(--text-main);
    font-size: 17px;
    line-height: 1.15;
    letter-spacing: -0.04em;
    font-weight: 950;
}

.hall-medal {
    position: relative;
    min-height: 108px;
    border-radius: 10px;
    border: 1px solid rgba(155, 228, 71, 0.13);
    background:
        radial-gradient(circle at 50% 50%, rgba(155, 228, 71, 0.18), transparent 42%),
        rgba(8, 9, 12, 0.45);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.hall-medal::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(155, 228, 71, 0.16) 0deg 8deg, transparent 8deg 16deg);
    opacity: 0.50;
}

.hall-medal span {
    position: relative;
    z-index: 1;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid rgba(155, 228, 71, 0.34);
    background: #111218;
    color: var(--accent-green);
    display: grid;
    place-items: center;
    font-size: 32px;
    font-weight: 950;
    box-shadow: 0 0 24px rgba(155, 228, 71, 0.16);
}

.hall-medal.second span,
.hall-medal.third span {
    color: #F2E8D8;
    border-color: rgba(255, 255, 255, 0.18);
}

.hall-winner p {
    margin: 12px 0 0;
    color: #D8CDBE;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}

.hall-winner p strong {
    color: var(--accent-green);
}

.hall-note-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.hall-note-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 14px;
    padding: 6px 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.hall-note-item svg ,

.hall-note-item .ph {
    width: 24px;
    height: 24px;
    color: var(--accent-green);
}

.hall-note-item h3 {
    margin: 0 0 7px;
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: -0.04em;
    font-weight: 950;
}

.hall-note-item p {
    margin: 0;
    color: #D8CDBE;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 650;
}

.hall-cup-banner {
    min-height: 160px;
    padding: 22px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.40) 52%, rgba(0, 0, 0, 0.72)),
        url('assets/quick-cup-cover.jpg') center / cover no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    overflow: hidden;
}

.hall-cup-banner span {
    color: #d5c7b7;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hall-cup-banner h3 {
    margin: 6px 0 0;
    color: var(--text-main);
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 950;
}

.hall-cup-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    color: #15171c;
    background: var(--accent-green);
    text-decoration: none;
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.hall-cup-winners {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 18px 0 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.hall-cup-winners div {
    min-width: 0;
    padding: 0 0 14px;
}

.hall-cup-winners span {
    display: block;
    color: var(--accent-green);
    font-size: 11px;
    font-weight: 950;
}

.hall-cup-winners strong {
    display: block;
    margin-top: 5px;
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.15;
    font-weight: 950;
}

.hall-cup-winners small {
    display: block;
    margin-top: 5px;
    color: #D8CDBE;
    font-size: 11px;
    font-weight: 700;
}

.hall-leader-title {
    margin-top: 22px;
}

.hall-leaderboard {
    display: grid;
    gap: 0;
}

.hall-rank-row {
    min-height: 50px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 58px 58px 58px;
    gap: 10px;
    align-items: center;
}

.hall-rank-row span {
    color: var(--accent-green);
    font-size: 13px;
    font-weight: 950;
}

.hall-rank-row strong {
    min-width: 0;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hall-rank-row small {
    color: #F2E8D8;
    font-size: 12px;
    font-weight: 900;
    text-align: right;
}

@media (max-width: 1200px) {
    .hall-shell {
        width: min(calc(100% - 48px), 680px);
    }
}

@media (max-width: 768px) {
    .hall-main {
        width: 100%;
        max-width: 100vw;
        padding: 16px 0 28px;
    }

    .hall-shell {
        width: 100%;
        max-width: 620px;
        padding: 0 16px;
        min-width: 0;
    }

    .hall-hero {
        padding: 28px 20px 22px;
    }

    .hall-stats,
    .hall-podium,
    .hall-note-grid,
    .hall-cup-winners {
        grid-template-columns: 1fr;
    }

    .hall-winner-main {
        transform: none;
        order: -1;
    }

    .hall-cup-banner {
        min-height: 170px;
        align-items: flex-start;
        flex-direction: column;
        justify-content: flex-end;
    }

    .hall-rank-row {
        grid-template-columns: 36px minmax(0, 1fr) 46px 46px 46px;
        gap: 7px;
    }
}

@media (max-width: 420px) {
    .hall-shell {
        padding-left: 14px;
        padding-right: 14px;
    }

    .hall-hero h1 {
        font-size: 29px;
    }

    .hall-section-title h2 {
        font-size: 22px;
    }

    .hall-rank-row {
        grid-template-columns: 32px minmax(0, 1fr) 42px;
    }

    .hall-rank-row small:nth-of-type(2),
    .hall-rank-row small:nth-of-type(3) {
        display: none;
    }
}

/* Phase 29: Cup feedback page */
.cup-feedback-main {
    padding: 32px 0 44px;
    overflow-y: auto;
    overflow-x: hidden;
}

.cup-feedback-shell {
    width: min(calc(100% - 64px), 680px);
    margin: 0 auto;
}

.feedback-hero {
    position: relative;
    min-height: 238px;
    padding: 30px 30px 28px;
    margin-bottom: 28px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 88% 10%, rgba(155, 228, 71, 0.16), transparent 27%),
        radial-gradient(circle at 14% 8%, rgba(255, 255, 255, 0.06), transparent 34%),
        linear-gradient(135deg, rgba(18, 20, 24, 0.92), rgba(20, 17, 14, 0.78));
    overflow: hidden;
}

.feedback-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.22;
    pointer-events: none;
}

.feedback-hero::after {
    content: "?";
    position: absolute;
    right: 28px;
    bottom: -52px;
    color: rgba(155, 228, 71, 0.055);
    font-size: 190px;
    line-height: 1;
    font-weight: 950;
    pointer-events: none;
}

.feedback-hero-glow {
    position: absolute;
    width: 360px;
    height: 260px;
    left: -16%;
    bottom: -42%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(155, 228, 71, 0.13), transparent 68%);
    filter: blur(18px);
    pointer-events: none;
}

.feedback-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 560px;
}

.feedback-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(155, 228, 71, 0.10);
    border: 1px solid rgba(155, 228, 71, 0.20);
    color: var(--accent-green);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.feedback-kicker svg ,

.feedback-kicker .ph {
    width: 15px;
    height: 15px;
}

.feedback-hero h1 {
    margin: 20px 0 14px;
    color: var(--text-main);
    font-size: clamp(34px, 4.6vw, 48px);
    line-height: 0.98;
    letter-spacing: -0.06em;
    font-weight: 950;
}

.feedback-hero p {
    max-width: 545px;
    margin: 0;
    color: #A79C8E;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 700;
}

.feedback-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.feedback-hero-pills span {
    min-height: 30px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #A79C8E;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 850;
}

.cup-feedback-form {
    display: grid;
    gap: 30px;
}

.feedback-section {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.feedback-section-title {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-bottom: 18px;
}

.feedback-section-title h2 {
    position: relative;
    display: inline-flex;
    padding-bottom: 10px;
    margin: 0 0 6px;
    color: var(--text-main);
    font-size: 22px;
    line-height: 1.05;
    letter-spacing: -0.045em;
    font-weight: 950;
}

.feedback-section-title h2::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 2px dashed rgba(155, 228, 71, 0.56);
    filter: drop-shadow(0 0 8px rgba(155, 228, 71, 0.18));
}

.feedback-section-title p {
    margin: 0;
    color: #A79C8E;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
}

.feedback-section-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: var(--accent-green);
    background: rgba(155, 228, 71, 0.10);
    border: 1px solid rgba(155, 228, 71, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.feedback-section-icon svg ,

.feedback-section-icon .ph {
    width: 20px;
    height: 20px;
}

.feedback-form-grid {
    display: grid;
    gap: 16px;
}

.feedback-form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.feedback-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.feedback-field span {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 900;
}

.feedback-field input,
.feedback-field select,
.feedback-field textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(32, 32, 30, 0.62);
    color: var(--text-main);
    padding: 0 16px;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.feedback-field input,
.feedback-field select {
    height: 48px;
}

.feedback-field textarea {
    min-height: 152px;
    padding-top: 15px;
    resize: vertical;
}

.feedback-field input:focus,
.feedback-field select:focus,
.feedback-field textarea:focus {
    border-color: rgba(155, 228, 71, 0.46);
    box-shadow: 0 0 0 3px rgba(155, 228, 71, 0.08);
    background: rgba(45, 47, 55, 0.72);
}

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

.feedback-check-columns h3 {
    margin: 0 0 12px;
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.feedback-check-columns label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.feedback-check-columns input {
    appearance: none;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 5px;
    border: 2px solid rgba(155, 228, 71, 0.44);
    background: rgba(155, 228, 71, 0.05);
    display: grid;
    place-items: center;
}

.feedback-check-columns input::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: var(--accent-green);
    transform: scale(0);
    transition: transform 0.14s ease;
}

.feedback-check-columns input:checked::after {
    transform: scale(1);
}

.feedback-check-columns span {
    min-width: 0;
}

.feedback-ticket-section {
    padding-bottom: 10px;
}

.feedback-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
}

@media (max-width: 1200px) {
    .cup-feedback-shell {
        width: min(calc(100% - 48px), 680px);
    }
}

@media (max-width: 768px) {
    .cup-feedback-main {
        width: 100%;
        max-width: 100vw;
        padding: 16px 0 28px;
    }

    .cup-feedback-shell {
        width: 100%;
        max-width: 620px;
        padding: 0 16px;
        min-width: 0;
    }

    .feedback-hero {
        min-height: 0;
        padding: 24px 18px 22px;
    }

    .feedback-hero h1 {
        font-size: 36px;
    }

    .feedback-form-grid.two,
    .feedback-check-columns {
        grid-template-columns: 1fr;
    }

    .feedback-grid-spacer {
        display: none;
    }

    .feedback-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .feedback-actions .btn-create,
    .feedback-actions .btn-following {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================
   UNIFIED LEFT SIDEBAR DROPDOWN POPOVERS
========================================= */
.nav-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.nav-dropdown.open {
    z-index: 90;
}

.nav-dropdown-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    font-family: var(--font-main);
    cursor: pointer;
    text-align: left;
}

.nav-dropdown-chev {
    width: 14px !important;
    height: 14px !important;
    margin-left: auto;
    color: var(--text-muted);
    transition: transform 0.18s ease, color 0.18s ease;
}

.nav-dropdown.open .nav-dropdown-chev {
    transform: rotate(180deg);
    color: var(--accent-green);
}

.nav-submenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 24px;
    display: none;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 12px 10px 10px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.42);
    animation: navPopoverIn 0.18s ease both;
}

.nav-dropdown.open .nav-submenu {
    display: flex;
}

.nav-submenu::before {
    content: '';
    position: absolute;
    left: 22px;
    top: -7px;
    width: 12px;
    height: 12px;
    background: var(--card-bg);
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    transform: rotate(45deg);
}

.nav-submenu-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: var(--tag-bg);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.nav-submenu-close svg ,

.nav-submenu-close .ph {
    width: 14px;
    height: 14px;
}

.nav-submenu-close:hover {
    color: var(--text-main);
    background: rgba(155, 228, 71, 0.12);
    transform: rotate(90deg);
}

.nav-subitem {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 11px 34px 11px 12px;
    border-radius: 12px;
    transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.nav-subitem:hover,
.nav-subitem.active {
    color: var(--text-main);
    background: rgba(155, 228, 71, 0.08);
}

.nav-subitem.active {
    color: var(--accent-green);
}

.nav-spacer-small {
    height: 12px;
}

.app-window.sidebar-collapsed .nav-dropdown-chev,
.app-window.sidebar-collapsed .nav-submenu {
    display: none !important;
}

.app-window.sidebar-collapsed .nav-dropdown-toggle {
    gap: 0;
    justify-content: center;
    padding-right: 20px;
}

@keyframes navPopoverIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 768px) {
    .nav-submenu {
        right: 18px;
    }
}

/* =========================================
   PATCH 33: unified action buttons
   All content CTA buttons use .btn-create only.
========================================= */
.btn-create {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    color: #141412;
    background: linear-gradient(135deg, var(--accent-primary), #B98B38);
    box-shadow: 0 10px 26px var(--accent-primary-glow);
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.btn-create:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 12px 30px var(--accent-primary-glow);
}

.btn-create svg ,

.btn-create .ph {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.sidebar-left > .btn-create {
    min-height: 48px;
    margin-right: 24px;
    padding: 0 18px;
}

.composer-footer .btn-create,
.form-actions .btn-create,
.feedback-actions .btn-create {
    min-width: 144px;
}

.profile-actions .btn-create,
.profile-composer-card .btn-create,
.cup-cover-actions .btn-create,
.cup-join-actions .btn-create,
.crowns-action-bar .btn-create {
    min-height: 38px;
    padding: 0 14px;
    font-size: 12px;
}

.profile-composer-card .btn-create,
.cup-join-panel .btn-create,
.lfg-apply-panel .btn-create {
    min-height: 46px;
}

.lfg-card .btn-create,
.shop-item-footer .btn-create,
.inventory-slot-row .btn-create,
.inventory-item-card .btn-create {
    min-height: 34px;
    padding: 0 14px;
    font-size: 12px;
}

.lfg-card .btn-create {
    justify-self: end;
}

.shop-item-footer .btn-create,
.inventory-item-card .btn-create {
    margin-left: auto;
}

.inventory-slot-row .btn-create {
    justify-self: end;
}

.crowns-hero > .btn-create {
    position: absolute;
    right: 28px;
    top: 28px;
    z-index: 2;
}

.lfg-detail-cover > .btn-create:first-of-type {
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 3;
    min-height: 42px;
    background: rgba(32, 32, 30, 0.92);
    color: var(--text-main);
    box-shadow: none;
}

.lfg-detail-cover > .btn-create:last-of-type {
    position: absolute;
    right: 16px;
    bottom: 24px;
    z-index: 3;
    min-height: 42px;
}

.lfg-apply-panel .btn-create {
    width: 100%;
    margin-top: 14px;
}

.cup-join-actions .btn-create:first-child,
.cup-join-panel .btn-create {
    min-width: 190px;
}

.cup-panel .btn-create,
.lfg-apply-panel .btn-create {
    width: 100%;
}

.form-actions .btn-create:first-child,
.crowns-action-bar .btn-create:not(:first-child),
.lfg-detail-cover > .btn-create:first-of-type {
    background: rgba(32, 32, 30, 0.92);
    color: var(--text-main);
    box-shadow: none;
}

.form-actions .btn-create:first-child:hover,
.crowns-action-bar .btn-create:not(:first-child):hover,
.lfg-detail-cover > .btn-create:first-of-type:hover {
    color: #141412;
    background: var(--accent-primary);
    box-shadow: 0 10px 26px var(--accent-primary-glow);
}

@media (max-width: 680px) {
    .crowns-action-bar .btn-create,
    .cup-cover-actions .btn-create,
    .profile-actions .btn-create {
        min-height: 38px;
        padding: 0 12px;
    }

    .lfg-detail-cover > .btn-create:first-of-type,
    .lfg-detail-cover > .btn-create:last-of-type {
        position: relative;
        right: auto;
        top: auto;
        bottom: auto;
    }
}

/* Crowns action bars keep their visual hierarchy without extra button classes. */
.crowns-action-bar .btn-create {
    background: rgba(32, 32, 30, 0.92);
    color: var(--text-main);
    box-shadow: none;
}

.crowns-main:not(.crowns-shop-main) .crowns-action-bar .btn-create:first-child,
.crowns-shop-main .crowns-action-bar .btn-create:last-child {
    color: #141412;
    background: linear-gradient(135deg, var(--accent-primary), #B98B38);
    box-shadow: 0 10px 26px var(--accent-primary-glow);
}


/* =========================================
   MEMBERS PAGE - screenshot inspired member overview
========================================= */
.members-main {
    padding: 32px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.members-shell {
    width: min(calc(100% - 64px), 680px);
    margin: 0 auto;
}

.members-toolbar {
    margin-bottom: 26px;
}

.members-toolbar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid rgba(242, 232, 216, 0.09);
    margin-bottom: 20px;
}

.members-tabs {
    display: flex;
    align-items: center;
    gap: 28px;
    min-width: 0;
}

.members-tabs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 56px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
}

.members-tabs a span {
    color: var(--text-muted);
    font-weight: 900;
}

.members-tabs a.active {
    color: var(--text-main);
}

.members-tabs a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 999px;
    background: var(--accent-green);
    box-shadow: 0 0 16px var(--accent-green-glow);
}

.members-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.members-search-btn,
.members-sort-btn {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.members-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

.members-search-btn:hover,
.members-sort-btn:hover {
    color: var(--accent-green);
}

.members-search-btn svg,
.members-sort-btn svg ,

.members-search-btn .ph,
.members-sort-btn .ph {
    width: 20px;
    height: 20px;
}

.members-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.members-sort-btn svg ,

.members-sort-btn .ph {
    width: 16px;
    height: 16px;
}

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

.member-card {
    min-width: 0;
    min-height: 118px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(242, 232, 216, 0.07);
    background: rgba(32, 32, 30, 0.74);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.member-card:hover {
    transform: translateY(-2px);
    border-color: rgba(155, 228, 71, 0.24);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
}

.member-person {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.member-avatar {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border: 2px solid rgba(155, 228, 71, 0.18);
}

.member-person h2 {
    margin: 0 0 4px;
    color: var(--text-main);
    font-size: 17px;
    line-height: 1.16;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.member-person p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;
}

.member-card .btn-create {
    margin-right: 0;
    min-height: 40px;
    padding: 0 20px;
    border-radius: 999px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.members-load-wrap {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.members-load-wrap .btn-create {
    margin-right: 0;
    min-height: 44px;
    padding: 0 28px;
    border-radius: 999px;
}

@media (max-width: 1200px) {
    .members-shell {
        width: min(calc(100% - 48px), 680px);
    }
}

@media (max-width: 768px) {
    .members-main {
        padding: 16px 0 28px;
        width: 100%;
        max-width: 100vw;
    }

    .members-shell {
        width: 100%;
        max-width: 620px;
        padding: 0 16px;
        min-width: 0;
    }

    .members-toolbar-top {
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 18px;
    }

    .members-tabs {
        gap: 20px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .members-tabs::-webkit-scrollbar {
        display: none;
    }

    .members-toolbar-actions {
        gap: 8px;
    }

    .members-sort-btn {
        font-size: 0;
        width: 38px;
        height: 38px;
        justify-content: center;
        border-radius: 10px;
        background: rgba(32, 32, 30, 0.72);
    }

    .members-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .members-shell {
        padding-left: 14px;
        padding-right: 14px;
    }

    .members-tabs a {
        font-size: 14px;
        min-height: 50px;
    }

    .member-card {
        min-height: 108px;
        padding: 16px;
        gap: 12px;
    }

    .member-avatar {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }

    .member-person h2 {
        font-size: 16px;
    }

    .member-card .btn-create {
        padding: 0 16px;
    }
}

/* =========================================
   FEED POST DETAIL / COMMENT MODAL
========================================= */
.post-modal-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 48% 18%, rgba(155, 228, 71, 0.13), transparent 34%),
        radial-gradient(circle at 80% 78%, rgba(214, 168, 79, 0.10), transparent 36%),
        rgba(8, 8, 7, 0.68);
    backdrop-filter: blur(0) saturate(105%);
    -webkit-backdrop-filter: blur(0) saturate(105%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.28s ease,
        visibility 0.28s ease,
        backdrop-filter 0.38s ease,
        -webkit-backdrop-filter 0.38s ease;
    z-index: 120;
}

.post-modal-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    backdrop-filter: blur(18px) saturate(126%);
    -webkit-backdrop-filter: blur(18px) saturate(126%);
}

.post-detail-modal {
    position: relative;
    width: min(900px, 100%);
    max-height: min(900px, calc(100vh - 48px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(32, 32, 30, 0.96), rgba(20, 20, 18, 0.985)),
        var(--bg-app);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow:
        0 42px 120px rgba(0, 0, 0, 0.64),
        0 0 0 1px rgba(155, 228, 71, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: translateY(34px) scale(0.94);
    opacity: 0;
    transition:
        transform 0.46s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.28s ease;
}

.post-modal-backdrop.open .post-detail-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.post-detail-modal::before,
.post-detail-modal::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.post-detail-modal::before {
    inset: 0;
    background:
        linear-gradient(90deg, transparent, rgba(155, 228, 71, 0.11), transparent),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 32%);
    opacity: 0.72;
}

.post-detail-modal::after {
    width: 240px;
    height: 240px;
    right: -95px;
    top: -105px;
    border-radius: 50%;
    background: rgba(155, 228, 71, 0.24);
    filter: blur(32px);
    opacity: 0.52;
}

.post-modal-topbar,
.post-modal-scroll,
.post-modal-composer {
    position: relative;
    z-index: 2;
}

.post-modal-topbar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 12px;
    padding: 14px 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(12, 13, 11, 0.38);
}

.post-modal-topbar::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    width: 42px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.14);
}

.post-modal-topbar h2 {
    padding-top: 16px;
    text-align: center;
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.post-modal-close {
    width: 38px;
    height: 38px;
    align-self: start;
    margin-top: 2px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #D8CDBE;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.post-modal-close:hover {
    transform: rotate(90deg) scale(1.05);
    background: rgba(155, 228, 71, 0.13);
    border-color: rgba(155, 228, 71, 0.22);
    color: var(--accent-green);
}

.post-modal-scroll {
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(155, 228, 71, 0.35) transparent;
}

.post-modal-scroll::-webkit-scrollbar {
    width: 8px;
}

.post-modal-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(155, 228, 71, 0.28);
}

.post-modal-post-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px 12px;
}

.post-modal-dots {
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.post-modal-dots:hover {
    color: var(--accent-green);
    background: rgba(155, 228, 71, 0.10);
    transform: translateY(-1px);
}

.post-modal-copy {
    padding: 0 24px 18px;
}

.post-modal-copy h3 {
    font-size: 26px;
    margin-bottom: 12px;
    letter-spacing: -0.03em;
}

.post-modal-copy p {
    max-width: 740px;
    color: var(--text-main);
    font-size: 16px;
    line-height: 1.58;
}

.post-modal-media {
    position: relative;
    height: 368px;
    margin: 0 24px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 22px 54px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.post-modal-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 55%, rgba(20, 20, 18, 0.32)),
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.09), transparent 26%);
    pointer-events: none;
}

.post-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
}

.post-modal-actions .action-group {
    gap: 10px;
}

.post-modal-actions .action-btn {
    min-height: 38px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.post-modal-actions .action-btn:hover {
    transform: translateY(-2px);
    color: var(--accent-green);
    background: rgba(155, 228, 71, 0.10);
}

.post-modal-reactions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.post-modal-reactions span {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: -6px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--bg-app);
    font-size: 13px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.post-modal-comments {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 24px 24px;
}

.post-comment {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
}

.post-comment-bubble {
    display: inline-block;
    max-width: min(620px, 100%);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    padding: 11px 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.post-comment-bubble strong {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
}

.post-comment-bubble p {
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.45;
}

.post-comment-meta {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 4px 0;
}

.post-modal-composer {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    padding: 16px 24px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(12, 13, 11, 0.34);
}

.post-modal-input {
    position: relative;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
        rgba(32, 32, 30, 0.76);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.post-modal-input:focus-within {
    border-color: rgba(155, 228, 71, 0.45);
    box-shadow:
        0 0 0 4px rgba(155, 228, 71, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transform: translateY(-1px);
}

.post-modal-input textarea {
    width: 100%;
    min-height: 76px;
    resize: none;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 15px 16px 44px;
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 14px;
    line-height: 1.45;
}

.post-modal-input textarea::placeholder {
    color: rgba(167, 156, 142, 0.72);
}

.post-modal-tools {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 9px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.post-modal-tools button {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.post-modal-tools button:hover {
    color: var(--accent-green);
    background: rgba(155, 228, 71, 0.08);
    transform: translateY(-1px);
}

.post-modal-tools .post-modal-send {
    margin-left: auto;
    color: #141412;
    background: var(--accent-green);
    box-shadow: 0 10px 26px rgba(155, 228, 71, 0.22);
}

.post-modal-send svg ,

.post-modal-send .ph {
    width: 14px;
    height: 14px;
}

.post-modal-backdrop.open .post-modal-topbar h2,
.post-modal-backdrop.open .post-modal-post-head,
.post-modal-backdrop.open .post-modal-copy,
.post-modal-backdrop.open .post-modal-media,
.post-modal-backdrop.open .post-modal-actions,
.post-modal-backdrop.open .post-modal-comments,
.post-modal-backdrop.open .post-modal-composer {
    animation: postModalStepIn 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.post-modal-backdrop.open .post-modal-post-head { animation-delay: 0.04s; }
.post-modal-backdrop.open .post-modal-copy { animation-delay: 0.08s; }
.post-modal-backdrop.open .post-modal-media { animation-delay: 0.12s; }
.post-modal-backdrop.open .post-modal-actions { animation-delay: 0.16s; }
.post-modal-backdrop.open .post-modal-comments { animation-delay: 0.20s; }
.post-modal-backdrop.open .post-modal-composer { animation-delay: 0.24s; }

@keyframes postModalStepIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-modal-backdrop,
    .post-detail-modal,
    .post-modal-close,
    .post-modal-backdrop.open .post-modal-topbar h2,
    .post-modal-backdrop.open .post-modal-post-head,
    .post-modal-backdrop.open .post-modal-copy,
    .post-modal-backdrop.open .post-modal-media,
    .post-modal-backdrop.open .post-modal-actions,
    .post-modal-backdrop.open .post-modal-comments,
    .post-modal-backdrop.open .post-modal-composer {
        animation: none;
        transition: none;
    }
}

@media (max-width: 768px) {
    .post-modal-backdrop {
        align-items: flex-end;
        padding: 16px;
    }

    .post-detail-modal {
        width: 100%;
        max-height: calc(100vh - 32px);
        border-radius: 28px;
        transform: translateY(42px) scale(0.98);
    }

    .post-modal-topbar {
        padding: 14px 16px 15px;
    }

    .post-modal-topbar h2 {
        font-size: 20px;
    }

    .post-modal-post-head,
    .post-modal-copy,
    .post-modal-actions,
    .post-modal-comments,
    .post-modal-composer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .post-modal-copy h3 {
        font-size: 21px;
    }

    .post-modal-copy p {
        font-size: 15px;
    }

    .post-modal-media {
        height: 260px;
        margin-left: 16px;
        margin-right: 16px;
        border-radius: 18px;
    }
}

/* =========================================
   PATCH 37 - FEED COMMENT MODAL: COMPACT CREATOR STYLE
========================================= */
.post-modal-backdrop {
    padding: 24px;
    background:
        radial-gradient(circle at 50% 26%, rgba(155, 228, 71, 0.13), transparent 35%),
        radial-gradient(circle at 76% 76%, rgba(214, 168, 79, 0.11), transparent 33%),
        rgba(8, 9, 7, 0.72);
    z-index: 120;
}

.post-detail-modal {
    width: min(560px, 100%);
    max-height: min(860px, calc(100vh - 64px));
    background:
        linear-gradient(145deg, rgba(32, 32, 30, 0.96), rgba(20, 20, 18, 0.98)),
        var(--bg-app);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow:
        0 42px 120px rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(155, 228, 71, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: translateY(34px) scale(0.94);
}

.post-detail-modal::before {
    background:
        linear-gradient(90deg, transparent, rgba(155, 228, 71, 0.13), transparent),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 36%);
    opacity: 0.78;
}

.post-detail-modal::after {
    width: 170px;
    height: 170px;
    right: -54px;
    top: -82px;
    background: rgba(155, 228, 71, 0.42);
    filter: blur(24px);
    opacity: 0.38;
}

.post-modal-backdrop.open .post-detail-modal {
    transform: translateY(0) scale(1);
}

.post-modal-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 32px 24px 20px;
    background: rgba(12, 13, 11, 0.25);
}

.post-modal-topbar::before {
    top: 14px;
}

.post-modal-title-block {
    min-width: 0;
}

.post-modal-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: var(--accent-green);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.post-modal-kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-green);
    box-shadow: 0 0 14px var(--accent-green-glow);
}

.post-modal-topbar h2 {
    padding: 0;
    text-align: left;
    font-size: 20px;
    line-height: 1.1;
    margin-bottom: 6px;
}

.post-modal-topbar p {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.post-modal-close {
    width: 34px;
    height: 34px;
    align-self: flex-start;
    margin-top: 0;
}

.post-modal-post-head {
    padding: 20px 24px 10px;
}

.post-modal-copy {
    padding: 0 24px 16px;
}

.post-modal-copy h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.post-modal-copy p {
    max-width: none;
    font-size: 14px;
    line-height: 1.55;
}

.post-modal-media {
    height: 250px;
    margin: 0 24px;
    border-radius: 18px;
}

.post-modal-actions {
    padding: 16px 24px;
}

.post-modal-comments {
    gap: 12px;
    padding: 0 24px 22px;
}

.post-comment {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
}

.post-comment-bubble {
    max-width: 100%;
    border-radius: 16px;
    padding: 10px 13px;
}

.post-modal-composer {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 16px 24px 20px;
    background: rgba(12, 13, 11, 0.25);
}

.post-modal-input {
    border-radius: 22px;
    border-color: rgba(155, 228, 71, 0.24);
    box-shadow:
        0 0 0 1px rgba(155, 228, 71, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.post-modal-input textarea {
    min-height: 76px;
}

.post-modal-scroll {
    scrollbar-color: rgba(155, 228, 71, 0.28) transparent;
}

.post-modal-scroll::-webkit-scrollbar {
    width: 6px;
}

.post-modal-scroll::-webkit-scrollbar-thumb {
    background: rgba(155, 228, 71, 0.22);
}

.post-modal-backdrop.open .post-modal-kicker,
.post-modal-backdrop.open .post-modal-topbar h2,
.post-modal-backdrop.open .post-modal-topbar p,
.post-modal-backdrop.open .post-modal-post-head,
.post-modal-backdrop.open .post-modal-copy,
.post-modal-backdrop.open .post-modal-media,
.post-modal-backdrop.open .post-modal-actions,
.post-modal-backdrop.open .post-modal-comments,
.post-modal-backdrop.open .post-modal-composer {
    animation: postModalStepIn 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.post-modal-backdrop.open .post-modal-topbar h2 { animation-delay: 0.02s; }
.post-modal-backdrop.open .post-modal-topbar p { animation-delay: 0.04s; }
.post-modal-backdrop.open .post-modal-post-head { animation-delay: 0.08s; }
.post-modal-backdrop.open .post-modal-copy { animation-delay: 0.12s; }
.post-modal-backdrop.open .post-modal-media { animation-delay: 0.16s; }
.post-modal-backdrop.open .post-modal-actions { animation-delay: 0.20s; }
.post-modal-backdrop.open .post-modal-comments { animation-delay: 0.24s; }
.post-modal-backdrop.open .post-modal-composer { animation-delay: 0.28s; }

@media (max-width: 768px) {
    .post-modal-backdrop {
        align-items: flex-end;
        padding: 16px;
    }

    .post-detail-modal {
        width: 100%;
        max-height: calc(100vh - 32px);
        border-radius: 28px;
    }

    .post-modal-topbar {
        padding: 32px 16px 18px;
    }

    .post-modal-post-head,
    .post-modal-copy,
    .post-modal-actions,
    .post-modal-comments,
    .post-modal-composer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .post-modal-media {
        height: 230px;
        margin-left: 16px;
        margin-right: 16px;
        border-radius: 16px;
    }
}

/* =========================================
   HNT PREVIEW SHELL PATCH 593
========================================= */
body.hnt-preview-body {
    background-color: var(--bg-outer);
    font-family: var(--font-main);
    color: var(--text-main);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

.hnt-preview-body .app-window {
    background-color: var(--bg-app);
    width: 100%;
    height: 900px;
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

.logo-brand {
    color: var(--accent-green);
    text-decoration: none;
}

.hnt-preview-body .feed-main {
    padding: 32px 320px;
}

.hnt-preview-feed-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.hnt-preview-kicker {
    color: var(--accent-green);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.hnt-preview-feed-content {
    max-width: 760px;
    margin: 0 auto;
}

.hnt-preview-status-card,
.hnt-preview-mini-panel {
    background: rgba(32, 35, 28, 0.76);
    border: 1px solid rgba(214, 168, 79, 0.14);
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

.hnt-preview-split-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 18px;
    align-items: stretch;
}

.hnt-preview-split-grid h2 {
    font-size: 18px;
    margin-bottom: 8px;
}

.hnt-preview-split-grid p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 16px;
}

.hnt-preview-mini-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    background:
        radial-gradient(circle at 20% 0%, rgba(155, 228, 71, 0.14), transparent 42%),
        rgba(32, 35, 28, 0.86);
}

.hnt-preview-mini-panel span,
.hnt-preview-mini-panel small {
    color: var(--text-muted);
    font-size: 12px;
}

.hnt-preview-mini-panel strong {
    color: var(--accent-primary);
    font-size: 22px;
    line-height: 1;
}

.hnt-avatar-shell {
    display: inline-flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

.hnt-avatar-shell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.profile-menu form,
.profile-menu button {
    width: 100%;
}

.profile-menu button {
    color: var(--text-muted);
    text-align: left;
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
}

.profile-menu button:hover {
    background-color: var(--tag-bg);
    color: var(--text-main);
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.nav-dropdown-chev {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.nav-dropdown.open .nav-dropdown-chev {
    transform: rotate(180deg);
}

.nav-submenu {
    display: none;
    flex-direction: column;
    gap: 4px;
    margin: 4px 24px 8px 0;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: rgba(32, 35, 28, 0.92);
}

.nav-dropdown.open .nav-submenu {
    display: flex;
}

.nav-submenu-close {
    display: none;
}

.nav-subitem {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    padding: 9px 12px;
    border-radius: 12px;
}

.nav-subitem:hover {
    color: var(--text-main);
    background: rgba(155, 228, 71, 0.08);
}

.post-modal-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(circle at 50% 20%, rgba(155, 228, 71, 0.12), transparent 34%), rgba(8, 9, 7, 0.72);
    backdrop-filter: blur(0px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease, backdrop-filter 0.38s ease;
    z-index: 110;
}

.post-modal-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    backdrop-filter: blur(18px);
}

.post-detail-modal {
    position: relative;
    width: min(620px, 100%);
    max-height: min(820px, calc(100vh - 48px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(32, 35, 28, 0.98), rgba(20, 21, 18, 0.98));
    border: 1px solid rgba(214, 168, 79, 0.14);
    box-shadow: 0 42px 120px rgba(0, 0, 0, 0.62);
    transform: translateY(32px) scale(0.95);
    opacity: 0;
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
}

.post-modal-backdrop.open .post-detail-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.post-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
}

.post-modal-topbar {
    padding: 30px 24px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.post-modal-kicker {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--accent-green);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.post-modal-topbar h2 {
    font-size: 20px;
    margin-bottom: 6px;
}

.post-modal-topbar p,
.post-comment-meta {
    color: var(--text-muted);
    font-size: 12px;
}

.post-modal-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.post-modal-post-head,
.post-modal-copy,
.post-modal-actions,
.post-modal-comments,
.post-modal-composer {
    padding-left: 24px;
    padding-right: 24px;
}

.post-modal-post-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 14px;
}

.post-modal-copy {
    padding-bottom: 16px;
}

.post-modal-copy h3 {
    font-size: 16px;
    margin-bottom: 8px;
}

.post-modal-copy p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.55;
}

.post-modal-media {
    height: 300px;
    margin-left: 24px;
    margin-right: 24px;
}

.post-modal-actions {
    padding-top: 16px;
    padding-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.post-modal-reactions {
    display: flex;
    gap: 6px;
}

.post-modal-comments {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 20px;
}

.post-comment {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.post-comment-bubble {
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.055);
    border-radius: 16px;
    padding: 10px 12px;
}

.post-comment-bubble strong {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
}

.post-comment-bubble p {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.post-modal-composer {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-top: 16px;
    padding-bottom: 16px;
    border-top: 1px solid rgba(255,255,255,0.07);
    background: rgba(12, 13, 11, 0.25);
}

.post-modal-input {
    position: relative;
    flex: 1;
    border-radius: 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(155, 228, 71, 0.18);
    overflow: hidden;
}

.post-modal-input textarea {
    width: 100%;
    min-height: 74px;
    resize: vertical;
    background: transparent;
    color: var(--text-main);
    border: 0;
    outline: none;
    padding: 14px 14px 44px;
    font: inherit;
    font-size: 13px;
}

.post-modal-tools {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    gap: 6px;
}

.post-modal-tools button {
    min-width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: rgba(155, 228, 71, 0.10);
    color: var(--accent-green);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.post-modal-send svg ,

.post-modal-send .ph {
    width: 14px;
    height: 14px;
}

@media (max-width: 768px) {
    body.hnt-preview-body {
        overflow: auto;
        padding: 0;
    }

    .hnt-preview-body .app-window {
        min-height: 100vh;
        height: auto;
        border-radius: 0;
    }

    .hnt-preview-body .feed-main {
        padding: 20px;
    }

    .hnt-preview-split-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   HNT PREVIEW SHELL PATCH 594 - template dimensions sync
   Keep preview shell width/height/content padding aligned to the uploaded HTML template.
========================================= */

/* =========================================
   FEED PREVIEW - real HNT data, template-scoped
========================================= */
.hnt-preview-kicker {
    color: var(--accent-green) !important;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.hnt-preview-status-line {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(155, 228, 71, 0.10);
    border: 1px solid rgba(155, 228, 71, 0.22);
    color: var(--text-main);
    font-size: 13px;
}

.hnt-preview-status-error {
    background: rgba(184, 70, 58, 0.12);
    border-color: rgba(184, 70, 58, 0.28);
}

.hnt-feed-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -12px 0 28px;
}

.hnt-feed-filter-row .tag {
    text-decoration: none;
}

.hnt-feed-filter-row .tag.active {
    background-color: var(--accent-green);
    color: #141412;
    font-weight: 700;
}

.hnt-preview-feed-post {
    scroll-margin-top: 24px;
}

.hnt-avatar-shell {
    display: inline-flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background: var(--tag-bg);
}

.hnt-avatar-shell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hnt-author-link {
    color: var(--text-main);
    text-decoration: none;
}

.hnt-author-link:hover {
    color: var(--accent-green);
}

.hnt-preview-shared-note {
    color: var(--text-muted);
    font-size: 12px;
    margin: -4px 0 14px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--tag-bg);
}

.hnt-post-media-single {
    overflow: hidden;
    background: var(--tag-bg);
}

.hnt-post-media-single a,
.hnt-post-media-single img,
.hnt-post-media-single video {
    display: block;
    width: 100%;
    height: 100%;
}

.hnt-post-media-single img,
.hnt-post-media-single video {
    object-fit: cover;
}

.hnt-post-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.hnt-post-media-cell {
    min-height: 190px;
    overflow: hidden;
    border-radius: 16px;
    background: var(--tag-bg);
    color: var(--text-muted);
    text-decoration: none;
}

.hnt-post-media-cell img,
.hnt-post-media-cell video {
    width: 100%;
    height: 100%;
    min-height: 190px;
    object-fit: cover;
    display: block;
}

.hnt-inline-form {
    display: inline-flex;
    margin: 0;
}

.action-btn.active {
    color: var(--accent-green);
}

.btn-collect.active {
    background-color: var(--accent-primary);
}

.hnt-preview-load-more {
    display: flex;
    justify-content: center;
    margin: 8px 0 32px;
}

.hnt-preview-load-more .btn-create {
    margin-right: 0;
    text-decoration: none;
    min-width: 160px;
    text-align: center;
}

.hnt-preview-empty-card {
    padding: 22px;
    border-radius: 20px;
    background: rgba(32, 32, 30, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.hnt-preview-empty-card .btn-create {
    margin-right: 0;
}

.hnt-widget-link {
    color: var(--accent-green);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.hnt-widget-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hnt-widget-row {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-main);
    text-decoration: none;
}

.hnt-widget-row strong,
.hnt-widget-row small {
    display: block;
}

.hnt-widget-row strong {
    font-size: 13px;
    line-height: 1.25;
}

.hnt-widget-row small {
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 2px;
}

.moment-item {
    color: var(--text-muted);
    text-decoration: none;
}

.hnt-preview-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.hnt-preview-ai-toggle input {
    accent-color: var(--accent-green);
}

.post-text a {
    color: var(--accent-green);
    text-decoration: none;
    font-weight: 700;
}

.post-text a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .hnt-post-media-cell {
        min-height: 140px;
    }

    .hnt-post-media-cell img,
    .hnt-post-media-cell video {
        min-height: 140px;
    }
}

/* HNT Preview Patch 597: Feed interactions only */
.hnt-post-text {
    position: relative;
}

.hnt-post-text.is-collapsible.is-collapsed {
    max-height: var(--hnt-read-more-height, 118px);
    overflow: hidden;
}

.hnt-post-text.is-collapsible.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(18, 19, 15, 0), var(--card-bg));
}

.hnt-read-more-toggle {
    display: inline-flex;
    align-items: center;
    margin: -8px 0 16px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent-green);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.hnt-read-more-toggle:hover {
    text-decoration: underline;
}

.hnt-post-media-carousel {
    position: relative;
    overflow: hidden;
    background: var(--tag-bg);
}

.hnt-post-media-slide {
    display: none;
    width: 100%;
    height: 100%;
}

.hnt-post-media-slide.is-active {
    display: block;
}

.hnt-post-media-slide a,
.hnt-post-media-slide img,
.hnt-post-media-slide video,
.hnt-post-media-file {
    display: flex;
    width: 100%;
    height: 100%;
}

.hnt-post-media-slide img,
.hnt-post-media-slide video {
    object-fit: cover;
}

.hnt-post-media-file {
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-decoration: none;
}

.hnt-post-media-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: rgba(18, 19, 15, 0.72);
    color: var(--text-main);
    cursor: pointer;
    transform: translateY(-50%);
}

.hnt-post-media-nav:hover {
    color: var(--accent-green);
}

.hnt-post-media-nav svg ,

.hnt-post-media-nav .ph {
    width: 22px;
    height: 22px;
}

.hnt-post-media-prev {
    left: 14px;
}

.hnt-post-media-next {
    right: 14px;
}

.hnt-post-media-count {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 3;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(18, 19, 15, 0.72);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 800;
}

.hnt-preview-load-more .btn-create.is-loading {
    opacity: 0.68;
    pointer-events: none;
}

@media (max-width: 768px) {
    .hnt-post-media-nav {
        width: 36px;
        height: 36px;
    }

    .hnt-post-media-prev {
        left: 10px;
    }

    .hnt-post-media-next {
        right: 10px;
    }
}

/* HNT Preview Patch 598: text-post action placement, post header actions and internal link preview */
.hnt-post-header-actions .hnt-inline-form {
    display: inline-flex;
}

.hnt-post-report-button {
    width: 44px;
    height: 32px;
    border-radius: 18px;
    background: rgba(32, 35, 28, 0.9);
}

.hnt-post-report-button svg ,

.hnt-post-report-button .ph {
    width: 16px;
    height: 16px;
}

.hnt-post-friend-button {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
}

.hnt-post-friend-button.is-static {
    cursor: default;
}

.hnt-preview-feed-post.is-text-only .post-text {
    margin-bottom: 18px;
}

.hnt-post-actions-text {
    margin-top: 18px;
    margin-bottom: 0;
}

.hnt-internal-link-preview {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    margin: 14px 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    background:
        linear-gradient(145deg, rgba(32, 32, 30, 0.78), rgba(20, 20, 18, 0.72)),
        var(--tag-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    color: var(--text-muted);
    text-decoration: none;
}

.hnt-internal-link-preview:hover {
    border-color: rgba(155, 228, 71, 0.22);
    background:
        linear-gradient(145deg, rgba(32, 32, 30, 0.9), rgba(24, 25, 22, 0.82)),
        var(--tag-bg);
}

.hnt-internal-link-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(214, 168, 79, 0.10);
    color: var(--accent-primary);
}

.hnt-internal-link-icon svg ,

.hnt-internal-link-icon .ph {
    width: 22px;
    height: 22px;
}

.hnt-internal-link-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.hnt-internal-link-copy > span {
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.hnt-internal-link-copy strong {
    color: var(--text-main);
    font-size: 16px;
    line-height: 1.22;
}

.hnt-internal-link-copy em {
    color: var(--text-muted);
    font-size: 13px;
    font-style: normal;
    line-height: 1.4;
}

.hnt-internal-link-copy small {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.32;
    opacity: 0.88;
}

@media (max-width: 768px) {
    .hnt-post-header-actions {
        gap: 8px;
    }

    .hnt-post-friend-button {
        padding-left: 12px;
        padding-right: 12px;
    }

    .hnt-internal-link-preview {
        padding: 16px;
    }

    .hnt-internal-link-icon {
        width: 46px;
        height: 46px;
        border-radius: 15px;
    }
}

/* HNT Preview Patch 600: report modal matching the preview composer shell */
.hnt-report-modal {
    width: min(520px, 100%);
}

.hnt-report-header h2 {
    margin-bottom: 6px;
}

.hnt-report-form {
    position: relative;
    z-index: 2;
}

.hnt-report-body {
    display: grid;
    gap: 16px;
}

.hnt-report-field {
    display: grid;
    gap: 8px;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 800;
}

.hnt-report-field span {
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.hnt-report-field select,
.hnt-report-field textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
        rgba(32, 32, 30, 0.76);
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
    line-height: 1.45;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.hnt-report-field select {
    min-height: 48px;
    padding: 0 14px;
    appearance: none;
}

.hnt-report-field textarea {
    min-height: 118px;
    resize: vertical;
    padding: 14px;
}

.hnt-report-field select:focus,
.hnt-report-field textarea:focus {
    border-color: rgba(155, 228, 71, 0.42);
    box-shadow: 0 0 0 4px rgba(155, 228, 71, 0.08);
}

.hnt-report-field textarea::placeholder {
    color: rgba(181, 183, 192, 0.58);
}

.hnt-report-field select option {
    background: #181A16;
    color: var(--text-main);
}

.hnt-report-status {
    margin: 0;
    border: 1px solid rgba(155, 228, 71, 0.22);
    border-radius: 16px;
    background: rgba(155, 228, 71, 0.09);
    color: var(--accent-green);
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 800;
}

.hnt-report-status.is-error {
    border-color: rgba(184, 70, 58, 0.34);
    background: rgba(184, 70, 58, 0.12);
    color: #ffb3aa;
}

.hnt-report-footer {
    justify-content: space-between;
}

.hnt-report-submit.is-loading {
    opacity: 0.72;
    pointer-events: none;
}

.hnt-post-report-button.is-reported,
.hnt-post-report-button:disabled {
    opacity: 0.58;
    cursor: not-allowed;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .hnt-report-modal {
        border-radius: 24px;
    }

    .hnt-report-footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .hnt-report-footer .btn-create,
    .hnt-report-footer .btn-following {
        justify-content: center;
        width: 100%;
    }
}

/* Patch 602: real preview comment modal */
.hnt-preview-body .hnt-comment-modal-loading {
    min-height: 220px;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-size: 18px;
    font-weight: 700;
}

.hnt-preview-body .hnt-comment-modal-loading.is-error {
    color: var(--accent-danger);
}

.hnt-preview-body .hnt-comment-modal-post-head {
    align-items: center;
}

.hnt-preview-body .hnt-comment-modal-open-post {
    min-width: auto;
    padding: 14px 24px;
    text-decoration: none;
}

.hnt-preview-body .hnt-comment-modal-copy {
    padding: 26px 48px 10px;
    color: var(--text-main);
    font-size: 22px;
    line-height: 1.58;
}

.hnt-preview-body .hnt-comment-modal-copy p {
    margin: 0 0 16px;
}

.hnt-preview-body .hnt-comment-modal-media {
    margin: 22px 48px 0;
    min-height: 320px;
    border-radius: 26px;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

.hnt-preview-body .hnt-comment-modal-media img,
.hnt-preview-body .hnt-comment-modal-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hnt-preview-body .hnt-comment-modal-actions {
    margin-top: 22px;
}

.hnt-preview-body .hnt-comment-modal-actions .action-btn {
    cursor: default;
}

.hnt-preview-body .hnt-comment-modal-comments {
    gap: 18px;
    padding-top: 6px;
}

.hnt-preview-body .hnt-comment-modal-item {
    align-items: flex-start;
    gap: 14px;
}

.hnt-preview-body .hnt-comment-modal-main {
    flex: 1;
    min-width: 0;
}

.hnt-preview-body .hnt-comment-modal-bubble {
    width: 100%;
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid rgba(242, 232, 216, 0.08);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(155, 228, 71, 0.035));
}

.hnt-preview-body .hnt-comment-modal-headline {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.hnt-preview-body .hnt-comment-modal-headline a {
    color: var(--text-main);
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
}

.hnt-preview-body .hnt-comment-modal-headline span {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 650;
}

.hnt-preview-body .hnt-comment-modal-body {
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.55;
}

.hnt-preview-body .hnt-comment-modal-body p {
    margin: 0 0 10px;
}

.hnt-preview-body .hnt-comment-modal-body p:last-child {
    margin-bottom: 0;
}

.hnt-preview-body .hnt-comment-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 8px 0 0 16px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
}

.hnt-preview-body .hnt-comment-report-link {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
}

.hnt-preview-body .hnt-comment-report-link:hover,
.hnt-preview-body .hnt-comment-report-link.is-reported {
    color: var(--accent-green);
}

.hnt-preview-body .hnt-comment-modal-replies {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
    padding-left: 28px;
    border-left: 1px solid rgba(242, 232, 216, 0.08);
}

.hnt-preview-body .hnt-comment-empty {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    border-radius: 26px;
    border: 1px dashed rgba(242, 232, 216, 0.14);
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-muted);
    text-align: center;
}

.hnt-preview-body .hnt-comment-empty strong {
    color: var(--text-main);
    font-size: 20px;
}

.hnt-preview-body .hnt-comment-modal-status {
    margin: 8px 0 0;
    color: var(--accent-green);
    font-size: 13px;
    font-weight: 800;
}

.hnt-preview-body .hnt-comment-modal-status.is-error {
    color: var(--accent-danger);
}

.hnt-preview-body .post-modal-send.is-loading {
    opacity: 0.65;
    cursor: wait;
}

@media (max-width: 768px) {
    .hnt-preview-body .hnt-comment-modal-copy {
        padding: 20px 24px 6px;
        font-size: 18px;
    }

    .hnt-preview-body .hnt-comment-modal-media {
        margin: 18px 24px 0;
        min-height: 240px;
        border-radius: 22px;
    }

    .hnt-preview-body .hnt-comment-modal-replies {
        padding-left: 16px;
    }
}


/* Patch 603: compact preview comment modal */
.hnt-preview-body .post-detail-modal {
    width: min(750px, 100%);
    max-height: min(840px, calc(100vh - 44px));
}

.hnt-preview-body .post-modal-topbar {
    padding: 12px 16px 12px;
}

.hnt-preview-body .post-modal-topbar::before {
    top: 10px;
    width: 38px;
    height: 4px;
}

.hnt-preview-body .post-modal-title-block {
    padding-top: 4px;
}

.hnt-preview-body .post-modal-kicker {
    font-size: 13px;
    letter-spacing: 0.08em;
}

.hnt-preview-body .post-modal-topbar h2 {
    padding-top: 10px;
    font-size: 20px;
    line-height: 1.14;
}

.hnt-preview-body .post-modal-topbar p {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.32;
}

.hnt-preview-body .post-modal-close {
    width: 34px;
    height: 34px;
}

.hnt-preview-body .post-modal-close svg ,

.hnt-preview-body .post-modal-close .ph {
    width: 18px;
    height: 18px;
}

.hnt-preview-body .post-modal-post-head {
    gap: 14px;
    padding: 16px 22px 8px;
}

.hnt-preview-body .hnt-comment-modal-post-head .avatar,
.hnt-preview-body .hnt-comment-modal-item > .avatar,
.hnt-preview-body .post-modal-composer > .avatar {
    width: 34px;
    height: 34px;
}

.hnt-preview-body .hnt-comment-modal-post-head .author-info strong {
    font-size: 16px;
    line-height: 1.1;
}

.hnt-preview-body .hnt-comment-modal-post-head .author-info span {
    font-size: 13px;
    line-height: 1.2;
}

.hnt-preview-body .hnt-comment-modal-open-post {
    padding: 10px 18px;
    font-size: 13px;
    border-radius: 18px;
}

.hnt-preview-body .hnt-comment-modal-copy {
    padding: 18px 42px 4px;
    font-size: 17px;
    line-height: 1.42;
}

.hnt-preview-body .hnt-comment-modal-copy p {
    margin: 0 0 10px;
}

.hnt-preview-body .hnt-comment-modal-media {
    margin: 16px 42px 0;
    min-height: 260px;
    max-height: 340px;
    border-radius: 22px;
}

.hnt-preview-body .post-modal-media.hnt-comment-modal-media {
    height: clamp(240px, 36vh, 340px);
}

.hnt-preview-body .hnt-comment-modal-actions {
    margin-top: 14px;
    padding: 14px 22px;
}

.hnt-preview-body .hnt-comment-modal-actions .action-btn {
    min-height: 34px;
    padding: 0 10px;
    font-size: 13px;
}

.hnt-preview-body .hnt-comment-modal-actions .action-btn svg ,

.hnt-preview-body .hnt-comment-modal-actions .action-btn .ph {
    width: 18px;
    height: 18px;
}

.hnt-preview-body .hnt-comment-modal-comments {
    gap: 12px;
    padding: 2px 22px 18px;
}

.hnt-preview-body .hnt-comment-modal-item {
    gap: 10px;
}

.hnt-preview-body .hnt-comment-modal-bubble {
    padding: 13px 16px;
    border-radius: 18px;
}

.hnt-preview-body .hnt-comment-modal-headline {
    gap: 8px;
    margin-bottom: 5px;
}

.hnt-preview-body .hnt-comment-modal-headline a {
    font-size: 14px;
}

.hnt-preview-body .hnt-comment-modal-headline span {
    font-size: 12px;
}

.hnt-preview-body .hnt-comment-modal-body {
    font-size: 14px;
    line-height: 1.42;
}

.hnt-preview-body .hnt-comment-modal-body p {
    margin: 0 0 7px;
}

.hnt-preview-body .hnt-comment-modal-meta {
    gap: 10px;
    margin: 6px 0 0 12px;
    font-size: 12px;
}

.hnt-preview-body .hnt-comment-modal-replies {
    gap: 10px;
    margin-top: 10px;
    padding-left: 20px;
}

.hnt-preview-body .post-modal-composer {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 22px 14px;
}

.hnt-preview-body .post-modal-input {
    border-radius: 18px;
}

.hnt-preview-body .post-modal-input textarea {
    min-height: 58px;
    padding: 12px 14px 38px;
    font-size: 13px;
    line-height: 1.36;
}

.hnt-preview-body .post-modal-tools {
    left: 10px;
    right: 10px;
    bottom: 7px;
    gap: 6px;
}

.hnt-preview-body .post-modal-tools button {
    min-width: 22px;
    height: 22px;
    font-size: 11px;
}

.hnt-preview-body .post-modal-send svg ,

.hnt-preview-body .post-modal-send .ph {
    width: 13px;
    height: 13px;
}

@media (max-width: 768px) {
    .hnt-preview-body .post-detail-modal {
        max-height: calc(100vh - 24px);
        border-radius: 24px;
    }

    .hnt-preview-body .post-modal-post-head,
    .hnt-preview-body .hnt-comment-modal-actions,
    .hnt-preview-body .hnt-comment-modal-comments,
    .hnt-preview-body .post-modal-composer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hnt-preview-body .hnt-comment-modal-copy {
        padding: 16px 20px 4px;
        font-size: 16px;
    }

    .hnt-preview-body .hnt-comment-modal-media {
        margin: 14px 20px 0;
        min-height: 200px;
        max-height: 270px;
        border-radius: 18px;
    }

    .hnt-preview-body .post-modal-media.hnt-comment-modal-media {
        height: clamp(190px, 32vh, 270px);
    }
}

/* Patch 604: comment edit/delete controls inside preview comment modal */
.hnt-preview-body .hnt-comment-modal-meta .hnt-comment-meta-button,
.hnt-preview-body .hnt-comment-modal-meta .hnt-comment-report-link {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-weight: 800;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.hnt-preview-body .hnt-comment-modal-meta .hnt-comment-meta-button:hover,
.hnt-preview-body .hnt-comment-modal-meta .hnt-comment-report-link:hover {
    color: var(--accent-green);
}

.hnt-preview-body .hnt-comment-modal-meta .hnt-comment-delete-button:hover {
    color: var(--accent-danger);
}

.hnt-preview-body .hnt-comment-modal-meta .hnt-comment-meta-button:disabled,
.hnt-preview-body .hnt-comment-modal-meta .hnt-comment-report-link:disabled {
    cursor: default;
    opacity: 0.6;
}

.hnt-preview-body .hnt-comment-edit-form {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.hnt-preview-body .hnt-comment-edit-form[hidden] {
    display: none;
}

.hnt-preview-body .hnt-comment-edit-form textarea {
    width: 100%;
    min-height: 72px;
    resize: vertical;
    border: 1px solid color-mix(in srgb, var(--accent-green) 34%, transparent);
    border-radius: 14px;
    background: rgba(18, 19, 15, 0.78);
    color: var(--text-light);
    font: inherit;
    font-size: 13px;
    line-height: 1.42;
    padding: 10px 12px;
    outline: none;
}

.hnt-preview-body .hnt-comment-edit-form textarea:focus {
    border-color: color-mix(in srgb, var(--accent-green) 72%, transparent);
    box-shadow: 0 0 0 3px rgba(155, 228, 71, 0.12);
}

.hnt-preview-body .hnt-comment-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.hnt-preview-body .hnt-comment-edit-actions .btn-following,
.hnt-preview-body .hnt-comment-edit-actions .btn-create {
    min-height: 30px;
    padding: 0 14px;
    border-radius: 15px;
    font-size: 12px;
}

.hnt-preview-body .hnt-comment-edit-status {
    margin: 0;
    color: var(--accent-green);
    font-size: 12px;
    font-weight: 800;
}

.hnt-preview-body .hnt-comment-edit-status.is-error {
    color: var(--accent-danger);
}

.hnt-preview-body .hnt-comment-delete-button.is-loading,
.hnt-preview-body .hnt-comment-edit-save.is-loading {
    opacity: 0.65;
    cursor: wait;
}

/* HNT Preview Patch 605: keep report modal above post/comment modal */
.hnt-report-modal-backdrop {
    z-index: 220;
}

/* HNT Preview Patch 606: feed media lightbox, custom video player and own-post menu */
.hnt-post-options {
    position: relative;
    display: inline-flex;
    z-index: 5;
}

.hnt-post-options.open {
    z-index: 120;
}

.hnt-post-options-toggle {
    gap: 7px;
    min-height: 32px;
}

.hnt-post-options-toggle svg ,

.hnt-post-options-toggle .ph {
    width: 13px;
    height: 13px;
    color: var(--text-muted);
    transition: transform 0.18s ease, color 0.18s ease;
}

.hnt-post-options.open .hnt-post-options-toggle svg ,

.hnt-post-options.open .hnt-post-options-toggle .ph {
    transform: rotate(180deg);
    color: var(--accent-green);
}

.hnt-post-options-menu {
    top: calc(100% + 8px);
    left: auto;
    right: 0;
    min-width: 190px;
    z-index: 125;
}

.hnt-post-options-menu::before {
    left: auto;
    right: 22px;
}

.hnt-post-options.open .hnt-post-options-menu {
    display: flex;
}

.hnt-post-option-action {
    width: 100%;
    border: 0;
    background: transparent;
    font-family: var(--font-main);
    text-align: left;
    cursor: pointer;
}

.hnt-post-delete-form {
    display: block;
    margin: 0;
}

.hnt-post-option-danger {
    color: var(--danger, #B8463A);
}

.hnt-post-option-danger:hover {
    color: var(--text-main);
    background: rgba(184, 70, 58, 0.14);
}

.hnt-post-edit-form {
    display: grid;
    gap: 10px;
    margin: 10px 0 16px;
    padding: 12px;
    border: 1px solid rgba(155, 228, 71, 0.16);
    border-radius: 18px;
    background: rgba(32, 35, 28, 0.62);
}

.hnt-post-edit-form[hidden] {
    display: none !important;
}

.hnt-post-edit-form textarea {
    min-height: 112px;
    width: 100%;
    resize: vertical;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(18, 19, 15, 0.72);
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
    line-height: 1.45;
    padding: 12px 14px;
    outline: none;
}

.hnt-post-edit-form textarea:focus {
    border-color: rgba(155, 228, 71, 0.55);
    box-shadow: 0 0 0 3px rgba(155, 228, 71, 0.10);
}

.hnt-post-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.hnt-post-edit-actions .btn-create,
.hnt-post-edit-actions .btn-following {
    margin: 0;
    min-height: 34px;
    padding: 8px 18px;
    font-size: 12px;
}

.hnt-post-edit-status {
    margin: 0;
    color: var(--accent-green);
    font-size: 12px;
    font-weight: 700;
}

.hnt-post-edit-status.is-error {
    color: var(--danger, #B8463A);
}

.hnt-post-media-single .hnt-video-player,
.hnt-post-media-slide .hnt-video-player,
.hnt-comment-modal-media .hnt-video-player {
    width: 100%;
    height: 100%;
}

.hnt-video-player {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
    background: #050604;
    color: var(--text-main);
}

.hnt-video-player video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #050604;
    cursor: pointer;
}

.hnt-video-player::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    pointer-events: none;
    background: linear-gradient(to top, rgba(5, 6, 4, 0.82), rgba(5, 6, 4, 0));
}

.hnt-video-center-play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;
    background: rgba(18, 19, 15, 0.72);
    color: var(--accent-green);
    cursor: pointer;
    transform: translate(-50%, -50%);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.4);
    transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

.hnt-video-center-play:hover {
    background: rgba(39, 43, 34, 0.92);
    transform: translate(-50%, -50%) scale(1.04);
}

.hnt-video-center-play.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.hnt-video-center-play svg ,

.hnt-video-center-play .ph {
    width: 28px;
    height: 28px;
    margin-left: 3px;
}

.hnt-video-controls {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    z-index: 5;
    display: grid;
    grid-template-columns: auto auto minmax(80px, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(18, 19, 15, 0.76);
    backdrop-filter: blur(14px);
}

.hnt-video-control {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main);
    cursor: pointer;
}

.hnt-video-control:hover,
.hnt-video-control.is-active {
    color: var(--accent-green);
    background: rgba(155, 228, 71, 0.12);
}

.hnt-video-control svg ,

.hnt-video-control .ph {
    width: 15px;
    height: 15px;
}

.hnt-video-time {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.hnt-video-seek {
    width: 100%;
    accent-color: var(--accent-green);
    cursor: pointer;
}

.hnt-lightbox-backdrop {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(18px);
}

.hnt-lightbox-backdrop.open {
    display: flex;
}

.hnt-lightbox-modal {
    position: relative;
    width: min(1180px, 100%);
    height: min(82vh, 820px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hnt-lightbox-stage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.hnt-lightbox-stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 22px;
    box-shadow: 0 36px 90px rgba(0, 0, 0, 0.55);
}

.hnt-lightbox-stage figcaption,
.hnt-lightbox-count {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(18, 19, 15, 0.76);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 800;
}

.hnt-lightbox-count {
    left: auto;
    right: 20px;
    transform: none;
}

.hnt-lightbox-close {
    position: absolute;
    right: 18px;
    top: 18px;
    z-index: 4;
}

.hnt-lightbox-nav {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    background: rgba(18, 19, 15, 0.78);
    color: var(--text-main);
    cursor: pointer;
    transform: translateY(-50%);
}

.hnt-lightbox-nav:hover {
    color: var(--accent-green);
    background: rgba(39, 43, 34, 0.92);
}

.hnt-lightbox-nav svg ,

.hnt-lightbox-nav .ph {
    width: 22px;
    height: 22px;
}

.hnt-lightbox-prev {
    left: 14px;
}

.hnt-lightbox-next {
    right: 14px;
}

@media (max-width: 768px) {
    .hnt-video-controls {
        left: 10px;
        right: 10px;
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .hnt-video-time,
    .hnt-video-control[data-hnt-video-fullscreen] {
        display: none;
    }

    .hnt-lightbox-backdrop {
        padding: 14px;
    }

    .hnt-lightbox-nav {
        width: 40px;
        height: 40px;
    }

    .hnt-lightbox-stage img {
        border-radius: 16px;
    }
}

.hnt-post-options-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: var(--tag-bg);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.hnt-post-options-close svg ,

.hnt-post-options-close .ph {
    width: 14px;
    height: 14px;
}

.hnt-post-options-close:hover {
    color: var(--text-main);
    background: rgba(155, 228, 71, 0.12);
    transform: rotate(90deg);
}

/* Patch 609: AJAX-only simple likes in preview feed/comments */
.hnt-comment-like-button.active,
.hnt-comment-like-button[aria-pressed="true"] {
    color: var(--accent-green);
}

[data-hnt-simple-like-button].is-loading {
    opacity: 0.65;
    cursor: wait;
}

/* Patch 610: comment modal like summary + icon actions */
.hnt-preview-body .hnt-comment-modal-actions {
    align-items: center;
}

.hnt-preview-body .hnt-like-summary-button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid rgba(214, 168, 79, 0.18);
    border-radius: 999px;
    background: rgba(214, 168, 79, 0.08);
    color: var(--accent-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.hnt-preview-body .hnt-like-summary-button svg ,

.hnt-preview-body .hnt-like-summary-button .ph {
    width: 16px;
    height: 16px;
}

.hnt-preview-body .hnt-like-summary-button:hover {
    transform: translateY(-1px);
    border-color: rgba(214, 168, 79, 0.34);
    background: rgba(214, 168, 79, 0.13);
}

.hnt-preview-body .hnt-like-summary-button.is-empty {
    visibility: hidden;
    pointer-events: none;
}

.hnt-preview-body .hnt-comment-icon-actions {
    align-items: center;
    gap: 7px;
    margin-top: 7px;
}

.hnt-preview-body .hnt-comment-icon-actions .hnt-inline-form {
    display: inline-flex;
}

.hnt-preview-body .hnt-comment-action-icon,
.hnt-preview-body .hnt-comment-like-summary {
    position: relative;
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(242, 232, 216, 0.07);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    padding: 0 8px;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.hnt-preview-body .hnt-comment-action-icon svg ,

.hnt-preview-body .hnt-comment-action-icon .ph {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.hnt-preview-body .hnt-comment-action-icon:hover,
.hnt-preview-body .hnt-comment-like-summary:hover,
.hnt-preview-body .hnt-comment-action-icon.active {
    color: var(--accent-primary);
    background: rgba(214, 168, 79, 0.10);
    border-color: rgba(214, 168, 79, 0.24);
    transform: translateY(-1px);
}

.hnt-preview-body .hnt-comment-action-icon.is-static {
    cursor: default;
    color: var(--accent-green);
    background: rgba(155, 228, 71, 0.08);
    border-color: rgba(155, 228, 71, 0.18);
}

.hnt-preview-body .hnt-comment-action-icon.is-reported,
.hnt-preview-body .hnt-comment-action-icon:disabled {
    opacity: 0.58;
    cursor: default;
    transform: none;
}

.hnt-preview-body .hnt-comment-delete-button:hover {
    color: var(--accent-danger);
    background: rgba(184, 70, 58, 0.10);
    border-color: rgba(184, 70, 58, 0.22);
}

.hnt-preview-body .hnt-comment-like-summary {
    min-width: auto;
    padding: 0 10px;
    color: var(--accent-primary);
    border-color: rgba(214, 168, 79, 0.16);
    background: rgba(214, 168, 79, 0.07);
}

.hnt-preview-body .hnt-comment-like-summary.is-empty {
    display: none;
}

.hnt-preview-body [data-tooltip]::before,
.hnt-preview-body [data-tooltip]::after {
    position: absolute;
    left: 50%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
    z-index: 260;
}

.hnt-preview-body [data-tooltip]::before {
    content: attr(data-tooltip);
    bottom: calc(100% + 9px);
    transform: translateX(-50%) translateY(4px);
    max-width: 170px;
    white-space: nowrap;
    padding: 7px 9px;
    border-radius: 9px;
    background: rgba(20, 20, 18, 0.97);
    border: 1px solid rgba(242, 232, 216, 0.08);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 850;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34);
}

.hnt-preview-body [data-tooltip]::after {
    content: '';
    bottom: calc(100% + 4px);
    transform: translateX(-50%) translateY(4px) rotate(45deg);
    width: 8px;
    height: 8px;
    background: rgba(20, 20, 18, 0.97);
    border-right: 1px solid rgba(242, 232, 216, 0.08);
    border-bottom: 1px solid rgba(242, 232, 216, 0.08);
}

.hnt-preview-body [data-tooltip]:hover::before,
.hnt-preview-body [data-tooltip]:hover::after,
.hnt-preview-body [data-tooltip]:focus-visible::before,
.hnt-preview-body [data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.hnt-preview-body [data-tooltip]:hover::after,
.hnt-preview-body [data-tooltip]:focus-visible::after {
    transform: translateX(-50%) translateY(0) rotate(45deg);
}

.hnt-preview-body .hnt-likes-modal-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 20%, rgba(214, 168, 79, 0.13), transparent 34%),
        radial-gradient(circle at 78% 78%, rgba(155, 228, 71, 0.10), transparent 35%),
        rgba(8, 8, 7, 0.72);
    backdrop-filter: blur(0) saturate(105%);
    -webkit-backdrop-filter: blur(0) saturate(105%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease, backdrop-filter 0.38s ease, -webkit-backdrop-filter 0.38s ease;
    z-index: 235;
}

.hnt-preview-body .hnt-likes-modal-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    backdrop-filter: blur(18px) saturate(126%);
    -webkit-backdrop-filter: blur(18px) saturate(126%);
}

.hnt-preview-body .hnt-likes-modal {
    position: relative;
    width: min(420px, 100%);
    max-height: min(620px, calc(100vh - 48px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(242, 232, 216, 0.08);
    background:
        linear-gradient(145deg, rgba(32, 32, 30, 0.97), rgba(20, 20, 18, 0.985)),
        var(--bg-app);
    box-shadow: 0 42px 120px rgba(0, 0, 0, 0.64), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(28px) scale(0.96);
    opacity: 0;
    transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
}

.hnt-preview-body .hnt-likes-modal-backdrop.open .hnt-likes-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.hnt-preview-body .hnt-likes-modal::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(214, 168, 79, 0.10), transparent),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 34%);
    opacity: 0.76;
}

.hnt-preview-body .hnt-likes-modal-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(26px);
    opacity: 0.38;
    pointer-events: none;
}

.hnt-preview-body .hnt-likes-modal-orb-one {
    width: 150px;
    height: 150px;
    right: -52px;
    top: -74px;
    background: rgba(214, 168, 79, 0.42);
}

.hnt-preview-body .hnt-likes-modal-orb-two {
    width: 140px;
    height: 140px;
    left: -64px;
    bottom: -72px;
    background: rgba(155, 228, 71, 0.24);
}

.hnt-preview-body .hnt-likes-modal-header,
.hnt-preview-body .hnt-likes-modal-body {
    position: relative;
    z-index: 2;
}

.hnt-preview-body .hnt-likes-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 16px;
    border-bottom: 1px solid rgba(242, 232, 216, 0.07);
}

.hnt-preview-body .hnt-likes-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hnt-preview-body .hnt-likes-kicker::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 14px var(--accent-primary-glow);
}

.hnt-preview-body .hnt-likes-modal-header h2 {
    margin: 0 0 5px;
    color: var(--text-main);
    font-size: 20px;
    line-height: 1.1;
}

.hnt-preview-body .hnt-likes-modal-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.hnt-preview-body .hnt-likes-modal-close {
    width: 34px;
    height: 34px;
}

.hnt-preview-body .hnt-likes-modal-body {
    overflow-y: auto;
    padding: 12px;
}

.hnt-preview-body .hnt-likes-list {
    display: grid;
    gap: 7px;
}

.hnt-preview-body .hnt-likes-user {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 30px;
    gap: 11px;
    align-items: center;
    min-height: 58px;
    padding: 10px;
    border-radius: 10px;
    color: var(--text-main);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(242, 232, 216, 0.055);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.hnt-preview-body .hnt-likes-user:hover {
    transform: translateY(-1px);
    border-color: rgba(214, 168, 79, 0.20);
    background: rgba(214, 168, 79, 0.06);
}

.hnt-preview-body .hnt-likes-user-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.hnt-preview-body .hnt-likes-user-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1.1;
}

.hnt-preview-body .hnt-likes-user-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 750;
}

.hnt-preview-body .hnt-likes-user-heart {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--accent-primary);
    background: rgba(214, 168, 79, 0.10);
}

.hnt-preview-body .hnt-likes-user-heart svg ,

.hnt-preview-body .hnt-likes-user-heart .ph {
    width: 15px;
    height: 15px;
}

.hnt-preview-body .hnt-likes-loading,
.hnt-preview-body .hnt-likes-empty {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    border: 1px dashed rgba(242, 232, 216, 0.12);
    color: var(--text-muted);
    text-align: center;
    font-size: 13px;
    font-weight: 750;
}

.hnt-preview-body .hnt-likes-empty strong {
    color: var(--text-main);
    font-size: 17px;
}

.hnt-preview-body .hnt-likes-empty.is-error strong {
    color: var(--accent-danger);
}

@media (max-width: 768px) {
    .hnt-preview-body .hnt-likes-modal-backdrop {
        align-items: flex-end;
        padding: 16px;
    }

    .hnt-preview-body .hnt-likes-modal {
        max-height: calc(100vh - 32px);
    }

    .hnt-preview-body .hnt-like-summary-button {
        min-height: 32px;
        padding: 0 11px;
    }
}


/* =========================================
   PATCH 611: Preview feed share/bookmark without reload
========================================= */
.hnt-preview-body .hnt-share-button.active,
.hnt-preview-body .hnt-share-button.is-loading,
.hnt-preview-body .hnt-bookmark-icon-button.is-loading {
    color: var(--accent-primary);
}

.hnt-preview-body .hnt-share-button:disabled,
.hnt-preview-body .hnt-bookmark-icon-button:disabled {
    cursor: wait;
    opacity: 0.82;
}

.hnt-preview-body .hnt-bookmark-icon-button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 50%;
    box-shadow: none;
}

.hnt-preview-body .hnt-bookmark-icon-button svg ,

.hnt-preview-body .hnt-bookmark-icon-button .ph {
    width: 19px;
    height: 19px;
}

.hnt-preview-body .hnt-bookmark-icon-button.active {
    color: #141412;
    background: var(--accent-primary);
    box-shadow: 0 10px 26px var(--accent-primary-glow);
}

.hnt-preview-body .hnt-bookmark-icon-button:not(.active) {
    color: var(--text-muted);
    background: var(--tag-bg);
}

.hnt-preview-body .hnt-bookmark-icon-button:not(.active):hover,
.hnt-preview-body .hnt-share-button:hover {
    color: var(--accent-primary);
}

@media (max-width: 768px) {
    .hnt-preview-body .hnt-bookmark-icon-button {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
    }
}


/* =========================================
   PATCH 612: native share + cleaner bookmark icon
========================================= */
.hnt-preview-body .hnt-share-button.is-loading,
.hnt-preview-body .hnt-share-button.is-copied {
    color: var(--accent-primary);
}

.hnt-preview-body .hnt-share-button:disabled {
    cursor: wait;
    opacity: 0.82;
}

.hnt-preview-body .hnt-bookmark-icon-button {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-muted);
}

.hnt-preview-body .hnt-bookmark-icon-button svg ,

.hnt-preview-body .hnt-bookmark-icon-button .ph {
    width: 21px;
    height: 21px;
}

.hnt-preview-body .hnt-bookmark-icon-button.active,
.hnt-preview-body .hnt-bookmark-icon-button:hover {
    color: var(--accent-primary);
    background: transparent;
    box-shadow: none;
}

.hnt-preview-body .hnt-bookmark-icon-button.is-loading {
    color: var(--accent-primary);
}

/* =========================================
   PATCH 614: Cup detail compact section menu + merged player ranking
========================================= */
.cup-section-menu {
    position: relative;
    min-width: min(260px, 100%);
    max-width: 100%;
    z-index: 15;
}

.cup-section-menu summary {
    list-style: none;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    color: var(--text-main);
    background: rgba(32, 32, 30, 0.82);
    border: 1px solid rgba(242, 232, 216, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    min-width: 220px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.cup-section-menu summary::-webkit-details-marker {
    display: none;
}

.cup-section-menu summary svg ,

.cup-section-menu summary .ph {
    width: 16px;
    height: 16px;
    color: var(--accent-green);
    transition: transform 0.18s ease;
}

.cup-section-menu[open] summary svg ,

.cup-section-menu[open] summary .ph {
    transform: rotate(180deg);
}

.cup-section-options {
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    width: min(320px, calc(100vw - 48px));
    display: grid;
    gap: 5px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(32, 32, 30, 0.98);
    border: 1px solid var(--border-color);
    box-shadow: 0 26px 54px rgba(0, 0, 0, 0.48);
    z-index: 30;
}

.cup-section-options::before {
    content: '';
    position: absolute;
    left: 26px;
    top: -7px;
    width: 12px;
    height: 12px;
    background: rgba(32, 32, 30, 0.98);
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    transform: rotate(45deg);
}

.cup-section-options a {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 850;
}

.cup-section-options a:hover,
.cup-section-options a.active {
    color: var(--text-main);
    background: rgba(155, 228, 71, 0.08);
}

.cup-section-options a.active {
    color: var(--accent-green);
}

.cup-player-card {
    position: relative;
    padding-left: 58px;
}

.cup-player-rank {
    position: absolute;
    left: 16px;
    top: 20px;
    min-width: 30px;
    min-height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #141412;
    background: var(--accent-primary);
    font-size: 12px;
    font-weight: 950;
    box-shadow: 0 10px 24px var(--accent-primary-glow);
}

.cup-scoring-panel p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .cup-tabs-row {
        align-items: stretch;
    }

    .cup-section-menu,
    .cup-section-menu summary {
        width: 100%;
        min-width: 0;
    }

    .cup-section-options {
        width: 100%;
    }

    .cup-join-actions {
        grid-template-columns: 1fr 42px;
    }

    .cup-player-card {
        padding-left: 52px;
    }

    .cup-player-rank {
        left: 14px;
        top: 18px;
    }
}


/* =========================================
   PATCH 615: Cup section dropdown must escape the hero card
   The menu lives inside the cup hero, so the hero itself must not clip it.
========================================= */
.cup-hero-card {
    position: relative;
    overflow: visible;
}

.cup-cover-art {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.cup-tabs-row {
    position: relative;
    z-index: 70;
}

.cup-section-menu[open] {
    z-index: 120;
}

.cup-section-menu[open] .cup-section-options {
    z-index: 140;
}

/* =========================================
   PATCH 616: keep cup date tile visible after dropdown overflow fix
   The hero card may be overflow-visible for the dropdown, but the cover must not clip
   the date tile that intentionally overlaps the body area.
========================================= */
.cup-cover-art {
    position: relative;
    z-index: 2;
    overflow: visible;
}

.cup-cover-shade {
    border-radius: inherit;
}

.cup-date-tile {
    z-index: 8;
}

.cup-hero-body {
    position: relative;
    z-index: 1;
}

.cup-tabs-row {
    position: relative;
    z-index: 80;
}

/* =========================================
   PATCH 617: Cup submission upload progress modal
   Keeps the preview form inside the new HNT shell and avoids redirecting to the raw POST URL.
========================================= */
.hnt-cup-submit-form.is-uploading {
    pointer-events: none;
    opacity: 0.82;
}

.hnt-cup-upload-modal[hidden] {
    display: none !important;
}

.hnt-cup-upload-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 24%, rgba(207, 161, 73, 0.16), transparent 34%),
        radial-gradient(circle at 82% 78%, rgba(214, 168, 79, 0.10), transparent 34%),
        rgba(8, 8, 7, 0.74);
    backdrop-filter: blur(18px) saturate(122%);
    -webkit-backdrop-filter: blur(18px) saturate(122%);
}

.hnt-cup-upload-card {
    position: relative;
    width: min(480px, 100%);
    padding: 28px;
    border-radius: 10px;
    border: 1px solid rgba(242, 232, 216, 0.08);
    background:
        linear-gradient(145deg, rgba(32, 32, 30, 0.96), rgba(20, 20, 18, 0.985)),
        var(--bg-app);
    box-shadow:
        0 42px 120px rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(207, 161, 73, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.hnt-cup-upload-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(207, 161, 73, 0.12), transparent),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 34%);
    opacity: 0.72;
}

.hnt-cup-upload-card > * {
    position: relative;
    z-index: 1;
}

.hnt-cup-upload-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--accent-green);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hnt-cup-upload-kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-green);
    box-shadow: 0 0 14px var(--accent-green-glow);
}

.hnt-cup-upload-card h2 {
    margin: 0 0 10px;
    color: var(--text-main);
    font-size: 24px;
    line-height: 1.08;
    letter-spacing: -0.04em;
    font-weight: 950;
}

.hnt-cup-upload-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
}

.hnt-cup-upload-progress {
    height: 10px;
    margin: 22px 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.hnt-cup-upload-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-green));
    box-shadow: 0 0 18px var(--accent-primary-glow);
    transition: width 0.18s ease;
}

.hnt-cup-upload-card strong[data-hnt-cup-upload-percent] {
    display: block;
    color: var(--text-main);
    font-size: 36px;
    line-height: 1;
    letter-spacing: -0.06em;
    font-weight: 950;
}

.hnt-cup-upload-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.hnt-cup-upload-steps span {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.055);
    font-size: 12px;
    font-weight: 900;
}

.hnt-cup-upload-steps span.active,
.hnt-cup-upload-steps span.done {
    color: #141412;
    background: var(--accent-primary);
}

.hnt-cup-upload-modal.is-error .hnt-cup-upload-kicker,
.hnt-cup-upload-modal.is-error h2 {
    color: var(--accent-danger);
}

.hnt-cup-upload-modal.is-error .hnt-cup-upload-progress span {
    background: var(--accent-danger);
}

.hnt-cup-upload-modal.is-done .hnt-cup-upload-progress span {
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-green));
}

.hnt-cup-upload-close {
    margin-top: 22px;
}

@media (max-width: 768px) {
    .hnt-cup-upload-modal {
        align-items: flex-end;
        padding: 16px;
    }

    .hnt-cup-upload-card {
        padding: 24px 20px;
    }

    .hnt-cup-upload-card h2 {
        font-size: 21px;
    }
}

/* =========================================
   PATCH 619: Cup submit estimated check time and visible result summary
========================================= */
.hnt-cup-upload-meter {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-top: 4px;
}

.hnt-cup-upload-meter [data-hnt-cup-upload-time] {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 800;
    text-align: right;
}

.hnt-cup-upload-result[hidden] {
    display: none !important;
}

.hnt-cup-upload-result {
    margin-top: 20px;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid rgba(207, 161, 73, 0.18);
    background:
        radial-gradient(circle at 100% 0%, rgba(207, 161, 73, 0.10), transparent 35%),
        rgba(255, 255, 255, 0.045);
}

.hnt-cup-upload-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.hnt-cup-upload-result-head span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 11px;
    border-radius: 999px;
    color: #141412;
    background: var(--accent-primary);
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
}

.hnt-cup-upload-result-head strong {
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 900;
    text-align: right;
}

.hnt-cup-upload-result p {
    margin: 0 0 14px;
    color: #D8CDBE;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
}

.hnt-cup-upload-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.hnt-cup-upload-result-grid div {
    min-width: 0;
    padding: 11px 12px;
    border-radius: 10px;
    background: rgba(20, 20, 18, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.hnt-cup-upload-result-grid span {
    display: block;
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hnt-cup-upload-result-grid strong {
    display: block;
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.15;
    font-weight: 950;
}

.hnt-cup-upload-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.hnt-cup-upload-actions .btn-create {
    margin: 0;
}

.hnt-cup-upload-close {
    margin-top: 0;
    background: rgba(32, 32, 30, 0.92);
    color: var(--text-main);
    box-shadow: none;
}

.hnt-cup-upload-modal.is-review .hnt-cup-upload-result-head span {
    background: rgba(207, 161, 73, 0.18);
    color: var(--accent-primary);
    border: 1px solid rgba(207, 161, 73, 0.24);
}

.hnt-cup-upload-modal.is-error .hnt-cup-upload-result {
    border-color: rgba(184, 70, 58, 0.26);
    background:
        radial-gradient(circle at 100% 0%, rgba(184, 70, 58, 0.13), transparent 35%),
        rgba(255, 255, 255, 0.045);
}

.hnt-cup-upload-modal.is-error .hnt-cup-upload-result-head span {
    color: var(--text-main);
    background: var(--accent-danger);
}

@media (max-width: 520px) {
    .hnt-cup-upload-meter {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .hnt-cup-upload-meter [data-hnt-cup-upload-time] {
        text-align: left;
    }

    .hnt-cup-upload-result-head {
        flex-direction: column;
    }

    .hnt-cup-upload-result-head strong {
        text-align: left;
    }

    .hnt-cup-upload-result-grid {
        grid-template-columns: 1fr;
    }

    .hnt-cup-upload-actions .btn-create {
        width: 100%;
    }
}


/* PATCH 620: Cup submission screenshot trace links */
.cup-submission-row {
    grid-template-columns: 52px minmax(0, 1fr) 56px 56px 56px auto;
    gap: 12px;
}

.cup-submission-shot-link,
.cup-submission-shot-missing {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.cup-submission-shot-link {
    color: #141412;
    background: linear-gradient(135deg, var(--accent-primary), #B98B38);
    text-decoration: none;
    box-shadow: 0 10px 24px var(--accent-primary-glow);
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

.cup-submission-shot-link:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 12px 30px var(--accent-primary-glow);
}

.cup-submission-shot-link svg ,

.cup-submission-shot-link .ph {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.cup-submission-shot-missing {
    color: var(--text-muted);
    background: rgba(32, 32, 30, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

@media (max-width: 768px) {
    .cup-submission-row {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        align-items: center;
    }

    .cup-submission-row small {
        text-align: left;
    }

    .cup-submission-row .cup-submission-shot-link,
    .cup-submission-row .cup-submission-shot-missing {
        grid-column: 2 / -1;
        justify-self: start;
        margin-top: 2px;
    }
}

@media (max-width: 420px) {
    .cup-submission-shot-link span {
        display: none;
    }

    .cup-submission-shot-link,
    .cup-submission-shot-missing {
        width: 38px;
        min-width: 38px;
        padding: 0;
    }
}


/* PATCH 622: Cup submission file picker polish */
.hnt-cup-file-field {
    gap: 12px;
}

.hnt-cup-file-picker {
    position: relative;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(242, 232, 216, 0.10);
    background:
        radial-gradient(circle at 0% 0%, rgba(207, 161, 73, 0.11), transparent 34%),
        rgba(32, 32, 30, 0.62);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.hnt-cup-file-picker:hover,
.hnt-cup-file-picker:focus-within {
    border-color: rgba(207, 161, 73, 0.38);
    box-shadow: 0 0 0 4px rgba(207, 161, 73, 0.08);
    background:
        radial-gradient(circle at 0% 0%, rgba(207, 161, 73, 0.15), transparent 34%),
        rgba(32, 32, 30, 0.72);
}

.hnt-cup-file-picker:active {
    transform: translateY(1px);
}

.hnt-cup-file-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.hnt-cup-file-picker-button {
    flex: 0 0 auto;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 16px;
    border-radius: 10px;
    color: #141412;
    background: linear-gradient(135deg, var(--accent-primary), #B98B38);
    box-shadow: 0 10px 24px var(--accent-primary-glow);
    font-size: 13px;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
}

.hnt-cup-file-picker-button svg ,

.hnt-cup-file-picker-button .ph {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.hnt-cup-file-name {
    min-width: 0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hnt-cup-file-picker.has-file .hnt-cup-file-name {
    color: var(--text-main);
}

@media (max-width: 520px) {
    .hnt-cup-file-picker {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .hnt-cup-file-picker-button {
        width: 100%;
    }

    .hnt-cup-file-name {
        white-space: normal;
    }
}

/* =========================================
   PATCH 623: Profile preview v1 refinements
   Uses existing HNT/Lens profile classes, only fills gaps for the new Blade view.
========================================= */
.profile-window .profile-main .hnt-preview-feed-post {
    width: min(calc(100% - 64px), 720px);
    margin-left: auto;
    margin-right: auto;
}

.profile-window .profile-cover {
    background-color: var(--card-bg);
}

.profile-window .profile-cover-action,
.profile-window .profile-avatar-edit,
.profile-window .profile-level {
    text-decoration: none;
}

.profile-window .profile-actions form {
    margin: 0;
}

.profile-window .profile-post-card h2,
.profile-window .profile-about-section h2,
.profile-window .profile-friends-section h2,
.profile-window .profile-badges-section h2,
.profile-window .profile-trophies-section h2,
.profile-window .profile-contact-section h2 {
    margin: 0 0 18px;
    color: var(--text-main);
    font-size: 22px;
    line-height: 1.08;
    letter-spacing: -0.045em;
    font-weight: 950;
}

.profile-window .hnt-empty-state {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.55;
}

.profile-window .profile-compose-fake {
    border: 0;
    text-align: left;
    font-family: var(--font-main);
}

.profile-window .profile-compose-tools button {
    border-radius: 10px;
}

.profile-window .profile-members-grid,
.profile-window .profile-badge-grid {
    margin-top: 4px;
}

.profile-window .profile-friend-card {
    color: var(--text-main);
    text-decoration: none;
}

.profile-window .profile-badge-grid .badge-card {
    color: var(--text-main);
}

.profile-window .about-list a,
.profile-window .about-list em {
    color: var(--accent-primary);
    font-style: normal;
    text-decoration: none;
    font-weight: 850;
    text-align: right;
}

.profile-window .profile-load-wrap {
    width: min(calc(100% - 64px), 720px);
    margin-left: auto;
    margin-right: auto;
}

.profile-window .profile-pass-card + .widget {
    margin-top: 24px;
}

.profile-window .profile-albums-widget .album-grid span {
    border: 1px solid rgba(214, 168, 79, 0.16);
    background:
        radial-gradient(circle at 70% 20%, rgba(214, 168, 79, 0.18), transparent 35%),
        radial-gradient(circle at 22% 76%, rgba(155, 228, 71, 0.12), transparent 36%),
        rgba(32, 32, 30, 0.74);
}

@media (max-width: 768px) {
    .profile-window .profile-main .hnt-preview-feed-post,
    .profile-window .profile-load-wrap {
        width: calc(100% - 36px);
    }
}

/* =========================================
   PATCH 624: Profile sidebar rollback + media crop modal
   Keeps the default right sidebar and only improves the profile hero/media controls.
========================================= */
.profile-window .profile-identity-panel {
    align-items: flex-end;
}

.profile-window .profile-avatar-wrap {
    margin-bottom: 8px;
}

.profile-window .profile-avatar {
    width: 126px;
    height: 126px;
    border: 5px solid rgba(20, 20, 18, 0.96);
    box-shadow:
        0 0 0 4px rgba(155, 228, 71, 0.25),
        0 20px 42px rgba(0, 0, 0, 0.48);
}

.profile-window .profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.profile-window .profile-avatar-edit {
    top: 0;
    right: -2px;
    width: 38px;
    height: 38px;
    border: 2px solid rgba(20, 20, 18, 0.95);
    background: rgba(20, 20, 18, 0.96);
    color: var(--accent-green);
    box-shadow:
        0 0 0 1px rgba(155, 228, 71, 0.28),
        0 12px 26px rgba(0, 0, 0, 0.42);
}

.profile-window .profile-avatar-edit:hover,
.profile-window .profile-cover-action:hover {
    color: #141412;
    background: var(--accent-primary);
    transform: translateY(-1px);
}

.profile-window .profile-level {
    bottom: -22px;
    min-width: 74px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    color: var(--text-main);
    background: rgba(20, 20, 18, 0.96);
    border: 1px solid rgba(155, 228, 71, 0.36);
    font-size: 14px;
    font-weight: 950;
    letter-spacing: -0.02em;
}

.profile-window .profile-copy {
    padding-top: 80px;
}

.profile-window .profile-cover-action {
    border-radius: 10px;
    background: rgba(20, 20, 18, 0.84);
    color: var(--text-main);
    font-weight: 900;
}

.profile-media-file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.profile-crop-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 22%, rgba(155, 228, 71, 0.12), transparent 34%),
        radial-gradient(circle at 74% 78%, rgba(214, 168, 79, 0.11), transparent 34%),
        rgba(8, 8, 7, 0.72);
    backdrop-filter: blur(0) saturate(105%);
    -webkit-backdrop-filter: blur(0) saturate(105%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease, backdrop-filter 0.38s ease, -webkit-backdrop-filter 0.38s ease;
    z-index: 260;
}

.profile-crop-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    backdrop-filter: blur(18px) saturate(126%);
    -webkit-backdrop-filter: blur(18px) saturate(126%);
}

.profile-crop-modal {
    position: relative;
    width: min(720px, 100%);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(145deg, rgba(32, 32, 30, 0.96), rgba(20, 20, 18, 0.985)),
        var(--bg-app);
    box-shadow:
        0 42px 120px rgba(0, 0, 0, 0.64),
        0 0 0 1px rgba(155, 228, 71, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: translateY(34px) scale(0.94);
    opacity: 0;
    transition: transform 0.46s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
}

.profile-crop-backdrop.open .profile-crop-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.profile-crop-header,
.profile-crop-footer,
.profile-crop-body {
    position: relative;
    z-index: 2;
}

.profile-crop-header,
.profile-crop-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 24px 20px;
}

.profile-crop-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.profile-crop-header h2 {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.profile-crop-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.profile-crop-body {
    padding: 24px;
    display: grid;
    gap: 18px;
}

.profile-crop-frame {
    position: relative;
    width: 100%;
    min-height: 360px;
    border-radius: 10px;
    border: 1px solid rgba(155, 228, 71, 0.26);
    background: rgba(10, 11, 12, 0.54);
    overflow: hidden;
    cursor: grab;
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.10);
}

.profile-crop-frame.is-avatar {
    width: min(360px, 100%);
    min-height: auto;
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
}

.profile-crop-frame.is-cover {
    aspect-ratio: 1600 / 520;
    min-height: auto;
}

.profile-crop-frame.is-dragging {
    cursor: grabbing;
}

.profile-crop-frame img {
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    user-select: none;
    pointer-events: none;
    transform-origin: center center;
}

.profile-crop-zoom {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 900;
}

.profile-crop-zoom input {
    width: 100%;
    accent-color: var(--accent-primary);
}

.profile-crop-status {
    min-height: 20px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
}

.profile-crop-status[data-mode="success"] {
    color: var(--accent-green);
}

.profile-crop-status[data-mode="error"] {
    color: var(--accent-danger);
}

.profile-crop-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(12, 13, 11, 0.25);
}

.profile-crop-footer .btn-create,
.profile-crop-footer .btn-following {
    min-width: 140px;
}

@media (max-width: 768px) {
    .profile-window .profile-avatar {
        width: 118px;
        height: 118px;
    }

    .profile-window .profile-copy {
        padding-top: 12px;
    }

    .profile-crop-backdrop {
        align-items: flex-end;
        padding: 16px;
    }

    .profile-crop-modal {
        width: 100%;
        max-height: calc(100vh - 32px);
    }

    .profile-crop-header,
    .profile-crop-footer,
    .profile-crop-body {
        padding-left: 18px;
        padding-right: 18px;
    }

    .profile-crop-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .profile-crop-footer .btn-create,
    .profile-crop-footer .btn-following {
        width: 100%;
    }
}


/* =========================================
   PATCH 625: Profile crop start scale + badge icon fidelity
   Keep uploaded/admin badge graphics and make media controls easier to hit.
========================================= */
.profile-window .profile-cover-action {
    z-index: 24;
    min-width: 132px;
    min-height: 44px;
    pointer-events: auto;
}

.profile-window .profile-cover-action::before {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 16px;
}

.profile-crop-frame img {
    min-width: 0;
    min-height: 0;
    width: auto;
    height: auto;
}

.profile-crop-frame::after {
    content: 'Bild verschieben · Zoom anpassen';
    position: absolute;
    left: 14px;
    bottom: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(20, 20, 18, 0.72);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 850;
    pointer-events: none;
}

.profile-window .profile-admin-badge-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.profile-window .hnt-admin-badge-card {
    min-height: 0;
}

.profile-window .hnt-admin-badge-medallion {
    width: calc(100% - 34px);
    background:
        radial-gradient(circle at 50% 50%, rgba(20, 20, 18, 0.88) 0 47%, transparent 48%),
        radial-gradient(circle at 50% 50%, rgba(214, 168, 79, 0.26) 0 63%, rgba(20, 20, 18, 0.92) 64% 100%);
}

.profile-window .hnt-admin-badge-medallion img {
    position: relative;
    z-index: 2;
    width: 74%;
    height: 74%;
    object-fit: contain;
    border-radius: 0;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
}

.profile-window .hnt-admin-badge-medallion span {
    z-index: 2;
}

.profile-badge-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.profile-badge-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(214, 168, 79, 0.10);
    color: var(--accent-primary);
    font-size: 10px;
    font-weight: 900;
}

@media (max-width: 768px) {
    .profile-window .profile-admin-badge-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-window .profile-cover-action {
        min-width: 44px;
        font-size: 0;
        padding: 0;
    }
}


/* =========================================
   PATCH 626: Profile completion replaces hunter progress + preserve Crowns cosmetics
   - No profile composer inside profile timeline; global post button remains in sidebar.
   - Completion card is only rendered below 100%.
   - Crowns avatar/banner/username effects stay visible in the preview profile.
========================================= */
.profile-window .profile-completion-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.profile-window .profile-completion-card .progress-orb {
    background:
        radial-gradient(circle at center, var(--bg-app) 58%, transparent 60%),
        conic-gradient(var(--accent-primary) 0 var(--profile-completion, 0%), rgba(255,255,255,0.08) var(--profile-completion, 0%) 100%);
}

.profile-window .profile-completion-card .progress-pills {
    grid-column: 1 / -1;
}

.profile-window .profile-completion-pills span {
    color: var(--accent-primary);
    background: rgba(214, 168, 79, 0.10);
    border-color: rgba(214, 168, 79, 0.22);
    text-decoration: none;
}

.profile-window .profile-completion-pills span::before {
    content: '+';
    margin-right: 7px;
    color: var(--accent-primary);
    font-weight: 950;
}

.profile-window .profile-avatar.hnt-avatar-shell.hh-crowns-avatar-wrap {
    overflow: visible !important;
    isolation: isolate;
}

.profile-window .profile-avatar.hnt-avatar-shell.hh-crowns-avatar-wrap > img {
    position: relative;
    z-index: 3;
    overflow: hidden;
    border-radius: inherit;
}

.profile-window .profile-avatar.hnt-avatar-shell.hh-crowns-avatar-wrap::before,
.profile-window .profile-avatar.hnt-avatar-shell.hh-crowns-avatar-wrap::after {
    pointer-events: none;
}

.profile-window .profile-avatar-edit,
.profile-window .profile-level {
    z-index: 12;
}

.profile-window .profile-cover {
    position: relative;
    isolation: isolate;
}

.profile-window .profile-cover > * {
    position: relative;
    z-index: 2;
}

.profile-window .profile-cover[class*="hh-crowns-profile-banner-"]::after {
    border-radius: inherit;
}

.profile-window .profile-name-row h1[class*="hh-crowns-username-"] {
    display: inline-block;
}

.profile-window .profile-composer-card {
    display: none !important;
}

@media (max-width: 768px) {
    .profile-window .profile-completion-card {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .profile-window .profile-completion-card .progress-pills {
        justify-content: center;
    }
}

/* =========================================
   PATCH 627: Profile cover button layer + AJAX profile post loading
   Keep profile cover edit control in its intended bottom-right position and append more profile posts without a full page reload.
========================================= */
.profile-window .profile-cover > *:not(.profile-cover-action) {
    position: relative;
    z-index: 2;
}

.profile-window .profile-cover-action {
    position: absolute !important;
    top: auto !important;
    left: auto !important;
    right: 20px !important;
    bottom: 20px !important;
    z-index: 34 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.profile-window .profile-cover-action::before {
    z-index: -1;
}

.profile-posts-list {
    width: 100%;
}

.profile-window .profile-load-wrap .btn-create.is-loading {
    pointer-events: none;
    opacity: 0.72;
}

@media (max-width: 768px) {
    .profile-window .profile-cover-action {
        right: 14px !important;
        bottom: 14px !important;
    }
}

/* =========================================
   PATCH 629: Crowns preview pages
========================================= */
.hnt-crowns-alert {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(32, 32, 30, 0.72);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 800;
}

.hnt-crowns-alert.success {
    border-color: rgba(155, 228, 71, 0.22);
    background: rgba(155, 228, 71, 0.08);
    color: var(--accent-green);
}

.hnt-crowns-alert.warning {
    border-color: rgba(214, 168, 79, 0.22);
    background: rgba(214, 168, 79, 0.08);
    color: var(--accent-primary);
}

.hnt-crowns-empty {
    grid-column: 1 / -1;
    display: grid;
    gap: 16px;
    place-items: center;
    min-height: 180px;
    padding: 28px;
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    background: rgba(32, 32, 30, 0.44);
    color: var(--text-muted);
    text-align: center;
    font-size: 14px;
    font-weight: 800;
}

.btn-create[disabled],
.btn-create:disabled {
    cursor: not-allowed;
    opacity: 0.52;
    filter: grayscale(0.35);
    transform: none !important;
}

.shop-item-icon > span,
.inventory-icon {
    font-size: 25px;
    font-weight: 950;
    line-height: 1;
}

.inventory-icon {
    display: grid;
    place-items: center;
}

.crowns-history-list span small {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}

.hnt-crowns-pagination {
    margin-top: 22px;
    color: var(--text-muted);
    font-size: 13px;
}

.crowns-shop-grid form,
.inventory-grid form,
.inventory-active-grid form {
    margin: 0;
}

@media (max-width: 768px) {
    .crowns-action-bar {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .crowns-action-bar::-webkit-scrollbar {
        display: none;
    }
}

/* =========================================
   PATCH 628: Profile cover action top-right + subtle feed separators
   Re-applied here to preserve the accepted profile/feed polish after Crowns changes.
========================================= */
.profile-window .profile-cover::before,
.profile-window .profile-cover::after,
.profile-window .cover-noise {
    pointer-events: none !important;
}

.profile-window .profile-cover-action {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 80 !important;
    min-width: 132px;
    min-height: 48px;
    padding: 0 18px;
    pointer-events: auto !important;
    cursor: pointer;
}

.profile-window .profile-cover-action,
.profile-window .profile-cover-action * {
    pointer-events: auto !important;
}

.profile-window .profile-cover-action::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 14px;
    pointer-events: auto;
}

.hnt-preview-feed-post {
    position: relative;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.hnt-preview-feed-post::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(242, 232, 216, 0.10), transparent);
}

.hnt-preview-feed-post:last-child::after {
    display: none;
}

@media (max-width: 768px) {
    .profile-window .profile-cover-action {
        top: 14px !important;
        right: 14px !important;
        min-width: 46px;
        padding: 0;
        font-size: 0;
    }
}

/* =========================================
   PATCH 630: Crowns inventory card polish
   Make inventory cosmetics easier to scan and closer to the new HNT/Lens card language.
========================================= */
.inventory-grid-polished {
    gap: 18px;
}

.inventory-item-card-polished {
    position: relative;
    min-height: 0;
    padding: 22px;
    border-radius: 14px;
    border: 1px solid rgba(242, 232, 216, 0.08);
    background:
        radial-gradient(circle at 100% 0%, rgba(155, 228, 71, 0.055), transparent 28%),
        radial-gradient(circle at 100% 100%, rgba(214, 168, 79, 0.12), transparent 38%),
        linear-gradient(145deg, rgba(16, 17, 15, 0.94), rgba(24, 23, 19, 0.74));
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

.inventory-item-card-polished::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(214, 168, 79, 0.88), rgba(155, 228, 71, 0.28), transparent);
    opacity: 0.65;
    pointer-events: none;
}

.inventory-item-card-polished::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -44px;
    width: 170px;
    height: 130px;
    border-radius: 50%;
    background: rgba(214, 168, 79, 0.09);
    filter: blur(26px);
    pointer-events: none;
}

.inventory-item-card-polished.is-equipped {
    border-color: rgba(155, 228, 71, 0.22);
    box-shadow: 0 20px 58px rgba(155, 228, 71, 0.055), 0 18px 50px rgba(0, 0, 0, 0.18);
}

.inventory-item-card-polished.is-equipped::before {
    background: linear-gradient(180deg, rgba(155, 228, 71, 0.95), rgba(214, 168, 79, 0.40), transparent);
    opacity: 0.82;
}

.inventory-card-top,
.inventory-item-card-polished .shop-item-description,
.inventory-card-bottom {
    position: relative;
    z-index: 1;
}

.inventory-card-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.inventory-card-title {
    min-width: 0;
    flex: 1 1 auto;
}

.inventory-item-card-polished .inventory-icon {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: 14px;
    border: 1px solid rgba(242, 232, 216, 0.08);
    background:
        radial-gradient(circle at 45% 35%, rgba(242, 232, 216, 0.08), transparent 45%),
        rgba(8, 9, 8, 0.50);
    color: var(--text-main);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.20), 0 14px 34px rgba(0, 0, 0, 0.18);
    font-size: 28px;
}

.inventory-item-card-polished .inventory-badges {
    margin: 0 0 10px;
    gap: 8px;
}

.inventory-item-card-polished .shop-rarity,
.inventory-item-card-polished .inventory-active-badge {
    min-height: 26px;
    padding: 0 12px;
    font-size: 10px;
    letter-spacing: 0.035em;
}

.inventory-item-card-polished h2 {
    max-width: 440px;
    margin: 0 0 6px;
    color: var(--text-main);
    font-size: clamp(20px, 1.55vw, 28px);
    line-height: 1.03;
    letter-spacing: -0.055em;
    font-weight: 950;
}

.inventory-item-card-polished .shop-item-type {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 850;
}

.inventory-item-card-polished .shop-item-description {
    min-height: 0;
    max-width: 620px;
    margin: 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.5;
    font-weight: 750;
}

.inventory-card-bottom {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(242, 232, 216, 0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.inventory-item-card-polished .inventory-date,
.inventory-card-slot {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.25;
    font-weight: 800;
}

.inventory-card-slot {
    max-width: 46%;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inventory-card-form {
    flex: 0 0 auto;
    margin: 0;
}

.inventory-card-form .inventory-card-action {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 13px;
    box-shadow: 0 14px 38px rgba(214, 168, 79, 0.16);
}

.inventory-card-form .inventory-card-action.danger {
    box-shadow: 0 14px 38px rgba(184, 70, 58, 0.16);
}

@media (max-width: 1100px) {
    .inventory-grid-polished {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .inventory-item-card-polished {
        padding: 18px;
        border-radius: 12px;
    }

    .inventory-card-top {
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 14px;
    }

    .inventory-item-card-polished .inventory-icon {
        width: 58px;
        height: 58px;
    }

    .inventory-card-form {
        grid-column: 1 / -1;
        width: 100%;
    }

    .inventory-card-form .inventory-card-action {
        width: 100%;
        justify-content: center;
    }

    .inventory-card-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .inventory-card-slot {
        max-width: 100%;
    }
}


/* =========================================
   PATCH 631: Crowns inventory cards back to shop card style
   Inventory cards now reuse the shop card structure instead of the heavier custom layout.
========================================= */
.inventory-shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.inventory-shop-card {
    min-height: 232px;
}

.inventory-shop-card.is-equipped {
    border-color: rgba(155, 228, 71, 0.20);

}

.inventory-shop-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.inventory-shop-card .inventory-active-badge {
    min-height: 24px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: #9BE447;
    background: rgba(155, 228, 71, 0.12);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.inventory-shop-footer .inventory-date {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 850;
}

.inventory-shop-footer .btn-create {
    min-height: 34px;
    padding: 0 14px;
    font-size: 12px;
}

.inventory-shop-footer .btn-create.danger {
    color: var(--text-main);
    background: rgba(184, 70, 58, 0.86);
    box-shadow: 0 10px 30px rgba(184, 70, 58, 0.18);
}

.inventory-shop-footer .btn-create.danger:hover {
    background: var(--accent-danger);
}

.inventory-passive-pill {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.07);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .inventory-shop-grid {
        grid-template-columns: 1fr;
    }

    .inventory-shop-card {
        min-height: 0;
        padding: 18px;
    }
}

@media (max-width: 420px) {
    .inventory-shop-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================
   LFG PREVIEW OVERVIEW - real data polish
========================================= */
.lfg-toolbar .btn-create {
    min-height: 38px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 13px;
    white-space: nowrap;
}

.lfg-alert {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
}

.lfg-alert.success {
    color: #9BE447;
    background: rgba(155, 228, 71, 0.10);
    border: 1px solid rgba(155, 228, 71, 0.18);
}

.lfg-alert.warning {
    color: #f2c7bd;
    background: rgba(184, 70, 58, 0.12);
    border: 1px solid rgba(184, 70, 58, 0.22);
}

.lfg-search-form {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
}

.lfg-search-input {
    min-width: 0;
    flex: 1;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    background: rgba(32, 32, 30, 0.76);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.lfg-search-input:focus-within {
    border-color: rgba(155, 228, 71, 0.26);
    box-shadow: 0 0 0 3px rgba(155, 228, 71, 0.08);
}

.lfg-search-input svg ,

.lfg-search-input .ph {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.lfg-search-input input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 14px;
    font-weight: 750;
}

.lfg-search-input input::placeholder {
    color: rgba(167, 156, 142, 0.72);
}

.lfg-avatar-link {
    display: inline-flex;
    flex: 0 0 auto;
    border-radius: 50%;
    text-decoration: none;
}

.lfg-user-copy {
    min-width: 0;
}

.lfg-user-copy a {
    color: inherit;
    text-decoration: none;
}

.lfg-user-copy a:hover h2 {
    color: var(--accent-green);
}

.lfg-card-body {
    grid-column: 1 / -1;
    min-width: 0;
}

.lfg-card-body p {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.55;
}

.lfg-card-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.lfg-card-stats span {
    min-height: 25px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.055);
    font-size: 11px;
    font-weight: 850;
}

.lfg-status-pill.open {
    color: #9BE447;
    background: rgba(155, 228, 71, 0.12);
}

.lfg-status-pill.full,
.lfg-status-pill.closed {
    color: #f2c7bd;
    background: rgba(184, 70, 58, 0.13);
}

.lfg-empty-card {
    padding: 34px 28px;
    border-radius: 18px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background:
        radial-gradient(circle at 50% 0%, rgba(155, 228, 71, 0.10), transparent 34%),
        rgba(32, 32, 30, 0.74);
}

.lfg-empty-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 16px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: var(--accent-green);
    background: rgba(155, 228, 71, 0.10);
    font-size: 28px;
    font-weight: 900;
}

.lfg-empty-card h1 {
    margin: 0 0 8px;
    color: var(--text-main);
    font-size: 24px;
    line-height: 1.1;
}

.lfg-empty-card p {
    max-width: 420px;
    margin: 0 auto 18px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 650;
}

.lfg-empty-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lfg-load-more-wrap {
    display: flex;
    justify-content: center;
    padding: 24px 0 6px;
}

.lfg-load-more-btn.is-loading {
    opacity: 0.72;
    pointer-events: none;
}

@media (max-width: 768px) {
    .lfg-search-form {
        align-items: stretch;
        flex-direction: column;
    }

    .lfg-search-form .btn-create {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .lfg-toolbar-top {
        flex-direction: column;
    }

    .lfg-toolbar-actions,
    .lfg-toolbar-actions .btn-create {
        width: 100%;
    }

    .lfg-toolbar-actions {
        align-items: stretch;
    }

    .lfg-sort-btn {
        width: 100%;
    }
}

/* Patch 633: LFG detail preview polish */
.lfg-detail-cover[style*="--lfg-cover"] {
    background:
        radial-gradient(circle at 16% 20%, rgba(155, 228, 71, 0.12), transparent 28%),
        radial-gradient(circle at 82% 12%, rgba(214, 168, 79, 0.16), transparent 26%),
        linear-gradient(180deg, rgba(14, 15, 18, 0.16), rgba(14, 15, 18, 0.86)),
        var(--lfg-cover) center / cover no-repeat;
}

.lfg-title-center p {
    margin: -4px auto 0;
    max-width: 520px;
    color: rgba(242, 232, 216, 0.72);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.lfg-status-pills .open {
    color: #9BE447;
    background: rgba(155, 228, 71, 0.13);
}

.lfg-status-pills .full,
.lfg-status-pills .closed {
    color: #f2c7bd;
    background: rgba(184, 70, 58, 0.14);
}

.lfg-owner,
.lfg-slot,
.lfg-application-user {
    color: inherit;
    text-decoration: none;
}

.lfg-owner:hover strong,
.lfg-slot:hover strong,
.lfg-application-user:hover strong {
    color: var(--accent-green);
}

.lfg-owner > span,
.lfg-slot > span,
.lfg-application-user > span {
    min-width: 0;
}

.lfg-owner-action-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.lfg-owner-action-row .btn-create,
.lfg-owner-action-row .btn-following {
    min-height: 44px;
    padding-inline: 18px;
}

.lfg-delete-form {
    display: inline-flex;
    margin: 0;
}

.lfg-owner-action-row .lfg-delete-btn {
    border: 1px solid rgba(184, 70, 58, 0.35);
    color: #F0C5BD;
    background: rgba(184, 70, 58, 0.14);
}

.lfg-owner-action-row .lfg-delete-btn:hover {
    background: rgba(184, 70, 58, 0.22);
}

.lfg-state-label {
    margin-bottom: 12px !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.lfg-state-box {
    padding: 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(20, 20, 18, 0.48);
    display: grid;
    gap: 7px;
}

.lfg-state-box strong {
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.25;
}

.lfg-state-box span {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
}

.lfg-application-list {
    display: grid;
    gap: 12px;
}

.lfg-application-card {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(26, 26, 24, 0.42);
}

.lfg-application-card.pending {
    border-color: rgba(214, 168, 79, 0.22);
    box-shadow: inset 0 0 0 1px rgba(214, 168, 79, 0.05);
}

.lfg-application-user {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.lfg-application-user .avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
}

.lfg-application-user strong {
    display: block;
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.25;
}

.lfg-application-user span span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 750;
    margin-top: 3px;
}

.lfg-application-card p {
    margin: 0;
    color: #D8CDBE;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
}

.lfg-application-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lfg-icon-action {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.075);
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease;
}

.lfg-icon-action svg ,

.lfg-icon-action .ph {
    width: 18px;
    height: 18px;
}

.lfg-icon-action:hover {
    transform: translateY(-1px);
}

.lfg-icon-action.accept {
    color: #141412;
    background: var(--accent-green);
}

.lfg-icon-action.reject {
    background: rgba(184, 70, 58, 0.82);
}

@media (max-width: 768px) {
    .lfg-title-center p {
        margin-left: 0;
        margin-right: 0;
        font-size: 13px;
    }

    .lfg-owner-action-row,
    .lfg-owner-action-row .btn-create,
    .lfg-owner-action-row .btn-following,
    .lfg-owner-action-row .lfg-delete-form {
        width: 100%;
    }
}


/* =========================================
   PATCH 634 - LFG detail layout + report trigger fix
========================================= */
.lfg-info-panel {
    position: sticky;
    top: 22px;
}

.lfg-detail-action-wide {
    margin-top: 18px;
    overflow: visible;
}

.lfg-detail-action-wide > h2 {
    margin-bottom: 14px;
}

.lfg-detail-action-wide > p {
    max-width: 780px;
}

.lfg-detail-action-wide form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
    gap: 14px 18px;
    align-items: end;
    margin-top: 18px;
}

.lfg-detail-action-wide form label {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.lfg-detail-action-wide form textarea {
    grid-column: 1 / 2;
    min-height: 92px;
}

.lfg-detail-action-wide form .lfg-apply-btn {
    grid-column: 2 / 3;
    align-self: stretch;
    min-height: 56px;
    margin-top: 0;
}

.lfg-detail-action-wide .lfg-owner-action-row {
    max-width: 520px;
}

.lfg-detail-action-wide .lfg-state-box {
    max-width: 720px;
}

.lfg-report-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1200px) {
    .lfg-info-panel {
        position: static;
    }
}

@media (max-width: 768px) {
    .lfg-detail-action-wide form {
        grid-template-columns: 1fr;
    }

    .lfg-detail-action-wide form textarea,
    .lfg-detail-action-wide form .lfg-apply-btn {
        grid-column: 1 / -1;
    }
}


/* =========================================
   PATCH 635 - LFG apply form without card shell
========================================= */
.lfg-detail-action-wide {
    margin-top: 30px;
    padding: 8px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.lfg-detail-action-wide > h2 {
    position: relative;
    display: inline-flex;
    padding-bottom: 10px;
    margin: 0 0 22px;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.lfg-detail-action-wide > h2::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 2px dashed rgba(155, 228, 71, 0.56);
    filter: drop-shadow(0 0 8px rgba(155, 228, 71, 0.18));
}

.lfg-detail-action-wide > p,
.lfg-detail-action-wide .lfg-state-label {
    color: #D8CDBE;
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 20px;
    max-width: 780px;
}

.lfg-detail-action-wide form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
    gap: 14px 18px;
    align-items: end;
    margin-top: 0;
}

.lfg-detail-action-wide form label {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.lfg-detail-action-wide form textarea {
    grid-column: 1 / 2;
    min-height: 92px;
}

.lfg-detail-action-wide form .lfg-apply-btn {
    grid-column: 2 / 3;
    align-self: stretch;
    min-height: 56px;
    margin-top: 0;
}

.lfg-detail-action-wide .lfg-owner-action-row,
.lfg-detail-action-wide .lfg-state-box {
    max-width: 720px;
}

@media (max-width: 768px) {
    .lfg-detail-action-wide form {
        grid-template-columns: 1fr;
    }

    .lfg-detail-action-wide form textarea,
    .lfg-detail-action-wide form .lfg-apply-btn {
        grid-column: 1 / -1;
    }
}

/* Patch 636: LFG create wizard modal + LFG cover upload */
.hnt-lfg-create-backdrop {
    position: fixed;
    inset: 0;
    z-index: 180;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(18px);
}

.hnt-lfg-create-backdrop.open {
    display: flex;
}

.hnt-lfg-create-modal {
    width: min(1120px, calc(100vw - 48px));
    max-height: min(860px, calc(100vh - 48px));
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background:
        radial-gradient(circle at 84% 0%, rgba(155, 228, 71, 0.16), transparent 34%),
        radial-gradient(circle at 8% 100%, rgba(214, 168, 79, 0.13), transparent 30%),
        rgba(20, 20, 18, 0.96);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.52);
}

.hnt-lfg-create-modal form {
    min-height: 680px;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.hnt-lfg-create-handle {
    width: 72px;
    height: 6px;
    margin: 16px auto 0;
    border-radius: 999px;
    background: rgba(242, 232, 216, 0.18);
}

.hnt-lfg-create-header {
    min-height: 88px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto 52px;
    align-items: center;
    gap: 14px;
    padding: 18px 24px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hnt-lfg-create-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-green);
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hnt-lfg-create-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
}

.hnt-lfg-create-header h2 {
    margin: 6px 0 0;
    color: var(--text-main);
    font-size: clamp(28px, 3.1vw, 42px);
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 900;
}

.hnt-lfg-create-back,
.hnt-lfg-create-next-link {
    border: 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.hnt-lfg-create-back {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.hnt-lfg-create-back[hidden],
.hnt-lfg-create-next-link[hidden] {
    display: none;
}

.hnt-lfg-create-back svg ,

.hnt-lfg-create-back .ph {
    width: 22px;
    height: 22px;
}

.hnt-lfg-create-next-link {
    color: var(--accent-gold);
    min-height: 42px;
    padding: 0 10px;
}

.hnt-lfg-create-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hnt-lfg-create-progress span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #A79C8E;
    font-size: 12px;
    font-weight: 900;
}

.hnt-lfg-create-progress span.is-active {
    color: #141412;
    background: var(--accent-green);
    box-shadow: 0 10px 28px rgba(155, 228, 71, 0.18);
}

.hnt-lfg-create-progress span.is-done {
    color: var(--accent-gold);
    background: rgba(214, 168, 79, 0.13);
}

.hnt-lfg-create-body {
    min-height: 0;
    overflow: auto;
    padding: 28px 32px 34px;
}

.hnt-lfg-create-step[hidden] {
    display: none;
}

.hnt-lfg-upload-stage {
    min-height: 430px;
    display: grid;
    place-items: center;
    position: relative;
}

.hnt-lfg-cover-picker {
    width: min(460px, 100%);
    min-height: 250px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 16px;
    padding: 32px;
    border-radius: 18px;
    border: 1px dashed rgba(242, 232, 216, 0.20);
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-main);
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.hnt-lfg-cover-picker:hover {
    transform: translateY(-1px);
    border-color: rgba(155, 228, 71, 0.46);
    background: rgba(155, 228, 71, 0.07);
}

.hnt-lfg-cover-picker strong {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 12px;
    background: var(--accent-gold);
    color: #141412;
    font-size: 16px;
    font-weight: 900;
}

.hnt-lfg-cover-picker small {
    max-width: 320px;
    color: #A79C8E;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 700;
}

.hnt-lfg-cover-icon {
    width: 78px;
    height: 78px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #A79C8E;
}

.hnt-lfg-cover-icon svg ,

.hnt-lfg-cover-icon .ph {
    width: 100%;
    height: 100%;
}

.hnt-lfg-cover-preview {
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(155, 228, 71, 0.30);
    background: rgba(0,0,0,.28);
}

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

.hnt-lfg-cover-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.44));
    pointer-events: none;
}

.hnt-lfg-cover-preview button {
    position: absolute;
    right: 18px;
    top: 18px;
    z-index: 2;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 18, .82);
    color: var(--text-main);
    cursor: pointer;
}

.hnt-lfg-cover-preview button svg ,

.hnt-lfg-cover-preview button .ph {
    width: 22px;
    height: 22px;
}

.hnt-lfg-create-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.hnt-lfg-create-grid.one {
    grid-template-columns: 1fr;
}

.hnt-lfg-field {
    display: grid;
    gap: 9px;
}

.hnt-lfg-field span,
.hnt-lfg-check span {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 900;
}

.hnt-lfg-field input,
.hnt-lfg-field textarea,
.hnt-lfg-field select {
    width: 100%;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    color: var(--text-main);
    font: inherit;
    font-weight: 800;
    outline: none;
    padding: 16px 18px;
}

.hnt-lfg-field textarea {
    min-height: 260px;
    resize: vertical;
}

.hnt-lfg-field input:focus,
.hnt-lfg-field textarea:focus,
.hnt-lfg-field select:focus {
    border-color: rgba(155, 228, 71, 0.54);
    box-shadow: 0 0 0 4px rgba(155, 228, 71, 0.10);
}

.hnt-lfg-check {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.09);
}

.hnt-lfg-check input {
    width: 20px;
    height: 20px;
    accent-color: var(--accent-green);
}

.hnt-lfg-create-footer {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(20, 20, 18, 0.70);
}

.hnt-lfg-create-footer .btn-create,
.hnt-lfg-create-footer .btn-following {
    min-width: 168px;
}

@media (max-width: 900px) {
    .hnt-lfg-create-modal {
        width: min(720px, calc(100vw - 24px));
        max-height: calc(100vh - 24px);
    }

    .hnt-lfg-create-modal form {
        min-height: 0;
    }

    .hnt-lfg-create-header {
        grid-template-columns: 46px minmax(0, 1fr) auto;
    }

    .hnt-lfg-create-header .hnt-lfg-create-close {
        display: none;
    }

    .hnt-lfg-create-grid {
        grid-template-columns: 1fr;
    }

    .hnt-lfg-upload-stage {
        min-height: 360px;
    }
}

@media (max-width: 560px) {
    .hnt-lfg-create-backdrop {
        padding: 0;
    }

    .hnt-lfg-create-modal {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .hnt-lfg-create-progress {
        overflow-x: auto;
    }

    .hnt-lfg-create-body {
        padding: 20px 18px 24px;
    }

    .hnt-lfg-create-footer {
        padding: 16px 18px;
        flex-wrap: wrap;
    }

    .hnt-lfg-create-footer .btn-create,
    .hnt-lfg-create-footer .btn-following {
        min-width: 0;
        flex: 1 1 140px;
    }
}


/* Patch 637: LFG create wizard sizing + final-step submit + composer close hover parity */
.hnt-lfg-create-modal {
    width: min(560px, calc(100vw - 32px));
    max-height: min(760px, calc(100vh - 32px));
    border-radius: 10px;
}

.hnt-lfg-create-modal form {
    min-height: 0;
    max-height: inherit;
}

.hnt-lfg-create-header {
    min-height: 82px;
    grid-template-columns: 42px minmax(0, 1fr) auto 38px;
    gap: 10px;
    padding: 18px 24px;
}

.hnt-lfg-create-header h2 {
    font-size: 28px;
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.hnt-lfg-create-kicker {
    font-size: 11px;
}

.hnt-lfg-create-back {
    width: 36px;
    height: 36px;
}

.hnt-lfg-create-next-link {
    min-height: 34px;
    padding: 0 6px;
    font-size: 13px;
}

.hnt-lfg-create-close.modal-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: #D8CDBE;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.hnt-lfg-create-close.modal-close:hover {
    transform: rotate(90deg) scale(1.05);
    background: rgba(155, 228, 71, 0.13);
    color: var(--accent-green);
}

.hnt-lfg-create-progress {
    padding: 14px 24px;
}

.hnt-lfg-create-body {
    padding: 22px 24px 24px;
}

.hnt-lfg-upload-stage {
    min-height: 300px;
}

.hnt-lfg-cover-picker {
    min-height: 230px;
    padding: 26px;
}

.hnt-lfg-cover-icon {
    width: 58px;
    height: 58px;
}

.hnt-lfg-cover-preview {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.hnt-lfg-create-grid,
.hnt-lfg-create-grid.one {
    grid-template-columns: 1fr;
}

.hnt-lfg-field textarea {
    min-height: 180px;
}

.hnt-lfg-create-footer {
    min-height: 78px;
    padding: 16px 24px;
}

.hnt-lfg-create-footer .btn-create,
.hnt-lfg-create-footer .btn-following {
    min-width: 132px;
}

.hnt-lfg-create-submit[hidden],
.hnt-lfg-create-next-link[hidden],
.hnt-lfg-create-back[hidden],
.hnt-lfg-create-step[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    .hnt-lfg-create-modal {
        width: min(560px, calc(100vw - 24px));
        max-height: calc(100vh - 24px);
    }

    .hnt-lfg-create-header {
        grid-template-columns: 42px minmax(0, 1fr) auto 38px;
    }

    .hnt-lfg-create-header .hnt-lfg-create-close {
        display: inline-flex;
    }
}

@media (max-width: 560px) {
    .hnt-lfg-create-modal {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .hnt-lfg-create-header {
        padding: 16px 18px;
        grid-template-columns: 38px minmax(0, 1fr) auto 34px;
    }

    .hnt-lfg-create-footer {
        padding: 14px 18px;
    }
}

/* Patch 638: LFG create wizard upload/spacing/select/close polish */
.hnt-lfg-create-close.modal-close {
    position: relative;
    z-index: 6;
    margin-right: -8px;
}

.hnt-lfg-create-progress {
    position: relative;
    z-index: 3;
    flex-wrap: wrap;
    row-gap: 8px;
}

.hnt-lfg-create-body {
    padding-top: 30px;
}

.hnt-lfg-create-step {
    padding-top: 2px;
}

.hnt-lfg-upload-stage.has-cover .hnt-lfg-cover-picker,
.hnt-lfg-cover-picker[hidden] {
    display: none !important;
}

.hnt-lfg-upload-stage.has-cover {
    align-items: stretch;
}

.hnt-lfg-field select {
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
        rgba(32, 32, 30, 0.76);
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 800;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.hnt-lfg-field select option {
    background: #181A16;
    color: var(--text-main);
}

.hnt-lfg-field select:focus {
    border-color: rgba(155, 228, 71, 0.42);
    box-shadow: 0 0 0 4px rgba(155, 228, 71, 0.08);
}

@media (max-width: 560px) {
    .hnt-lfg-create-close.modal-close {
        margin-right: -4px;
    }

    .hnt-lfg-create-body {
        padding-top: 26px;
    }
}

/* =========================================
   PATCH 647: CUP IDEAS PAGE - Preview/Lens style
   Mirrors cup-feedback structure without touching controllers/routes.
========================================= */
.cup-ideas-main {
    padding: 32px 0 44px;
}

.cup-ideas-shell {
    width: min(calc(100% - 64px), 680px);
}

.cup-ideas-hero {
    min-height: 276px;
}

.cup-ideas-hero::after {
    content: "!";
    right: 34px;
    bottom: -58px;
    color: rgba(155, 228, 71, 0.052);
    font-size: 190px;
    font-weight: 950;
    line-height: 1;
    background: none;
}

.cup-ideas-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
}

.cup-ideas-hero-stats div {
    min-height: 72px;
    padding: 14px 15px;
    border-radius: 10px;
    border: 1px solid rgba(155, 228, 71, 0.12);
    background: rgba(8, 9, 12, 0.46);
}

.cup-ideas-hero-stats strong {
    display: block;
    color: var(--text-main);
    font-size: 27px;
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 950;
}

.cup-ideas-hero-stats span {
    display: block;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cup-ideas-tabs {
    margin-bottom: 26px;
}

.cup-ideas-filter-section {
    margin-bottom: 28px;
}

.cup-ideas-filter-form {
    align-items: end;
}

.cup-ideas-filter-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.cup-ideas-filter-actions .btn-following,
.cup-ideas-login-box .btn-following {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 10px;
    text-decoration: none;
    padding: 0 16px;
}

.cup-ideas-sort-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.cup-ideas-sort-row a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(32, 32, 30, 0.62);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
}

.cup-ideas-sort-row a.active,
.cup-ideas-sort-row a:hover {
    color: #141412;
    background: var(--accent-green);
    border-color: rgba(155, 228, 71, 0.44);
    box-shadow: 0 8px 22px var(--accent-green-glow);
}

.cup-ideas-list {
    display: grid;
    gap: 14px;
    margin-bottom: 30px;
}

.cup-idea-card {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 18px;
    padding: 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 100% 0%, rgba(155, 228, 71, 0.075), transparent 34%),
        rgba(19, 20, 25, 0.68);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.16);
}

.cup-idea-card.is-featured {
    border-color: rgba(214, 168, 79, 0.25);
    background:
        radial-gradient(circle at 96% 8%, rgba(214, 168, 79, 0.13), transparent 34%),
        radial-gradient(circle at 0% 0%, rgba(155, 228, 71, 0.075), transparent 32%),
        rgba(19, 20, 25, 0.72);
}

.cup-idea-vote form {
    margin: 0;
}

.cup-idea-vote button,
.cup-idea-vote a {
    width: 74px;
    min-height: 88px;
    border: 1px solid rgba(155, 228, 71, 0.14);
    border-radius: 10px;
    background: rgba(8, 9, 12, 0.46);
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    font-family: var(--font-main);
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.cup-idea-vote button:hover,
.cup-idea-vote a:hover,
.cup-idea-vote button.active {
    transform: translateY(-1px);
    border-color: rgba(155, 228, 71, 0.36);
    background: rgba(155, 228, 71, 0.10);
    color: var(--accent-green);
}

.cup-idea-vote span {
    font-size: 16px;
    line-height: 1;
}

.cup-idea-vote strong {
    color: var(--text-main);
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 950;
}

.cup-idea-vote small {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cup-idea-body {
    min-width: 0;
}

.cup-idea-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.cup-idea-meta span {
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
}

.cup-idea-meta .status.planned,
.cup-idea-meta .status.coming-soon,
.cup-idea-meta .status.implemented,
.cup-idea-meta .featured {
    color: var(--accent-primary);
    background: rgba(214, 168, 79, 0.12);
}

.cup-idea-meta .status.reviewing,
.cup-idea-meta .status.new {
    color: var(--accent-green);
    background: rgba(155, 228, 71, 0.10);
}

.cup-idea-body h2 {
    margin: 0 0 8px;
    color: var(--text-main);
    font-size: 20px;
    line-height: 1.12;
    letter-spacing: -0.045em;
    font-weight: 950;
}

.cup-idea-body p {
    margin: 0;
    color: #D8CDBE;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 650;
}

.cup-idea-author {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 15px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.cup-idea-author img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--tag-bg);
}

.cup-idea-author small {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
}

.cup-ideas-create-section {
    margin-top: 32px;
}

.cup-ideas-login-box {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cup-ideas-create-form .feedback-form-grid.two {
    gap: 16px;
}

@media (max-width: 768px) {
    .cup-ideas-main {
        width: 100%;
        max-width: 100vw;
        padding: 16px 0 28px;
    }

    .cup-ideas-shell {
        width: 100%;
        max-width: 620px;
        padding: 0 16px;
        min-width: 0;
    }

    .cup-ideas-hero-stats {
        grid-template-columns: 1fr;
    }

    .cup-ideas-filter-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .cup-ideas-filter-actions .btn-create,
    .cup-ideas-filter-actions .btn-following,
    .cup-ideas-login-box .btn-create,
    .cup-ideas-login-box .btn-following {
        width: 100%;
    }

    .cup-idea-card {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px;
    }

    .cup-idea-vote button,
    .cup-idea-vote a {
        width: 100%;
        min-height: 48px;
        flex-direction: row;
    }

    .cup-idea-author {
        flex-wrap: wrap;
    }

    .cup-idea-author small {
        width: 100%;
        margin-left: 37px;
    }
}

@media (max-width: 420px) {
    .cup-ideas-shell {
        padding-left: 14px;
        padding-right: 14px;
    }

    .cup-idea-body h2 {
        font-size: 18px;
    }
}

/* Patch 649: Profile edit preview polish using existing Lens form language */
.profile-edit-status {
    width: min(calc(100% - 64px), 680px);
    margin: 0 auto 16px;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 850;
}

.profile-edit-status-success {
    border: 1px solid rgba(155, 228, 71, 0.24);
    background: rgba(155, 228, 71, 0.09);
    color: var(--accent-green);
}

.profile-edit-status-danger,
.profile-edit-error {
    border: 1px solid rgba(184, 70, 58, 0.24);
    background: rgba(184, 70, 58, 0.10);
    color: #F2B7AF;
}

.profile-edit-error {
    display: inline-flex;
    margin-top: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 800;
}

.profile-edit-section-title {
    display: grid;
    gap: 6px;
    margin-bottom: 8px;
}

.profile-edit-section-spaced {
    padding-top: 14px;
    margin-top: 10px;
}

.profile-edit-section-title span {
    color: var(--accent-green);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-edit-section-title h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 22px;
    line-height: 1.06;
    letter-spacing: -0.045em;
    font-weight: 950;
}

.profile-edit-section-title p {
    max-width: 560px;
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
}

.profile-edit-media-preview {
    display: grid;
    gap: 12px;
}

.profile-edit-cover-preview {
    min-height: 142px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 16px;
    overflow: hidden;
}

.profile-edit-cover-preview span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(20, 20, 18, 0.74);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 900;
    backdrop-filter: blur(10px);
}

.profile-edit-file-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-edit-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.profile-edit-file-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.profile-edit-checks {
    grid-template-columns: 1fr;
    gap: 0;
}

.profile-edit-save-card {
    display: grid;
    gap: 7px;
    margin-top: 8px;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid rgba(155, 228, 71, 0.16);
    background: rgba(155, 228, 71, 0.075);
}

.profile-edit-save-card strong {
    color: var(--text-main);
    font-size: 15px;
    font-weight: 950;
}

.profile-edit-save-card span {
    color: #D8CDBE;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
}

@media (max-width: 768px) {
    .profile-edit-status {
        width: 100%;
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
    }

    .profile-edit-file-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

.profile-edit-head .edit-avatar {
    object-fit: cover;
    display: block;
}

/* Patch 650: Profile edit real tabs + lower content without visual cards */
.profile-edit-content-panel {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 10px;
}

.profile-edit-tabs {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
    min-height: 74px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.profile-edit-tabs::-webkit-scrollbar {
    display: none;
}

.profile-edit-tabs button {
    position: relative;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    padding: 25px 0 23px;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.profile-edit-tabs button:hover,
.profile-edit-tabs button.active {
    color: var(--text-main);
}

.profile-edit-tabs button.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 10px 10px 0 0;
    background: var(--accent-green);
    box-shadow: 0 0 18px rgba(155, 228, 71, 0.35);
}

.profile-edit-tab-panel[hidden] {
    display: none !important;
}

.profile-edit-tab-panel {
    display: grid;
    gap: 0;
}

.profile-edit-content-panel .profile-edit-form {
    display: grid;
    gap: 0;
}

.profile-edit-content-panel .profile-edit-section-title {
    display: grid;
    gap: 9px;
    margin: 0 0 22px;
    padding: 0 0 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-edit-content-panel .profile-edit-section-title span {
    color: var(--accent-primary);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.profile-edit-content-panel .profile-edit-section-title h2 {
    position: relative;
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    padding-bottom: 12px;
    margin: 0;
    color: var(--text-main);
    font-size: clamp(32px, 4.4vw, 44px);
    line-height: 0.98;
    letter-spacing: -0.065em;
    font-weight: 950;
}

.profile-edit-content-panel .profile-edit-section-title h2::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 3px dashed rgba(155, 228, 71, 0.72);
    filter: drop-shadow(0 0 8px rgba(155, 228, 71, 0.18));
}

.profile-edit-content-panel .profile-edit-section-title p {
    max-width: 640px;
    margin: 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 700;
}

.profile-edit-tab-panel .form-row,
.profile-edit-tab-panel .profile-edit-media-preview {
    padding: 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.profile-edit-tab-panel .form-row {
    grid-template-columns: minmax(160px, 0.34fr) minmax(0, 1fr);
    gap: 26px;
}

.profile-edit-tab-panel .form-row.compact {
    grid-template-columns: minmax(160px, 0.34fr) minmax(220px, 0.66fr);
}

.profile-edit-tab-panel .form-row label {
    color: var(--text-main);
    font-size: 17px;
    line-height: 1.15;
    font-weight: 950;
    text-align: right;
}

.profile-edit-tab-panel .form-row input,
.profile-edit-tab-panel .form-row textarea,
.profile-edit-tab-panel .form-row select {
    min-height: 50px;
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(32, 32, 30, 0.62);
}

.profile-edit-tab-panel .profile-edit-checks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
}

.profile-edit-tab-panel .hnt-lfg-check {
    width: 100%;
    max-width: none;
    min-height: 58px;
    border-radius: 14px;
}

.profile-edit-media-preview {
    display: grid;
    gap: 14px;
}

.profile-edit-cover-preview {
    min-height: 190px;
}

.profile-edit-file-actions {
    padding-top: 2px;
}

.profile-edit-save-card {
    margin-top: 26px;
    padding: 0 0 22px;
    border: 0;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.profile-edit-save-card strong {
    color: var(--text-main);
    font-size: 18px;
    font-weight: 950;
}

.profile-edit-save-card span {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 750;
}

.profile-edit-actions {
    justify-content: flex-end;
    padding-top: 24px;
}

@media (max-width: 768px) {
    .profile-edit-tabs {
        gap: 22px;
        min-height: 62px;
        padding: 0 16px;
    }

    .profile-edit-tabs button {
        padding-top: 20px;
        padding-bottom: 19px;
        font-size: 13px;
    }

    .profile-edit-content-panel {
        padding-left: 0;
        padding-right: 0;
    }

    .profile-edit-content-panel .profile-edit-section-title h2 {
        font-size: 32px;
    }

    .profile-edit-tab-panel .form-row,
    .profile-edit-tab-panel .form-row.compact {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .profile-edit-tab-panel .form-row label {
        text-align: left;
    }

    .profile-edit-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

/* Patch 651: HNT preview settings pages - profile edit style without header card */
.hnt-settings-shell {
    padding-top: 0;
}

.hnt-settings-tabs {
    min-height: 64px;
    margin-bottom: 30px;
    padding: 0;
    border-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
}

.hnt-settings-tabs a {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 64px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 0;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
}

.hnt-settings-tabs a:hover,
.hnt-settings-tabs a.active {
    color: var(--text-main);
}

.hnt-settings-tabs a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 10px 10px 0 0;
    background: var(--accent-green);
    box-shadow: 0 0 18px rgba(155, 228, 71, 0.35);
}

.hnt-settings-form {
    display: block;
}

.hnt-settings-section .profile-edit-section-title:first-child {
    margin-top: 0;
}

.hnt-settings-subtitle {
    margin-top: 36px !important;
}

.hnt-settings-subtitle-compact {
    margin-top: 0 !important;
}

.hnt-settings-check-list {
    display: grid;
    gap: 0;
}

.hnt-settings-check {
    min-height: 74px;
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    margin: 0;
    padding: 16px 0;
    border-width: 0 0 1px;
    border-color: rgba(255, 255, 255, 0.07);
    border-radius: 0;
    background: transparent;
}

.hnt-settings-check input {
    margin-left: 0;
}

.hnt-settings-check-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.hnt-settings-check-copy strong {
    color: var(--text-main);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 950;
}

.hnt-settings-check-copy small {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
}

.hnt-settings-note {
    display: grid;
    gap: 8px;
}

.hnt-settings-note small {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
    word-break: break-word;
}

.hnt-settings-warning {
    border-bottom-color: rgba(214, 168, 79, 0.22);
}

.hnt-settings-inline-actions,
.hnt-settings-section-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.hnt-settings-inline-form {
    display: grid;
    gap: 0;
}

.hnt-settings-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.hnt-settings-mini-form {
    display: grid;
    gap: 0;
    min-width: 0;
}

.hnt-settings-mini-form .form-row,
.hnt-settings-mini-form .form-row.compact {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 16px 0;
}

.hnt-settings-mini-form .form-row label {
    text-align: left;
    font-size: 14px;
}

.hnt-settings-mini-form .btn-create {
    justify-self: start;
    margin-top: 12px;
}

.hnt-settings-code-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.hnt-settings-code-list code {
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(32, 32, 30, 0.62);
    color: var(--accent-primary);
    padding: 8px 10px;
    font: 800 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.hnt-settings-list {
    display: grid;
    gap: 0;
}

.hnt-settings-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    min-height: 72px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.hnt-settings-list-row strong,
.hnt-settings-table-row strong {
    display: block;
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 950;
}

.hnt-settings-list-row span,
.hnt-settings-list-row small,
.hnt-settings-table-row span,
.hnt-settings-table-row small {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;
}

.hnt-settings-empty {
    margin: 0;
    padding: 18px 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 750;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.hnt-settings-pagination {
    margin-top: 18px;
}

.hnt-settings-table {
    display: grid;
    gap: 0;
}

.hnt-settings-table-head,
.hnt-settings-table-row {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(120px, 0.55fr) minmax(130px, 0.6fr);
    gap: 18px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.hnt-settings-table-head span {
    color: var(--accent-primary);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.hnt-settings-table-row small {
    grid-column: 1 / -1;
    word-break: break-word;
}

.hnt-settings-actions .btn-create:first-child,
.hnt-settings-inline-actions .btn-create + .btn-create,
.hnt-settings-list-row .btn-create,
.hnt-settings-mini-form .btn-create,
.hnt-settings-section-actions .btn-create {
    background: rgba(32, 32, 30, 0.92);
    color: var(--text-main);
    box-shadow: none;
}

.hnt-settings-actions .btn-create:first-child:hover,
.hnt-settings-inline-actions .btn-create + .btn-create:hover,
.hnt-settings-list-row .btn-create:hover,
.hnt-settings-mini-form .btn-create:hover,
.hnt-settings-section-actions .btn-create:hover {
    color: #141412;
    background: var(--accent-primary);
    box-shadow: 0 10px 26px var(--accent-primary-glow);
}

@media (max-width: 768px) {
    .hnt-settings-tabs {
        gap: 22px;
        min-height: 58px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .hnt-settings-tabs::-webkit-scrollbar {
        display: none;
    }

    .hnt-settings-tabs a {
        min-height: 58px;
        font-size: 13px;
    }

    .hnt-settings-two-col,
    .hnt-settings-list-row,
    .hnt-settings-table-head,
    .hnt-settings-table-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .hnt-settings-table-head {
        display: none;
    }

    .hnt-settings-inline-actions,
    .hnt-settings-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .hnt-settings-inline-actions .btn-create,
    .hnt-settings-actions .btn-create,
    .hnt-settings-list-row .btn-create,
    .hnt-settings-mini-form .btn-create,
    .hnt-settings-section-actions .btn-create {
        width: 100%;
    }
}

/* Patch 652: Notification shell panel */
.app-window.notifications-shell-open {
    grid-template-columns: 88px minmax(320px, 360px) minmax(0, 1fr);
}

.app-window.notifications-shell-open .sidebar-right {
    display: none;
}

.hnt-notification-shell {
    display: none;
    min-width: 0;
    height: 100%;
    border-right: 1px solid var(--border-color);
    background:
        radial-gradient(circle at 100% 0%, rgba(155, 228, 71, 0.08), transparent 34%),
        rgba(26, 26, 24, 0.92);
    overflow: hidden;
}

.hnt-notification-shell.open {
    display: flex;
    flex-direction: column;
}

.hnt-notification-shell-head {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 32px 22px 18px;
}

.hnt-notification-shell-kicker {
    display: block;
    margin-bottom: 9px;
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.hnt-notification-shell-head h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 950;
}

.hnt-notification-shell-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hnt-notification-shell-icon {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    background: rgba(32, 32, 30, 0.72);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.hnt-notification-shell-icon:hover {
    transform: translateY(-1px);
    color: var(--accent-green);
    border-color: rgba(155, 228, 71, 0.22);
    background: rgba(155, 228, 71, 0.09);
}

.hnt-notification-shell-icon svg ,

.hnt-notification-shell-icon .ph {
    width: 17px;
    height: 17px;
}

.hnt-notification-shell-meta {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 22px 16px;
}

.hnt-notification-shell-meta span {
    min-height: 52px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(32, 32, 30, 0.58);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.2;
}

.hnt-notification-shell-meta strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text-main);
    font-size: 21px;
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 950;
}

.hnt-notification-shell-read-all {
    flex: 0 0 auto;
    padding: 0 22px 16px;
}

.hnt-notification-shell-read-all button,
.hnt-notification-shell-foot a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: rgba(214, 168, 79, 0.16);
    color: var(--accent-primary);
    padding: 0 14px;
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.hnt-notification-shell-read-all button:hover,
.hnt-notification-shell-foot a:hover {
    color: #141412;
    background: var(--accent-primary);
}

.hnt-notification-shell-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 8px 14px 22px;
    scrollbar-gutter: stable;
}

.hnt-notification-shell-item {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 34px;
    gap: 12px;
    align-items: center;
    min-height: 88px;
    margin-right: 8px;
    padding: 12px 10px;
    border-radius: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    color: var(--text-main);
}

.hnt-notification-shell-item.is-unread {
    background: rgba(155, 228, 71, 0.065);
    border-bottom-color: rgba(155, 228, 71, 0.12);
}

.hnt-notification-shell-item.is-unread::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 48px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-green);
    box-shadow: 0 0 18px rgba(155, 228, 71, 0.40);
    transform: translateY(-50%);
}

.hnt-notification-shell-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--tag-bg);
    display: block;
}

.hnt-notification-shell-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hnt-notification-shell-copy {
    min-width: 0;
}

.hnt-notification-shell-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.hnt-notification-shell-title-row h3 {
    min-width: 0;
    margin: 0;
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hnt-notification-shell-title-row span {
    flex: 0 0 auto;
    min-height: 21px;
    padding: 0 8px;
    border-radius: 999px;
    color: #141412;
    background: var(--accent-green);
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 950;
}

.hnt-notification-shell-copy p {
    margin: 5px 0 0;
    color: #D8CDBE;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 650;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hnt-notification-shell-copy small {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.25;
    font-weight: 700;
}

.hnt-notification-shell-item-action {
    position: relative;
    z-index: 1;
}

.hnt-notification-shell-item-action button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(32, 32, 30, 0.70);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.hnt-notification-shell-item-action button:hover {
    transform: translateX(2px);
    color: var(--accent-green);
    background: rgba(155, 228, 71, 0.10);
}

.hnt-notification-shell-item-action svg ,

.hnt-notification-shell-item-action .ph {
    width: 16px;
    height: 16px;
}

.hnt-notification-shell-empty {
    margin: 20px 14px 0 0;
    padding: 26px 18px;
    border-radius: 10px;
    border: 1px dashed rgba(155, 228, 71, 0.22);
    text-align: center;
    color: var(--text-muted);
}

.hnt-notification-shell-empty svg ,

.hnt-notification-shell-empty .ph {
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    color: var(--accent-green);
}

.hnt-notification-shell-empty h3 {
    margin: 0 0 8px;
    color: var(--text-main);
    font-size: 16px;
    font-weight: 950;
}

.hnt-notification-shell-empty p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
}

.hnt-notification-shell-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 22px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(12, 13, 17, 0.20);
}

.hnt-notification-shell-foot a:last-child {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.055);
}

.hnt-notification-shell-foot a:last-child:hover {
    color: var(--accent-green);
    background: rgba(155, 228, 71, 0.09);
}

@media (max-width: 1200px) {
    .app-window.notifications-shell-open {
        grid-template-columns: 88px minmax(300px, 340px) minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .app-window.notifications-shell-open {
        grid-template-columns: 1fr;
    }

    .hnt-notification-shell.open {
        position: fixed;
        inset: 0;
        z-index: 90;
        width: 100%;
        height: 100vh;
    }

    .hnt-notification-shell-head {
        padding-top: 26px;
    }
}

/* Patch 654: Messages shell + Facebook-like chat tabs */
.app-window.messages-shell-open {
    grid-template-columns: 88px minmax(320px, 360px) minmax(0, 1fr);
}

.app-window.messages-shell-open .sidebar-right {
    display: none;
}

.hnt-message-shell {
    display: none;
    min-width: 0;
    height: 100%;
    border-right: 1px solid var(--border-color);
    background:
        radial-gradient(circle at 100% 0%, rgba(214, 168, 79, 0.08), transparent 35%),
        rgba(26, 26, 24, 0.92);
    overflow: hidden;
}

.hnt-message-shell.open {
    display: flex;
    flex-direction: column;
}

.hnt-message-shell-head {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 32px 22px 18px;
}

.hnt-message-shell-kicker {
    display: block;
    margin-bottom: 9px;
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.hnt-message-shell-head h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 950;
}

.hnt-message-shell-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hnt-message-shell-icon {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    background: rgba(32, 32, 30, 0.72);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.hnt-message-shell-icon:hover {
    transform: translateY(-1px);
    color: var(--accent-green);
    border-color: rgba(155, 228, 71, 0.22);
    background: rgba(155, 228, 71, 0.09);
}

.hnt-message-shell-icon svg ,

.hnt-message-shell-icon .ph {
    width: 17px;
    height: 17px;
}

.hnt-message-shell-meta {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 22px 14px;
}

.hnt-message-shell-meta span {
    min-height: 52px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(32, 32, 30, 0.58);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.2;
}

.hnt-message-shell-meta strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text-main);
    font-size: 21px;
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 950;
}

.hnt-message-shell-tabs {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 0 22px 16px;
}

.hnt-message-shell-tabs a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.055);
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
}

.hnt-message-shell-tabs a.active,
.hnt-message-shell-tabs a:hover {
    color: #141412;
    background: var(--accent-primary);
}

.hnt-message-shell-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 8px 14px 22px;
    scrollbar-gutter: stable;
}

.hnt-message-shell-item {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 34px;
    gap: 12px;
    align-items: center;
    min-height: 88px;
    margin-right: 8px;
    padding: 12px 10px;
    border-radius: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    color: var(--text-main);
    text-decoration: none;
    transition: background 0.18s ease, transform 0.18s ease;
}

.hnt-message-shell-item:hover {
    background: rgba(255, 255, 255, 0.035);
    transform: translateX(2px);
}

.hnt-message-shell-item.is-unread {
    background: rgba(214, 168, 79, 0.08);
    border-bottom-color: rgba(214, 168, 79, 0.14);
}

.hnt-message-shell-item.is-unread::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 48px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 18px rgba(214, 168, 79, 0.40);
    transform: translateY(-50%);
}

.hnt-message-shell-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--tag-bg);
    display: block;
}

.hnt-message-shell-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hnt-message-shell-copy {
    min-width: 0;
    display: block;
}

.hnt-message-shell-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.hnt-message-shell-title-row strong {
    min-width: 0;
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hnt-message-shell-title-row em {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    color: #141412;
    background: var(--accent-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
}

.hnt-message-shell-preview {
    display: -webkit-box;
    margin-top: 5px;
    color: #D8CDBE;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 650;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hnt-message-shell-copy small {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.25;
    font-weight: 700;
}

.hnt-message-shell-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(32, 32, 30, 0.70);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.hnt-message-shell-arrow svg ,

.hnt-message-shell-arrow .ph {
    width: 16px;
    height: 16px;
}

.hnt-message-shell-item:hover .hnt-message-shell-arrow {
    transform: translateX(2px);
    color: var(--accent-green);
    background: rgba(155, 228, 71, 0.10);
}

.hnt-message-shell-empty {
    margin: 20px 14px 0 0;
    padding: 26px 18px;
    border-radius: 10px;
    border: 1px dashed rgba(214, 168, 79, 0.22);
    text-align: center;
    color: var(--text-muted);
}

.hnt-message-shell-empty svg ,

.hnt-message-shell-empty .ph {
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    color: var(--accent-primary);
}

.hnt-message-shell-empty h3 {
    margin: 0 0 8px;
    color: var(--text-main);
    font-size: 16px;
    font-weight: 950;
}

.hnt-message-shell-empty p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
}

.hnt-message-shell-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 22px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(12, 13, 17, 0.20);
}

.hnt-message-shell-foot a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(214, 168, 79, 0.16);
    color: var(--accent-primary);
    padding: 0 14px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.hnt-message-shell-foot a:hover {
    color: #141412;
    background: var(--accent-primary);
}

.hnt-message-shell-foot a:last-child {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.055);
}

.hnt-message-shell-foot a:last-child:hover {
    color: var(--accent-green);
    background: rgba(155, 228, 71, 0.09);
}

.hnt-chat-tabs-shell {
    position: fixed;
    right: 18px;
    bottom: 0;
    z-index: 980;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 12px;
    max-width: calc(100vw - 36px);
    overflow-x: auto;
    pointer-events: none;
    scrollbar-width: thin;
}

.hnt-chat-tab {
    width: 340px;
    height: 430px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(214, 168, 79, 0.08), transparent 32%),
        rgba(26, 26, 24, 0.98);
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.52);
    pointer-events: auto;
    transition: height 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.hnt-chat-tab.is-minimized {
    height: 56px;
}

.hnt-chat-tab.is-minimized .hnt-chat-tab__body {
    display: none;
}

.hnt-chat-tab__header {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px 9px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(20, 20, 18, 0.92);
    cursor: pointer;
}

.hnt-chat-tab__person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.hnt-chat-tab__avatar,
.hnt-chat-tab__message-avatar {
    object-fit: cover;
    border-radius: 50%;
    flex: 0 0 auto;
}

.hnt-chat-tab__avatar {
    width: 34px;
    height: 34px;
}

.hnt-chat-tab__meta {
    min-width: 0;
}

.hnt-chat-tab__meta strong,
.hnt-chat-tab__meta span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hnt-chat-tab__meta strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.15;
}

.hnt-chat-tab__meta span {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}

.hnt-chat-tab__actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hnt-chat-tab__icon {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}

.hnt-chat-tab__icon:hover {
    color: var(--accent-green);
    background: rgba(155, 228, 71, 0.09);
}

.hnt-chat-tab__icon svg ,

.hnt-chat-tab__icon .ph {
    width: 16px;
    height: 16px;
}

.hnt-chat-tab__body {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(18, 19, 18, 0.96);
}

.hnt-chat-tab__messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hnt-chat-tab__message {
    display: flex;
    align-items: flex-end;
    gap: 7px;
}

.hnt-chat-tab__message.is-own {
    justify-content: flex-end;
}

.hnt-chat-tab__message-avatar {
    width: 24px;
    height: 24px;
}

.hnt-chat-tab__bubble-wrap {
    max-width: 78%;
    display: flex;
    flex-direction: column;
}

.hnt-chat-tab__message.is-own .hnt-chat-tab__bubble-wrap {
    align-items: flex-end;
}

.hnt-chat-tab__bubble {
    margin: 0;
    padding: 9px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
}

.hnt-chat-tab__message.is-own .hnt-chat-tab__bubble {
    background: linear-gradient(135deg, var(--accent-primary), #B98B38);
    color: #141412;
    font-weight: 800;
}

.hnt-chat-tab__time {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
}

.hnt-chat-tab__empty {
    margin: auto;
    max-width: 230px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.hnt-chat-tab__empty svg ,

.hnt-chat-tab__empty .ph {
    width: 34px;
    height: 34px;
    margin-bottom: 8px;
    color: var(--accent-primary);
}

.hnt-chat-tab__form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(20, 20, 18, 0.94);
}

.hnt-chat-tab__form input {
    min-width: 0;
    flex: 1;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-main);
    padding: 0 14px;
    font-family: var(--font-main);
    font-size: 13px;
    outline: 0;
}

.hnt-chat-tab__form input::placeholder {
    color: rgba(216, 205, 190, 0.58);
}

.hnt-chat-tab__form input:focus {
    box-shadow: 0 0 0 3px rgba(155, 228, 71, 0.08);
}

.hnt-chat-tab__form button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--accent-primary);
    color: #141412;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.hnt-chat-tab__form button:disabled {
    opacity: 0.55;
    cursor: wait;
}

.hnt-chat-tab__form button svg ,

.hnt-chat-tab__form button .ph {
    width: 17px;
    height: 17px;
}

@media (max-width: 1200px) {
    .app-window.messages-shell-open {
        grid-template-columns: 88px minmax(300px, 340px) minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .app-window.messages-shell-open {
        grid-template-columns: 1fr;
    }

    .hnt-message-shell.open {
        position: fixed;
        inset: 0;
        z-index: 90;
        width: 100%;
        height: 100vh;
    }

    .hnt-message-shell-head {
        padding-top: 26px;
    }

    .hnt-chat-tabs-shell {
        inset: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-width: none;
        display: block;
        overflow: hidden;
        z-index: 1200;
    }

    .hnt-chat-tab {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        transition: none;
    }

    .hnt-chat-tabs-shell .hnt-chat-tab:not(:last-child) {
        display: none;
    }

    .hnt-chat-tab.is-minimized {
        height: 100vh;
        height: 100dvh;
    }

    .hnt-chat-tab.is-minimized .hnt-chat-tab__body {
        display: flex;
    }

    .hnt-chat-tab__header {
        min-height: 58px;
        padding: calc(10px + env(safe-area-inset-top)) 12px 10px 14px;
    }

    .hnt-chat-tab__actions [data-hnt-chat-tab-minimize] {
        display: none;
    }

    .hnt-chat-tab__icon {
        width: 34px;
        height: 34px;
    }

    .hnt-chat-tab__form {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
}

/* Patch 655: Members page HNT/Lens preview implementation */
.members-hero {
    position: relative;
    min-height: 214px;
    padding: 30px 30px 28px;
    margin-bottom: 28px;
    border-radius: 10px;
    border: 1px solid rgba(242, 232, 216, 0.08);
    background:
        radial-gradient(circle at 82% 12%, rgba(214, 168, 79, 0.12), transparent 30%),
        radial-gradient(circle at 12% 18%, rgba(155, 228, 71, 0.10), transparent 28%),
        linear-gradient(135deg, rgba(20, 20, 18, 0.88), rgba(13, 14, 16, 0.94));
    overflow: hidden;
}

.members-hero::after {
    content: "";
    position: absolute;
    inset: auto -82px -138px auto;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(155, 228, 71, 0.12) 0deg 6deg, transparent 6deg 14deg);
    opacity: 0.26;
    pointer-events: none;
}

.members-kicker {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 11px;
    color: var(--accent-primary);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.members-hero-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: end;
}

.members-hero h1 {
    margin: 0 0 12px;
    color: var(--text-main);
    font-size: clamp(32px, 4.6vw, 48px);
    line-height: 0.98;
    letter-spacing: -0.065em;
    font-weight: 950;
}

.members-hero p {
    max-width: 540px;
    margin: 0;
    color: #D8CDBE;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 700;
}

.members-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(72px, 1fr));
    gap: 10px;
    min-width: 260px;
}

.members-hero-stats div {
    min-height: 72px;
    padding: 13px 14px;
    border-radius: 10px;
    border: 1px solid rgba(242, 232, 216, 0.08);
    background: rgba(8, 9, 12, 0.46);
}

.members-hero-stats strong {
    display: block;
    color: var(--text-main);
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.06em;
    font-weight: 950;
}

.members-hero-stats span {
    display: block;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
}

.members-filter-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.members-search-field,
.members-select-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.members-search-field span,
.members-select-field span {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 900;
}

.members-search-field input,
.members-select-field select {
    width: 100%;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(242, 232, 216, 0.08);
    background: rgba(32, 32, 30, 0.72);
    color: var(--text-main);
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    outline: none;
    padding: 0 14px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.members-select-field select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 22px) 50%,
        calc(100% - 15px) 50%;
    background-size: 7px 7px, 7px 7px;
    background-repeat: no-repeat;
    padding-right: 44px;
}

.members-select-field select option {
    background: #20201E;
    color: #F2E8D8;
}

.members-search-field input:focus,
.members-select-field select:focus {
    border-color: rgba(155, 228, 71, 0.42);
    background: rgba(32, 32, 30, 0.94);
    box-shadow: 0 0 0 3px rgba(155, 228, 71, 0.08);
}

.members-lfg-check {
    align-self: end;
    min-height: 44px;
}

.members-filter-actions {
    display: flex;
    align-items: end;
    gap: 12px;
    align-self: end;
}

.members-filter-actions .btn-create {
    min-height: 44px;
    min-width: 120px;
}

.members-reset-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 10px;
    color: var(--text-muted);
    background: rgba(32, 32, 30, 0.62);
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
}

.members-reset-link:hover {
    color: var(--text-main);
}

.member-card {
    min-height: 0;
    align-items: stretch;
}

.member-card-main {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 12px;
}

.member-card-side {
    flex: 0 0 162px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-end;
}

.member-card .member-person {
    text-decoration: none;
}

.member-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.member-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.member-name-row h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-name-row em {
    flex: 0 0 auto;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: var(--accent-primary);
    background: rgba(214, 168, 79, 0.12);
    font-size: 10px;
    line-height: 1;
    font-style: normal;
    font-weight: 950;
}

.member-headline {
    margin: 0;
    color: #D8CDBE;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
}

.member-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.member-tags span {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--text-muted);
    background: rgba(26, 26, 24, 0.58);
    font-size: 11px;
    font-weight: 850;
}

.member-tags span.is-active {
    color: #141412;
    background: var(--accent-green);
}

.member-stats-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: 360px;
}

.member-stats-row span {
    min-height: 48px;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid rgba(242, 232, 216, 0.06);
    background: rgba(8, 9, 12, 0.26);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 850;
}

.member-stats-row strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-main);
    font-size: 16px;
    line-height: 1;
    font-weight: 950;
}

.member-badges {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.member-badges span,
.member-badges a {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(214, 168, 79, 0.18);
    background: rgba(26, 26, 24, 0.74);
    color: var(--accent-primary);
    font-size: 13px;
    font-weight: 950;
    text-decoration: none;
    overflow: hidden;
}

.member-badges img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-actions {
    width: 100%;
    display: grid;
    gap: 8px;
}

.member-actions form,
.member-actions .btn-create,
.members-secondary-action {
    width: 100%;
}

.members-secondary-action {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: rgba(32, 32, 30, 0.88);
    color: var(--text-main);
    text-decoration: none;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.members-secondary-action:hover {
    color: var(--accent-primary);
}

.member-actions .btn-create {
    min-height: 38px;
    border-radius: 10px;
}

.members-empty {
    padding: 36px 0 14px;
    border-top: 1px solid rgba(242, 232, 216, 0.08);
}

.members-empty span {
    display: block;
    margin-bottom: 8px;
    color: var(--accent-primary);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.members-empty h2 {
    position: relative;
    display: inline-flex;
    margin: 0 0 14px;
    padding-bottom: 10px;
    color: var(--text-main);
    font-size: 24px;
    line-height: 1.08;
    letter-spacing: -0.055em;
    font-weight: 950;
}

.members-empty h2::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 2px dashed rgba(155, 228, 71, 0.56);
}

.members-empty p {
    max-width: 520px;
    margin: 0;
    color: #D8CDBE;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 700;
}

.members-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
}

.members-pager a,
.members-pager span,
.members-pager strong {
    min-height: 38px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 10px;
    background: rgba(32, 32, 30, 0.72);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
}

.members-pager strong,
.members-pager a:hover {
    color: #141412;
    background: var(--accent-primary);
}

@media (max-width: 768px) {
    .members-hero {
        padding: 24px 18px 20px;
    }

    .members-hero-row {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .members-hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-width: 0;
    }

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

    .member-card {
        flex-direction: column;
    }

    .member-card-side {
        flex: 0 0 auto;
        width: 100%;
        align-items: stretch;
    }

    .member-badges {
        justify-content: flex-start;
    }

    .member-stats-row {
        max-width: none;
    }
}

@media (max-width: 420px) {
    .members-hero-stats,
    .member-stats-row {
        grid-template-columns: 1fr;
    }

    .member-actions {
        grid-template-columns: 1fr;
    }
}

/* Patch 656: Members card layout cleanup */
.members-grid .member-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 0.54fr);
    align-items: stretch;
    gap: 20px;
}

.members-grid .member-card-main {
    align-content: start;
}

.members-grid .member-card-side {
    flex: initial;
    width: auto;
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: space-between;
    gap: 16px;
    align-items: stretch;
}

.members-grid .member-copy {
    max-width: 100%;
}

.members-grid .member-name-row {
    display: block;
    min-width: 0;
}

.members-grid .member-name-row h2,
.members-grid .member-person p {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.members-grid .member-level-pill {
    width: fit-content;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    padding: 0 9px;
    border-radius: 999px;
    color: var(--accent-primary);
    background: rgba(214, 168, 79, 0.12);
    font-size: 10px;
    line-height: 1;
    font-style: normal;
    font-weight: 950;
}

.members-grid .member-name-row em {
    display: none;
}

.members-grid .member-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    width: 100%;
    order: 2;
}

.members-grid .member-stats-row span {
    min-height: 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.members-grid .member-badges {
    order: 1;
    justify-content: flex-end;
    min-height: 32px;
}

.members-grid .member-actions {
    order: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}

.members-grid .member-actions > *,
.members-grid .member-actions form,
.members-grid .member-actions .btn-create,
.members-grid .members-secondary-action {
    min-width: 0;
    width: 100%;
}

.members-grid .member-actions .btn-create,
.members-grid .members-secondary-action {
    min-height: 42px;
    padding: 0 10px;
    border-radius: 10px;
    white-space: normal;
    text-align: center;
}

@media (max-width: 768px) {
    .members-grid .member-card {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .members-grid .member-card-side {
        gap: 12px;
    }

    .members-grid .member-badges {
        justify-content: flex-start;
    }
}

@media (max-width: 420px) {
    .members-grid .member-actions,
    .members-grid .member-stats-row {
        grid-template-columns: 1fr;
    }
}

/* Patch 657: Members card structure cleanup + chat-tab action spacing */
.members-grid .member-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 360px;
    gap: 13px;
    padding: 22px;
    overflow: hidden;
}

.members-grid .member-card-top {
    position: relative;
    min-width: 0;
    padding-right: 118px;
}

.members-grid .member-person {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.members-grid .member-avatar {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
}

.members-grid .member-copy {
    min-width: 0;
    max-width: 100%;
}

.members-grid .member-name-row {
    display: block;
    min-width: 0;
}

.members-grid .member-name-row h2,
.members-grid .member-person p {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.members-grid .member-name-row h2 {
    margin-bottom: 5px;
    font-size: 18px;
}

.members-grid .member-person p {
    margin-bottom: 8px;
    font-size: 13px;
}

.members-grid .member-level-pill {
    width: fit-content;
    max-width: 100%;
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--accent-primary);
    background: rgba(214, 168, 79, 0.12);
    font-size: 11px;
    line-height: 1;
    font-style: normal;
    font-weight: 950;
}

.members-grid .member-badges {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 112px;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 30px;
}

.members-grid .member-headline {
    min-height: 46px;
    margin: 4px 0 0;
    color: #D8CDBE;
    font-size: 14px;
    line-height: 1.42;
    font-weight: 800;
}

.members-grid .member-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.members-grid .member-tags span {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.members-grid .member-card-bottom {
    display: grid;
    gap: 12px;
    margin-top: auto;
}

.members-grid .member-stats-row {
    order: initial;
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.members-grid .member-stats-row span {
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
}

.members-grid .member-stats-row strong {
    margin-bottom: 5px;
    font-size: 20px;
}

.members-grid .member-actions {
    order: initial;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.members-grid .member-actions > *,
.members-grid .member-actions form,
.members-grid .member-actions .btn-create,
.members-grid .members-secondary-action {
    min-width: 0;
    width: 100%;
}

.members-grid .member-actions .btn-create,
.members-grid .members-secondary-action {
    min-height: 46px;
    padding: 0 12px;
    border-radius: 10px;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
}

@media (max-width: 1200px) {
    .members-grid .member-card {
        min-height: 350px;
        padding: 20px;
    }

    .members-grid .member-card-top {
        padding-right: 96px;
    }

    .members-grid .member-badges {
        max-width: 90px;
    }
}

@media (max-width: 768px) {
    .members-grid .member-card {
        min-height: 0;
    }

    .members-grid .member-card-top {
        padding-right: 0;
    }

    .members-grid .member-badges {
        position: static;
        justify-content: flex-start;
        max-width: none;
        margin-top: 12px;
    }
}

@media (max-width: 420px) {
    .members-grid .member-person {
        grid-template-columns: 62px minmax(0, 1fr);
    }

    .members-grid .member-avatar {
        width: 62px;
        height: 62px;
        flex-basis: 62px;
    }

    .members-grid .member-actions,
    .members-grid .member-stats-row {
        grid-template-columns: 1fr;
    }
}


/* Patch 658: Members card badges below identity + readable names */
.members-grid .member-card-top {
    display: grid;
    gap: 14px;
    padding-right: 0;
}

.members-grid .member-person {
    align-items: start;
}

.members-grid .member-name-row h2,
.members-grid .member-person p {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.members-grid .member-name-row h2 {
    line-height: 1.08;
}

.members-grid .member-person p {
    line-height: 1.22;
}

.members-grid .member-badges {
    position: static;
    max-width: none;
    width: 100%;
    min-height: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding-left: 86px;
}

.members-grid .member-badges span,
.members-grid .member-badges a {
    flex: 0 0 auto;
}

.members-grid .member-headline {
    margin-top: 0;
}

@media (max-width: 1200px) {
    .members-grid .member-card-top {
        padding-right: 0;
    }

    .members-grid .member-badges {
        max-width: none;
    }
}

@media (max-width: 420px) {
    .members-grid .member-badges {
        padding-left: 76px;
    }
}

/* Patch 660: single feed post page */
.hnt-feed-single-main {
    padding: 32px 0;
}

.hnt-feed-single-main > .hnt-preview-feed-header,
.hnt-feed-single-main > .hnt-preview-status-line,
.hnt-feed-single-content {
    width: min(calc(100% - 64px), 680px);
    margin-left: auto;
    margin-right: auto;
}

.hnt-feed-single-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.hnt-feed-single-header h1 {
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: -0.055em;
}

.hnt-feed-single-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.hnt-feed-single-back {
    min-height: 38px;
    padding: 0 14px;
    font-size: 12px;
}

.hnt-feed-single-back:first-child {
    color: var(--text-main);
    background: rgba(32, 32, 30, 0.92);
    box-shadow: none;
}

.hnt-feed-single-back:first-child:hover {
    color: #141412;
    background: var(--accent-primary);
    box-shadow: 0 10px 26px var(--accent-primary-glow);
}

.hnt-feed-single-content {
    display: grid;
    gap: 28px;
}

.hnt-feed-single-content .hnt-preview-feed-post {
    margin-bottom: 0;
}

.hnt-feed-single-comments {
    padding: 8px 0 34px;
}

.hnt-feed-single-comments-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.hnt-feed-single-comments-head h2 {
    position: relative;
    display: inline-flex;
    margin: 0;
    padding-bottom: 10px;
    color: var(--text-main);
    font-size: 24px;
    line-height: 1.08;
    letter-spacing: -0.055em;
    font-weight: 950;
}

.hnt-feed-single-comments-head h2::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 2px dashed rgba(155, 228, 71, 0.56);
    filter: drop-shadow(0 0 8px rgba(155, 228, 71, 0.18));
}

.hnt-feed-single-comments-head > span {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.hnt-feed-single-comment-form {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 22px;
    padding: 16px 0 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.hnt-feed-single-comment-input {
    min-width: 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(32, 32, 30, 0.62);
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.hnt-feed-single-comment-input:focus-within {
    border-color: rgba(155, 228, 71, 0.42);
    box-shadow: 0 0 0 4px rgba(155, 228, 71, 0.08);
    background: rgba(32, 32, 30, 0.82);
}

.hnt-feed-single-comment-input textarea {
    width: 100%;
    min-height: 112px;
    display: block;
    resize: vertical;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-main);
    padding: 14px 16px;
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
}

.hnt-feed-single-comment-input textarea::placeholder {
    color: rgba(181, 183, 192, 0.58);
}

.hnt-feed-single-comment-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.hnt-feed-single-comment-actions span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.hnt-feed-single-comment-actions .btn-create {
    min-height: 38px;
    padding: 0 15px;
    font-size: 12px;
}

.hnt-feed-single-comment-list {
    max-height: none;
    padding-right: 0;
    overflow: visible;
}

.hnt-feed-single-comment-list .hnt-comment-modal-item {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.hnt-feed-single-comment-list .hnt-comment-modal-item:last-child {
    border-bottom: 0;
}

@media (max-width: 1200px) {
    .hnt-feed-single-main > .hnt-preview-feed-header,
    .hnt-feed-single-main > .hnt-preview-status-line,
    .hnt-feed-single-content {
        width: min(calc(100% - 48px), 680px);
    }
}

@media (max-width: 768px) {
    .hnt-feed-single-main {
        width: 100%;
        max-width: 100vw;
        padding: 16px 0 28px;
    }

    .hnt-feed-single-main > .hnt-preview-feed-header,
    .hnt-feed-single-main > .hnt-preview-status-line,
    .hnt-feed-single-content {
        width: 100%;
        max-width: 620px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .hnt-feed-single-header,
    .hnt-feed-single-comments-head,
    .hnt-feed-single-comment-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .hnt-feed-single-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .hnt-feed-single-actions .btn-create {
        flex: 1 1 auto;
    }

    .hnt-feed-single-comment-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .hnt-feed-single-main > .hnt-preview-feed-header,
    .hnt-feed-single-main > .hnt-preview-status-line,
    .hnt-feed-single-content {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* Patch 662: Opera viewport fill fix
   Opera showed black top/bottom strips because the preview app window still used a fixed 900px shell height.
   Keep the HNT/Lens shell filling the real viewport while preserving internal scrolling. */
html:has(body.hnt-preview-body) {
    min-height: 100%;
    background: var(--bg-app);
}

body.hnt-preview-body {
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background: var(--bg-app);
}

.hnt-preview-body .app-window {
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
}

@supports (height: 100svh) {
    body.hnt-preview-body,
    .hnt-preview-body .app-window {
        min-height: 100svh;
        height: 100svh;
    }
}

@media (max-width: 768px) {
    body.hnt-preview-body,
    .hnt-preview-body .app-window {
        min-height: 100dvh;
        height: auto;
    }
}

/* Patch 665: right sidebar Moments use real latest Moment previews, same compact size. */
.sidebar-right .moments-list {
    overflow-x: auto;
    scrollbar-width: none;
}

.sidebar-right .moments-list::-webkit-scrollbar {
    display: none;
}

.sidebar-right .moment-item {
    flex: 0 0 auto;
    max-width: 54px;
    color: var(--text-muted);
    text-decoration: none;
}

.sidebar-right .moment-item:hover span:last-child {
    color: var(--text-main);
}

.sidebar-right .moment-avatar {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: cover;
    background-color: #343025;
}

.sidebar-right .moment-item > span:last-child {
    display: block;
    width: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

/* Patch 666: Hashtag discovery and composer recognition */
.hnt-hashtag-link {
    color: var(--accent-primary);
    font-weight: 900;
    text-decoration: none;
    transition: color 0.18s ease, text-shadow 0.18s ease;
}

.hnt-hashtag-link:hover {
    color: var(--accent-green);
    text-shadow: 0 0 16px rgba(214, 168, 79, 0.22);
}

.hnt-hashtag-preview {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 16px 14px;
    margin-top: -4px;
}

.hnt-lfg-field .hnt-hashtag-preview {
    padding: 0;
    margin: 9px 0 0;
}

.hnt-hashtag-preview[hidden] {
    display: none !important;
}

.hnt-hashtag-preview-chip,
.hnt-hashtag-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--accent-primary);
    background: rgba(214, 168, 79, 0.10);
    border: 1px solid rgba(214, 168, 79, 0.18);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
}

.hnt-hashtag-preview-chip:hover,
.hnt-hashtag-chip:hover {
    color: #141412;
    background: var(--accent-primary);
}

.hnt-hashtag-main {
    padding: 32px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.hnt-hashtag-main > .feed-header,
.hnt-hashtag-main > .hnt-hashtag-summary,
.hnt-hashtag-main > .hnt-hashtag-related,
.hnt-hashtag-main > .hnt-hashtag-empty,
.hnt-hashtag-main > .hnt-hashtag-section {
    width: min(calc(100% - 64px), 680px);
    margin-left: auto;
    margin-right: auto;
}

.hnt-hashtag-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

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

.hnt-hashtag-summary span {
    min-height: 76px;
    padding: 15px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(19, 20, 25, 0.62);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
}

.hnt-hashtag-summary strong {
    display: block;
    margin-bottom: 7px;
    color: var(--text-main);
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.05em;
}

.hnt-hashtag-related {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
}

.hnt-hashtag-section {
    margin-top: 36px;
}

.hnt-hashtag-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.hnt-hashtag-section-head h2 {
    position: relative;
    display: inline-flex;
    margin: 0;
    padding-bottom: 10px;
    color: var(--text-main);
    font-size: 24px;
    line-height: 1.08;
    letter-spacing: -0.055em;
    font-weight: 950;
}

.hnt-hashtag-section-head h2::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 2px dashed rgba(155, 228, 71, 0.56);
    filter: drop-shadow(0 0 8px rgba(155, 228, 71, 0.18));
}

.hnt-hashtag-section-head > span {
    color: var(--accent-primary);
    font-size: 13px;
    font-weight: 950;
}

.hnt-hashtag-empty {
    padding: 28px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hnt-hashtag-empty strong {
    display: block;
    margin-bottom: 8px;
    color: var(--text-main);
    font-size: 22px;
    font-weight: 950;
}

.hnt-hashtag-empty p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.hnt-hashtag-moment-grid,
.hnt-hashtag-lfg-grid {
    display: grid;
    gap: 14px;
}

.hnt-hashtag-moment-card,
.hnt-hashtag-lfg-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 118px;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(19, 20, 25, 0.62);
    color: var(--text-main);
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.hnt-hashtag-moment-card:hover,
.hnt-hashtag-lfg-card:hover {
    transform: translateY(-1px);
    border-color: rgba(214, 168, 79, 0.24);
}

.hnt-hashtag-moment-thumb,
.hnt-hashtag-lfg-cover {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05) center / cover no-repeat;
}

.hnt-hashtag-moment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hnt-hashtag-moment-thumb svg ,

.hnt-hashtag-moment-thumb .ph {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    color: var(--accent-primary);
    filter: drop-shadow(0 4px 14px rgba(0,0,0,0.6));
}

.hnt-hashtag-moment-copy,
.hnt-hashtag-lfg-copy {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.hnt-hashtag-moment-copy strong,
.hnt-hashtag-lfg-copy strong {
    color: var(--text-main);
    font-size: 17px;
    line-height: 1.15;
    font-weight: 950;
}

.hnt-hashtag-moment-copy em,
.hnt-hashtag-lfg-copy em {
    color: #D8CDBE;
    font-style: normal;
    font-size: 13px;
    line-height: 1.45;
}

.hnt-hashtag-moment-copy small,
.hnt-hashtag-lfg-copy small {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.hnt-hashtag-lfg-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hnt-hashtag-lfg-tags b {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(255,255,255,0.055);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
}

@media (max-width: 768px) {
    .hnt-hashtag-main > .feed-header,
    .hnt-hashtag-main > .hnt-hashtag-summary,
    .hnt-hashtag-main > .hnt-hashtag-related,
    .hnt-hashtag-main > .hnt-hashtag-empty,
    .hnt-hashtag-main > .hnt-hashtag-section {
        width: 100%;
        max-width: 620px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .hnt-hashtag-header {
        display: grid;
    }

    .hnt-hashtag-summary {
        grid-template-columns: 1fr;
    }

    .hnt-hashtag-moment-card,
    .hnt-hashtag-lfg-card {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .hnt-hashtag-moment-thumb,
    .hnt-hashtag-lfg-cover {
        width: 78px;
        height: 78px;
    }
}

.lfg-tags a {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(214, 168, 79, 0.10);
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
}

.lfg-tags a:hover {
    background: var(--accent-primary);
    color: #141412;
}

/* Patch 668: real popular hashtag chips in the right sidebar */
.sidebar-right .tags-container .tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.sidebar-right .tags-container .tag:hover {
    transform: translateY(-1px);
    background-color: rgba(214, 168, 79, 0.18);
    color: var(--text-main);
}

/* Patch 669: right sidebar real highlights */
.sidebar-highlight-card {
    display: block;
    color: var(--text-main);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    background:
        radial-gradient(circle at 88% 4%, rgba(214, 168, 79, 0.10), transparent 36%),
        rgba(32, 32, 30, 0.62);
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.sidebar-highlight-link:hover {
    transform: translateY(-2px);
    border-color: rgba(214, 168, 79, 0.26);
    background-color: rgba(32, 32, 30, 0.78);
}

.sidebar-highlight-card .event-badge {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.sidebar-highlight-card .event-brand {
    max-width: calc(100% - 86px);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.sidebar-highlight-card h3 {
    margin: 0 0 9px;
    color: var(--text-main);
    font-size: 16px;
    line-height: 1.28;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.sidebar-highlight-card .event-time {
    margin-bottom: 14px;
    color: #A79C8E;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}

.sidebar-highlight-metrics,
.sidebar-highlight-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.sidebar-highlight-metrics span,
.sidebar-highlight-tags span,
.sidebar-highlight-tags strong {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: #D8CDBE;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.sidebar-highlight-tags strong {
    background: rgba(214, 168, 79, 0.16);
    color: var(--accent-primary);
}

.sidebar-highlight-cup {
    border-color: rgba(155, 228, 71, 0.12);
    background:
        radial-gradient(circle at 88% 10%, rgba(155, 228, 71, 0.12), transparent 34%),
        radial-gradient(circle at 5% 95%, rgba(214, 168, 79, 0.10), transparent 34%),
        rgba(32, 32, 30, 0.62);
}


/* Patch 670: right sidebar highlight cards use real content images as background */
.sidebar-highlight-card.has-bg {
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(90deg, rgba(16, 16, 15, 0.96), rgba(16, 16, 15, 0.84) 58%, rgba(16, 16, 15, 0.62)),
        radial-gradient(circle at 88% 4%, rgba(214, 168, 79, 0.18), transparent 38%),
        var(--sidebar-highlight-image);
    background-size: cover, auto, cover;
    background-position: center, center, center;
    background-repeat: no-repeat;
}

.sidebar-highlight-card.has-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.42)),
        radial-gradient(circle at 100% 0%, rgba(214, 168, 79, 0.10), transparent 34%);
    z-index: 0;
}

.sidebar-highlight-card.has-bg > * {
    position: relative;
    z-index: 1;
}

.sidebar-highlight-cup.has-bg {
    border-color: rgba(155, 228, 71, 0.22);
    background-image:
        linear-gradient(90deg, rgba(16, 16, 15, 0.94), rgba(16, 16, 15, 0.82) 58%, rgba(19, 35, 17, 0.64)),
        radial-gradient(circle at 92% 6%, rgba(155, 228, 71, 0.18), transparent 36%),
        var(--sidebar-highlight-image);
}

.sidebar-highlight-card.has-bg .event-brand,
.sidebar-highlight-card.has-bg .event-time {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.52);
}

.sidebar-highlight-card.has-bg h3 {
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.64);
}

.sidebar-highlight-card.has-bg .sidebar-highlight-metrics span,
.sidebar-highlight-card.has-bg .sidebar-highlight-tags span,
.sidebar-highlight-card.has-bg .sidebar-highlight-tags strong {
    background: rgba(18, 18, 17, 0.62);
    backdrop-filter: blur(8px);
}


/* Patch 671: compact and readable right sidebar highlight cards */
.sidebar-right .sidebar-highlight-card {
    min-height: 0;
    padding: 15px 16px 16px;
    margin-bottom: 12px;
    border-radius: 18px;
}

.sidebar-highlight-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    margin-bottom: 12px;
}

.sidebar-highlight-head .event-brand {
    max-width: none;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-highlight-head .event-badge {
    position: static;
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    white-space: nowrap;
}

.sidebar-highlight-card h3 {
    margin-bottom: 7px;
    font-size: 15px;
    line-height: 1.22;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-highlight-card .event-time {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.34;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-highlight-metrics,
.sidebar-highlight-tags {
    gap: 6px;
}

.sidebar-highlight-metrics span,
.sidebar-highlight-tags span,
.sidebar-highlight-tags strong {
    min-height: 22px;
    padding: 0 8px;
    font-size: 10px;
}

.sidebar-highlight-card.has-bg {
    background-image:
        linear-gradient(90deg, rgba(16, 16, 15, 0.94), rgba(16, 16, 15, 0.80) 58%, rgba(16, 16, 15, 0.58)),
        radial-gradient(circle at 88% 4%, rgba(214, 168, 79, 0.16), transparent 36%),
        var(--sidebar-highlight-image);
}

.sidebar-highlight-card.has-bg::before {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.34)),
        radial-gradient(circle at 100% 0%, rgba(214, 168, 79, 0.08), transparent 34%);
}

.sidebar-highlight-cup.has-bg {
    background-image:
        linear-gradient(90deg, rgba(16, 16, 15, 0.94), rgba(16, 16, 15, 0.80) 58%, rgba(19, 35, 17, 0.58)),
        radial-gradient(circle at 92% 6%, rgba(155, 228, 71, 0.16), transparent 36%),
        var(--sidebar-highlight-image);
}


/* Patch 672: mobile top bar, bottom navigation and menu shell */
.hnt-mobile-topbar,
.hnt-mobile-bottom-bar,
.hnt-mobile-menu-shell,
.hnt-mobile-menu-backdrop {
    display: none;
}

@media (max-width: 768px) {
    .hnt-preview-body {
        align-items: stretch;
        justify-content: stretch;
        min-height: 100vh;
        min-height: 100dvh;
        background: var(--bg-outer);
        overflow: hidden;
    }

    .hnt-preview-shell > main {
        padding-top: 84px !important;
        padding-bottom: 104px !important;
        min-height: 0;
    }

    .hnt-mobile-topbar {
        position: fixed;
        z-index: 860;
        top: 0;
        left: 0;
        right: 0;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: max(10px, env(safe-area-inset-top)) 16px 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        background:
            radial-gradient(circle at 8% 0%, rgba(214, 168, 79, 0.12), transparent 32%),
            rgba(20, 20, 18, 0.94);
        backdrop-filter: blur(18px) saturate(128%);
        -webkit-backdrop-filter: blur(18px) saturate(128%);
    }

    .hnt-mobile-brand {
        min-width: 0;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: var(--text-main);
        text-decoration: none;
        font-size: 17px;
        font-weight: 950;
        letter-spacing: -0.04em;
    }

    .hnt-mobile-brand svg ,

    .hnt-mobile-brand .ph {
        width: 22px;
        height: 22px;
        color: var(--accent-primary);
        flex: 0 0 auto;
    }

    .hnt-mobile-top-actions {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
    }

    .hnt-mobile-icon-btn {
        position: relative;
        width: 40px;
        height: 40px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 13px;
        background: rgba(32, 32, 30, 0.72);
        color: #D8CDBE;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        text-decoration: none;
        transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }

    .hnt-mobile-icon-btn svg ,

    .hnt-mobile-icon-btn .ph {
        width: 21px;
        height: 21px;
    }

    .hnt-mobile-icon-btn:hover,
    .hnt-mobile-icon-btn[aria-expanded="true"] {
        color: var(--accent-primary);
        border-color: rgba(214, 168, 79, 0.24);
        background: rgba(214, 168, 79, 0.12);
    }

    .hnt-mobile-icon-btn.is-primary {
        color: #141412;
        background: var(--accent-primary);
        border-color: transparent;
        box-shadow: 0 12px 24px var(--accent-primary-glow);
    }

    .hnt-mobile-badge {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        color: #141412;
        background: var(--accent-primary);
        border: 2px solid rgba(20, 20, 18, 0.98);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        line-height: 1;
        font-weight: 950;
    }

    .hnt-mobile-badge[hidden] {
        display: none !important;
    }

    .hnt-mobile-bottom-bar {
        position: fixed;
        z-index: 850;
        left: 12px;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        min-height: 68px;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
        padding: 8px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 22px;
        background:
            radial-gradient(circle at 50% 0%, rgba(214, 168, 79, 0.12), transparent 48%),
            rgba(20, 20, 18, 0.94);
        box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42);
        backdrop-filter: blur(20px) saturate(132%);
        -webkit-backdrop-filter: blur(20px) saturate(132%);
    }

    .hnt-mobile-bottom-item {
        position: relative;
        min-width: 0;
        min-height: 52px;
        border: 0;
        border-radius: 16px;
        background: transparent;
        color: var(--text-muted);
        text-decoration: none;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-family: var(--font-main);
        font-size: 10px;
        font-weight: 850;
        cursor: pointer;
        transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
    }

    .hnt-mobile-bottom-item svg ,

    .hnt-mobile-bottom-item .ph {
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
    }

    .hnt-mobile-bottom-item span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hnt-mobile-bottom-item.active,
    .hnt-mobile-bottom-item:hover,
    .hnt-mobile-bottom-item[aria-expanded="true"] {
        color: #141412;
        background: linear-gradient(135deg, var(--accent-primary), #B98B38);
        box-shadow: 0 10px 24px var(--accent-primary-glow);
    }

    .hnt-mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 870;
        background: rgba(4, 5, 7, 0.58);
        backdrop-filter: blur(12px) saturate(120%);
        -webkit-backdrop-filter: blur(12px) saturate(120%);
    }

    .hnt-mobile-menu-backdrop.open {
        display: block;
    }

    .hnt-mobile-menu-shell {
        position: fixed;
        z-index: 880;
        left: 12px;
        right: 12px;
        bottom: calc(92px + env(safe-area-inset-bottom));
        max-height: min(70vh, 610px);
        max-height: min(70dvh, 610px);
        padding: 18px;
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 24px;
        background:
            radial-gradient(circle at 96% 0%, rgba(155, 228, 71, 0.11), transparent 34%),
            radial-gradient(circle at 8% 100%, rgba(214, 168, 79, 0.12), transparent 32%),
            rgba(26, 26, 24, 0.96);
        box-shadow: 0 26px 90px rgba(0, 0, 0, 0.54);
        overflow-y: auto;
        transform: translateY(18px) scale(0.98);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.22s ease, opacity 0.22s ease;
        display: block;
    }

    .hnt-mobile-menu-shell.open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .hnt-mobile-menu-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 14px;
    }

    .hnt-mobile-menu-head span {
        display: block;
        margin-bottom: 5px;
        color: var(--accent-primary);
        font-size: 11px;
        font-weight: 950;
        letter-spacing: 0.085em;
        text-transform: uppercase;
    }

    .hnt-mobile-menu-head h2 {
        margin: 0;
        color: var(--text-main);
        font-size: 24px;
        line-height: 1;
        letter-spacing: -0.055em;
        font-weight: 950;
    }

    .hnt-mobile-menu-user {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 62px;
        margin-bottom: 14px;
        padding: 12px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .hnt-mobile-menu-user strong,
    .hnt-mobile-menu-user a {
        display: block;
    }

    .hnt-mobile-menu-user strong {
        color: var(--text-main);
        font-size: 14px;
        font-weight: 950;
        margin-bottom: 3px;
    }

    .hnt-mobile-menu-user a {
        color: var(--accent-primary);
        text-decoration: none;
        font-size: 12px;
        font-weight: 850;
    }

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

    .hnt-mobile-menu-grid a,
    .hnt-mobile-menu-links a {
        color: var(--text-main);
        text-decoration: none;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background: rgba(32, 32, 30, 0.68);
        transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }

    .hnt-mobile-menu-grid a {
        min-height: 82px;
        padding: 14px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 10px;
    }

    .hnt-mobile-menu-grid svg ,

    .hnt-mobile-menu-grid .ph {
        width: 22px;
        height: 22px;
        color: var(--accent-primary);
    }

    .hnt-mobile-menu-grid span {
        color: #D8CDBE;
        font-size: 13px;
        font-weight: 900;
        line-height: 1.2;
    }

    .hnt-mobile-menu-grid a:hover,
    .hnt-mobile-menu-links a:hover {
        transform: translateY(-1px);
        border-color: rgba(214, 168, 79, 0.24);
        background: rgba(214, 168, 79, 0.09);
    }

    .hnt-mobile-menu-links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
    }

    .hnt-mobile-menu-links a {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 850;
    }

    body.hnt-mobile-menu-open {
        overflow: hidden;
    }
}

@media (max-width: 390px) {
    .hnt-mobile-brand span {
        max-width: 112px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hnt-mobile-bottom-bar {
        left: 8px;
        right: 8px;
    }

    .hnt-mobile-bottom-item {
        font-size: 9px;
    }

    .hnt-mobile-menu-grid {
        grid-template-columns: 1fr;
    }
}

/* Patch 673: Feed composer media previews + visible feelings and polls */
.composer-input-shell.has-media-previews .composer-preview-strip {
    display: none;
}

.composer-input-shell.has-media-previews textarea {
    min-height: 118px;
    padding-bottom: 18px;
}

.composer-media-preview {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 16px 16px;
}

.composer-media-preview[hidden] {
    display: none !important;
}

.composer-media-preview-item {
    position: relative;
    flex: 0 0 92px;
    width: 92px;
    height: 92px;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(9, 10, 12, 0.78);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.26);
}

.composer-media-preview-item img,
.composer-media-preview-item video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.composer-media-type {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 2;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(20, 20, 18, 0.78);
    color: var(--accent-primary);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    backdrop-filter: blur(8px);
}

.composer-media-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(10, 10, 9, 0.78);
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.30);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.composer-media-remove:hover {
    transform: scale(1.06);
    background: var(--accent-danger);
    color: #fff;
}

.composer-media-remove svg ,

.composer-media-remove .ph {
    width: 15px;
    height: 15px;
}

.hnt-preview-post-feeling {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 12px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(214, 168, 79, 0.12);
    color: #D8CDBE;
    border: 1px solid rgba(214, 168, 79, 0.18);
    font-size: 12px;
    font-weight: 800;
}

.hnt-preview-post-feeling strong {
    color: var(--text-main);
}

.hnt-preview-post-feeling-icon {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}

.hnt-preview-poll-card {
    margin: 4px 0 16px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 100% 0%, rgba(155, 228, 71, 0.08), transparent 38%),
        rgba(19, 20, 25, 0.58);
}

.hnt-preview-poll-head {
    display: grid;
    gap: 5px;
    margin-bottom: 12px;
}

.hnt-preview-poll-head span {
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hnt-preview-poll-head strong {
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 900;
}

.hnt-preview-poll-options {
    display: grid;
    gap: 8px;
}

.hnt-preview-poll-form {
    margin: 0;
}

.hnt-preview-poll-option {
    position: relative;
    width: 100%;
    min-height: 42px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.045);
    color: var(--text-main);
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.hnt-preview-poll-option:hover,
.hnt-preview-poll-option.is-selected {
    border-color: rgba(214, 168, 79, 0.34);
}

.hnt-preview-poll-bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: linear-gradient(90deg, rgba(214, 168, 79, 0.24), rgba(155, 228, 71, 0.10));
    pointer-events: none;
}

.hnt-preview-poll-label,
.hnt-preview-poll-meta {
    position: relative;
    z-index: 1;
}

.hnt-preview-poll-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 850;
}

.hnt-preview-poll-meta {
    color: var(--accent-primary);
    font-size: 12px;
    font-weight: 950;
}

.hnt-preview-poll-total {
    margin: 9px 0 0;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
}

@media (max-width: 520px) {
    .composer-media-preview-item {
        flex-basis: 76px;
        width: 76px;
        height: 76px;
    }
}


/* Patch 677: mobile chrome + modal usability stabilization */
@media (max-width: 768px) {
    :root {
        --hnt-mobile-topbar-height: 72px;
        --hnt-mobile-bottom-height: 78px;
    }

    html,
    body.hnt-preview-body {
        width: 100%;
        min-height: 100%;
        overflow-x: hidden;
    }

    body.hnt-preview-body {
        overflow-y: auto;
        padding: 0;
    }

    .hnt-preview-body .app-window,
    .hnt-preview-shell {
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        border-radius: 0 !important;
        border: 0 !important;
    }

    .hnt-preview-shell > main,
    .hnt-preview-body .feed-main,
    .hnt-preview-body .profile-main,
    .hnt-preview-body .members-main,
    .hnt-preview-body .lfg-main,
    .hnt-preview-body .cups-main,
    .hnt-preview-body .crowns-main,
    .hnt-preview-body .gamification-main,
    .hnt-preview-body .contracts-main,
    .hnt-preview-body .settings-main {
        padding-top: calc(var(--hnt-mobile-topbar-height) + 18px) !important;
        padding-bottom: calc(var(--hnt-mobile-bottom-height) + env(safe-area-inset-bottom) + 22px) !important;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }

    .hnt-mobile-topbar {
        height: var(--hnt-mobile-topbar-height);
        padding: max(10px, env(safe-area-inset-top)) 18px 10px;
    }

    .hnt-mobile-bottom-bar {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw;
        min-height: calc(var(--hnt-mobile-bottom-height) + env(safe-area-inset-bottom));
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        border-radius: 0 !important;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.36);
    }

    .hnt-mobile-bottom-item {
        min-height: 54px;
        border-radius: 14px;
    }

    .hnt-mobile-bottom-item.active,
    .hnt-mobile-bottom-item:hover,
    .hnt-mobile-bottom-item[aria-expanded="true"] {
        box-shadow: 0 8px 20px rgba(214, 168, 79, 0.24);
    }

    .hnt-mobile-menu-backdrop {
        z-index: 1040;
        top: var(--hnt-mobile-topbar-height);
        bottom: calc(var(--hnt-mobile-bottom-height) + env(safe-area-inset-bottom));
    }

    .hnt-mobile-menu-shell {
        z-index: 1050;
        left: 0;
        right: 0;
        bottom: calc(var(--hnt-mobile-bottom-height) + env(safe-area-inset-bottom));
        max-height: min(72dvh, 620px);
        border-radius: 24px 24px 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    /* Feed composer: keep close button and submit button reachable on phones. */
    .modal-backdrop {
        align-items: stretch !important;
        justify-content: stretch !important;
        top: var(--hnt-mobile-topbar-height);
        bottom: calc(var(--hnt-mobile-bottom-height) + env(safe-area-inset-bottom));
        left: 0;
        right: 0;
        padding: 0 !important;
        z-index: 620;
    }

    .composer-modal {
        width: 100vw !important;
        height: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
    }

    .composer-modal form {
        min-height: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .composer-header {
        flex: 0 0 auto;
        position: sticky;
        top: 0;
        z-index: 8;
        padding: 18px 20px 16px !important;
        background:
            radial-gradient(circle at 90% 0%, rgba(155, 228, 71, 0.14), transparent 36%),
            rgba(26, 26, 24, 0.96);
    }

    .composer-header .modal-close,
    .composer-header .icon-btn {
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
    }

    .composer-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: 18px 20px 20px !important;
        -webkit-overflow-scrolling: touch;
    }

    .composer-footer {
        flex: 0 0 auto;
        position: sticky;
        bottom: 0;
        z-index: 9;
        padding: 14px 20px !important;
        background: rgba(20, 20, 18, 0.96);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .composer-input-shell textarea {
        min-height: 150px;
        max-height: 34dvh;
    }

    .composer-option-panel {
        max-height: none;
        margin-bottom: 10px;
    }

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

    .composer-feeling-choice,
    .composer-add-poll-option,
    .composer-poll-question,
    .composer-poll-options input {
        min-height: 44px;
    }

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

    .composer-tool {
        width: 100%;
        justify-content: center;
        white-space: normal;
    }

    .composer-media-preview {
        max-height: 180px;
        overflow-y: auto;
        padding: 0 12px 12px;
    }

    .composer-media-preview-item {
        flex-basis: 82px;
        width: 82px;
        height: 82px;
    }

    /* LFG create/edit wizard: same mobile modal rules as composer. */
    .hnt-lfg-create-backdrop {
        top: var(--hnt-mobile-topbar-height);
        bottom: calc(var(--hnt-mobile-bottom-height) + env(safe-area-inset-bottom));
        left: 0;
        right: 0;
        padding: 0 !important;
        z-index: 630;
        align-items: stretch;
        justify-content: stretch;
    }

    .hnt-lfg-create-modal {
        width: 100vw !important;
        height: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
    }

    .hnt-lfg-create-modal form {
        height: 100%;
        min-height: 0;
        max-height: none;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
    }

    .hnt-lfg-create-handle {
        display: none;
    }

    .hnt-lfg-create-header {
        min-height: 76px;
        grid-template-columns: minmax(0, 1fr) auto 46px;
        padding: 14px 18px !important;
        position: sticky;
        top: 0;
        z-index: 9;
        background:
            radial-gradient(circle at 90% 0%, rgba(155, 228, 71, 0.14), transparent 36%),
            rgba(26, 26, 24, 0.96);
    }

    .hnt-lfg-create-header .hnt-lfg-create-back {
        display: none !important;
    }

    .hnt-lfg-create-header h2 {
        font-size: clamp(28px, 9vw, 42px);
    }

    .hnt-lfg-create-close.modal-close {
        display: inline-flex !important;
        width: 44px;
        height: 44px;
        margin-right: 0;
    }

    .hnt-lfg-create-progress {
        flex: 0 0 auto;
        padding: 14px 18px;
        overflow-x: auto;
        flex-wrap: nowrap;
        background: rgba(20, 20, 18, 0.74);
    }

    .hnt-lfg-create-progress span {
        flex: 0 0 auto;
    }

    .hnt-lfg-create-body {
        min-height: 0;
        overflow-y: auto;
        padding: 24px 18px 28px !important;
        -webkit-overflow-scrolling: touch;
    }

    .hnt-lfg-create-footer {
        flex: 0 0 auto;
        min-height: auto;
        padding: 14px 18px !important;
        position: sticky;
        bottom: 0;
        z-index: 9;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        background: rgba(20, 20, 18, 0.96);
    }

    .hnt-lfg-create-footer .btn-create,
    .hnt-lfg-create-footer .btn-following {
        width: 100%;
        min-width: 0;
        min-height: 46px;
    }

    .hnt-lfg-upload-stage {
        min-height: 300px;
    }

    .hnt-lfg-cover-picker {
        min-height: 260px;
        padding: 24px 18px;
    }

    .hnt-lfg-cover-preview {
        min-height: 260px;
    }

    .hnt-lfg-field textarea {
        min-height: 190px;
        max-height: 40dvh;
    }

    /* Comment/post modal: keep title, close and comment field inside the usable phone viewport. */
    .post-modal-backdrop {
        align-items: stretch !important;
        justify-content: stretch !important;
        top: var(--hnt-mobile-topbar-height);
        bottom: calc(var(--hnt-mobile-bottom-height) + env(safe-area-inset-bottom));
        left: 0;
        right: 0;
        padding: 0 !important;
        z-index: 625;
    }

    .post-detail-modal {
        width: 100vw !important;
        height: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
    }

    .post-modal-close {
        top: 12px;
        right: 14px;
        width: 44px;
        height: 44px;
        z-index: 12;
    }

    .post-modal-topbar {
        flex: 0 0 auto;
        position: sticky;
        top: 0;
        z-index: 10;
        padding: 18px 72px 14px 20px !important;
        background:
            radial-gradient(circle at 90% 0%, rgba(155, 228, 71, 0.14), transparent 36%),
            rgba(26, 26, 24, 0.96);
    }

    .post-modal-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .post-modal-composer {
        flex: 0 0 auto;
        position: sticky;
        bottom: 0;
        z-index: 10;
        padding: 12px 16px !important;
        background: rgba(20, 20, 18, 0.97);
    }

    .post-modal-composer > .avatar {
        width: 38px;
        height: 38px;
    }

    .post-modal-input textarea {
        min-height: 58px;
        max-height: 22dvh;
    }

    .post-modal-post-head,
    .post-modal-copy,
    .post-modal-actions,
    .post-modal-comments {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .post-modal-media {
        height: auto;
        min-height: 180px;
        aspect-ratio: 16 / 10;
        margin-left: 18px !important;
        margin-right: 18px !important;
    }

    /* Notification / message shells: full mobile panels between top and bottom nav. */
    .hnt-notification-shell.open,
    .hnt-message-shell.open {
        position: fixed;
        z-index: 640;
        top: var(--hnt-mobile-topbar-height);
        bottom: calc(var(--hnt-mobile-bottom-height) + env(safe-area-inset-bottom));
        left: 0;
        right: 0;
        width: 100vw;
        height: auto;
        border-right: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        background:
            radial-gradient(circle at 100% 0%, rgba(155, 228, 71, 0.10), transparent 34%),
            rgba(20, 20, 18, 0.97);
    }

    .hnt-notification-shell-head,
    .hnt-message-shell-head {
        padding: 18px 20px 12px;
    }

    .hnt-notification-shell-head h2,
    .hnt-message-shell-head h2 {
        font-size: 28px;
        line-height: 1.02;
    }

    .hnt-notification-shell-meta,
    .hnt-message-shell-meta,
    .hnt-message-shell-tabs,
    .hnt-notification-shell-read-all {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hnt-notification-shell-list,
    .hnt-message-shell-list {
        padding-left: 20px;
        padding-right: 10px;
        padding-bottom: 18px;
    }

    .hnt-notification-shell-item,
    .hnt-message-shell-item {
        margin-right: 6px;
    }

    /* Profile mobile hero alignment and cover button sizing. */
    .profile-main > .profile-hero-card,
    .profile-main > .profile-tabs,
    .profile-main > .profile-progress-card,
    .profile-main > .profile-composer-card,
    .profile-main > .profile-post-card,
    .profile-window .profile-main .hnt-preview-feed-post,
    .profile-window .profile-load-wrap {
        width: calc(100% - 28px) !important;
    }

    .profile-window .profile-identity-panel {
        flex-direction: column;
        align-items: center !important;
        text-align: center;
        gap: 18px;
        padding: 0 18px 24px;
    }

    .profile-window .profile-avatar-wrap {
        margin: -10px auto 0;
    }

    .profile-window .profile-copy {
        width: 100%;
        padding-top: 8px !important;
    }

    .profile-window .profile-name-row {
        align-items: center;
        flex-direction: column;
        gap: 14px;
    }

    .profile-window .profile-actions {
        justify-content: center;
    }

    .profile-window .profile-badges-line {
        justify-content: center;
    }

    .profile-window .profile-cover-action {
        min-width: 0 !important;
        height: 38px !important;
        padding: 0 12px !important;
        gap: 7px;
        font-size: 11px;
        border-radius: 12px;
        right: 12px !important;
        bottom: 12px !important;
    }

    .profile-window .profile-cover-action svg ,

    .profile-window .profile-cover-action .ph {
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 390px) {
    .composer-tools,
    .composer-feeling-grid,
    .hnt-lfg-create-footer {
        grid-template-columns: 1fr;
    }

    .composer-header h2,
    .post-modal-topbar h2,
    .hnt-lfg-create-header h2 {
        font-size: 28px;
    }
}

/* Patch 678: mobile fullscreen modals + restored tree comments + sane post copy in comment modal */
.hnt-comment-modal-copy.hnt-post-text,
.post-modal-copy.hnt-comment-modal-copy.hnt-post-text {
    color: var(--text-main);
    font-size: 16px;
    line-height: 1.58;
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.hnt-comment-modal-copy.hnt-post-text p,
.post-modal-copy.hnt-comment-modal-copy.hnt-post-text p {
    max-width: 740px;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.hnt-comment-modal-copy.hnt-post-text h1,
.hnt-comment-modal-copy.hnt-post-text h2,
.hnt-comment-modal-copy.hnt-post-text h3,
.post-modal-copy.hnt-comment-modal-copy.hnt-post-text h1,
.post-modal-copy.hnt-comment-modal-copy.hnt-post-text h2,
.post-modal-copy.hnt-comment-modal-copy.hnt-post-text h3 {
    font-size: 18px;
    line-height: 1.25;
    margin: 0 0 10px;
}

.hnt-comment-modal-replies {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 12px 0 2px 18px;
    padding-left: 22px;
}

.hnt-comment-modal-replies::before {
    content: "";
    position: absolute;
    top: -4px;
    bottom: 18px;
    left: 0;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(to bottom, rgba(155, 228, 71, 0.40), rgba(155, 228, 71, 0.08));
}

.hnt-comment-modal-replies > .hnt-comment-modal-item {
    position: relative;
    margin: 0;
}

.hnt-comment-modal-replies > .hnt-comment-modal-item::before {
    content: "";
    position: absolute;
    top: 22px;
    left: -22px;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: rgba(155, 228, 71, 0.34);
}

.hnt-comment-modal-replies .avatar-sm {
    width: 32px;
    height: 32px;
}

.hnt-comment-modal-replies .hnt-comment-modal-bubble {
    background: linear-gradient(145deg, rgba(155, 228, 71, 0.075), rgba(255, 255, 255, 0.025));
    border-color: rgba(155, 228, 71, 0.16);
}

.hnt-comment-modal-replies .hnt-comment-modal-headline a,
.hnt-comment-modal-replies .hnt-comment-modal-headline span,
.hnt-comment-modal-replies .hnt-comment-modal-body {
    font-size: 0.94em;
}

@media (max-width: 768px) {
    .hnt-mobile-bottom-bar {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        border-radius: 0 !important;
        transform: none !important;
    }

    .modal-backdrop,
    .post-modal-backdrop,
    .hnt-lfg-create-backdrop {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        z-index: 3000 !important;
    }

    .composer-modal,
    .post-detail-modal,
    .hnt-lfg-create-modal {
        width: 100vw !important;
        height: 100dvh !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
    }

    .composer-modal form,
    .hnt-lfg-create-modal form {
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 0 !important;
    }

    .composer-header,
    .post-modal-topbar,
    .hnt-lfg-create-header {
        padding-top: calc(env(safe-area-inset-top) + 16px) !important;
    }

    .composer-body,
    .post-modal-scroll,
    .hnt-lfg-create-body {
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .composer-body {
        padding-bottom: 110px !important;
    }

    .post-modal-scroll {
        padding-bottom: 124px !important;
    }

    .hnt-lfg-create-body {
        padding-bottom: 112px !important;
    }

    .composer-footer,
    .post-modal-composer,
    .hnt-lfg-create-footer {
        position: sticky !important;
        bottom: 0 !important;
        padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
        z-index: 20 !important;
        background: rgba(20, 20, 18, 0.98) !important;
        box-shadow: 0 -18px 42px rgba(0, 0, 0, 0.34);
    }

    .composer-header .modal-close,
    .post-modal-close,
    .hnt-lfg-create-close.modal-close {
        position: relative;
        z-index: 30;
    }

    .post-modal-close {
        position: absolute !important;
        top: calc(env(safe-area-inset-top) + 14px) !important;
        right: 16px !important;
    }

    .post-modal-post-head,
    .post-modal-copy,
    .post-modal-actions,
    .post-modal-comments {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .hnt-comment-modal-copy.hnt-post-text,
    .post-modal-copy.hnt-comment-modal-copy.hnt-post-text {
        font-size: 16px !important;
        line-height: 1.58 !important;
    }

    .hnt-comment-modal-replies {
        margin-left: 8px;
        padding-left: 18px;
    }

    .hnt-comment-modal-replies > .hnt-comment-modal-item::before {
        left: -18px;
        width: 14px;
    }

    .post-modal-comments {
        gap: 16px;
    }
}


/* Patch 679: comment modal post text + real tree replies + inline reply composer */
.hnt-comment-modal-scope .hnt-comment-modal-copy.hnt-post-text {
    padding: 18px 42px 4px !important;
    color: var(--text-muted) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

.hnt-comment-modal-scope .hnt-comment-modal-copy.hnt-post-text p {
    max-width: 760px;
    margin: 0 0 1em !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

.hnt-comment-modal-scope .hnt-comment-modal-copy.hnt-post-text p:last-child {
    margin-bottom: 0 !important;
}

.hnt-comment-modal-scope .hnt-read-more-toggle,
.hnt-comment-modal-scope .hnt-comment-modal-copy.hnt-post-text + .hnt-read-more-toggle {
    display: none !important;
}

.hnt-comment-modal-item.is-root {
    position: relative;
}

.hnt-comment-modal-replies {
    position: relative !important;
    margin: 16px 0 4px 8px !important;
    padding: 0 0 0 34px !important;
    gap: 14px !important;
    border-left: 0 !important;
}

.hnt-comment-modal-replies::before {
    content: "";
    position: absolute;
    top: -6px;
    bottom: 22px;
    left: 13px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(to bottom, rgba(155, 228, 71, 0.46), rgba(155, 228, 71, 0.08));
}

.hnt-comment-modal-replies > .hnt-comment-modal-item {
    position: relative;
    padding-left: 0 !important;
}

.hnt-comment-modal-replies > .hnt-comment-modal-item::before {
    content: "";
    position: absolute;
    top: 24px;
    left: -20px;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: rgba(155, 228, 71, 0.38);
}

.hnt-comment-modal-item.is-reply > .avatar,
.hnt-comment-modal-replies .avatar-sm {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px;
}

.hnt-comment-modal-item.is-reply .hnt-comment-modal-bubble {
    max-width: min(720px, 100%);
    background: linear-gradient(145deg, rgba(155, 228, 71, 0.075), rgba(255, 255, 255, 0.025)) !important;
    border-color: rgba(155, 228, 71, 0.18) !important;
    border-radius: 18px !important;
}

.hnt-comment-modal-item.is-reply .hnt-comment-modal-body {
    font-size: 13.5px !important;
}

.hnt-comment-reply-composer {
    margin: 10px 0 4px 44px;
    max-width: min(720px, calc(100% - 44px));
}

.hnt-comment-reply-input {
    position: relative;
    min-height: 76px;
    border-radius: 22px;
    border: 1px solid rgba(155, 228, 71, 0.24);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(155, 228, 71, 0.055));
    overflow: hidden;
}

.hnt-comment-reply-input textarea {
    width: 100%;
    min-height: 76px;
    resize: vertical;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-main);
    padding: 16px 60px 16px 18px;
    font: inherit;
    font-size: 14px;
    line-height: 1.45;
}

.hnt-comment-reply-input textarea::placeholder {
    color: rgba(242, 232, 216, 0.48);
}

.hnt-comment-reply-submit {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 40px;
    height: 40px;
}

.hnt-comment-reply-status {
    margin: 8px 0 0 2px;
}

@media (max-width: 768px) {
    .hnt-comment-modal-scope .hnt-comment-modal-copy.hnt-post-text {
        padding: 16px 20px 4px !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .hnt-comment-modal-replies {
        margin-left: 0 !important;
        padding-left: 24px !important;
    }

    .hnt-comment-modal-replies::before {
        left: 9px;
    }

    .hnt-comment-modal-replies > .hnt-comment-modal-item::before {
        left: -15px;
        width: 14px;
    }

    .hnt-comment-reply-composer {
        margin-left: 0;
        max-width: 100%;
    }
}

/* Patch 682: Moments viewer in HNT/Lens shell without desktop right sidebar */
.app-window.hnt-moments-window {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    grid-template-columns: 260px minmax(0, 1fr);
    background: #11110f;
}

.app-window.hnt-moments-window.sidebar-collapsed {
    grid-template-columns: 88px minmax(0, 1fr);
}

.hnt-moments-window .sidebar-right,
.hnt-moments-right-placeholder {
    display: none !important;
}

.hnt-moments-main {
    position: relative;
    min-width: 0;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 14%, rgba(214, 168, 79, 0.10), transparent 36%),
        linear-gradient(180deg, #171714 0%, #10100f 100%);
}

.hnt-moment-screen,
.hnt-moment-empty-screen {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.hnt-moment-stage-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 22px 112px 22px 26px;
}

.hnt-moment-stage {
    position: relative;
    width: min(520px, calc(100vw - 460px));
    aspect-ratio: 9 / 16;
    max-height: calc(100vh - 44px);
    max-height: calc(100dvh - 44px);
    min-width: 320px;
    overflow: hidden;
    border-radius: 18px;
    background: #050505;
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.58);
}

.hnt-moment-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #000;
}

.hnt-moment-video::-webkit-media-controls,
.hnt-moment-video::-webkit-media-controls-enclosure,
.hnt-moment-video::-webkit-media-controls-panel {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.hnt-moment-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.10) 57%, rgba(0,0,0,0.82) 100%),
        linear-gradient(90deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.20) 100%);
}

.hnt-moment-mute {
    position: absolute;
    z-index: 5;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(16, 16, 15, 0.52);
    color: rgba(255, 255, 255, 0.90);
    display: grid;
    place-items: center;
    cursor: pointer;
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
}

.hnt-moment-mute svg ,

.hnt-moment-mute .ph {
    width: 19px;
    height: 19px;
}

.hnt-moment-copy {
    position: absolute;
    z-index: 4;
    left: 18px;
    right: 82px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    color: #fff;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.82);
}

.hnt-moment-author {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 850;
    letter-spacing: -0.03em;
}

.hnt-moment-author img {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
}

.hnt-moment-caption,
.hnt-moment-description {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
}

.hnt-moment-caption a,
.hnt-moment-description a {
    color: #fff;
    font-weight: 850;
    text-decoration: none;
}

.hnt-moment-description {
    color: rgba(255, 255, 255, 0.78);
}

.hnt-moment-action-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 58px;
    color: var(--text-main);
}

.hnt-moment-action-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    display: block;
    margin-bottom: -4px;
}

.hnt-moment-action-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid rgba(214, 168, 79, 0.74);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42);
}

.hnt-moment-action-plus {
    width: 21px;
    height: 21px;
    margin-top: -26px;
    margin-bottom: 2px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    color: #141412;
    background: var(--accent-primary);
    border: 2px solid #11110f;
    text-decoration: none;
    font-size: 17px;
    line-height: 1;
    font-weight: 950;
}

.hnt-moment-action-form,
.hnt-moment-action-wrap {
    appearance: none;
    border: 0;
    background: transparent;
    margin: 0;
    padding: 0;
    width: 58px;
    min-width: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(242, 232, 216, 0.88);
    font-family: var(--font-main);
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
    cursor: pointer;
}

.hnt-moment-action {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    background: rgba(36, 35, 31, 0.76);
    color: rgba(242, 232, 216, 0.92);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(14px) saturate(126%);
    -webkit-backdrop-filter: blur(14px) saturate(126%);
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.hnt-moment-action:hover {
    transform: translateY(-2px);
    color: #141412;
    background: var(--accent-primary);
    border-color: rgba(214, 168, 79, 0.58);
}

.hnt-moment-action.is-active {
    color: #141412;
    background: var(--accent-primary);
    border-color: rgba(214, 168, 79, 0.82);
    box-shadow: 0 16px 36px var(--accent-primary-glow);
}

.hnt-moment-action svg ,

.hnt-moment-action .ph {
    width: 21px;
    height: 21px;
}

.hnt-moment-desktop-nav {
    position: absolute;
    z-index: 7;
    top: 50%;
    right: 38px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.hnt-moment-desktop-nav a,
.hnt-moment-desktop-nav span {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: rgba(242, 232, 216, 0.72);
    text-decoration: none;
    opacity: 0.88;
}

.hnt-moment-desktop-nav span {
    opacity: 0.24;
}

.hnt-moment-desktop-nav svg ,

.hnt-moment-desktop-nav .ph {
    width: 24px;
    height: 24px;
}

.hnt-moment-mobile-topbar {
    display: none;
}

.hnt-moment-comments-backdrop,
.hnt-moment-more-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.56);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.hnt-moment-comments-backdrop.is-open,
.hnt-moment-more-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.hnt-moment-comments,
.hnt-moment-more-sheet {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    width: min(430px, 100vw);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--text-main);
    background:
        radial-gradient(circle at 100% 0%, rgba(214, 168, 79, 0.12), transparent 35%),
        rgba(26, 26, 24, 0.98);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -28px 0 80px rgba(0, 0, 0, 0.52);
    transform: translateX(105%);
    transition: transform 0.23s ease;
}

.hnt-moment-comments.is-open,
.hnt-moment-more-sheet.is-open {
    transform: translateX(0);
}

.hnt-moment-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hnt-moment-panel-head span {
    display: block;
    margin-bottom: 5px;
    color: var(--accent-primary);
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.hnt-moment-panel-head h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.hnt-moment-panel-head button {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    background: rgba(36, 35, 31, 0.76);
    color: var(--text-main);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.hnt-moment-panel-head button svg ,

.hnt-moment-panel-head button .ph {
    width: 19px;
    height: 19px;
}

.hnt-moment-comment-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hnt-moment-comment {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 11px;
}

.hnt-moment-comment img {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    object-fit: cover;
}

.hnt-moment-comment-body {
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    background: rgba(36, 35, 31, 0.70);
}

.hnt-moment-comment-body header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 12px;
}

.hnt-moment-comment-body strong {
    font-weight: 900;
}

.hnt-moment-comment-body small {
    color: var(--text-muted);
}

.hnt-moment-comment-body p {
    margin: 0;
    color: rgba(242, 232, 216, 0.84);
    font-size: 13px;
    line-height: 1.45;
}

.hnt-moment-comment-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hnt-moment-comment-form textarea,
.hnt-moment-edit-form textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(16, 16, 15, 0.76);
    color: var(--text-main);
    outline: none;
    padding: 12px 13px;
    font-family: var(--font-main);
    font-size: 13px;
    line-height: 1.45;
    resize: vertical;
}

.hnt-moment-comment-form textarea {
    min-height: 44px;
    max-height: 120px;
}

.hnt-moment-comment-form button,
.hnt-moment-edit-form button {
    min-height: 44px;
    border: 0;
    border-radius: 13px;
    background: var(--accent-primary);
    color: #141412;
    padding: 0 16px;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.hnt-moment-empty-note,
.hnt-moment-login-note {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.hnt-moment-login-note {
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hnt-moment-more-content {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

.hnt-moment-more-action,
.hnt-moment-more-content button.hnt-moment-more-action {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    background: rgba(36, 35, 31, 0.76);
    color: var(--text-main);
    text-decoration: none;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}

.hnt-moment-more-action svg ,

.hnt-moment-more-action .ph {
    width: 18px;
    height: 18px;
}

.hnt-moment-more-action.is-danger {
    color: #f4b8ad;
    border-color: rgba(184, 70, 58, 0.25);
    background: rgba(184, 70, 58, 0.12);
}

.hnt-moment-edit-form {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(16, 16, 15, 0.54);
}

.hnt-moment-edit-form.is-open {
    display: flex;
}

.hnt-moment-edit-form label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

.hnt-moment-edit-form textarea {
    min-height: 120px;
}

.hnt-moment-empty-screen {
    display: grid;
    place-items: center;
    padding: 24px;
}

.hnt-moment-empty-card {
    width: min(520px, 100%);
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(214, 168, 79, 0.12), transparent 36%),
        var(--card-bg);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
}

.hnt-moment-empty-card span {
    display: block;
    margin-bottom: 10px;
    color: var(--accent-primary);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.hnt-moment-empty-card h1 {
    margin: 0 0 10px;
    font-size: 28px;
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: -0.05em;
}

.hnt-moment-empty-card p {
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.55;
}

@media (max-width: 1200px) {
    .app-window.hnt-moments-window {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .hnt-moment-stage-wrap {
        padding-right: 86px;
    }

    .hnt-moment-stage {
        width: min(480px, calc(100vw - 390px));
    }

    .hnt-moment-desktop-nav {
        right: 24px;
    }
}

@media (max-width: 992px) and (min-width: 769px) {
    .app-window.hnt-moments-window {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .hnt-moment-stage {
        width: min(430px, calc(100vw - 330px));
    }
}

@media (max-width: 768px) {
    .app-window.hnt-moments-window,
    .app-window.hnt-moments-window.sidebar-collapsed {
        grid-template-columns: 1fr;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background: #000;
    }

    .hnt-moments-window .sidebar-left,
    .hnt-moments-window .hnt-mobile-topbar,
    .hnt-moments-window .hnt-mobile-bottom-bar,
    .hnt-moments-window .hnt-mobile-menu-shell,
    .hnt-moments-window .hnt-mobile-menu-backdrop {
        display: none !important;
    }

    .hnt-moments-main {
        background: #000;
    }

    .hnt-moment-stage-wrap {
        inset: 0;
        padding: 0;
        display: block;
    }

    .hnt-moment-stage {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        min-width: 0;
        max-height: none;
        aspect-ratio: auto;
        border-radius: 0;
        box-shadow: none;
    }

    .hnt-moment-video {
        object-fit: cover;
    }

    .hnt-moment-mobile-topbar {
        position: fixed;
        z-index: 20;
        top: 0;
        left: 0;
        right: 0;
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr) 46px;
        align-items: center;
        gap: 8px;
        padding: max(24px, env(safe-area-inset-top)) 16px 10px;
        color: #fff;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.62);
        pointer-events: none;
    }

    .hnt-moment-mobile-topbar strong {
        min-width: 0;
        text-align: center;
        font-size: 31px;
        line-height: 1;
        font-weight: 850;
        letter-spacing: -0.07em;
    }

    .hnt-moment-mobile-icon {
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 13px;
        color: #fff;
        display: inline-grid;
        place-items: center;
        text-decoration: none;
        background: transparent;
        pointer-events: auto;
    }

    .hnt-moment-mobile-icon svg ,

    .hnt-moment-mobile-icon .ph {
        width: 34px;
        height: 34px;
    }

    .hnt-moment-mobile-icon:last-child {
        border: 2px solid rgba(255, 255, 255, 0.88);
        border-radius: 13px;
    }

    .hnt-moment-mobile-icon:last-child svg ,

    .hnt-moment-mobile-icon:last-child .ph {
        width: 28px;
        height: 28px;
    }

    .hnt-moment-mute {
        top: calc(max(24px, env(safe-area-inset-top)) + 70px);
        right: 14px;
        width: 38px;
        height: 38px;
        opacity: 0.84;
    }

    .hnt-moment-action-rail {
        position: absolute;
        z-index: 6;
        right: max(14px, env(safe-area-inset-right));
        bottom: calc(112px + env(safe-area-inset-bottom));
        width: 58px;
        gap: 12px;
        justify-content: flex-end;
        color: #fff;
    }

    .hnt-moment-action-avatar,
    .hnt-moment-action-avatar img {
        width: 46px;
        height: 46px;
    }

    .hnt-moment-action-plus {
        border-color: rgba(0, 0, 0, 0.62);
    }

    .hnt-moment-action {
        width: 56px;
        height: 56px;
        background: rgba(151, 138, 123, 0.58);
        border-color: rgba(255, 255, 255, 0.16);
        color: #fff;
    }

    .hnt-moment-action.is-active {
        color: #141412;
        background: var(--accent-primary);
    }

    .hnt-moment-action svg ,

    .hnt-moment-action .ph {
        width: 26px;
        height: 26px;
    }

    .hnt-moment-action-form,
    .hnt-moment-action-wrap {
        width: 62px;
        min-width: 62px;
        color: #fff;
        font-size: 18px;
        font-weight: 650;
        gap: 8px;
    }

    .hnt-moment-copy {
        left: max(24px, env(safe-area-inset-left));
        right: 96px;
        bottom: calc(34px + env(safe-area-inset-bottom));
        gap: 16px;
    }

    .hnt-moment-author {
        font-size: 30px;
        font-weight: 760;
        gap: 22px;
    }

    .hnt-moment-author img {
        width: 58px;
        height: 58px;
    }

    .hnt-moment-caption,
    .hnt-moment-description {
        font-size: 25px;
        line-height: 1.24;
        letter-spacing: -0.05em;
    }

    .hnt-moment-description {
        display: none;
    }

    .hnt-moment-desktop-nav {
        display: none;
    }

    .hnt-moment-comments,
    .hnt-moment-more-sheet {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100vw;
        border-left: 0;
        border-radius: 0;
        transform: translateY(105%);
    }

    .hnt-moment-comments.is-open,
    .hnt-moment-more-sheet.is-open {
        transform: translateY(0);
    }

    .hnt-moment-panel-head {
        padding: calc(max(18px, env(safe-area-inset-top)) + 10px) 18px 15px;
    }

    .hnt-moment-comment-form {
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 430px) {
    .hnt-moment-mobile-topbar strong {
        font-size: 28px;
    }

    .hnt-moment-action-rail {
        right: max(10px, env(safe-area-inset-right));
        bottom: calc(104px + env(safe-area-inset-bottom));
    }

    .hnt-moment-action {
        width: 52px;
        height: 52px;
    }

    .hnt-moment-action-form,
    .hnt-moment-action-wrap {
        font-size: 16px;
    }

    .hnt-moment-copy {
        left: max(18px, env(safe-area-inset-left));
        right: 86px;
    }

    .hnt-moment-author {
        font-size: 27px;
        gap: 16px;
    }

    .hnt-moment-author img {
        width: 54px;
        height: 54px;
    }

    .hnt-moment-caption,
    .hnt-moment-description {
        font-size: 23px;
    }
}

@media (max-width: 768px) {
    .hnt-moments-window .hnt-moments-main {
        padding: 0 !important;
    }
}


/* Patch 683: Moments mobile fullscreen correction.
   Keeps desktop Patch 682 intact, fixes mobile overlay/rail to match the reference layout. */
@media (max-width: 768px) {
    html:has(.hnt-moments-window),
    body.hnt-preview-body:has(.hnt-moments-window) {
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    .hnt-preview-body .app-window.hnt-moments-window,
    .app-window.hnt-moments-window,
    .app-window.hnt-moments-window.sidebar-collapsed {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        display: block !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    .app-window.hnt-moments-window .hnt-moments-main,
    .hnt-moments-window .hnt-moments-main,
    .hnt-preview-shell.hnt-moments-window > main.hnt-moments-main {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    .hnt-moment-screen {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    .hnt-moment-stage-wrap {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    .hnt-moment-stage {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    .hnt-moment-video {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        background: #000 !important;
    }

    .hnt-moment-vignette {
        z-index: 2;
        background:
            linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0.04) 55%, rgba(0,0,0,0.72) 100%),
            linear-gradient(90deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,0.22) 100%) !important;
    }

    .hnt-moment-mobile-topbar {
        z-index: 30 !important;
        padding: calc(env(safe-area-inset-top) + 26px) 26px 12px !important;
        grid-template-columns: 54px minmax(0, 1fr) 54px !important;
        background: transparent !important;
    }

    .hnt-moment-mobile-topbar strong {
        font-size: clamp(29px, 8.4vw, 42px) !important;
        font-weight: 850 !important;
        letter-spacing: -0.065em !important;
    }

    .hnt-moment-mobile-icon {
        width: 48px !important;
        height: 48px !important;
        border-radius: 15px !important;
    }

    .hnt-moment-mobile-icon svg ,

    .hnt-moment-mobile-icon .ph {
        width: 38px !important;
        height: 38px !important;
    }

    .hnt-moment-mobile-icon:last-child {
        width: 50px !important;
        height: 50px !important;
        border: 3px solid rgba(255, 255, 255, 0.88) !important;
        border-radius: 17px !important;
    }

    .hnt-moment-mobile-icon:last-child svg ,

    .hnt-moment-mobile-icon:last-child .ph {
        width: 31px !important;
        height: 31px !important;
    }

    .hnt-moment-mute,
    .hnt-moment-action-avatar,
    .hnt-moment-action-plus,
    .hnt-moment-bookmark-action {
        display: none !important;
    }

    .hnt-moment-action-rail {
        position: fixed !important;
        z-index: 24 !important;
        right: max(20px, env(safe-area-inset-right)) !important;
        bottom: calc(168px + env(safe-area-inset-bottom)) !important;
        width: 76px !important;
        gap: 22px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important;
        color: #fff !important;
        pointer-events: auto !important;
    }

    .hnt-moment-action-form,
    .hnt-moment-action-wrap {
        width: 76px !important;
        min-width: 76px !important;
        gap: 9px !important;
        color: #fff !important;
        font-size: clamp(18px, 5vw, 25px) !important;
        line-height: 1 !important;
        font-weight: 760 !important;
        text-align: center !important;
        text-shadow: 0 2px 16px rgba(0,0,0,0.76) !important;
    }

    .hnt-moment-action {
        width: 84px !important;
        height: 84px !important;
        border-radius: 999px !important;
        color: #fff !important;
        background: rgba(130, 122, 111, 0.74) !important;
        border: 1px solid rgba(255,255,255,0.16) !important;
        box-shadow: 0 18px 42px rgba(0,0,0,0.34) !important;
        backdrop-filter: blur(13px) saturate(124%) !important;
        -webkit-backdrop-filter: blur(13px) saturate(124%) !important;
    }

    .hnt-moment-action.is-active {
        background: var(--accent-primary) !important;
        color: #141412 !important;
        border-color: rgba(214,168,79,0.86) !important;
    }

    .hnt-moment-action svg ,

    .hnt-moment-action .ph {
        width: 38px !important;
        height: 38px !important;
    }

    .hnt-moment-copy {
        position: fixed !important;
        z-index: 23 !important;
        left: max(48px, env(safe-area-inset-left)) !important;
        right: 116px !important;
        bottom: calc(74px + env(safe-area-inset-bottom)) !important;
        gap: 22px !important;
        color: #fff !important;
        text-shadow: 0 3px 18px rgba(0,0,0,0.84) !important;
    }

    .hnt-moment-author {
        gap: 22px !important;
        font-size: clamp(24px, 7.1vw, 34px) !important;
        line-height: 1.05 !important;
        font-weight: 800 !important;
        letter-spacing: -0.055em !important;
    }

    .hnt-moment-author img {
        width: 64px !important;
        height: 64px !important;
        border-width: 3px !important;
    }

    .hnt-moment-caption,
    .hnt-moment-description {
        font-size: clamp(20px, 6.2vw, 29px) !important;
        line-height: 1.22 !important;
        letter-spacing: -0.055em !important;
        color: rgba(255,255,255,0.94) !important;
    }

    .hnt-moment-description {
        display: none !important;
    }
}

@media (max-width: 430px) {
    .hnt-moment-action-rail {
        right: max(15px, env(safe-area-inset-right)) !important;
        bottom: calc(142px + env(safe-area-inset-bottom)) !important;
        width: 68px !important;
        gap: 18px !important;
    }

    .hnt-moment-action-form,
    .hnt-moment-action-wrap {
        width: 68px !important;
        min-width: 68px !important;
        font-size: 17px !important;
    }

    .hnt-moment-action {
        width: 72px !important;
        height: 72px !important;
    }

    .hnt-moment-action svg ,

    .hnt-moment-action .ph {
        width: 32px !important;
        height: 32px !important;
    }

    .hnt-moment-copy {
        left: max(24px, env(safe-area-inset-left)) !important;
        right: 96px !important;
        bottom: calc(54px + env(safe-area-inset-bottom)) !important;
        gap: 14px !important;
    }

    .hnt-moment-author {
        gap: 16px !important;
        font-size: 27px !important;
    }

    .hnt-moment-author img {
        width: 56px !important;
        height: 56px !important;
    }

    .hnt-moment-caption,
    .hnt-moment-description {
        font-size: 23px !important;
    }
}

/* Patch 684: Moments mobile sizing polish + desktop mute icon state fix.
   Scope: only the HNT preview Moments viewer. Desktop layout from 682/683 stays intact. */
.hnt-moment-mute svg[hidden],
.hnt-moment-mute [hidden] ,

/* Patch 684: Moments mobile sizing polish + desktop mute icon state fix.
   Scope: only the HNT preview Moments viewer. Desktop layout from 682/683 stays intact. */
.hnt-moment-mute .ph[hidden]{
    display: none !important;
}

@media (max-width: 768px) {
    .hnt-moment-mobile-topbar {
        padding: calc(env(safe-area-inset-top) + 22px) 28px 10px !important;
        grid-template-columns: 46px minmax(0, 1fr) 46px !important;
        align-items: center !important;
    }

    .hnt-moment-mobile-topbar strong {
        font-size: clamp(28px, 7.4vw, 34px) !important;
        line-height: 1 !important;
        font-weight: 760 !important;
        letter-spacing: -0.055em !important;
    }

    .hnt-moment-mobile-icon {
        width: 42px !important;
        height: 42px !important;
        border-radius: 14px !important;
    }

    .hnt-moment-mobile-icon svg ,

    .hnt-moment-mobile-icon .ph {
        width: 33px !important;
        height: 33px !important;
    }

    .hnt-moment-mobile-icon:last-child {
        width: 42px !important;
        height: 42px !important;
        border: 2px solid rgba(255, 255, 255, 0.88) !important;
        border-radius: 14px !important;
    }

    .hnt-moment-mobile-icon:last-child svg ,

    .hnt-moment-mobile-icon:last-child .ph {
        width: 27px !important;
        height: 27px !important;
    }

    .hnt-moment-action-rail {
        right: max(28px, env(safe-area-inset-right)) !important;
        bottom: calc(124px + env(safe-area-inset-bottom)) !important;
        width: 62px !important;
        gap: 16px !important;
        align-items: center !important;
    }

    .hnt-moment-action-form,
    .hnt-moment-action-wrap {
        width: 62px !important;
        min-width: 62px !important;
        gap: 6px !important;
        font-size: clamp(13px, 3.9vw, 17px) !important;
        line-height: 1.08 !important;
        font-weight: 650 !important;
        letter-spacing: -0.03em !important;
    }

    .hnt-moment-action {
        width: 58px !important;
        height: 58px !important;
        background: rgba(130, 122, 111, 0.68) !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32) !important;
    }

    .hnt-moment-action svg ,

    .hnt-moment-action .ph {
        width: 27px !important;
        height: 27px !important;
    }

    .hnt-moment-copy {
        left: max(42px, env(safe-area-inset-left)) !important;
        right: 112px !important;
        bottom: calc(48px + env(safe-area-inset-bottom)) !important;
        gap: 12px !important;
    }

    .hnt-moment-author {
        gap: 16px !important;
        font-size: clamp(21px, 5.6vw, 28px) !important;
        line-height: 1.05 !important;
        font-weight: 720 !important;
        letter-spacing: -0.052em !important;
    }

    .hnt-moment-author img {
        width: 56px !important;
        height: 56px !important;
        border-width: 2px !important;
    }

    .hnt-moment-caption,
    .hnt-moment-description {
        font-size: clamp(18px, 5vw, 25px) !important;
        line-height: 1.25 !important;
        letter-spacing: -0.048em !important;
    }
}

@media (max-width: 430px) {
    .hnt-moment-mobile-topbar {
        padding-left: 24px !important;
        padding-right: 24px !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    }

    .hnt-moment-mobile-topbar strong {
        font-size: 30px !important;
        font-weight: 740 !important;
    }

    .hnt-moment-mobile-icon,
    .hnt-moment-mobile-icon:last-child {
        width: 40px !important;
        height: 40px !important;
    }

    .hnt-moment-mobile-icon svg ,

    .hnt-moment-mobile-icon .ph {
        width: 31px !important;
        height: 31px !important;
    }

    .hnt-moment-mobile-icon:last-child svg ,

    .hnt-moment-mobile-icon:last-child .ph {
        width: 25px !important;
        height: 25px !important;
    }

    .hnt-moment-action-rail {
        right: max(22px, env(safe-area-inset-right)) !important;
        bottom: calc(118px + env(safe-area-inset-bottom)) !important;
        width: 58px !important;
        gap: 15px !important;
    }

    .hnt-moment-action-form,
    .hnt-moment-action-wrap {
        width: 58px !important;
        min-width: 58px !important;
        font-size: 15px !important;
    }

    .hnt-moment-action {
        width: 54px !important;
        height: 54px !important;
    }

    .hnt-moment-action svg ,

    .hnt-moment-action .ph {
        width: 25px !important;
        height: 25px !important;
    }

    .hnt-moment-copy {
        left: max(24px, env(safe-area-inset-left)) !important;
        right: 96px !important;
        bottom: calc(42px + env(safe-area-inset-bottom)) !important;
        gap: 10px !important;
    }

    .hnt-moment-author {
        gap: 14px !important;
        font-size: 23px !important;
        font-weight: 720 !important;
    }

    .hnt-moment-author img {
        width: 52px !important;
        height: 52px !important;
    }

    .hnt-moment-caption,
    .hnt-moment-description {
        font-size: 20px !important;
        line-height: 1.25 !important;
    }
}


/* Patch 685: Moments shell overflow + mobile reel polish.
   Fixes notification/message shell grid on desktop Moments pages and tightens mobile reel controls. */
.app-window.hnt-moments-window.notifications-shell-open {
    grid-template-columns: 88px minmax(320px, 360px) minmax(0, 1fr) !important;
}

.app-window.hnt-moments-window.messages-shell-open {
    grid-template-columns: 88px minmax(320px, 360px) minmax(0, 1fr) !important;
}

.app-window.hnt-moments-window.notifications-shell-open .hnt-notification-shell.open,
.app-window.hnt-moments-window.messages-shell-open .hnt-message-shell.open {
    display: flex !important;
    height: 100% !important;
    min-width: 0 !important;
}

.app-window.hnt-moments-window.notifications-shell-open .hnt-moments-main,
.app-window.hnt-moments-window.messages-shell-open .hnt-moments-main {
    min-width: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 768px) {
    .hnt-moment-action-rail {
        right: max(10px, env(safe-area-inset-right)) !important;
        bottom: calc(92px + env(safe-area-inset-bottom)) !important;
        width: 50px !important;
        gap: 12px !important;
    }

    .hnt-moment-action-form,
    .hnt-moment-action-wrap {
        width: 50px !important;
        min-width: 50px !important;
        gap: 5px !important;
        font-size: clamp(12px, 3.2vw, 14px) !important;
        line-height: 1.05 !important;
        font-weight: 620 !important;
    }

    .hnt-moment-action {
        width: 48px !important;
        height: 48px !important;
        background: rgba(130, 122, 111, 0.60) !important;
    }

    .hnt-moment-action svg ,

    .hnt-moment-action .ph {
        width: 22px !important;
        height: 22px !important;
    }

    .hnt-moment-copy {
        left: max(42px, env(safe-area-inset-left)) !important;
        right: 82px !important;
        bottom: calc(24px + env(safe-area-inset-bottom)) !important;
        gap: 8px !important;
    }

    .hnt-moment-author {
        gap: 12px !important;
        font-size: clamp(18px, 4.7vw, 22px) !important;
        line-height: 1.05 !important;
        font-weight: 720 !important;
    }

    .hnt-moment-author img {
        width: 46px !important;
        height: 46px !important;
        border-width: 2px !important;
    }

    .hnt-moment-caption,
    .hnt-moment-description {
        font-size: clamp(15px, 4.1vw, 19px) !important;
        line-height: 1.25 !important;
        letter-spacing: -0.035em !important;
    }
}

@media (max-width: 430px) {
    .hnt-moment-action-rail {
        right: max(8px, env(safe-area-inset-right)) !important;
        bottom: calc(84px + env(safe-area-inset-bottom)) !important;
        width: 48px !important;
        gap: 11px !important;
    }

    .hnt-moment-action-form,
    .hnt-moment-action-wrap {
        width: 48px !important;
        min-width: 48px !important;
        font-size: 12px !important;
    }

    .hnt-moment-action {
        width: 46px !important;
        height: 46px !important;
    }

    .hnt-moment-action svg ,

    .hnt-moment-action .ph {
        width: 21px !important;
        height: 21px !important;
    }

    .hnt-moment-copy {
        left: max(18px, env(safe-area-inset-left)) !important;
        right: 74px !important;
        bottom: calc(22px + env(safe-area-inset-bottom)) !important;
        gap: 7px !important;
    }

    .hnt-moment-author {
        gap: 10px !important;
        font-size: 20px !important;
    }

    .hnt-moment-author img {
        width: 44px !important;
        height: 44px !important;
    }

    .hnt-moment-caption,
    .hnt-moment-description {
        font-size: 17px !important;
    }
}

/* Patch 686: Moments mute control + tactile reel navigation feedback.
   Scope: HNT preview Moments only. Keeps the accepted 685 desktop/mobile layout. */
.hnt-moment-mobile-mute-action {
    display: none !important;
}

.hnt-moment-mute svg[data-socialite-moment-mute-on] ,

.hnt-moment-mute .ph[data-socialite-moment-mute-on] {
    display: block !important;
}

.hnt-moment-mute svg[data-socialite-moment-mute-off] ,

.hnt-moment-mute .ph[data-socialite-moment-mute-off] {
    display: none !important;
}

.hnt-moment-stage {
    will-change: transform, opacity, filter;
    transition: transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.14s ease, filter 0.14s ease;
}

.hnt-moment-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.14s ease, background 0.14s ease;
}

.hnt-moment-screen.is-dragging .hnt-moment-stage {
    transform: translateY(var(--hnt-swipe-offset, 0px)) scale(0.985);
    opacity: 0.92;
    filter: saturate(0.96) contrast(0.98);
    transition: none !important;
}

.hnt-moment-screen.is-dragging-next .hnt-moment-stage::after {
    opacity: 1;
    background: linear-gradient(0deg, rgba(214, 168, 79, 0.18), transparent 34%);
}

.hnt-moment-screen.is-dragging-previous .hnt-moment-stage::after {
    opacity: 1;
    background: linear-gradient(180deg, rgba(214, 168, 79, 0.18), transparent 34%);
}

.hnt-moment-screen.is-leaving-next .hnt-moment-stage,
.hnt-moment-screen.is-leaving-previous .hnt-moment-stage {
    opacity: 0.20;
    filter: blur(2px) saturate(0.88);
    transition: transform 0.14s cubic-bezier(0.35, 0, 0.25, 1), opacity 0.14s ease, filter 0.14s ease !important;
}

.hnt-moment-screen.is-leaving-next .hnt-moment-stage {
    transform: translateY(-112%) scale(0.965);
}

.hnt-moment-screen.is-leaving-previous .hnt-moment-stage {
    transform: translateY(112%) scale(0.965);
}

@media (max-width: 768px) {
    .hnt-moment-mobile-mute-action {
        display: flex !important;
    }

    .hnt-moment-mobile-mute-action .hnt-moment-action {
        background: rgba(16, 16, 15, 0.42) !important;
        border-color: rgba(255, 255, 255, 0.16) !important;
    }

    .hnt-moment-mobile-mute-action .hnt-moment-action svg ,

    .hnt-moment-mobile-mute-action .hnt-moment-action .ph {
        width: 21px !important;
        height: 21px !important;
    }

    .hnt-moment-screen.is-dragging .hnt-moment-stage {
        transform: translateY(var(--hnt-swipe-offset, 0px)) scale(0.992);
    }
}


/* Patch 687: mobile mute/unmute icon state + slightly quicker reel handoff.
   Desktop mute button intentionally keeps the accepted single muted icon. */
.hnt-moment-mobile-mute-action .hnt-moment-action {
    position: relative;
}

.hnt-moment-mobile-mute-action svg[hidden] ,

.hnt-moment-mobile-mute-action .ph[hidden] {
    display: none !important;
}

.hnt-moment-mobile-mute-action svg:not([hidden]) ,

.hnt-moment-mobile-mute-action .ph:not([hidden]) {
    display: block !important;
}

.hnt-moment-mobile-mute-action.is-unmuted .hnt-moment-action {
    background: rgba(16, 16, 15, 0.50) !important;
}

/* Patch 688: real mute/unmute state for desktop + mobile.
   Previous rules forced the muted SVG visually. This override makes the icon follow JS state. */
.hnt-moment-screen [data-socialite-moment-mute].is-muted [data-socialite-moment-mute-on],
.hnt-moment-screen [data-socialite-moment-mute]:not(.is-unmuted) [data-socialite-moment-mute-on] {
    display: block !important;
}

.hnt-moment-screen [data-socialite-moment-mute].is-muted [data-socialite-moment-mute-off],
.hnt-moment-screen [data-socialite-moment-mute]:not(.is-unmuted) [data-socialite-moment-mute-off] {
    display: none !important;
}

.hnt-moment-screen [data-socialite-moment-mute].is-unmuted [data-socialite-moment-mute-on] {
    display: none !important;
}

.hnt-moment-screen [data-socialite-moment-mute].is-unmuted [data-socialite-moment-mute-off] {
    display: block !important;
}

/* =========================================
   PATCH 689 - MODAL COLORS ONLY: HNT/Lens calm palette
   Scope: composer modal + post/comment modal colors only.
========================================= */
.modal-backdrop,
.post-modal-backdrop {
    background: rgba(8, 9, 7, 0.74) !important;
}

.composer-modal,
.post-detail-modal {
    background:
        linear-gradient(145deg, rgba(28, 28, 24, 0.98), rgba(18, 19, 16, 0.985)),
        var(--bg-app) !important;
    border-color: rgba(214, 168, 79, 0.14) !important;
    box-shadow:
        0 42px 120px rgba(0, 0, 0, 0.68),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.composer-modal::before,
.post-detail-modal::before {
    background: linear-gradient(180deg, rgba(214, 168, 79, 0.055), transparent 38%) !important;
    opacity: 0.72 !important;
}

.composer-orb,
.post-detail-modal::after {
    opacity: 0 !important;
}

.composer-header,
.post-modal-topbar {
    background: rgba(15, 16, 13, 0.44) !important;
    border-bottom-color: rgba(214, 168, 79, 0.09) !important;
}

.composer-footer,
.post-modal-composer {
    background: rgba(13, 14, 11, 0.40) !important;
    border-top-color: rgba(214, 168, 79, 0.09) !important;
}

.composer-kicker,
.post-modal-kicker,
.composer-audience {
    color: var(--accent-primary) !important;
}

.composer-kicker::before,
.post-modal-kicker::before {
    background: var(--accent-primary) !important;
    box-shadow: 0 0 12px rgba(214, 168, 79, 0.22) !important;
}

.modal-close,
.post-modal-close {
    background: rgba(255, 255, 255, 0.055) !important;
    color: var(--text-muted) !important;
}

.modal-close:hover,
.post-modal-close:hover {
    background: rgba(214, 168, 79, 0.12) !important;
    color: var(--accent-primary) !important;
}

.composer-audience,
.composer-tool,
.composer-feeling-choice {
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(214, 168, 79, 0.10) !important;
    color: var(--text-main) !important;
}

.composer-tool span {
    background: rgba(214, 168, 79, 0.14) !important;
    color: var(--accent-primary) !important;
}

.composer-tool:hover,
.composer-feeling-choice:hover,
.composer-add-poll-option:hover:not(:disabled),
.post-modal-tools button:hover {
    background: rgba(214, 168, 79, 0.10) !important;
    border-color: rgba(214, 168, 79, 0.22) !important;
    color: var(--text-main) !important;
}

.composer-feeling-choice.is-active {
    background: rgba(214, 168, 79, 0.14) !important;
    border-color: rgba(214, 168, 79, 0.32) !important;
    color: var(--text-main) !important;
    box-shadow: none !important;
}

.composer-input-shell,
.composer-option-panel,
.composer-poll-question,
.composer-poll-options input,
.post-modal-input,
.post-comment-bubble {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
        rgba(26, 26, 22, 0.88) !important;
    border-color: rgba(214, 168, 79, 0.11) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.composer-input-shell:focus-within,
.composer-poll-question:focus,
.composer-poll-options input:focus,
.post-modal-input:focus-within {
    border-color: rgba(214, 168, 79, 0.34) !important;
    box-shadow:
        0 0 0 3px rgba(214, 168, 79, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.composer-preview-strip span {
    background: rgba(255, 255, 255, 0.055) !important;
}

.composer-preview-strip span:nth-child(3) {
    background: rgba(214, 168, 79, 0.12) !important;
}

.composer-add-poll-option,
.post-modal-tools button {
    background: rgba(214, 168, 79, 0.095) !important;
    border-color: rgba(214, 168, 79, 0.16) !important;
    color: var(--accent-primary) !important;
}

.post-modal-tools .post-modal-send {
    background: var(--accent-primary) !important;
    color: #141412 !important;
    box-shadow: 0 10px 26px rgba(214, 168, 79, 0.18) !important;
}

.post-modal-scroll,
.post-modal-scroll::-webkit-scrollbar-thumb {
    scrollbar-color: rgba(214, 168, 79, 0.26) transparent !important;
}

.post-modal-scroll::-webkit-scrollbar-thumb {
    background: rgba(214, 168, 79, 0.22) !important;
}

/* =========================================
   PATCH 690 - MODAL COLORS: neutral HNT/Lens tones
   Scope: color correction only. No layout/size/logic changes.
   Modal surfaces now follow page tones (#1A1A18 / #20201E) instead of brownish gradients.
========================================= */
.modal-backdrop,
.post-modal-backdrop {
    background: rgba(8, 8, 7, 0.76) !important;
}

.composer-modal,
.post-detail-modal {
    background: #1A1A18 !important;
    border-color: rgba(242, 232, 216, 0.08) !important;
    box-shadow:
        0 42px 120px rgba(0, 0, 0, 0.70),
        inset 0 1px 0 rgba(242, 232, 216, 0.035) !important;
}

.composer-modal::before,
.post-detail-modal::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%) !important;
    opacity: 0.55 !important;
}

.composer-header,
.post-modal-topbar,
.composer-footer,
.post-modal-composer {
    background: rgba(26, 26, 24, 0.96) !important;
}

.composer-header,
.post-modal-topbar {
    border-bottom-color: rgba(242, 232, 216, 0.07) !important;
}

.composer-footer,
.post-modal-composer {
    border-top-color: rgba(242, 232, 216, 0.07) !important;
}

.modal-close,
.post-modal-close,
.composer-audience,
.composer-tool,
.composer-feeling-choice {
    background: #20201E !important;
    border-color: rgba(242, 232, 216, 0.08) !important;
}

.modal-close,
.post-modal-close {
    color: var(--text-muted) !important;
}

.modal-close:hover,
.post-modal-close:hover,
.composer-tool:hover,
.composer-feeling-choice:hover,
.composer-add-poll-option:hover:not(:disabled),
.post-modal-tools button:hover {
    background: #242421 !important;
    border-color: rgba(214, 168, 79, 0.24) !important;
    color: var(--text-main) !important;
}

.composer-tool span {
    background: rgba(214, 168, 79, 0.16) !important;
    color: var(--accent-primary) !important;
}

.composer-feeling-choice.is-active {
    background: #242421 !important;
    border-color: rgba(214, 168, 79, 0.34) !important;
    color: var(--text-main) !important;
    box-shadow: none !important;
}

.composer-input-shell,
.composer-option-panel,
.composer-poll-question,
.composer-poll-options input,
.post-modal-input,
.post-comment-bubble {
    background: #20201E !important;
    border-color: rgba(242, 232, 216, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(242, 232, 216, 0.035) !important;
}

.composer-input-shell:focus-within,
.composer-poll-question:focus,
.composer-poll-options input:focus,
.post-modal-input:focus-within {
    border-color: rgba(214, 168, 79, 0.34) !important;
    box-shadow:
        0 0 0 3px rgba(214, 168, 79, 0.065),
        inset 0 1px 0 rgba(242, 232, 216, 0.04) !important;
}

.composer-preview-strip span {
    background: rgba(242, 232, 216, 0.07) !important;
}

.composer-preview-strip span:nth-child(3) {
    background: rgba(214, 168, 79, 0.14) !important;
}

.composer-add-poll-option,
.post-modal-tools button {
    background: #20201E !important;
    border-color: rgba(242, 232, 216, 0.08) !important;
    color: var(--accent-primary) !important;
}

.post-modal-tools .post-modal-send {
    background: var(--accent-primary) !important;
    color: #141412 !important;
    box-shadow: 0 10px 26px rgba(214, 168, 79, 0.16) !important;
}

.post-modal-scroll,
.post-modal-scroll::-webkit-scrollbar-thumb {
    scrollbar-color: rgba(242, 232, 216, 0.18) transparent !important;
}

.post-modal-scroll::-webkit-scrollbar-thumb {
    background: rgba(242, 232, 216, 0.16) !important;
}

/* =========================================
   PATCH 691 - MOMENT STUDIO SHELL
   Scope: /moments/create HNT/Lens fullscreen editor shell only.
   No render pipeline, no DB, no route/controller changes.
========================================= */
.hnt-studio-window {
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 72% 6%, rgba(155, 228, 71, 0.08), transparent 34%),
        radial-gradient(circle at 12% 94%, rgba(214, 168, 79, 0.08), transparent 32%),
        #1A1A18 !important;
}

.hnt-studio-window > .sidebar-left,
.hnt-studio-window > .sidebar-right,
.hnt-studio-window > .hnt-mobile-topbar,
.hnt-studio-window > .hnt-mobile-bottom-nav,
.hnt-studio-window > .hnt-mobile-more-panel {
    display: none !important;
}

.hnt-studio-window .hnt-notification-shell,
.hnt-studio-window .hnt-message-shell {
    display: none !important;
}

.hnt-studio-main {
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.hnt-studio {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 64px minmax(0, 1fr) 244px;
    color: var(--text-main);
    background: transparent;
}

.hnt-studio-native-file {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.hnt-studio-topbar {
    height: 64px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(242, 232, 216, 0.07);
    background: rgba(20, 20, 18, 0.78);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    z-index: 4;
}

.hnt-studio-project-meta,
.hnt-studio-top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.hnt-studio-back {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--text-main);
    text-decoration: none;
    background: #20201E;
    border: 1px solid rgba(242, 232, 216, 0.08);
}

.hnt-studio-back svg ,

.hnt-studio-back .ph {
    width: 23px;
    height: 23px;
}

.hnt-studio-project-meta span,
.hnt-studio-panel-head span,
.hnt-studio-import-note,
.hnt-studio-save-state,
.hnt-studio-timeline-head span,
.hnt-studio-duration-pill em,
.hnt-studio-publish-panel p {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.hnt-studio-project-meta span,
.hnt-studio-panel-head span {
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hnt-studio-project-meta strong {
    display: block;
    margin-top: 2px;
    color: var(--text-main);
    font-size: 18px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.hnt-studio-save-state {
    min-width: 180px;
    text-align: right;
}

.hnt-studio.is-over-duration .hnt-studio-save-state,
.hnt-studio.is-missing-media .hnt-studio-save-state {
    color: var(--accent-danger);
}

.hnt-studio-publish {
    min-width: 148px;
    height: 40px;
    border: 0;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #141412;
    background: var(--accent-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(214, 168, 79, 0.14);
}

.hnt-studio-publish:disabled {
    cursor: not-allowed;
    opacity: 0.48;
    filter: saturate(0.55);
}

.hnt-studio-errors {
    position: fixed;
    z-index: 20;
    top: 76px;
    left: 50%;
    width: min(560px, calc(100vw - 36px));
    transform: translateX(-50%);
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(184, 70, 58, 0.42);
    background: rgba(31, 20, 18, 0.94);
    color: var(--text-main);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.52);
}

.hnt-studio-errors strong {
    color: #ffd8d1;
    font-size: 13px;
    font-weight: 950;
}

.hnt-studio-errors ul {
    margin: 8px 0 0 18px;
    color: rgba(242, 232, 216, 0.84);
    font-size: 12px;
    line-height: 1.45;
}

.hnt-studio-shell {
    min-height: 0;
    display: grid;
    grid-template-columns: 320px minmax(360px, 1fr) 188px;
    gap: 0;
    overflow: hidden;
}

.hnt-studio-left {
    min-width: 0;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    border-right: 1px solid rgba(242, 232, 216, 0.07);
    background: rgba(20, 20, 18, 0.72);
}

.hnt-studio-toolrail {
    padding: 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-right: 1px solid rgba(242, 232, 216, 0.06);
    background: rgba(255, 255, 255, 0.025);
}

.hnt-studio-tool,
.hnt-studio-side-feature {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-main);
    cursor: pointer;
}

.hnt-studio-tool {
    min-height: 64px;
    padding: 7px 4px;
    border-radius: 13px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 900;
}

.hnt-studio-tool.is-active {
    color: var(--text-main);
    background: #20201E;
    border-color: rgba(214, 168, 79, 0.20);
}

.hnt-studio-tool.is-locked,
.hnt-studio-side-feature.is-locked {
    cursor: default;
    opacity: 0.78;
}

.hnt-studio-tool em,
.hnt-studio-side-feature em {
    display: inline-flex;
    align-items: center;
    min-height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    color: #141412;
    background: var(--accent-primary);
    font-size: 8px;
    line-height: 1;
    font-style: normal;
    font-weight: 950;
    letter-spacing: 0.05em;
}

.hnt-studio-tool-icon {
    width: 25px;
    height: 25px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: currentColor;
}

.hnt-studio-tool-icon::before {
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
}

.hnt-studio-tool-icon[data-icon="grid"]::before { content: "▦"; }
.hnt-studio-tool-icon[data-icon="text"]::before { content: "T"; font-size: 19px; }
.hnt-studio-tool-icon[data-icon="transition"]::before { content: "↔"; }
.hnt-studio-tool-icon[data-icon="fade"]::before { content: "◐"; }
.hnt-studio-tool-icon[data-icon="filter"]::before { content: "◌"; }
.hnt-studio-tool-icon[data-icon="sparkle"]::before { content: "✦"; }
.hnt-studio-tool-icon[data-icon="palette"]::before { content: "◑"; }

.hnt-studio-media-panel,
.hnt-studio-right,
.hnt-studio-publish-panel {
    min-width: 0;
}

.hnt-studio-media-panel {
    padding: 18px 16px;
    overflow-y: auto;
}

.hnt-studio-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

.hnt-studio-panel-head.compact {
    align-items: center;
    margin-bottom: 12px;
}

.hnt-studio-panel-head h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.hnt-studio-import {
    min-height: 42px;
    padding: 0 13px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #141412;
    background: var(--accent-primary);
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(214, 168, 79, 0.12);
}

.hnt-studio-import svg ,

.hnt-studio-import .ph {
    width: 18px;
    height: 18px;
}

.hnt-studio-import-note {
    margin: 10px 0 14px;
    line-height: 1.35;
}

.hnt-studio-media-list {
    display: grid;
    gap: 10px;
}

.hnt-studio-empty-media,
.hnt-studio-media-item {
    border-radius: 14px;
    border: 1px solid rgba(242, 232, 216, 0.08);
    background: #20201E;
}

.hnt-studio-empty-media {
    min-height: 132px;
    padding: 18px;
    display: grid;
    align-content: center;
    gap: 7px;
    color: var(--text-muted);
}

.hnt-studio-empty-media strong {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 950;
}

.hnt-studio-empty-media span {
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}

.hnt-studio-media-item {
    width: 100%;
    padding: 8px;
    display: grid;
    grid-template-columns: 72px 1fr;
    grid-template-rows: auto auto;
    gap: 6px 10px;
    text-align: left;
    color: var(--text-main);
    cursor: pointer;
}

.hnt-studio-media-thumb {
    grid-row: span 2;
    height: 86px;
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(214, 168, 79, 0.18), transparent),
        #141412;
    border: 1px solid rgba(214, 168, 79, 0.12);
}

.hnt-studio-media-item strong {
    align-self: end;
    min-width: 0;
    color: var(--text-main);
    font-size: 12px;
    line-height: 1.25;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hnt-studio-media-item em {
    color: var(--accent-primary);
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
}

.hnt-studio-center {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: 52px minmax(0, 1fr) 52px;
    align-items: stretch;
    justify-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 28%, rgba(242, 232, 216, 0.06), transparent 28%),
        #1A1A18;
}

.hnt-studio-canvas-toolbar,
.hnt-studio-playbar {
    width: 100%;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.hnt-studio-canvas-toolbar {
    justify-content: flex-start;
    align-self: start;
}

.hnt-studio-canvas-toolbar button,
.hnt-studio-play {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(242, 232, 216, 0.08);
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    background: #20201E;
}

.hnt-studio-canvas-toolbar button:disabled {
    opacity: 0.42;
}

.hnt-studio-canvas-toolbar svg,
.hnt-studio-play svg ,

.hnt-studio-canvas-toolbar .ph,
.hnt-studio-play .ph {
    width: 18px;
    height: 18px;
}

.hnt-studio-preview {
    width: 100%;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 4px 18px;
}

.hnt-studio-phone-frame {
    position: relative;
    width: min(36vh, 340px);
    width: min(36dvh, 340px);
    min-width: 220px;
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    overflow: hidden;
    background: #050505;
    border: 1px solid rgba(242, 232, 216, 0.12);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.48);
}

.hnt-studio-video-preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
}

.hnt-studio-video-preview:not([src]) {
    display: none;
}

.hnt-studio-preview-empty {
    position: absolute;
    inset: 0;
    padding: 26px;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    color: var(--text-muted);
    background:
        radial-gradient(circle at 50% 36%, rgba(214, 168, 79, 0.14), transparent 28%),
        #10100f;
}

.hnt-studio-preview-empty[hidden] {
    display: none !important;
}

.hnt-studio-preview-empty span {
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.hnt-studio-preview-empty strong {
    max-width: 220px;
    margin-top: 10px;
    color: var(--text-main);
    font-size: 22px;
    line-height: 1.02;
    font-weight: 950;
    letter-spacing: -0.06em;
}

.hnt-studio-preview-empty p {
    max-width: 220px;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}

.hnt-studio-preview-safe {
    position: absolute;
    inset: 10px;
    border: 1px dashed rgba(242, 232, 216, 0.11);
    border-radius: 12px;
    pointer-events: none;
}

.hnt-studio-playbar {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 850;
}

.hnt-studio-play:not(:disabled) {
    color: #141412;
    background: var(--accent-primary);
    cursor: pointer;
}

.hnt-studio-right {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    padding: 16px 12px;
    border-left: 1px solid rgba(242, 232, 216, 0.07);
    background: rgba(20, 20, 18, 0.72);
    overflow-y: auto;
}

.hnt-studio-pro-panel {
    display: grid;
    gap: 10px;
}

.hnt-studio-side-feature {
    min-height: 72px;
    padding: 10px 8px;
    border-radius: 14px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 5px;
    border-color: rgba(242, 232, 216, 0.08);
    background: #20201E;
    color: var(--text-muted);
}

.hnt-studio-side-feature strong {
    color: var(--text-main);
    font-size: 11px;
    line-height: 1.16;
    font-weight: 900;
    text-align: center;
}

.hnt-studio-publish-panel {
    align-self: end;
    padding: 13px;
    border-radius: 16px;
    border: 1px solid rgba(242, 232, 216, 0.08);
    background: #20201E;
}

.hnt-studio-publish-panel label {
    display: grid;
    gap: 7px;
    margin-top: 10px;
}

.hnt-studio-publish-panel label span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
}

.hnt-studio-publish-panel input,
.hnt-studio-publish-panel textarea {
    width: 100%;
    border: 1px solid rgba(242, 232, 216, 0.08);
    border-radius: 11px;
    padding: 10px;
    color: var(--text-main);
    background: #1A1A18;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    outline: none;
    resize: none;
}

.hnt-studio-publish-panel input:focus,
.hnt-studio-publish-panel textarea:focus {
    border-color: rgba(214, 168, 79, 0.34);
    box-shadow: 0 0 0 3px rgba(214, 168, 79, 0.06);
}

.hnt-studio-publish-panel p {
    margin-top: 10px;
    line-height: 1.4;
}

.hnt-studio-publish-panel .hh-moment-hashtag-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

.hnt-studio-publish-panel .hh-moment-hashtag-preview[hidden] {
    display: none !important;
}

.hnt-studio-publish-panel .hh-moment-hashtag-preview a {
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: var(--accent-primary);
    background: rgba(214, 168, 79, 0.12);
    font-size: 11px;
    font-weight: 950;
    text-decoration: none;
}

.hnt-studio-timeline {
    min-height: 0;
    padding: 12px 18px 14px;
    border-top: 1px solid rgba(242, 232, 216, 0.07);
    background: rgba(20, 20, 18, 0.92);
    overflow: hidden;
}

.hnt-studio-timeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.hnt-studio-timeline-head strong {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 950;
}

.hnt-studio-timeline-head span {
    display: block;
    margin-top: 2px;
    text-transform: none;
    letter-spacing: 0;
}

.hnt-studio-duration-pill {
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #20201E;
    border: 1px solid rgba(242, 232, 216, 0.08);
    color: var(--accent-primary);
    font-size: 12px;
    font-weight: 950;
}

.hnt-studio.is-over-duration .hnt-studio-duration-pill {
    color: #ffd8d1;
    border-color: rgba(184, 70, 58, 0.35);
}

.hnt-studio-time-ruler {
    height: 22px;
    margin-left: 96px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    color: rgba(242, 232, 216, 0.38);
    font-size: 10px;
    font-weight: 850;
}

.hnt-studio-track {
    min-height: 58px;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    border-top: 1px dashed rgba(242, 232, 216, 0.08);
}

.hnt-studio-track > span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 950;
}

.hnt-studio-text-track > div,
.hnt-studio-timeline-empty {
    min-height: 34px;
    border-radius: 10px;
    border: 1px dashed rgba(242, 232, 216, 0.11);
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: rgba(242, 232, 216, 0.45);
    font-size: 12px;
    font-weight: 800;
}

.hnt-studio-timeline-clip {
    position: relative;
    min-height: 42px;
    width: min(52%, 640px);
    border: 2px solid var(--accent-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 18px;
    overflow: hidden;
    color: var(--text-main);
    background:
        repeating-linear-gradient(90deg, rgba(242, 232, 216, 0.055) 0 18px, rgba(214, 168, 79, 0.10) 18px 20px),
        #141412;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30);
}

.hnt-studio-timeline-clip strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 950;
}

.hnt-studio-timeline-clip em {
    color: var(--accent-primary);
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
}

.hnt-studio-trim-handle {
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: -2px;
    width: 13px;
    border-radius: 8px 0 0 8px;
    background: var(--accent-primary);
}

.hnt-studio-trim-handle.right {
    left: auto;
    right: -2px;
    border-radius: 0 8px 8px 0;
}

.hnt-studio-trim-handle::after {
    content: "";
    position: absolute;
    inset: 10px 4px;
    border-left: 2px solid rgba(20, 20, 18, 0.72);
    border-right: 2px solid rgba(20, 20, 18, 0.72);
}

@media (max-width: 1180px) {
    .hnt-studio {
        grid-template-rows: 62px minmax(0, 1fr) 232px;
    }

    .hnt-studio-shell {
        grid-template-columns: 292px minmax(320px, 1fr) 168px;
    }

    .hnt-studio-left {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .hnt-studio-phone-frame {
        width: min(34vh, 300px);
        width: min(34dvh, 300px);
    }
}

@media (max-width: 860px) {
    .hnt-studio {
        grid-template-rows: 58px minmax(0, 1fr) 214px;
    }

    .hnt-studio-topbar {
        padding: 0 12px;
    }

    .hnt-studio-project-meta span,
    .hnt-studio-save-state {
        display: none;
    }

    .hnt-studio-project-meta strong {
        font-size: 16px;
    }

    .hnt-studio-publish {
        min-width: 112px;
        height: 38px;
    }

    .hnt-studio-shell {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .hnt-studio-left {
        position: fixed;
        z-index: 7;
        left: 10px;
        top: 72px;
        bottom: 226px;
        width: 74px;
        display: block;
        border: 0;
        background: transparent;
        pointer-events: none;
    }

    .hnt-studio-toolrail {
        width: 58px;
        padding: 6px;
        border: 1px solid rgba(242, 232, 216, 0.08);
        border-radius: 18px;
        background: rgba(20, 20, 18, 0.70);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        pointer-events: auto;
    }

    .hnt-studio-tool {
        min-height: 50px;
        font-size: 0;
    }

    .hnt-studio-tool small,
    .hnt-studio-tool em,
    .hnt-studio-media-panel {
        display: none;
    }

    .hnt-studio-right {
        position: fixed;
        z-index: 7;
        right: 10px;
        top: 72px;
        bottom: 226px;
        width: 64px;
        display: block;
        padding: 6px;
        border: 1px solid rgba(242, 232, 216, 0.08);
        border-radius: 18px;
        background: rgba(20, 20, 18, 0.70);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        overflow: visible;
    }

    .hnt-studio-pro-panel {
        gap: 8px;
    }

    .hnt-studio-side-feature {
        min-height: 52px;
        padding: 6px;
    }

    .hnt-studio-side-feature strong,
    .hnt-studio-side-feature em,
    .hnt-studio-publish-panel {
        display: none;
    }

    .hnt-studio-center {
        grid-row: 1 / -1;
    }

    .hnt-studio-phone-frame {
        width: min(50vw, 310px);
    }

    .hnt-studio-timeline {
        padding: 10px 12px 12px;
    }

    .hnt-studio-time-ruler {
        margin-left: 70px;
        font-size: 9px;
    }

    .hnt-studio-track {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .hnt-studio-timeline-clip {
        width: 70%;
    }
}

/* =========================================
   PATCH 692 - MOMENT STUDIO VISUAL ALIGNMENT
   Scope: /moments/create visual/responsive alignment only.
   No render pipeline, no DB, no route/controller changes.
========================================= */
.hnt-studio-window {
    background: #1A1A18 !important;
}

.hnt-studio-window > .hnt-mobile-bottom-bar,
.hnt-studio-window > .hnt-mobile-topbar,
.hnt-studio-window > .hnt-mobile-menu-backdrop,
.hnt-studio-window > .hnt-mobile-menu-shell {
    display: none !important;
}

.hnt-studio {
    grid-template-rows: 54px minmax(0, 1fr) 252px;
    background: #1A1A18;
}

.hnt-studio-topbar {
    height: 54px;
    padding: 0 10px 0 12px;
    border-bottom-color: rgba(242, 232, 216, 0.055);
    background: #1A1A18;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.hnt-studio-project-meta {
    gap: 10px;
}

.hnt-studio-back {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #20201E;
    border-color: rgba(242, 232, 216, 0.10);
}

.hnt-studio-back svg ,

.hnt-studio-back .ph {
    width: 20px;
    height: 20px;
}

.hnt-studio-project-meta span {
    font-size: 10px;
    letter-spacing: 0.11em;
}

.hnt-studio-project-meta strong {
    font-size: 15px;
    letter-spacing: -0.035em;
}

.hnt-studio-save-state {
    min-width: 130px;
    font-size: 11px;
    opacity: .82;
}

.hnt-studio-publish {
    min-width: 142px;
    height: 38px;
    border-radius: 9px;
    font-size: 12px;
    box-shadow: none;
}

.hnt-studio-shell {
    grid-template-columns: 330px minmax(420px, 1fr) 74px;
    background: #1A1A18;
}

.hnt-studio-left {
    grid-template-columns: 62px minmax(0, 1fr);
    background: #20201E;
    border-right-color: rgba(242, 232, 216, 0.07);
}

.hnt-studio-toolrail {
    padding: 10px 6px;
    gap: 4px;
    background: #191918;
    border-right-color: rgba(242, 232, 216, 0.06);
}

.hnt-studio-tool {
    min-height: 58px;
    padding: 6px 3px;
    border-radius: 10px;
    gap: 4px;
    font-size: 9px;
    font-weight: 850;
}

.hnt-studio-tool.is-active {
    background: #252521;
    border-color: rgba(214, 168, 79, 0.36);
    box-shadow: inset 0 0 0 1px rgba(214, 168, 79, 0.08);
}

.hnt-studio-tool-icon {
    width: 23px;
    height: 23px;
    border-radius: 8px;
}

.hnt-studio-tool-icon::before {
    font-size: 19px;
}

.hnt-studio-media-panel {
    padding: 14px 14px 16px;
    background: #20201E;
}

.hnt-studio-panel-head {
    margin-bottom: 11px;
}

.hnt-studio-panel-head h2 {
    font-size: 14px;
    letter-spacing: -0.03em;
}

.hnt-studio-panel-head span {
    font-size: 10px;
    line-height: 1.15;
}

.hnt-studio-import {
    min-height: 38px;
    border-radius: 7px;
    padding: 0 12px;
    font-size: 12px;
    box-shadow: none;
}

.hnt-studio-import-note {
    margin: 9px 0 12px;
    font-size: 11px;
    line-height: 1.36;
}

.hnt-studio-empty-media,
.hnt-studio-media-item {
    border-radius: 10px;
    background: #242421;
    border-color: rgba(242, 232, 216, 0.08);
}

.hnt-studio-empty-media {
    min-height: 108px;
    padding: 14px;
}

.hnt-studio-media-item {
    grid-template-columns: 78px 1fr;
    padding: 7px;
}

.hnt-studio-media-thumb {
    height: 70px;
    border-radius: 7px;
}

.hnt-studio-center {
    grid-template-rows: 46px minmax(0, 1fr) 44px;
    background: #1A1A18;
}

.hnt-studio-canvas-toolbar {
    justify-content: flex-start;
    padding: 0 18px;
}

.hnt-studio-canvas-toolbar button,
.hnt-studio-play {
    width: 30px;
    height: 30px;
    background: #20201E;
    border-color: rgba(242, 232, 216, 0.065);
}

.hnt-studio-preview {
    padding: 4px 20px 2px;
}

.hnt-studio-phone-frame {
    width: min(35.5dvh, 318px);
    min-width: 210px;
    border-radius: 8px;
    border-color: rgba(242, 232, 216, 0.10);
    box-shadow: 0 24px 74px rgba(0, 0, 0, 0.42);
}

.hnt-studio-preview-safe {
    display: none;
}

.hnt-studio-playbar {
    padding: 0 18px;
    gap: 8px;
    font-size: 11px;
}

.hnt-studio-right {
    display: block;
    padding: 0;
    border-left-color: rgba(242, 232, 216, 0.07);
    background: #20201E;
    overflow: hidden;
}

.hnt-studio-pro-panel {
    height: 100%;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #191918;
}

.hnt-studio-side-feature {
    min-height: 62px;
    padding: 7px 4px;
    border-radius: 10px;
    background: #20201E;
    border-color: rgba(242, 232, 216, 0.075);
    gap: 4px;
}

.hnt-studio-side-feature strong {
    font-size: 9px;
    line-height: 1.13;
    color: rgba(242, 232, 216, 0.74);
}

.hnt-studio-side-feature em {
    min-height: 14px;
    padding: 0 4px;
    font-size: 7px;
}

.hnt-studio-publish-panel {
    display: none !important;
}

.hnt-studio-timeline {
    padding: 10px 16px 12px;
    background: #181817;
    border-top-color: rgba(242, 232, 216, 0.06);
}

.hnt-studio-timeline-head {
    margin-bottom: 6px;
}

.hnt-studio-timeline-head strong {
    font-size: 13px;
}

.hnt-studio-timeline-head span {
    font-size: 10px;
}

.hnt-studio-duration-pill {
    min-height: 28px;
    padding: 0 10px;
    background: #20201E;
    font-size: 11px;
}

.hnt-studio-time-ruler {
    height: 20px;
    margin-left: 92px;
    color: rgba(242, 232, 216, 0.34);
    font-size: 9px;
}

.hnt-studio-track {
    min-height: 54px;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 10px;
    border-top-color: rgba(242, 232, 216, 0.07);
}

.hnt-studio-track > span {
    font-size: 10px;
}

.hnt-studio-text-track > div,
.hnt-studio-timeline-empty {
    min-height: 32px;
    border-radius: 8px;
    font-size: 11px;
    background: rgba(255, 255, 255, 0.012);
}

.hnt-studio-timeline-clip {
    min-height: 38px;
    width: min(58%, 720px);
    border-radius: 7px;
    padding: 0 16px;
    box-shadow: none;
}

@media (min-width: 861px) and (max-height: 840px) {
    .hnt-studio {
        grid-template-rows: 52px minmax(0, 1fr) 214px;
    }
    .hnt-studio-center {
        grid-template-rows: 38px minmax(0, 1fr) 38px;
    }
    .hnt-studio-phone-frame {
        width: min(34dvh, 292px);
    }
    .hnt-studio-track {
        min-height: 44px;
    }
}

@media (max-width: 1180px) and (min-width: 861px) {
    .hnt-studio {
        grid-template-rows: 52px minmax(0, 1fr) 224px;
    }
    .hnt-studio-shell {
        grid-template-columns: 300px minmax(320px, 1fr) 68px;
    }
    .hnt-studio-left {
        grid-template-columns: 58px minmax(0, 1fr);
    }
    .hnt-studio-phone-frame {
        width: min(34dvh, 286px);
    }
}

@media (max-width: 860px) {
    .hnt-preview-body {
        overflow: hidden !important;
    }

    .hnt-studio-window {
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
    }

    .hnt-studio-window > .hnt-mobile-bottom-bar,
    .hnt-studio-window > .hnt-mobile-topbar,
    .hnt-studio-window > .hnt-mobile-menu-backdrop,
    .hnt-studio-window > .hnt-mobile-menu-shell,
    .hnt-studio-window > .sidebar-left,
    .hnt-studio-window > .sidebar-right {
        display: none !important;
    }

    .hnt-studio-main {
        height: 100dvh !important;
        overflow: hidden !important;
    }

    .hnt-studio {
        grid-template-rows: 52px minmax(0, 1fr) 206px;
        min-height: 0;
    }

    .hnt-studio-topbar {
        height: 52px;
        padding: 0 8px;
    }

    .hnt-studio-project-meta {
        gap: 7px;
    }

    .hnt-studio-back {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    .hnt-studio-project-meta strong {
        max-width: 126px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 14px;
    }

    .hnt-studio-top-actions {
        gap: 7px;
    }

    .hnt-studio-save-state {
        display: none !important;
    }

    .hnt-studio-publish {
        min-width: 92px;
        height: 34px;
        padding: 0 10px;
        border-radius: 10px;
        font-size: 11px;
        white-space: nowrap;
    }

    .hnt-studio-shell {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 56px minmax(0, 1fr);
        min-height: 0;
        overflow: hidden;
    }

    .hnt-studio-left {
        position: static;
        width: auto;
        height: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "tools import";
        align-items: center;
        gap: 8px;
        padding: 8px;
        border-right: 0;
        border-bottom: 1px solid rgba(242, 232, 216, 0.06);
        background: #20201E;
        pointer-events: auto;
    }

    .hnt-studio-toolrail {
        grid-area: tools;
        width: auto;
        min-width: 0;
        height: 40px;
        padding: 0;
        display: flex;
        flex-direction: row;
        gap: 6px;
        border: 0;
        border-radius: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow-x: auto;
        pointer-events: auto;
    }

    .hnt-studio-tool {
        min-width: 42px;
        min-height: 40px;
        padding: 4px 6px;
        border-radius: 9px;
        font-size: 0;
    }

    .hnt-studio-tool small,
    .hnt-studio-tool em {
        display: none !important;
    }

    .hnt-studio-media-panel {
        grid-area: import;
        display: block !important;
        padding: 0;
        overflow: visible;
        background: transparent;
    }

    .hnt-studio-media-panel .hnt-studio-panel-head,
    .hnt-studio-media-panel .hnt-studio-import-note,
    .hnt-studio-media-panel .hnt-studio-media-list {
        display: none !important;
    }

    .hnt-studio-import {
        min-width: 44px;
        min-height: 40px;
        width: 44px;
        padding: 0;
        border-radius: 10px;
        justify-content: center;
        font-size: 0;
    }

    .hnt-studio-import svg ,

    .hnt-studio-import .ph {
        width: 20px;
        height: 20px;
    }

    .hnt-studio-center {
        grid-row: auto;
        grid-template-rows: 0 minmax(0, 1fr) 38px;
        min-height: 0;
        background: #1A1A18;
    }

    .hnt-studio-canvas-toolbar {
        display: none !important;
    }

    .hnt-studio-preview {
        padding: 10px 12px 4px;
    }

    .hnt-studio-phone-frame {
        width: min(58vw, 260px);
        min-width: 164px;
        max-height: 100%;
        border-radius: 8px;
    }

    .hnt-studio-playbar {
        height: 38px;
        padding: 0 10px;
        font-size: 10px;
    }

    .hnt-studio-play {
        width: 28px;
        height: 28px;
    }

    .hnt-studio-right {
        position: absolute;
        z-index: 5;
        right: 8px;
        top: 70px;
        width: 46px;
        height: auto;
        display: block;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        overflow: visible;
    }

    .hnt-studio-pro-panel {
        padding: 0;
        gap: 7px;
        background: transparent;
    }

    .hnt-studio-side-feature {
        width: 42px;
        min-height: 42px;
        padding: 0;
        border-radius: 11px;
        background: rgba(32, 32, 30, 0.88);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .hnt-studio-side-feature strong,
    .hnt-studio-side-feature em,
    .hnt-studio-publish-panel {
        display: none !important;
    }

    .hnt-studio-tool-icon {
        width: 21px;
        height: 21px;
    }

    .hnt-studio-tool-icon::before {
        font-size: 18px;
    }

    .hnt-studio-timeline {
        min-height: 0;
        padding: 9px 10px 10px;
        overflow: hidden;
    }

    .hnt-studio-timeline-head {
        margin-bottom: 6px;
    }

    .hnt-studio-timeline-head strong {
        font-size: 13px;
    }

    .hnt-studio-timeline-head span {
        font-size: 10px;
    }

    .hnt-studio-duration-pill {
        min-height: 26px;
        padding: 0 9px;
        font-size: 10px;
    }

    .hnt-studio-time-ruler {
        height: 18px;
        margin-left: 48px;
        grid-template-columns: repeat(4, 1fr);
        overflow: hidden;
    }

    .hnt-studio-time-ruler span:nth-child(n+5) {
        display: none;
    }

    .hnt-studio-track {
        min-height: 48px;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 8px;
    }

    .hnt-studio-track > span {
        font-size: 10px;
    }

    .hnt-studio-text-track > div,
    .hnt-studio-timeline-empty {
        min-height: 30px;
        padding: 0 10px;
        font-size: 10px;
    }

    .hnt-studio-timeline-clip {
        width: 78%;
        min-height: 34px;
        padding: 0 14px;
    }
}

@media (max-width: 420px) {
    .hnt-studio {
        grid-template-rows: 50px minmax(0, 1fr) 196px;
    }
    .hnt-studio-project-meta strong {
        max-width: 104px;
        font-size: 13px;
    }
    .hnt-studio-publish {
        min-width: 84px;
        font-size: 10px;
    }
    .hnt-studio-shell {
        grid-template-rows: 52px minmax(0, 1fr);
    }
    .hnt-studio-left {
        padding: 6px;
    }
    .hnt-studio-phone-frame {
        width: min(62vw, 238px);
    }
    .hnt-studio-right {
        top: 62px;
        right: 6px;
    }
    .hnt-studio-side-feature {
        width: 40px;
        min-height: 40px;
    }
}

/* =========================================
   PATCH 693 - MOMENT STUDIO MEDIA BIN MVP
   Scope: /moments/create media bin + preview controls polish only.
   No render pipeline, no DB, no route/controller changes.
========================================= */
.hnt-studio-phone-frame {
    z-index: 1;
}

.hnt-studio-video-preview::-webkit-media-controls,
.hnt-studio-video-preview::-webkit-media-controls-enclosure {
    display: none !important;
}

.hnt-studio-playbar {
    position: relative;
    z-index: 3;
    min-height: 44px;
}

.hnt-studio-media-item {
    position: relative;
    border-color: rgba(242, 232, 216, 0.08);
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.hnt-studio-media-item:hover,
.hnt-studio-media-item.is-active {
    border-color: rgba(214, 168, 79, 0.38);
    background: #282822;
}

.hnt-studio-media-item.is-active::after {
    content: "";
    position: absolute;
    inset: 6px auto 6px 0;
    width: 3px;
    border-radius: 999px;
    background: var(--accent-primary);
}

.hnt-studio-media-thumb {
    position: relative;
    overflow: hidden;
}

.hnt-studio-media-thumb video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #050505;
}

.hnt-studio-media-index {
    position: absolute;
    right: 9px;
    bottom: 8px;
    min-height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: #141412;
    background: var(--accent-primary);
    font-size: 9px;
    line-height: 1;
    font-weight: 950;
}

.hnt-studio-timeline-lane {
    min-height: 32px;
    width: 100%;
    border-radius: 8px;
    border: 1px dashed rgba(242, 232, 216, 0.11);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    overflow-x: auto;
    overflow-y: hidden;
    background: rgba(255, 255, 255, 0.012);
    scrollbar-width: thin;
}

.hnt-studio-timeline-lane .hnt-studio-timeline-empty {
    min-height: 26px;
    width: 100%;
    border: 0;
    background: transparent;
}

.hnt-studio-timeline-lane .hnt-studio-timeline-empty[hidden] {
    display: none !important;
}

.hnt-studio-timeline-clip {
    flex: 0 0 var(--clip-width, 180px);
    min-width: 118px;
    max-width: 720px;
    cursor: pointer;
    opacity: .88;
    transition: opacity .16s ease, border-color .16s ease, background .16s ease;
}

.hnt-studio-timeline-clip:hover,
.hnt-studio-timeline-clip.is-active {
    opacity: 1;
    border-color: var(--accent-primary);
    background:
        repeating-linear-gradient(90deg, rgba(242, 232, 216, 0.075) 0 18px, rgba(214, 168, 79, 0.15) 18px 20px),
        #171714;
}

.hnt-studio.has-multiple-media .hnt-studio-publish {
    opacity: .48;
    filter: saturate(.55);
}

@media (min-width: 861px) and (max-height: 840px) {
    .hnt-studio-phone-frame {
        width: min(32.5dvh, 278px);
    }
    .hnt-studio-playbar {
        min-height: 38px;
    }
}

@media (max-width: 860px) {
    .hnt-studio-video-preview::-webkit-media-controls,
    .hnt-studio-video-preview::-webkit-media-controls-enclosure {
        display: none !important;
    }
    .hnt-studio-playbar {
        min-height: 38px;
    }
    .hnt-studio-media-index {
        display: none;
    }
    .hnt-studio-timeline-lane {
        min-height: 30px;
        padding: 2px;
    }
    .hnt-studio-timeline-clip {
        min-width: 92px;
        padding: 0 12px;
    }
}

/* =========================================
   PATCH 694 - MOMENT STUDIO MEDIA LIST SCROLL FIX
   Scope: /moments/create layout containment only.
   Fixes media-bin overflow with 4-5 clips and prevents the preview/canvas from being pushed down.
========================================= */
.hnt-studio-shell,
.hnt-studio-left,
.hnt-studio-center,
.hnt-studio-right {
    min-height: 0;
}

.hnt-studio-shell {
    overflow: hidden;
}

.hnt-studio-left {
    overflow: hidden;
}

.hnt-studio-media-panel {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.hnt-studio-media-panel .hnt-studio-panel-head,
.hnt-studio-media-panel .hnt-studio-import,
.hnt-studio-media-panel .hnt-studio-import-note {
    flex: 0 0 auto;
}

.hnt-studio-media-list {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(214, 168, 79, 0.55) rgba(242, 232, 216, 0.06);
}

.hnt-studio-media-list::-webkit-scrollbar {
    width: 6px;
}

.hnt-studio-media-list::-webkit-scrollbar-track {
    background: rgba(242, 232, 216, 0.045);
    border-radius: 999px;
}

.hnt-studio-media-list::-webkit-scrollbar-thumb {
    background: rgba(214, 168, 79, 0.55);
    border-radius: 999px;
}

.hnt-studio-empty-media,
.hnt-studio-media-item {
    flex: 0 0 auto;
}

.hnt-studio-preview,
.hnt-studio-phone-frame {
    min-height: 0;
}

@media (max-width: 860px) {
    .hnt-studio-media-panel,
    .hnt-studio-media-list {
        min-height: 0;
        overflow: visible;
    }
}


/* =========================================
   PATCH 695 - MOMENT STUDIO TIMELINE ORDER MVP
   Scope: /moments/create timeline ordering only.
   Adds visual feedback for dragging clips in the timeline without enabling trimming/rendering yet.
========================================= */
.hnt-studio.is-timeline-dragging,
.hnt-studio.is-timeline-dragging * {
    user-select: none;
}

.hnt-studio-timeline-lane.is-reordering {
    cursor: grabbing;
}

.hnt-studio-timeline-clip {
    touch-action: pan-y;
}

.hnt-studio-timeline-clip.is-drag-source {
    opacity: .48;
    cursor: grabbing;
    transform: scale(.985);
}

.hnt-studio-timeline-clip.is-drop-target {
    border-color: #9BE447;
    box-shadow: 0 0 0 1px rgba(155, 228, 71, 0.32), 0 12px 34px rgba(0, 0, 0, 0.34);
}

.hnt-studio-timeline-clip.is-drop-target::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 999px;
    background: #9BE447;
    box-shadow: 0 0 14px rgba(155, 228, 71, 0.65);
}

@media (max-width: 860px) {
    .hnt-studio-timeline-clip.is-drop-target::before {
        left: -5px;
    }
}

/* =========================================
   PATCH 696 - MOMENT STUDIO TRIM HANDLES MVP
   Scope: /moments/create timeline trimming only.
   Enables left/right trim handles visually and keeps drag/reorder behavior separated.
========================================= */
.hnt-studio.is-trimming,
.hnt-studio.is-trimming * {
    user-select: none;
}

.hnt-studio-timeline-clip {
    padding-left: 24px;
    padding-right: 24px;
}

.hnt-studio-trim-handle {
    z-index: 5;
    width: 16px;
    cursor: ew-resize;
    touch-action: none;
    pointer-events: auto;
    box-shadow: inset -1px 0 rgba(20, 20, 18, 0.26), 0 0 0 1px rgba(20, 20, 18, 0.18);
}

.hnt-studio-trim-handle.right {
    box-shadow: inset 1px 0 rgba(20, 20, 18, 0.26), 0 0 0 1px rgba(20, 20, 18, 0.18);
}

.hnt-studio-trim-handle:hover,
.hnt-studio-timeline-clip.is-active .hnt-studio-trim-handle,
.hnt-studio.is-trimming .hnt-studio-trim-handle {
    background: #e0b555;
}

.hnt-studio-timeline-clip.is-trimmed {
    border-color: #9BE447;
    box-shadow: 0 0 0 1px rgba(155, 228, 71, 0.16), 0 10px 28px rgba(0, 0, 0, 0.30);
}

.hnt-studio-timeline-clip.is-trimmed em,
.hnt-studio-media-item.is-trimmed em {
    color: #9BE447;
}

.hnt-studio-timeline-clip.is-trim-source,
.hnt-studio.is-trimming .hnt-studio-timeline-clip.is-active {
    border-color: #9BE447;
    box-shadow: 0 0 0 2px rgba(155, 228, 71, 0.22), 0 14px 36px rgba(0, 0, 0, 0.38);
}

.hnt-studio.is-trimming .hnt-studio-timeline-lane {
    cursor: ew-resize;
}

.hnt-studio.is-trimming .hnt-studio-timeline-clip {
    transition: none;
}

@media (max-width: 860px) {
    .hnt-studio-timeline-clip {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hnt-studio-trim-handle {
        width: 15px;
    }
}

/* =========================================
   PATCH 697 - MOMENT STUDIO LIVE TRIM WIDTH
   Scope: /moments/create timeline trimming feedback only.
   Keeps timeline clip width tied to effective trimmed duration while dragging.
========================================= */
.hnt-studio-timeline-lane .hnt-studio-timeline-clip {
    flex: 0 0 var(--clip-width, 120px) !important;
    width: var(--clip-width, 120px) !important;
    min-width: 54px;
    max-width: none;
    transition: flex-basis .08s linear, width .08s linear, opacity .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.hnt-studio.is-trimming .hnt-studio-timeline-lane .hnt-studio-timeline-clip,
.hnt-studio-timeline-clip.is-live-trimming {
    transition: none !important;
}

.hnt-studio-timeline-clip.is-live-trimming {
    border-color: #9BE447;
    box-shadow: 0 0 0 2px rgba(155, 228, 71, 0.24), 0 14px 36px rgba(0, 0, 0, 0.38);
}

.hnt-studio-timeline-clip.is-live-trimming em {
    color: #9BE447;
}

@media (max-width: 860px) {
    .hnt-studio-timeline-lane .hnt-studio-timeline-clip {
        min-width: 46px;
    }
}


/* =========================================
   PATCH 698 - MOMENT STUDIO PUBLISH DRAWER
   Scope: /moments/create publish metadata only.
   No render pipeline, no DB, no route/controller changes.
========================================= */
.hnt-studio-publish-backdrop {
    position: fixed;
    z-index: 90;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(5, 5, 4, 0.58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: default;
}

.hnt-studio-publish-backdrop[hidden] {
    display: none !important;
}

.hnt-studio-publish-drawer {
    position: fixed;
    z-index: 91;
    top: 72px;
    right: 22px;
    bottom: 22px;
    width: min(420px, calc(100vw - 44px));
    padding: 22px;
    border-radius: 22px;
    border: 1px solid rgba(242, 232, 216, 0.10);
    background:
        radial-gradient(circle at 82% 0%, rgba(214, 168, 79, 0.10), transparent 35%),
        #20201E;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.62);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: auto;
}

.hnt-studio-publish-drawer[hidden] {
    display: none !important;
}

.hnt-studio-publish-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.hnt-studio-publish-drawer-head span {
    display: block;
    margin-bottom: 6px;
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.hnt-studio-publish-drawer-head h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 28px;
    line-height: .98;
    font-weight: 950;
    letter-spacing: -0.06em;
}

.hnt-studio-publish-drawer-head p,
.hnt-studio-publish-help {
    margin: 9px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 750;
}

.hnt-studio-drawer-close {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(242, 232, 216, 0.09);
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: var(--text-main);
    background: #242421;
    cursor: pointer;
}

.hnt-studio-drawer-close svg ,

.hnt-studio-drawer-close .ph {
    width: 19px;
    height: 19px;
}

.hnt-studio-publish-summary {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(214, 168, 79, 0.18);
    background: #1A1A18;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.hnt-studio-publish-summary strong {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 950;
}

.hnt-studio-publish-summary span {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: var(--accent-primary);
    background: rgba(214, 168, 79, 0.10);
    font-size: 12px;
    font-weight: 950;
}

.hnt-studio-publish-field {
    display: grid;
    gap: 8px;
}

.hnt-studio-publish-field > span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
}

.hnt-studio-publish-field input,
.hnt-studio-publish-field textarea {
    width: 100%;
    border: 1px solid rgba(242, 232, 216, 0.10);
    border-radius: 14px;
    padding: 13px 14px;
    color: var(--text-main);
    background: #1A1A18;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    outline: none;
    resize: vertical;
}

.hnt-studio-publish-field textarea {
    min-height: 132px;
}

.hnt-studio-publish-field input:focus,
.hnt-studio-publish-field textarea:focus {
    border-color: rgba(214, 168, 79, 0.42);
    box-shadow: 0 0 0 3px rgba(214, 168, 79, 0.07);
}

.hnt-studio-publish-drawer .hh-moment-hashtag-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hnt-studio-publish-drawer .hh-moment-hashtag-preview[hidden] {
    display: none !important;
}

.hnt-studio-publish-drawer .hh-moment-hashtag-preview a {
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: var(--accent-primary);
    background: rgba(214, 168, 79, 0.12);
    font-size: 11px;
    font-weight: 950;
    text-decoration: none;
}

.hnt-studio-publish-drawer-actions {
    margin-top: auto;
    padding-top: 6px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.hnt-studio-drawer-secondary,
.hnt-studio-drawer-primary {
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    padding: 0 16px;
    font: inherit;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

.hnt-studio-drawer-secondary {
    color: var(--text-main);
    background: #2A2A26;
}

.hnt-studio-drawer-primary {
    color: #141412;
    background: var(--accent-primary);
}

.hnt-studio.is-publish-open .hnt-studio-shell,
.hnt-studio.is-publish-open .hnt-studio-timeline {
    filter: saturate(0.86) brightness(0.74);
}

@media (max-width: 860px) {
    .hnt-studio-publish-drawer {
        top: auto;
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
        max-height: min(82dvh, 680px);
        padding: 18px;
        border-radius: 22px;
    }

    .hnt-studio-publish-drawer-head h2 {
        font-size: 23px;
    }

    .hnt-studio-publish-drawer-actions {
        flex-direction: column-reverse;
    }

    .hnt-studio-drawer-secondary,
    .hnt-studio-drawer-primary {
        width: 100%;
    }
}

/* Phase 701: Moment Studio processing screen */
.hnt-moment-processing-window {
    grid-template-columns: 88px minmax(0, 1fr) !important;
}

.hnt-moment-processing-main {
    min-height: 100vh;
    padding: 0;
    background: #141412;
    overflow: hidden;
}

.hnt-moment-processing {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 88px 32px 44px;
    color: #f2e8d8;
    overflow: hidden;
}

.hnt-moment-processing-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 68% 18%, rgba(155, 228, 71, .16), transparent 34%),
        radial-gradient(circle at 18% 84%, rgba(214, 168, 79, .14), transparent 34%),
        linear-gradient(135deg, rgba(20, 20, 18, .96), rgba(26, 26, 24, .98));
    pointer-events: none;
}

.hnt-moment-processing-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(242, 232, 216, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(242, 232, 216, .025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at center, #000 0 42%, transparent 74%);
    opacity: .55;
}

.hnt-moment-processing-topbar {
    position: absolute;
    z-index: 2;
    top: 24px;
    left: 24px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.hnt-moment-processing-back {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(242, 232, 216, .14);
    border-radius: 16px;
    color: #f2e8d8;
    background: rgba(32, 32, 30, .78);
    text-decoration: none;
}

.hnt-moment-processing-back svg ,

.hnt-moment-processing-back .ph {
    width: 24px;
    height: 24px;
}

.hnt-moment-processing-topbar span,
.hnt-moment-processing-kicker {
    display: block;
    color: #d6a84f;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hnt-moment-processing-topbar strong {
    display: block;
    margin-top: 4px;
    color: #f2e8d8;
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
}

.hnt-moment-processing-card {
    position: relative;
    z-index: 1;
    width: min(960px, 100%);
    min-height: 520px;
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 34px;
    align-items: center;
    padding: 32px;
    border: 1px solid rgba(242, 232, 216, .14);
    border-radius: 30px;
    background: rgba(26, 26, 24, .86);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .42);
    backdrop-filter: blur(18px);
}

.hnt-moment-processing-phone {
    width: min(320px, 100%);
    aspect-ratio: 9 / 16;
    justify-self: center;
    border-radius: 30px;
    padding: 12px;
    background: linear-gradient(180deg, rgba(242, 232, 216, .1), rgba(242, 232, 216, .035));
    box-shadow: inset 0 0 0 1px rgba(242, 232, 216, .12), 0 22px 60px rgba(0,0,0,.45);
}

.hnt-moment-processing-phone-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(0,0,0,.34), transparent 28%, rgba(0,0,0,.72)),
        radial-gradient(circle at 50% 34%, rgba(155, 228, 71, .12), transparent 34%),
        #10100f;
}

.hnt-moment-processing-reel-header {
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(242, 232, 216, .86);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.hnt-moment-processing-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 96px;
    height: 96px;
    margin: -48px 0 0 -48px;
    border-radius: 999px;
    border: 3px solid rgba(242, 232, 216, .15);
    border-top-color: #d6a84f;
    border-right-color: #9be447;
    animation: hntMomentProcessingSpin 1.05s linear infinite;
    box-shadow: 0 0 46px rgba(214, 168, 79, .16);
}

.hnt-moment-processing-spinner.is-failed {
    animation: none;
    border-color: rgba(184, 70, 58, .75);
    box-shadow: 0 0 46px rgba(184, 70, 58, .12);
}

@keyframes hntMomentProcessingSpin {
    to { transform: rotate(360deg); }
}

.hnt-moment-processing-reel-copy {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 24px;
    display: grid;
    gap: 8px;
}

.hnt-moment-processing-reel-copy strong {
    color: #f2e8d8;
    font-size: 22px;
    line-height: 1.05;
    font-weight: 900;
}

.hnt-moment-processing-reel-copy span {
    color: rgba(242, 232, 216, .72);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
}

.hnt-moment-processing-content {
    display: grid;
    gap: 20px;
}

.hnt-moment-processing-content h1 {
    margin: 0;
    color: #f2e8d8;
    font-size: clamp(32px, 4vw, 54px);
    line-height: .98;
    font-weight: 950;
    letter-spacing: -.05em;
}

.hnt-moment-processing-content p {
    max-width: 520px;
    margin: 0;
    color: rgba(242, 232, 216, .72);
    font-size: 16px;
    line-height: 1.55;
    font-weight: 700;
}

.hnt-moment-processing-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.hnt-moment-processing-meta div {
    padding: 16px;
    border: 1px solid rgba(242, 232, 216, .11);
    border-radius: 18px;
    background: rgba(32, 32, 30, .72);
}

.hnt-moment-processing-meta span {
    display: block;
    color: rgba(242, 232, 216, .52);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.hnt-moment-processing-meta strong {
    display: block;
    margin-top: 8px;
    color: #f2e8d8;
    font-size: 20px;
    font-weight: 950;
}

.hnt-moment-processing-note {
    padding: 14px 16px;
    border: 1px solid rgba(214, 168, 79, .18);
    border-radius: 18px;
    color: rgba(242, 232, 216, .76);
    background: rgba(214, 168, 79, .08);
    font-weight: 800;
    line-height: 1.45;
}

.hnt-moment-processing-card.is-failed .hnt-moment-processing-note {
    border-color: rgba(184, 70, 58, .28);
    background: rgba(184, 70, 58, .12);
}

.hnt-moment-processing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.hnt-moment-processing-secondary,
.hnt-moment-processing-primary {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-radius: 16px;
    border: 0;
    text-decoration: none;
    font-weight: 950;
    cursor: pointer;
}

.hnt-moment-processing-secondary {
    color: #f2e8d8;
    background: rgba(242, 232, 216, .09);
}

.hnt-moment-processing-primary {
    color: #141412;
    background: #d6a84f;
}

@media (max-width: 920px) {
    .hnt-moment-processing-window {
        display: block !important;
    }

    .hnt-moment-processing-main {
        min-height: 100dvh;
    }

    .hnt-moment-processing {
        min-height: 100dvh;
        padding: 86px 16px 24px;
    }

    .hnt-moment-processing-card {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 22px;
        padding: 18px;
        border-radius: 24px;
    }

    .hnt-moment-processing-phone {
        width: min(230px, 72vw);
    }

    .hnt-moment-processing-content {
        gap: 14px;
    }

    .hnt-moment-processing-content h1 {
        font-size: 34px;
    }

    .hnt-moment-processing-content p {
        font-size: 14px;
    }

    .hnt-moment-processing-meta {
        grid-template-columns: 1fr;
    }

    .hnt-moment-processing-topbar {
        top: 18px;
        left: 16px;
    }

    .hnt-moment-processing-back {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }
}

/* Phase 702: Moment Studio processing state belongs inside the reel feed, not as a separate card page. */
.hnt-moment-processing-window .hnt-preview-sidebar,
.hnt-moment-processing-window .hnt-sidebar {
    z-index: 20;
}

.hnt-moment-processing-reel {
    min-height: 100%;
}

.hnt-moment-processing-stage {
    background:
        radial-gradient(circle at 50% 26%, rgba(214, 168, 79, .22), transparent 30%),
        radial-gradient(circle at 50% 58%, rgba(155, 228, 71, .10), transparent 36%),
        linear-gradient(180deg, #1f1f1c 0%, #11110f 100%);
    overflow: hidden;
}

.hnt-moment-processing-stage .hnt-moment-processing-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .76)),
        repeating-linear-gradient(0deg, rgba(242, 232, 216, .035) 0 1px, transparent 1px 10px),
        repeating-linear-gradient(90deg, rgba(242, 232, 216, .025) 0 1px, transparent 1px 10px);
    opacity: .78;
}

.hnt-moment-processing-vignette {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .36) 0%, transparent 24%, transparent 54%, rgba(0, 0, 0, .82) 100%),
        radial-gradient(circle at 50% 45%, transparent 0 34%, rgba(0, 0, 0, .44) 76%);
    pointer-events: none;
    z-index: 2;
}

.hnt-moment-processing-status-card {
    position: absolute;
    left: 50%;
    top: 42%;
    width: min(76%, 320px);
    transform: translate(-50%, -50%);
    z-index: 3;
    padding: 28px 24px;
    border: 1px solid rgba(242, 232, 216, .16);
    border-radius: 28px;
    background: rgba(26, 26, 24, .74);
    box-shadow: 0 22px 70px rgba(0, 0, 0, .38);
    backdrop-filter: blur(18px);
    color: #F2E8D8;
    text-align: left;
}

.hnt-moment-processing-status-card .hnt-moment-processing-kicker {
    display: inline-flex;
    margin-bottom: 16px;
    color: #D6A84F;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hnt-moment-processing-status-card h1 {
    margin: 18px 0 10px;
    color: #F2E8D8;
    font-size: clamp(28px, 3.5vw, 46px);
    line-height: .98;
    letter-spacing: -.055em;
}

.hnt-moment-processing-status-card p {
    margin: 0;
    color: rgba(242, 232, 216, .72);
    font-size: 14px;
    line-height: 1.45;
}

.hnt-moment-processing-status-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 0;
}

.hnt-moment-processing-status-card dl div {
    padding: 12px;
    border: 1px solid rgba(242, 232, 216, .12);
    border-radius: 16px;
    background: rgba(255, 255, 255, .035);
}

.hnt-moment-processing-status-card dt {
    margin-bottom: 5px;
    color: rgba(242, 232, 216, .45);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.hnt-moment-processing-status-card dd {
    margin: 0;
    color: #F2E8D8;
    font-size: 18px;
    font-weight: 900;
}

.hnt-moment-processing-status-card .hnt-moment-processing-note {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(214, 168, 79, .20);
    border-radius: 16px;
    background: rgba(214, 168, 79, .08);
    color: rgba(242, 232, 216, .78);
    font-size: 13px;
    line-height: 1.35;
}

.hnt-moment-processing-reel.is-failed .hnt-moment-processing-status-card .hnt-moment-processing-note {
    border-color: rgba(184, 70, 58, .38);
    background: rgba(184, 70, 58, .13);
}

.hnt-moment-processing-spinner {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: 3px solid rgba(242, 232, 216, .16);
    border-top-color: #D6A84F;
    animation: hntProcessingSpin .85s linear infinite;
}

.hnt-moment-processing-spinner.is-failed {
    border-top-color: #B8463A;
    animation: none;
}

@keyframes hntProcessingSpin {
    to { transform: rotate(360deg); }
}

.hnt-moment-processing-copy {
    z-index: 4;
}

.hnt-moment-processing-actions .hnt-moment-action-wrap {
    text-decoration: none;
}

.hnt-moment-processing-actions button.hnt-moment-action-wrap {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 0;
}

@media (max-width: 767px) {
    .hnt-moment-processing-status-card {
        top: 41%;
        width: min(78vw, 300px);
        padding: 22px 20px;
        border-radius: 24px;
    }

    .hnt-moment-processing-status-card h1 {
        font-size: 30px;
    }

    .hnt-moment-processing-status-card dl {
        grid-template-columns: 1fr;
    }
}


/* Phase 703: Processing state should feel like a real Moment and keep the normal desktop sidebar. */
@media (min-width: 769px) {
    .app-window.hnt-moments-window.hnt-moment-processing-window {
        grid-template-columns: 260px minmax(0, 1fr) !important;
    }

    .app-window.hnt-moments-window.hnt-moment-processing-window.sidebar-collapsed {
        grid-template-columns: 88px minmax(0, 1fr) !important;
    }

    .app-window.hnt-moments-window.hnt-moment-processing-window .sidebar-left {
        width: auto !important;
        min-width: 0 !important;
    }
}

.hnt-moment-processing-window .hnt-moments-main {
    background:
        radial-gradient(circle at 50% 22%, rgba(214, 168, 79, .08), transparent 34%),
        linear-gradient(180deg, #171714 0%, #10100f 100%);
}

.hnt-moment-processing-stage {
    background:
        radial-gradient(circle at 50% 40%, rgba(214, 168, 79, .16), transparent 28%),
        radial-gradient(circle at 48% 62%, rgba(155, 228, 71, .06), transparent 34%),
        linear-gradient(180deg, #11110f 0%, #050505 100%) !important;
}

.hnt-moment-processing-stage .hnt-moment-processing-bg {
    opacity: .86;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .10), rgba(0, 0, 0, .70)),
        repeating-linear-gradient(0deg, rgba(242, 232, 216, .032) 0 1px, transparent 1px 8px),
        repeating-linear-gradient(90deg, rgba(242, 232, 216, .020) 0 1px, transparent 1px 8px) !important;
}

.hnt-moment-processing-stage .hnt-moment-processing-bg::before {
    content: '';
    position: absolute;
    inset: 14%;
    border-radius: 999px;
    background: rgba(214, 168, 79, .10);
    filter: blur(46px);
    opacity: .75;
}

.hnt-moment-processing-stage .hnt-moment-processing-vignette {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, transparent 25%, transparent 56%, rgba(0, 0, 0, .86) 100%),
        radial-gradient(circle at 50% 44%, transparent 0 27%, rgba(0, 0, 0, .46) 78%) !important;
}

.hnt-moment-processing-status-card {
    top: 43% !important;
    width: min(64%, 250px) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, .85);
}

.hnt-moment-processing-status-card .hnt-moment-processing-kicker,
.hnt-moment-processing-status-card dl,
.hnt-moment-processing-status-card .hnt-moment-processing-note {
    display: none !important;
}

.hnt-moment-processing-status-card .hnt-moment-processing-spinner {
    width: 62px;
    height: 62px;
    margin: 0 0 14px;
    border-width: 3px;
    background: rgba(10, 10, 9, .22);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
}

.hnt-moment-processing-status-card h1 {
    margin: 0 !important;
    color: #F2E8D8 !important;
    font-size: clamp(25px, 3vw, 34px) !important;
    line-height: 1 !important;
    letter-spacing: -.045em !important;
}

.hnt-moment-processing-status-card p {
    max-width: 230px;
    margin: 9px auto 0 !important;
    color: rgba(242, 232, 216, .78) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

.hnt-moment-processing-copy .hnt-moment-caption {
    font-weight: 780;
}

.hnt-moment-processing-copy .hnt-moment-description {
    max-width: 95%;
}

.hnt-moment-processing-actions {
    justify-content: center !important;
}

.hnt-moment-processing-actions .hnt-moment-action-wrap > span:last-child {
    max-width: 64px;
}

.hnt-moment-processing-reel.is-failed .hnt-moment-processing-stage {
    background:
        radial-gradient(circle at 50% 42%, rgba(184, 70, 58, .18), transparent 28%),
        linear-gradient(180deg, #12110f 0%, #050505 100%) !important;
}

@media (max-width: 767px) {
    .hnt-moment-processing-status-card {
        top: 42% !important;
        width: min(66vw, 230px) !important;
    }

    .hnt-moment-processing-status-card .hnt-moment-processing-spinner {
        width: 54px;
        height: 54px;
        margin-bottom: 12px;
    }

    .hnt-moment-processing-status-card h1 {
        font-size: 26px !important;
    }

    .hnt-moment-processing-status-card p {
        font-size: 12px !important;
    }
}

/* =========================================
   PATCH 705 - MOMENT STUDIO TEXT LAYER PREVIEW MVP
   Scope: /moments/create editor preview only.
   Adds free text layers in the Studio UI and timeline, without final FFmpeg rendering yet.
========================================= */
.hnt-studio-left {
    position: relative;
}

.hnt-studio-media-panel,
.hnt-studio-text-panel {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.hnt-studio-text-panel[hidden] {
    display: none !important;
}

.hnt-studio-text-panel {
    padding: 14px 14px 16px;
    background: #20201E;
    overflow: auto;
}

.hnt-studio-text-field {
    display: grid;
    gap: 8px;
}

.hnt-studio-text-field span {
    color: rgba(242, 232, 216, 0.72);
    font-size: 11px;
    font-weight: 900;
}

.hnt-studio-text-field textarea {
    width: 100%;
    min-height: 112px;
    border: 1px solid rgba(242, 232, 216, 0.10);
    border-radius: 12px;
    padding: 12px;
    color: #F2E8D8;
    background: #1A1A18;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    resize: vertical;
    outline: none;
}

.hnt-studio-text-field textarea:focus {
    border-color: rgba(214, 168, 79, 0.48);
    box-shadow: 0 0 0 3px rgba(214, 168, 79, 0.08);
}

.hnt-studio-text-actions {
    margin: 12px 0 10px;
    display: flex;
    gap: 8px;
}

.hnt-studio-text-add,
.hnt-studio-text-clear {
    min-height: 34px;
    border: 0;
    border-radius: 10px;
    padding: 0 12px;
    font: inherit;
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
}

.hnt-studio-text-add {
    color: #141412;
    background: #D6A84F;
}

.hnt-studio-text-clear {
    color: rgba(242, 232, 216, 0.86);
    background: #2A2A26;
}

.hnt-studio-text-clear:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.hnt-studio-text-overlay {
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.hnt-studio-text-overlay[hidden] {
    display: none !important;
}

.hnt-studio-preview-text-layer {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: calc(70px + var(--text-layer-offset, 0px));
    padding: 8px 10px;
    border-radius: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.38);
    text-align: center;
    font-size: clamp(17px, 2.7vw, 27px);
    font-weight: 950;
    line-height: 1.08;
    letter-spacing: -0.04em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
}

.hnt-studio-text-lane {
    position: relative;
    min-height: 32px;
    border: 1px dashed rgba(242, 232, 216, 0.08);
    border-radius: 8px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.012);
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
}

.hnt-studio-text-lane::-webkit-scrollbar {
    height: 5px;
}

.hnt-studio-text-lane::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(214, 168, 79, 0.42);
}

.hnt-studio-text-empty {
    padding: 0 10px;
    color: rgba(242, 232, 216, 0.48);
    font-size: 11px;
    font-weight: 850;
}

.hnt-studio-text-empty[hidden] {
    display: none !important;
}

.hnt-studio-text-clip {
    flex: 0 0 min(42%, 360px);
    min-width: 180px;
    min-height: 30px;
    border: 1px solid rgba(214, 168, 79, 0.26);
    border-radius: 8px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #141412;
    background: #D6A84F;
    font: inherit;
    cursor: pointer;
}

.hnt-studio-text-clip strong {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
    font-weight: 950;
}

.hnt-studio-text-clip em {
    flex: 0 0 auto;
    font-size: 9px;
    font-style: normal;
    font-weight: 950;
    opacity: .72;
}

.hnt-studio-text-track > div.hnt-studio-text-lane {
    min-height: 32px;
}

@media (max-width: 860px) {
    .hnt-studio-media-panel,
    .hnt-studio-text-panel {
        grid-column: auto;
        grid-row: auto;
    }

    .hnt-studio-text-panel {
        position: absolute;
        z-index: 8;
        left: 8px;
        right: 60px;
        top: 56px;
        max-height: min(48dvh, 360px);
        border: 1px solid rgba(242, 232, 216, 0.10);
        border-radius: 14px;
        background: rgba(32, 32, 30, 0.96);
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.52);
    }

    .hnt-studio-preview-text-layer {
        left: 12px;
        right: 12px;
        bottom: calc(48px + var(--text-layer-offset, 0px));
        font-size: clamp(15px, 5vw, 22px);
    }

    .hnt-studio-text-clip {
        min-width: 154px;
        flex-basis: 70%;
    }
}

/* Phase 706: draggable text overlay + timeline timing */
.hnt-studio-text-overlay {
    pointer-events: none;
}

.hnt-studio-preview-text-layer {
    left: var(--text-x, 50%);
    top: var(--text-y, 78%);
    right: auto;
    bottom: auto;
    max-width: calc(100% - 28px);
    width: max-content;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    pointer-events: auto;
    user-select: none;
    cursor: grab;
}

.hnt-studio-preview-text-layer.is-active,
.hnt-studio-preview-text-layer:focus-visible {
    outline: 0;
    border-color: rgba(214, 168, 79, 0.84);
    box-shadow: 0 0 0 3px rgba(214, 168, 79, 0.16), 0 14px 38px rgba(0, 0, 0, 0.36);
}

.hnt-studio-preview-text-layer.is-dragging {
    cursor: grabbing;
    opacity: .96;
}

.hnt-studio-text-lane {
    position: relative;
    display: block;
    min-height: 38px;
    padding: 4px;
    overflow: hidden;
}

.hnt-studio-text-clip {
    position: absolute;
    left: var(--text-left, 0%);
    top: 4px;
    bottom: 4px;
    width: var(--text-width, 10%);
    min-width: 76px;
    max-width: calc(100% - var(--text-left, 0%));
    flex: none;
    cursor: grab;
    touch-action: none;
}

.hnt-studio-text-clip.is-active,
.hnt-studio-text-clip:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(214, 168, 79, 0.18);
}

.hnt-studio-text-clip.is-dragging {
    cursor: grabbing;
    opacity: .86;
}

.hnt-studio-text-empty {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.hnt-studio.is-text-positioning .hnt-studio-phone-frame,
.hnt-studio.is-text-timing .hnt-studio-text-lane {
    box-shadow: inset 0 0 0 1px rgba(214, 168, 79, 0.28);
}

@media (max-width: 860px) {
    .hnt-studio-preview-text-layer {
        left: var(--text-x, 50%);
        top: var(--text-y, 78%);
        right: auto;
        bottom: auto;
        max-width: calc(100% - 22px);
    }

    .hnt-studio-text-lane {
        min-height: 34px;
    }

    .hnt-studio-text-clip {
        min-width: 68px;
    }
}

/* =========================================
   PATCH 709 - MOMENT STUDIO PRO LOCK DRAWER
   Scope: pro/crowns UX foundation only. No spending and no feature activation.
========================================= */
.hnt-studio-pro-backdrop {
    position: fixed;
    z-index: 92;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(5, 5, 4, 0.58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: default;
}

.hnt-studio-pro-backdrop[hidden] {
    display: none !important;
}

.hnt-studio-pro-drawer {
    position: fixed;
    z-index: 93;
    top: 50%;
    left: 50%;
    width: min(460px, calc(100vw - 32px));
    max-height: min(78dvh, 640px);
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(214, 168, 79, 0.20);
    background:
        radial-gradient(circle at 82% 0%, rgba(214, 168, 79, 0.12), transparent 36%),
        #20201E;
    box-shadow: 0 34px 100px rgba(0, 0, 0, 0.70);
    color: var(--text-main);
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: auto;
}

.hnt-studio-pro-drawer[hidden] {
    display: none !important;
}

.hnt-studio-pro-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.hnt-studio-pro-drawer-head span {
    display: block;
    margin-bottom: 8px;
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.hnt-studio-pro-drawer-head h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 30px;
    line-height: .96;
    font-weight: 950;
    letter-spacing: -0.06em;
}

.hnt-studio-pro-drawer-head p {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 750;
}

.hnt-studio-pro-note {
    padding: 15px;
    border-radius: 16px;
    border: 1px solid rgba(214, 168, 79, 0.18);
    background: #1A1A18;
    display: grid;
    gap: 6px;
}

.hnt-studio-pro-note strong {
    color: var(--accent-primary);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hnt-studio-pro-note span {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 750;
}

.hnt-studio-pro-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.hnt-studio-drawer-primary:disabled {
    cursor: not-allowed;
    opacity: 0.62;
    filter: saturate(0.55);
}

.hnt-studio.is-pro-open .hnt-studio-shell,
.hnt-studio.is-pro-open .hnt-studio-timeline {
    filter: saturate(0.86) brightness(0.74);
}

@media (max-width: 860px) {
    .hnt-studio-pro-drawer {
        top: auto;
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
        max-height: min(82dvh, 620px);
        transform: none;
        padding: 18px;
        border-radius: 22px;
    }

    .hnt-studio-pro-drawer-head h2 {
        font-size: 24px;
    }

    .hnt-studio-pro-actions {
        flex-direction: column-reverse;
    }

    .hnt-studio-pro-actions .hnt-studio-drawer-secondary,
    .hnt-studio-pro-actions .hnt-studio-drawer-primary {
        width: 100%;
    }
}

/* =========================================
   PATCH 710 - MOMENT STUDIO FADE MVP
   Scope: Ein-/Ausblenden preview + render payload. No Crown spending yet.
========================================= */
.hnt-studio-side-feature.is-enabled {
    border-color: rgba(214, 168, 79, 0.42);
    background: linear-gradient(180deg, rgba(214, 168, 79, 0.10), rgba(32, 32, 30, 0.96));
    color: var(--text-main);
}

.hnt-studio-side-feature.is-enabled em {
    background: rgba(155, 228, 71, 0.18);
    color: var(--accent-green, #9BE447);
}

.hnt-studio-fade-backdrop {
    position: fixed;
    z-index: 92;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(5, 5, 4, 0.54);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: default;
}

.hnt-studio-fade-backdrop[hidden] {
    display: none !important;
}

.hnt-studio-fade-drawer {
    position: fixed;
    z-index: 93;
    top: 50%;
    right: 22px;
    width: min(390px, calc(100vw - 32px));
    max-height: min(78dvh, 620px);
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(214, 168, 79, 0.24);
    background:
        radial-gradient(circle at 82% 0%, rgba(214, 168, 79, 0.11), transparent 38%),
        #20201E;
    box-shadow: 0 34px 100px rgba(0, 0, 0, 0.70);
    color: var(--text-main);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: auto;
}

.hnt-studio-fade-drawer[hidden] {
    display: none !important;
}

.hnt-studio-fade-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.hnt-studio-fade-drawer-head span {
    display: block;
    margin-bottom: 8px;
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.hnt-studio-fade-drawer-head h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 28px;
    line-height: .98;
    font-weight: 950;
    letter-spacing: -0.055em;
}

.hnt-studio-fade-drawer-head p {
    margin: 9px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 750;
}

.hnt-studio-fade-active,
.hnt-studio-fade-help {
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid rgba(242, 232, 216, 0.10);
    background: #1A1A18;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 800;
}

.hnt-studio-fade-toggle {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(242, 232, 216, 0.10);
    background: rgba(26, 26, 24, 0.82);
    cursor: pointer;
}

.hnt-studio-fade-toggle:hover {
    border-color: rgba(214, 168, 79, 0.28);
    background: rgba(36, 36, 33, 0.92);
}

.hnt-studio-fade-toggle input {
    width: 22px;
    height: 22px;
    accent-color: var(--accent-primary);
    flex: 0 0 auto;
}

.hnt-studio-fade-toggle input:disabled {
    opacity: 0.35;
}

.hnt-studio-fade-toggle span {
    display: grid;
    gap: 4px;
}

.hnt-studio-fade-toggle strong {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 950;
}

.hnt-studio-fade-toggle em {
    color: var(--text-muted);
    font-size: 12px;
    font-style: normal;
    line-height: 1.35;
    font-weight: 750;
}

.hnt-studio.is-fade-open .hnt-studio-shell,
.hnt-studio.is-fade-open .hnt-studio-timeline {
    filter: saturate(0.88) brightness(0.78);
}

.hnt-studio-media-item.is-faded,
.hnt-studio-timeline-clip.is-faded {
    box-shadow: inset 0 0 0 1px rgba(155, 228, 71, 0.22), 0 0 0 1px rgba(214, 168, 79, 0.16);
}

.hnt-studio-timeline-clip.is-faded::after {
    content: 'fade';
    position: absolute;
    right: 8px;
    top: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(155, 228, 71, 0.16);
    color: #9BE447;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hnt-studio-video-preview {
    transition: opacity 120ms linear;
}

@media (max-width: 860px) {
    .hnt-studio-fade-drawer {
        top: auto;
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
        max-height: min(82dvh, 620px);
        transform: none;
        padding: 18px;
        border-radius: 22px;
    }

    .hnt-studio-fade-drawer-head h2 {
        font-size: 24px;
    }
}

/* =========================================
   PATCH 711 - MOMENT STUDIO FILTER MVP
   Scope: Filter panel, preview state and render payload. No Crown spending yet.
========================================= */
.hnt-studio-filter-backdrop {
    position: fixed;
    z-index: 92;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(5, 5, 4, 0.46);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: default;
}

.hnt-studio-filter-backdrop[hidden] {
    display: none !important;
}

.hnt-studio-filter-drawer {
    position: fixed;
    z-index: 93;
    top: 50%;
    right: 22px;
    width: min(430px, calc(100vw - 32px));
    max-height: min(86dvh, 740px);
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(214, 168, 79, 0.22);
    background:
        radial-gradient(circle at 78% 0%, rgba(214, 168, 79, 0.08), transparent 34%),
        #20201E;
    box-shadow: 0 34px 100px rgba(0, 0, 0, 0.70);
    color: var(--text-main);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}

.hnt-studio-filter-drawer[hidden] {
    display: none !important;
}

.hnt-studio-filter-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.hnt-studio-filter-drawer-head span {
    display: block;
    margin-bottom: 8px;
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.hnt-studio-filter-drawer-head h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 28px;
    line-height: .98;
    font-weight: 950;
    letter-spacing: -0.055em;
}

.hnt-studio-filter-drawer-head p {
    margin: 9px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 750;
}

.hnt-studio-filter-active,
.hnt-studio-filter-help {
    padding: 12px 13px;
    border-radius: 15px;
    border: 1px solid rgba(242, 232, 216, 0.10);
    background: #1A1A18;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 800;
}

.hnt-studio-filter-search input {
    width: 100%;
    height: 40px;
    border: 1px solid rgba(242, 232, 216, 0.12);
    border-radius: 12px;
    padding: 0 13px;
    color: var(--text-main);
    background: #1A1A18;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    outline: none;
}

.hnt-studio-filter-search input:focus {
    border-color: rgba(214, 168, 79, 0.34);
    box-shadow: 0 0 0 3px rgba(214, 168, 79, 0.06);
}

.hnt-studio-filter-grid {
    min-height: 0;
    padding-right: 4px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 10px;
    overflow: auto;
}

.hnt-studio-filter-card {
    appearance: none;
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--text-muted);
    text-align: left;
    cursor: pointer;
    font-family: var(--font-main);
}

.hnt-studio-filter-card[hidden] {
    display: none !important;
}

.hnt-studio-filter-card:disabled {
    cursor: not-allowed;
    opacity: .52;
}

.hnt-studio-filter-preview {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
    border: 2px solid rgba(242, 232, 216, 0.08);
    background:
        radial-gradient(circle at 50% 40%, rgba(214, 168, 79, 0.18), transparent 34%),
        #141412;
}

.hnt-studio-filter-card.is-active .hnt-studio-filter-preview {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(214, 168, 79, 0.18);
}

.hnt-studio-filter-card.is-active .hnt-studio-filter-preview::after {
    content: '✓';
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--accent-primary);
    color: #141412;
    font-size: 12px;
    font-weight: 950;
}

.hnt-studio-filter-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hnt-studio-filter-preview[data-filter="none"] video { filter: none; }
.hnt-studio-filter-preview[data-filter="orange_teal"] video { filter: sepia(.18) saturate(1.28) contrast(1.08) hue-rotate(-10deg); }
.hnt-studio-filter-preview[data-filter="bold_blue"] video { filter: saturate(1.18) contrast(1.16) hue-rotate(195deg); }
.hnt-studio-filter-preview[data-filter="golden_hour"] video { filter: sepia(.24) saturate(1.30) brightness(1.04) contrast(1.08); }
.hnt-studio-filter-preview[data-filter="vivid_vlogger"] video { filter: saturate(1.42) brightness(1.04) contrast(1.08); }
.hnt-studio-filter-preview[data-filter="purple_undertone"] video { filter: saturate(1.20) contrast(1.06) hue-rotate(28deg); }
.hnt-studio-filter-preview[data-filter="winter_sunset_35"] video { filter: sepia(.12) saturate(.96) contrast(1.14) hue-rotate(-18deg); }
.hnt-studio-filter-preview[data-filter="contrast"] video { filter: contrast(1.28) saturate(1.06); }
.hnt-studio-filter-preview[data-filter="autumn"] video { filter: sepia(.28) saturate(1.18) contrast(1.08) hue-rotate(-18deg); }
.hnt-studio-filter-preview[data-filter="winter"] video { filter: saturate(.82) brightness(1.03) contrast(1.10) hue-rotate(190deg); }
.hnt-studio-filter-preview[data-filter="old_western"] video { filter: sepia(.52) saturate(.82) contrast(1.16) brightness(.96); }
.hnt-studio-filter-preview[data-filter="warm_coast"] video { filter: sepia(.12) saturate(1.15) brightness(1.04) contrast(1.05); }
.hnt-studio-filter-preview[data-filter="cool_coast"] video { filter: saturate(1.06) brightness(1.03) contrast(1.05) hue-rotate(190deg); }
.hnt-studio-filter-preview[data-filter="warm_landscape"] video { filter: sepia(.17) saturate(1.24) contrast(1.08); }
.hnt-studio-filter-preview[data-filter="cool_landscape"] video { filter: saturate(1.08) contrast(1.10) hue-rotate(200deg); }
.hnt-studio-filter-preview[data-filter="golden"] video { filter: sepia(.30) saturate(1.35) brightness(1.04) contrast(1.12); }
.hnt-studio-filter-preview[data-filter="dreamscape"] video { filter: saturate(1.18) brightness(1.06) contrast(.96) hue-rotate(18deg); }

.hnt-studio-filter-card strong {
    display: block;
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.12;
    font-weight: 850;
}

.hnt-studio-filter-card.is-active strong {
    color: var(--accent-primary);
}

.hnt-studio.is-filter-open .hnt-studio-shell,
.hnt-studio.is-filter-open .hnt-studio-timeline {
    filter: saturate(0.88) brightness(0.78);
}

.hnt-studio-video-preview {
    transition: opacity 120ms linear, filter 140ms ease;
}

.hnt-studio-media-item.is-filtered,
.hnt-studio-timeline-clip.is-filtered {
    box-shadow: inset 0 0 0 1px rgba(214, 168, 79, 0.26), 0 0 0 1px rgba(155, 228, 71, 0.08);
}

.hnt-studio-timeline-clip.is-filtered::before {
    content: 'filter';
    position: absolute;
    right: 8px;
    bottom: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(214, 168, 79, 0.16);
    color: var(--accent-primary);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media (max-width: 860px) {
    .hnt-studio-filter-drawer {
        top: auto;
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
        max-height: min(82dvh, 620px);
        transform: none;
        padding: 16px;
        border-radius: 22px;
    }

    .hnt-studio-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px 8px;
    }

    .hnt-studio-filter-drawer-head h2 {
        font-size: 24px;
    }

    .hnt-studio-filter-card strong {
        font-size: 10px;
    }
}


/* =========================================
   PATCH 713 - MOMENT STUDIO EFFECTS MVP
   Scope: Effects panel, preview overlays and render payload. No Crown spending yet.
========================================= */
.hnt-studio-effect-backdrop {
    position: fixed;
    z-index: 92;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(5, 5, 4, 0.46);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: default;
}

.hnt-studio-effect-backdrop[hidden] {
    display: none !important;
}

.hnt-studio-effect-drawer {
    position: fixed;
    z-index: 93;
    top: 50%;
    right: 22px;
    width: min(410px, calc(100vw - 32px));
    max-height: min(84dvh, 700px);
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(214, 168, 79, 0.22);
    background: radial-gradient(circle at 76% 0%, rgba(214, 168, 79, 0.08), transparent 34%), #20201E;
    box-shadow: 0 34px 100px rgba(0, 0, 0, 0.70);
    color: var(--text-main);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}

.hnt-studio-effect-drawer[hidden] {
    display: none !important;
}

.hnt-studio-effect-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.hnt-studio-effect-drawer-head span {
    display: block;
    margin-bottom: 8px;
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.hnt-studio-effect-drawer-head h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 28px;
    line-height: .98;
    font-weight: 950;
    letter-spacing: -0.055em;
}

.hnt-studio-effect-drawer-head p {
    margin: 9px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 750;
}

.hnt-studio-effect-active,
.hnt-studio-effect-help {
    padding: 12px 13px;
    border-radius: 15px;
    border: 1px solid rgba(242, 232, 216, 0.10);
    background: #1A1A18;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 800;
}

.hnt-studio-effect-grid {
    min-height: 0;
    padding-right: 4px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    overflow: auto;
}

.hnt-studio-effect-card {
    appearance: none;
    min-width: 0;
    border: 1px solid rgba(242, 232, 216, 0.09);
    border-radius: 16px;
    padding: 12px;
    background: #1A1A18;
    color: var(--text-muted);
    text-align: left;
    cursor: pointer;
    font-family: var(--font-main);
    display: grid;
    gap: 8px;
}

.hnt-studio-effect-card:hover,
.hnt-studio-effect-card.is-active {
    border-color: rgba(214, 168, 79, 0.44);
    background: rgba(36, 36, 33, 0.94);
}

.hnt-studio-effect-card.is-active {
    box-shadow: inset 0 0 0 1px rgba(214, 168, 79, 0.22), 0 0 0 2px rgba(214, 168, 79, 0.08);
}

.hnt-studio-effect-preview {
    position: relative;
    display: block;
    height: 62px;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(135deg, #111 0%, #242421 42%, #D6A84F 100%);
}

.hnt-studio-effect-preview::before,
.hnt-studio-effect-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hnt-studio-effect-preview[data-effect="dark_vignette"]::after,
.hnt-studio-phone-frame[data-effect="dark_vignette"]::after,
.hnt-studio-phone-frame[data-effect="old_lens"]::after,
.hnt-studio-phone-frame[data-effect="night_hunt"]::after {
    content: '';
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at center, transparent 42%, rgba(0,0,0,.72) 100%);
}

.hnt-studio-effect-preview[data-effect="film_grain"]::before,
.hnt-studio-effect-preview[data-effect="old_lens"]::before,
.hnt-studio-phone-frame[data-effect="film_grain"]::before,
.hnt-studio-phone-frame[data-effect="old_lens"]::before {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.55) 0 1px, transparent 1.5px),
        radial-gradient(circle at 70% 60%, rgba(0,0,0,.55) 0 1px, transparent 1.5px),
        radial-gradient(circle at 45% 80%, rgba(255,255,255,.32) 0 1px, transparent 1.5px);
    background-size: 12px 12px, 15px 15px, 9px 9px;
    mix-blend-mode: overlay;
}

.hnt-studio-effect-preview[data-effect="sharp"] { filter: contrast(1.08) saturate(1.05); }
.hnt-studio-effect-preview[data-effect="soft_glow"] { filter: brightness(1.05) saturate(1.08) contrast(.96); }
.hnt-studio-effect-preview[data-effect="bayou_haze"] { filter: brightness(1.04) saturate(.92) contrast(.96); }
.hnt-studio-effect-preview[data-effect="old_lens"] { filter: sepia(.18) contrast(1.08) saturate(.92); }
.hnt-studio-effect-preview[data-effect="night_hunt"] { filter: brightness(.88) contrast(1.18) saturate(.85); }

.hnt-studio-effect-card strong {
    color: var(--text-main);
    font-size: 12px;
    line-height: 1.1;
    font-weight: 950;
}

.hnt-studio-effect-card em {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.25;
    font-style: normal;
    font-weight: 750;
}

.hnt-studio.is-effect-open .hnt-studio-shell,
.hnt-studio.is-effect-open .hnt-studio-timeline {
    filter: saturate(0.88) brightness(0.78);
}

.hnt-studio-media-item.is-effected,
.hnt-studio-timeline-clip.is-effected {
    box-shadow: inset 0 0 0 1px rgba(155, 228, 71, 0.20), 0 0 0 1px rgba(214, 168, 79, 0.14);
}

.hnt-studio-timeline-clip.is-effected::after {
    content: 'fx';
    position: absolute;
    left: 8px;
    top: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(155, 228, 71, 0.16);
    color: #9BE447;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media (max-width: 860px) {
    .hnt-studio-effect-drawer {
        top: auto;
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
        max-height: min(82dvh, 620px);
        transform: none;
        padding: 16px;
        border-radius: 22px;
    }

    .hnt-studio-effect-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .hnt-studio-effect-drawer-head h2 {
        font-size: 24px;
    }
}


/* =========================================
   PATCH 714 - MOMENT STUDIO REAL EFFECTS
   Scope: Replace simple look filters with true motion/temporal effect previews.
========================================= */
.hnt-studio-effect-search {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border-radius: 13px;
    border: 1px solid rgba(242, 232, 216, 0.13);
    background: #1A1A18;
    color: var(--text-muted);
}

.hnt-studio-effect-search svg ,

.hnt-studio-effect-search .ph {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.hnt-studio-effect-search input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
}

.hnt-studio-effect-search input::placeholder {
    color: rgba(167, 156, 142, 0.78);
}

.hnt-studio-effect-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
}

.hnt-studio-effect-card {
    padding: 8px;
    gap: 7px;
}

.hnt-studio-effect-card em {
    display: none;
}

.hnt-studio-effect-preview {
    height: 82px;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.34)),
        radial-gradient(circle at 54% 40%, rgba(214,168,79,.24), transparent 24%),
        linear-gradient(135deg, #0d0e0d 0%, #26231b 44%, #70552a 100%);
}

.hnt-studio-effect-preview[data-effect="none"] {
    background: #272723;
}

.hnt-studio-effect-preview[data-effect="none"]::after {
    content: '⊘';
    display: grid;
    place-items: center;
    color: rgba(242, 232, 216, 0.76);
    font-size: 28px;
    background: transparent;
}

.hnt-studio-effect-preview[data-effect="flash"]::after,
.hnt-studio-phone-frame[data-effect="flash"]::after {
    content: '';
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
    background: rgba(255,255,255,.62);
    mix-blend-mode: screen;
    animation: hntEffectFlash .72s steps(2, end) infinite;
}

.hnt-studio-effect-preview[data-effect="impulse"],
.hnt-studio-phone-frame[data-effect="impulse"] .hnt-studio-video-preview,
.hnt-studio-effect-preview[data-effect="fast_zoom"],
.hnt-studio-phone-frame[data-effect="fast_zoom"] .hnt-studio-video-preview {
    animation: hntEffectImpulse 1.05s ease-in-out infinite;
}

.hnt-studio-effect-preview[data-effect="slow_zoom"],
.hnt-studio-phone-frame[data-effect="slow_zoom"] .hnt-studio-video-preview {
    animation: hntEffectSlowZoom 5.8s ease-in-out infinite alternate;
}

.hnt-studio-effect-preview[data-effect="random_zoom"],
.hnt-studio-phone-frame[data-effect="random_zoom"] .hnt-studio-video-preview {
    animation: hntEffectRandomZoom 3.4s ease-in-out infinite;
}

.hnt-studio-effect-preview[data-effect="rotate"],
.hnt-studio-phone-frame[data-effect="rotate"] .hnt-studio-video-preview {
    animation: hntEffectRotate 2.8s ease-in-out infinite;
    transform-origin: center;
}

.hnt-studio-effect-preview[data-effect="vhs"]::before,
.hnt-studio-phone-frame[data-effect="vhs"]::before {
    content: '';
    position: absolute;
    z-index: 5;
    inset: 0;
    pointer-events: none;
    opacity: .38;
    background:
        repeating-linear-gradient(to bottom, rgba(255,255,255,.18) 0 1px, transparent 1px 4px),
        linear-gradient(90deg, rgba(39,200,255,.12), transparent 22%, rgba(255,50,80,.12) 78%, transparent);
    mix-blend-mode: screen;
    animation: hntEffectVhsLines .34s steps(2, end) infinite;
}

.hnt-studio-effect-preview[data-effect="vhs"],
.hnt-studio-phone-frame[data-effect="vhs"] .hnt-studio-video-preview {
    filter: contrast(1.10) saturate(.82);
    animation: hntEffectVhsJitter .22s steps(2, end) infinite;
}

.hnt-studio-effect-preview[data-effect="vaporwave"],
.hnt-studio-phone-frame[data-effect="vaporwave"] .hnt-studio-video-preview {
    filter: hue-rotate(285deg) saturate(1.42) contrast(1.08);
}

.hnt-studio-effect-preview[data-effect="chromatic"],
.hnt-studio-phone-frame[data-effect="chromatic"] .hnt-studio-video-preview,
.hnt-studio-effect-preview[data-effect="glitch"],
.hnt-studio-phone-frame[data-effect="glitch"] .hnt-studio-video-preview {
    filter: contrast(1.15) saturate(1.22);
    animation: hntEffectGlitchJitter .48s steps(2, end) infinite;
}

.hnt-studio-effect-preview[data-effect="chromatic"]::after,
.hnt-studio-phone-frame[data-effect="chromatic"]::after,
.hnt-studio-effect-preview[data-effect="glitch"]::after,
.hnt-studio-phone-frame[data-effect="glitch"]::after {
    content: '';
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0,255,255,.18), transparent 44%, rgba(255,0,90,.18));
    mix-blend-mode: screen;
    animation: hntEffectChromatic .55s steps(2, end) infinite;
}

.hnt-studio-effect-preview[data-effect="blur"],
.hnt-studio-phone-frame[data-effect="blur"] .hnt-studio-video-preview {
    filter: blur(2px) brightness(.98);
}

.hnt-studio-effect-preview[data-effect="filmic"]::before,
.hnt-studio-phone-frame[data-effect="filmic"]::before,
.hnt-studio-effect-preview[data-effect="smoke"]::before,
.hnt-studio-phone-frame[data-effect="smoke"]::before,
.hnt-studio-effect-preview[data-effect="spread"]::before,
.hnt-studio-phone-frame[data-effect="spread"]::before {
    content: '';
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
    opacity: .24;
    background-image: radial-gradient(circle at 30% 40%, rgba(255,255,255,.45) 0 1px, transparent 1.5px), radial-gradient(circle at 70% 65%, rgba(0,0,0,.50) 0 1px, transparent 1.5px);
    background-size: 13px 13px, 17px 17px;
    mix-blend-mode: overlay;
}

.hnt-studio-effect-preview[data-effect="disco"],
.hnt-studio-phone-frame[data-effect="disco"] .hnt-studio-video-preview {
    animation: hntEffectDisco 2.6s linear infinite;
}

.hnt-studio-effect-preview[data-effect="comic"],
.hnt-studio-phone-frame[data-effect="comic"] .hnt-studio-video-preview {
    filter: contrast(1.55) saturate(.88);
}

.hnt-studio-effect-preview[data-effect="retro"],
.hnt-studio-phone-frame[data-effect="retro"] .hnt-studio-video-preview {
    image-rendering: pixelated;
    filter: contrast(1.16) saturate(.9);
}

.hnt-studio-effect-preview[data-effect="shine"]::after,
.hnt-studio-phone-frame[data-effect="shine"]::after {
    content: '';
    position: absolute;
    z-index: 4;
    inset: -30% -70%;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.34) 50%, transparent 64%);
    mix-blend-mode: screen;
    animation: hntEffectShine 2.4s ease-in-out infinite;
}

@keyframes hntEffectFlash { 0%, 74%, 100% { opacity: 0; } 76%, 86% { opacity: 1; } }
@keyframes hntEffectImpulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.045); } 55% { transform: scale(1.015); } }
@keyframes hntEffectSlowZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes hntEffectRandomZoom { 0%, 100% { transform: scale(1.02) translate(0,0); } 33% { transform: scale(1.065) translate(1.2%, -.9%); } 66% { transform: scale(1.035) translate(-1.1%, .7%); } }
@keyframes hntEffectRotate { 0%, 100% { transform: rotate(0deg) scale(1.02); } 45% { transform: rotate(1.2deg) scale(1.035); } 70% { transform: rotate(-.8deg) scale(1.025); } }
@keyframes hntEffectVhsLines { 0% { transform: translateY(0); opacity: .24; } 100% { transform: translateY(6px); opacity: .48; } }
@keyframes hntEffectVhsJitter { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1px); } }
@keyframes hntEffectGlitchJitter { 0%, 100% { transform: translate(0,0); } 30% { transform: translate(1px, -1px); } 60% { transform: translate(-1px, 1px); } }
@keyframes hntEffectChromatic { 0%, 100% { transform: translateX(0); opacity: .22; } 50% { transform: translateX(4px); opacity: .42; } }
@keyframes hntEffectDisco { 0% { filter: hue-rotate(0deg) saturate(1.35); } 100% { filter: hue-rotate(360deg) saturate(1.35); } }
@keyframes hntEffectShine { from { transform: translateX(-45%); opacity: 0; } 30%, 60% { opacity: .8; } to { transform: translateX(45%); opacity: 0; } }

@media (max-width: 860px) {
    .hnt-studio-effect-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hnt-studio-effect-preview {
        height: 72px;
    }

    .hnt-studio-effect-card strong {
        font-size: 10px;
    }
}


/* =========================================
   PATCH 715 - MOMENT STUDIO COLOR ADJUST MVP
   Scope: Clip color controls, preview state and render payload. No Crown spending yet.
========================================= */
.hnt-studio-colors-backdrop {
    position: fixed;
    z-index: 92;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(5, 5, 4, 0.46);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: default;
}

.hnt-studio-colors-backdrop[hidden] { display: none !important; }

.hnt-studio-colors-drawer {
    position: fixed;
    z-index: 93;
    top: 50%;
    right: 22px;
    width: min(430px, calc(100vw - 32px));
    max-height: min(84dvh, 700px);
    padding: 20px;
    border-radius: 24px;
    border: 1px solid rgba(214, 168, 79, 0.22);
    background: radial-gradient(circle at 78% 0%, rgba(214, 168, 79, 0.08), transparent 34%), #20201E;
    box-shadow: 0 34px 100px rgba(0, 0, 0, 0.70);
    color: var(--text-main);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: auto;
}

.hnt-studio-colors-drawer[hidden] { display: none !important; }

.hnt-studio-colors-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.hnt-studio-colors-drawer-head span {
    display: block;
    margin-bottom: 8px;
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.hnt-studio-colors-drawer-head h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 28px;
    line-height: .98;
    font-weight: 950;
    letter-spacing: -0.055em;
}

.hnt-studio-colors-drawer-head p {
    margin: 9px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 750;
}

.hnt-studio-colors-active,
.hnt-studio-colors-help {
    padding: 12px 13px;
    border-radius: 15px;
    border: 1px solid rgba(242, 232, 216, 0.10);
    background: #1A1A18;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 800;
}

.hnt-studio-color-controls {
    display: grid;
    gap: 17px;
    padding: 4px 2px;
}

.hnt-studio-color-control {
    --range-progress: 50%;
    display: grid;
    gap: 10px;
}

.hnt-studio-color-control span {
    color: var(--text-main);
    font-size: 15px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.02em;
}

.hnt-studio-color-control input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 28px;
    border: 0;
    outline: 0;
    background: transparent;
    cursor: pointer;
}

.hnt-studio-color-control input[type="range"]::-webkit-slider-runnable-track {
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, #3b3a35 0%, #3b3a35 var(--range-progress), rgba(242,232,216,.18) var(--range-progress), rgba(242,232,216,.18) 100%);
}

.hnt-studio-color-control input[type="range"]::-moz-range-track {
    height: 7px;
    border-radius: 999px;
    background: rgba(242,232,216,.18);
}

.hnt-studio-color-control input[type="range"]::-moz-range-progress {
    height: 7px;
    border-radius: 999px;
    background: #3b3a35;
}

.hnt-studio-color-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -8.5px;
    border-radius: 999px;
    border: 3px solid #F2E8D8;
    background: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(214,168,79,.28), 0 8px 20px rgba(0,0,0,.45);
}

.hnt-studio-color-control input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 3px solid #F2E8D8;
    background: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(214,168,79,.28), 0 8px 20px rgba(0,0,0,.45);
}

.hnt-studio-color-control.is-temperature input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, #4d7cff 0%, #87708c 45%, var(--accent-primary) 55%, #ff6a2a 100%);
}

.hnt-studio-color-control.is-temperature input[type="range"]::-moz-range-track {
    background: linear-gradient(90deg, #4d7cff 0%, #87708c 45%, var(--accent-primary) 55%, #ff6a2a 100%);
}

.hnt-studio-color-control input[type="range"]:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.hnt-studio.is-colors-open .hnt-studio-shell,
.hnt-studio.is-colors-open .hnt-studio-timeline {
    filter: saturate(0.88) brightness(0.78);
}

.hnt-studio-media-item.is-colored,
.hnt-studio-timeline-clip.is-colored {
    box-shadow: inset 0 0 0 1px rgba(214, 168, 79, 0.28), 0 0 0 1px rgba(155, 228, 71, 0.08);
}

.hnt-studio-timeline-clip.is-colored::before {
    content: 'color';
    position: absolute;
    left: 8px;
    bottom: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(214, 168, 79, 0.16);
    color: var(--accent-primary);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media (max-width: 860px) {
    .hnt-studio-colors-drawer {
        top: auto;
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
        max-height: min(82dvh, 620px);
        transform: none;
        padding: 16px;
        border-radius: 22px;
    }

    .hnt-studio-colors-drawer-head h2 {
        font-size: 24px;
    }

    .hnt-studio-color-control span {
        font-size: 14px;
    }
}

/* PATCH 718 - Moment Studio background upload flow */
.hnt-studio-upload-shell {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: #141412;
    color: var(--text-main);
    overflow: hidden;
}

.hnt-studio-upload-shell[hidden] {
    display: none !important;
}

.hnt-studio-upload-feed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #141412;
}

.hnt-studio-upload-shell::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(20, 20, 18, .18), rgba(20, 20, 18, .06) 48%, rgba(20, 20, 18, .28)),
        radial-gradient(circle at 12% 10%, rgba(214, 168, 79, .10), transparent 34%);
}

.hnt-studio-upload-card {
    position: fixed;
    z-index: 505;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 32px));
    min-height: 82px;
    padding: 12px 14px;
    border: 1px solid rgba(242, 232, 216, .12);
    border-radius: 22px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    background:
        radial-gradient(circle at 12% 0%, rgba(214, 168, 79, .16), transparent 36%),
        rgba(26, 26, 24, .92);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.hnt-studio-upload-preview {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    overflow: hidden;
    background: #0d0d0c;
    border: 1px solid rgba(214, 168, 79, .28);
    display: grid;
    place-items: center;
}

.hnt-studio-upload-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hnt-studio-upload-preview video[hidden],
.hnt-studio-upload-preview span[hidden] {
    display: none !important;
}

.hnt-studio-upload-preview span {
    color: var(--accent-primary);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
}

.hnt-studio-upload-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.hnt-studio-upload-copy > span {
    color: var(--accent-primary);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.hnt-studio-upload-copy strong {
    color: var(--text-main);
    font-size: 16px;
    font-weight: 950;
    line-height: 1.05;
}

.hnt-studio-upload-copy em {
    color: var(--text-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hnt-studio-upload-progress {
    position: relative;
    height: 7px;
    margin-top: 5px;
    border-radius: 999px;
    background: rgba(242, 232, 216, .12);
    overflow: hidden;
}

.hnt-studio-upload-progress i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #D6A84F, #9BE447);
    box-shadow: 0 0 16px rgba(214, 168, 79, .34);
    transition: width .18s ease;
}

.hnt-studio-upload-back {
    min-height: 40px;
    border: 0;
    border-radius: 14px;
    padding: 0 14px;
    background: #2A2A26;
    color: var(--text-main);
    font: inherit;
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
}

.hnt-studio.is-background-uploading > :not(.hnt-studio-upload-shell) {
    pointer-events: none;
}

.hnt-studio.is-upload-error .hnt-studio-upload-card {
    border-color: rgba(184, 70, 58, .42);
}

.hnt-studio.is-upload-error .hnt-studio-upload-progress i {
    background: #B8463A;
    box-shadow: 0 0 16px rgba(184, 70, 58, .30);
}

@media (max-width: 860px) {
    .hnt-studio-upload-card {
        top: 14px;
        left: 14px;
        right: 14px;
        width: auto;
        transform: none;
        grid-template-columns: 52px minmax(0, 1fr);
        border-radius: 20px;
    }

    .hnt-studio-upload-preview {
        width: 52px;
        height: 52px;
        border-radius: 14px;
    }

    .hnt-studio-upload-back {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* Moment Studio phase 719: transitions MVP */
.hnt-studio-transitions-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}

.hnt-studio-transition-active {
    padding: 12px 13px;
    border: 1px solid rgba(242, 232, 216, 0.12);
    border-radius: 14px;
    background: rgba(32, 32, 30, 0.82);
    color: rgba(242, 232, 216, 0.78);
    font-weight: 800;
    line-height: 1.28;
    font-size: 12px;
}

.hnt-studio-transition-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: auto;
    padding-right: 4px;
    min-height: 0;
}

.hnt-studio-transition-card {
    border: 1px solid rgba(242, 232, 216, 0.12);
    border-radius: 14px;
    background: rgba(26, 26, 24, 0.9);
    color: rgba(242, 232, 216, 0.72);
    padding: 9px;
    text-align: left;
    display: grid;
    gap: 7px;
    cursor: pointer;
    min-width: 0;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.hnt-studio-transition-card:hover:not(:disabled),
.hnt-studio-transition-card.is-active {
    transform: translateY(-1px);
    border-color: rgba(214, 168, 79, 0.68);
    background: rgba(36, 36, 33, 0.96);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
}

.hnt-studio-transition-card:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.hnt-studio-transition-preview {
    height: 58px;
    border-radius: 10px;
    border: 1px solid rgba(242, 232, 216, 0.1);
    background: linear-gradient(90deg, rgba(214, 168, 79, 0.35), rgba(214, 168, 79, 0.08));
    position: relative;
    overflow: hidden;
}

.hnt-studio-transition-preview::before,
.hnt-studio-transition-preview::after {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    width: 34%;
    border-radius: 8px;
    background: rgba(242, 232, 216, 0.16);
}

.hnt-studio-transition-preview::before { left: 9px; }
.hnt-studio-transition-preview::after { right: 9px; }

.hnt-studio-transition-card strong {
    display: block;
    color: #f2e8d8;
    font-size: 12px;
    line-height: 1.1;
}

.hnt-studio-transition-card em {
    display: block;
    color: rgba(242, 232, 216, 0.55);
    font-size: 10px;
    line-height: 1.25;
    font-style: normal;
}

.hnt-studio-timeline-clip.is-transitioned {
    border-color: rgba(155, 228, 71, 0.65);
    box-shadow: inset 0 0 0 1px rgba(155, 228, 71, 0.18), 0 0 0 1px rgba(155, 228, 71, 0.16);
}

.hnt-studio-timeline-clip.is-transitioned::before {
    content: "↔";
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #9be447;
    color: #141412;
    font-weight: 900;
    font-size: 11px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
}

.hnt-studio-media-item.is-transitioned {
    border-color: rgba(155, 228, 71, 0.45);
}

@media (max-width: 760px) {
    .hnt-studio-transition-grid {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }

    .hnt-studio-transition-card em {
        display: none;
    }
}


/* Patch 720: transitions panel containment + boundary selection polish */
.hnt-studio-media-panel,
.hnt-studio-text-panel,
.hnt-studio-transitions-panel {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.hnt-studio-transitions-panel[hidden] {
    display: none !important;
}

.hnt-studio-transitions-panel {
    padding: 14px 14px 16px;
    background: #20201E;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.hnt-studio-transition-active {
    min-height: auto;
    overflow-wrap: anywhere;
    word-break: normal;
}

.hnt-studio-transition-active.is-ready {
    border-color: rgba(214, 168, 79, 0.28);
    background: rgba(214, 168, 79, 0.08);
    color: #F2E8D8;
}

.hnt-studio-transition-grid {
    flex: 1 1 auto;
    align-content: start;
    max-height: none;
}

.hnt-studio-transition-card:disabled {
    opacity: 0.34;
}

@media (max-width: 860px) {
    .hnt-studio-media-panel,
    .hnt-studio-text-panel,
    .hnt-studio-transitions-panel {
        grid-column: auto;
        grid-row: auto;
    }

    .hnt-studio-transitions-panel {
        position: absolute;
        z-index: 8;
        left: 8px;
        right: 60px;
        top: 56px;
        max-height: min(52dvh, 420px);
        border: 1px solid rgba(242, 232, 216, 0.10);
        border-radius: 14px;
        background: rgba(32, 32, 30, 0.96);
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.52);
    }
}

/* Patch 721: Studio timeline scrubber, transition preview and panel containment */
.hnt-studio-media-panel[hidden],
.hnt-studio-text-panel[hidden],
.hnt-studio-transitions-panel[hidden] {
    display: none !important;
}

.hnt-studio-transitions-panel {
    position: relative;
    z-index: 2;
}

.hnt-studio-transitions-panel .hnt-studio-import-note {
    flex: 0 0 auto;
    margin-bottom: 0;
}

.hnt-studio-transition-grid {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px;
    padding-bottom: 10px;
}

.hnt-studio-transition-card {
    min-height: 0;
    transform: none;
}

.hnt-studio-transition-card:hover:not(:disabled),
.hnt-studio-transition-card.is-active {
    transform: none;
}

.hnt-studio-timeline {
    position: relative;
}

.hnt-studio-time-ruler,
.hnt-studio-timeline-lane {
    cursor: pointer;
}

.hnt-studio-timeline-scrubber {
    position: absolute;
    top: 64px;
    bottom: 12px;
    width: 3px;
    border-radius: 999px;
    background: #F2E8D8;
    box-shadow: 0 0 0 1px rgba(20, 20, 18, .80), 0 8px 24px rgba(0, 0, 0, .46);
    opacity: 0;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 8;
    transition: opacity .16s ease;
}

.hnt-studio-timeline-scrubber.is-visible {
    opacity: .95;
}

.hnt-studio-timeline-scrubber::before {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    width: 22px;
    height: 22px;
    border-radius: 999px 999px 999px 4px;
    background: #F2E8D8;
    transform: translateX(-50%) rotate(-45deg);
    box-shadow: 0 0 0 1px rgba(20, 20, 18, .65), 0 8px 20px rgba(0, 0, 0, .42);
}

.hnt-studio-phone-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    opacity: 0;
}

.hnt-studio-phone-frame.is-transition-preview::after {
    animation: hntStudioTransitionPulse .48s ease both;
}

.hnt-studio-phone-frame.is-transition-preview[data-transition-preview="fade"]::after,
.hnt-studio-phone-frame.is-transition-preview[data-transition-preview="crossfade"]::after {
    background: rgba(242, 232, 216, .18);
}

.hnt-studio-phone-frame.is-transition-preview[data-transition-preview="black"]::after,
.hnt-studio-phone-frame.is-transition-preview[data-transition-preview="dip_black"]::after {
    background: #000;
}

.hnt-studio-phone-frame.is-transition-preview[data-transition-preview="white"]::after,
.hnt-studio-phone-frame.is-transition-preview[data-transition-preview="flash_white"]::after {
    background: #fff;
}

.hnt-studio-phone-frame.is-transition-preview[data-transition-preview="slide_left"]::after,
.hnt-studio-phone-frame.is-transition-preview[data-transition-preview="slide_right"]::after {
    background: linear-gradient(90deg, transparent, rgba(214,168,79,.45), transparent);
    animation-name: hntStudioTransitionSlide;
}

.hnt-studio-phone-frame.is-transition-preview[data-transition-preview="zoom"]::after,
.hnt-studio-phone-frame.is-transition-preview[data-transition-preview="zoom_cut"]::after {
    background: radial-gradient(circle, rgba(242,232,216,.28), transparent 58%);
    animation-name: hntStudioTransitionZoom;
}

@keyframes hntStudioTransitionPulse {
    0% { opacity: 0; }
    45% { opacity: .9; }
    100% { opacity: 0; }
}

@keyframes hntStudioTransitionSlide {
    0% { opacity: 0; transform: translateX(-36%); }
    45% { opacity: .8; }
    100% { opacity: 0; transform: translateX(36%); }
}

@keyframes hntStudioTransitionZoom {
    0% { opacity: 0; transform: scale(.86); }
    45% { opacity: .75; transform: scale(1.08); }
    100% { opacity: 0; transform: scale(1.24); }
}

.hnt-studio.is-playing .hnt-studio-play {
    background: #F2E8D8;
    color: #141412;
}

@media (max-width: 860px) {
    .hnt-studio-timeline-scrubber {
        top: 54px;
        bottom: 10px;
    }
}

/* Patch 722: smoother playhead and visible Studio transition preview */
.hnt-studio-timeline-scrubber {
    width: 2px;
    background: #E8D7B2;
    box-shadow: 0 0 0 1px rgba(20, 20, 18, .7), 0 8px 22px rgba(0, 0, 0, .46), 0 0 18px rgba(214, 168, 79, .24);
    will-change: left;
    transition: opacity .14s ease;
}

.hnt-studio.is-scrubbing-timeline .hnt-studio-timeline-scrubber,
.hnt-studio.is-playing .hnt-studio-timeline-scrubber {
    opacity: 1;
}

.hnt-studio-timeline-scrubber::before {
    width: 18px;
    height: 18px;
    top: -8px;
    background: #E8D7B2;
}

.hnt-studio-transition-layer {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    border-radius: inherit;
}

.hnt-studio-transition-layer.is-active {
    opacity: 1;
}

.hnt-studio-transition-next-video,
.hnt-studio-transition-veil {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hnt-studio-transition-layer.is-crossfade .hnt-studio-transition-next-video {
    animation: hntStudioPreviewCrossfade .68s ease both;
}

.hnt-studio-transition-layer.is-fadeblack .hnt-studio-transition-veil {
    background: #000;
    animation: hntStudioPreviewDip .62s ease both;
}

.hnt-studio-transition-layer.is-fadewhite .hnt-studio-transition-veil {
    background: #fff;
    animation: hntStudioPreviewDip .62s ease both;
}

.hnt-studio-transition-layer.is-slideleft .hnt-studio-transition-next-video {
    animation: hntStudioPreviewSlideLeft .68s cubic-bezier(.22,.72,.24,1) both;
    box-shadow: -18px 0 30px rgba(0, 0, 0, .52);
}

.hnt-studio-transition-layer.is-slideright .hnt-studio-transition-next-video {
    animation: hntStudioPreviewSlideRight .68s cubic-bezier(.22,.72,.24,1) both;
    box-shadow: 18px 0 30px rgba(0, 0, 0, .52);
}

.hnt-studio-transition-layer.is-smoothleft .hnt-studio-transition-next-video {
    animation: hntStudioPreviewZoomCut .52s cubic-bezier(.18,.78,.22,1) both;
}

.hnt-studio-phone-frame.is-transition-preview::after {
    display: none;
}

@keyframes hntStudioPreviewCrossfade {
    0% { opacity: 0; transform: scale(1.015); }
    45% { opacity: .55; }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes hntStudioPreviewDip {
    0% { opacity: 0; }
    45% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes hntStudioPreviewSlideLeft {
    0% { opacity: 1; transform: translateX(100%); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes hntStudioPreviewSlideRight {
    0% { opacity: 1; transform: translateX(-100%); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes hntStudioPreviewZoomCut {
    0% { opacity: 0; transform: scale(1.28); filter: blur(8px) brightness(1.2); }
    42% { opacity: 1; filter: blur(2px) brightness(1.08); }
    100% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
}


/* Patch 723: Studio cleanup, publish state and wider right tools */
.hnt-studio.has-multiple-media .hnt-studio-publish:not(:disabled),
.hnt-studio-publish:not(:disabled) {
    opacity: 1;
    filter: none;
    cursor: pointer;
}

.hnt-studio-empty-media[hidden] {
    display: none !important;
}

@media (min-width: 861px) {
    .hnt-studio-shell {
        grid-template-columns: 330px minmax(420px, 1fr) 268px;
    }

    .hnt-studio-right {
        display: block;
        padding: 0;
        background: #20201E;
        border-left-color: rgba(242, 232, 216, 0.07);
        overflow: hidden;
    }

    .hnt-studio-pro-panel {
        height: 100%;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: #191918;
    }

    .hnt-studio-side-feature {
        min-height: 68px;
        padding: 12px 14px;
        border-radius: 14px;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        justify-items: start;
        column-gap: 12px;
        row-gap: 2px;
        background: #20201E;
        border-color: rgba(214, 168, 79, 0.25);
        text-align: left;
    }

    .hnt-studio-side-feature .hnt-studio-tool-icon {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
    }

    .hnt-studio-side-feature strong {
        grid-column: 2;
        grid-row: 1;
        max-width: 100%;
        color: var(--text-main);
        font-size: 13px;
        line-height: 1.14;
        font-weight: 950;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .hnt-studio-side-feature em {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
        min-height: 16px;
        padding: 0 7px;
        font-size: 8px;
    }

    .hnt-studio-side-feature:hover,
    .hnt-studio-side-feature.is-active {
        border-color: rgba(214, 168, 79, 0.48);
        background: linear-gradient(180deg, rgba(214, 168, 79, 0.10), rgba(32, 32, 30, 0.98));
    }
}

/* =========================================
   PATCH 724 - MOMENT STUDIO MEDIA LIBRARY TO TIMELINE
   Scope: media-bin/timeline UX only.
   Imported media stays in the left library until explicitly dragged or added to the timeline.
========================================= */
.hnt-studio-media-item {
    padding-right: 46px;
}

.hnt-studio-media-item.is-in-timeline {
    border-color: rgba(155, 228, 71, 0.45);
}

.hnt-studio-media-state {
    position: absolute;
    left: 82px;
    bottom: 8px;
    max-width: 96px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(167, 156, 142, 0.8);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hnt-studio-media-item.is-in-timeline .hnt-studio-media-state {
    color: #9BE447;
}

.hnt-studio-media-actions {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    z-index: 5;
}

.hnt-studio-media-action {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #141412;
    background: var(--accent-primary);
    font-size: 15px;
    line-height: 1;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.hnt-studio-media-action.danger {
    color: var(--text-primary);
    background: rgba(242, 232, 216, 0.14);
}

.hnt-studio-media-item:not(.is-in-timeline) .hnt-studio-media-action.danger {
    opacity: .34;
    pointer-events: none;
}

.hnt-studio-media-item.is-in-timeline .hnt-studio-media-action[data-hnt-media-add] {
    opacity: .38;
}

.hnt-studio-timeline-lane.is-media-drop-ready {
    border-color: rgba(214, 168, 79, 0.72);
    background: rgba(214, 168, 79, 0.055);
    box-shadow: inset 0 0 0 1px rgba(214, 168, 79, 0.18), 0 10px 28px rgba(0, 0, 0, 0.22);
}

.hnt-studio-timeline-lane.is-media-drop-ready .hnt-studio-timeline-empty::after {
    content: "Clip hier ablegen";
    color: var(--accent-primary);
    font-weight: 950;
    letter-spacing: .02em;
}

.hnt-studio-timeline-remove {
    position: absolute;
    right: 21px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    background: rgba(20, 20, 18, 0.72);
    border: 1px solid rgba(242, 232, 216, 0.18);
    font-size: 13px;
    line-height: 1;
    font-weight: 950;
    opacity: 0;
    pointer-events: none;
    z-index: 7;
}

.hnt-studio-timeline-clip:hover .hnt-studio-timeline-remove,
.hnt-studio-timeline-clip.is-active .hnt-studio-timeline-remove {
    opacity: 1;
    pointer-events: auto;
}

.hnt-studio-timeline-clip em {
    padding-right: 17px;
}

.hnt-studio:not(.has-timeline-media) .hnt-studio-playbar,
.hnt-studio:not(.has-timeline-media) .hnt-studio-timeline-scrubber {
    opacity: .65;
}

@media (max-width: 860px) {
    .hnt-studio-media-item {
        padding-right: 40px;
    }

    .hnt-studio-media-state {
        display: none;
    }

    .hnt-studio-media-action {
        width: 22px;
        height: 22px;
        font-size: 14px;
    }

    .hnt-studio-timeline-remove {
        opacity: 1;
        pointer-events: auto;
    }
}

/* =========================================
   PATCH 725 - MOMENT STUDIO CROWNS LINK
   Scope: real unlock UI for Studio Pro features.
========================================= */
.hnt-studio-pro-purchase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.hnt-studio-pro-purchase > div {
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid rgba(242, 232, 216, 0.09);
    background: rgba(20, 20, 18, 0.72);
}

.hnt-studio-pro-purchase span {
    display: block;
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hnt-studio-pro-purchase strong {
    color: var(--accent-primary);
    font-size: 17px;
    font-weight: 950;
}

.hnt-studio-tool.is-locked,
.hnt-studio-side-feature.is-locked {
    cursor: pointer;
}

.hnt-studio-tool.is-locked:hover,
.hnt-studio-side-feature.is-locked:hover {
    opacity: 1;
    border-color: rgba(214, 168, 79, 0.42);
}

@media (max-width: 860px) {
    .hnt-studio-pro-purchase {
        grid-template-columns: 1fr;
    }
}

/* Patch 730: Moments seek bar, desktop upload shortcut, pause state and avatar friend badge. */
.hnt-moment-create-overlay {
    position: absolute;
    z-index: 9;
    top: 14px;
    left: 14px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    background: rgba(16, 16, 15, 0.52);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.hnt-moment-create-overlay:hover {
    transform: translateY(-1px);
    color: #141412;
    background: var(--accent-primary);
    text-decoration: none;
}

.hnt-moment-create-overlay svg ,

.hnt-moment-create-overlay .ph {
    width: 21px;
    height: 21px;
}

.hnt-moment-pause-state {
    position: absolute;
    z-index: 9;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.hnt-moment-pause-state.is-visible {
    opacity: 1;
    transform: scale(1);
}

.hnt-moment-pause-state svg ,

.hnt-moment-pause-state .ph {
    width: 72px;
    height: 72px;
    padding: 18px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(16, 16, 15, 0.48);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
}

.hnt-moment-progress {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: 0;
    height: 18px;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
}

.hnt-moment-progress input[type="range"] {
    width: 100%;
    height: 18px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
    --hnt-progress: 0%;
}

.hnt-moment-progress input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff2f5f 0%, #ff2f5f var(--hnt-progress), rgba(255, 255, 255, 0.20) var(--hnt-progress), rgba(255, 255, 255, 0.20) 100%);
}

.hnt-moment-progress input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.20);
}

.hnt-moment-progress input[type="range"]::-moz-range-progress {
    height: 4px;
    border-radius: 999px;
    background: #ff2f5f;
}

.hnt-moment-progress input[type="range"]::-webkit-slider-thumb {
    width: 0;
    height: 0;
    margin-top: 2px;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 47, 95, 0.0);
    transition: width 0.15s ease, height 0.15s ease, margin-top 0.15s ease, box-shadow 0.15s ease;
}

.hnt-moment-progress:hover input[type="range"]::-webkit-slider-thumb,
.hnt-moment-progress input[type="range"]:focus-visible::-webkit-slider-thumb,
.hnt-moment-progress input[type="range"]:active::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -4px;
    box-shadow: 0 0 0 5px rgba(255, 47, 95, 0.20);
}

.hnt-moment-progress input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 999px;
    background: #fff;
}

.hnt-moment-action-avatar-wrap {
    position: relative;
    width: 58px;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -4px;
}

.hnt-moment-action-avatar-wrap .hnt-moment-action-avatar {
    position: relative;
    z-index: 1;
    margin: 0;
}

.hnt-moment-action-friend-form {
    position: absolute;
    z-index: 5;
    right: 2px;
    bottom: 1px;
    margin: 0;
    padding: 0;
}

.hnt-moment-action-friend-badge {
    width: 24px;
    height: 24px;
    border: 2px solid #fff;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #ff2f5f;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
    cursor: pointer;
}

span.hnt-moment-action-friend-badge {
    position: absolute;
    z-index: 5;
    right: 2px;
    bottom: 1px;
    cursor: default;
}

.hnt-moment-action-friend-badge.is-connected {
    color: #ff2f5f;
    background: #fff;
}

.hnt-moment-action-friend-badge:disabled {
    cursor: wait;
    opacity: 0.78;
}

.hnt-moment-action-friend-badge svg ,

.hnt-moment-action-friend-badge .ph {
    width: 16px;
    height: 16px;
}

@media (max-width: 768px) {
    .hnt-moment-create-overlay {
        display: none !important;
    }

    .hnt-moment-progress {
        height: calc(20px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
    }

    .hnt-moment-progress input[type="range"]::-webkit-slider-runnable-track,
    .hnt-moment-progress input[type="range"]::-moz-range-track,
    .hnt-moment-progress input[type="range"]::-moz-range-progress {
        height: 4px;
    }

    .hnt-moment-pause-state svg ,

    .hnt-moment-pause-state .ph {
        width: 74px;
        height: 74px;
    }

    .hnt-moment-action-avatar-wrap {
        display: none !important;
    }
}

/* Patch 731: HNT preview friend requests shell */
.hnt-friend-request-shell .hnt-notification-shell-item {
    grid-template-columns: 44px minmax(0, 1fr) 76px;
}

.hnt-friend-request-shell-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.hnt-friend-request-shell-actions form {
    margin: 0;
}

.hnt-friend-request-shell-actions button.is-accept:hover {
    color: #141412;
    background: var(--accent-green);
}

.hnt-friend-request-shell-actions button.is-decline:hover {
    color: #F2E8D8;
    background: rgba(184, 70, 58, 0.78);
}

@media (max-width: 480px) {
    .hnt-friend-request-shell .hnt-notification-shell-item {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .hnt-friend-request-shell-actions {
        grid-column: 2;
        justify-content: flex-start;
        margin-top: 8px;
    }
}


/* PATCH 732: Restore Cup overview chat styling after sidebar shell CSS overwrite */
.hnt-cup-chat-grid {
    grid-template-columns: 1fr;
}

.cup-content-grid .hnt-cup-chat-panel {
    padding: 22px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 92% 0%, rgba(155, 228, 71, 0.10), transparent 32%),
        rgba(32, 32, 30, 0.78);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.cup-content-grid .hnt-cup-chat-panel h2 {
    margin: 2px 0 0;
    padding: 0;
}

.cup-content-grid .hnt-cup-chat-panel h2::after {
    display: none;
}

.hnt-cup-chat-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.hnt-cup-chat-head span {
    display: inline-flex;
    margin-bottom: 4px;
    color: var(--accent-green);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hnt-cup-chat-head strong {
    display: inline-flex;
    min-width: 36px;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    color: #141412;
    background: var(--accent-green);
    box-shadow: 0 10px 24px var(--accent-green-glow);
    font-size: 13px;
    font-weight: 900;
}

.hnt-cup-chat-list {
    display: grid;
    gap: 14px;
    max-height: 360px;
    overflow-y: auto;
    padding: 4px 8px 4px 0;
    scrollbar-width: thin;
}

.hnt-cup-chat-message {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: 86%;
}

.hnt-cup-chat-message.is-own {
    justify-self: end;
    flex-direction: row-reverse;
}

.hnt-cup-chat-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(20, 20, 18, 0.88);
    border: 1px solid rgba(155, 228, 71, 0.18);
}

.hnt-cup-chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hnt-cup-chat-bubble-wrap {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.hnt-cup-chat-message.is-own .hnt-cup-chat-bubble-wrap {
    justify-items: end;
}

.hnt-cup-chat-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #A79C8E;
    font-size: 11px;
    line-height: 1.2;
}

.hnt-cup-chat-meta a {
    color: #F2E8D8;
    font-weight: 900;
    text-decoration: none;
}

.hnt-cup-chat-meta a:hover {
    color: var(--accent-green);
}

.hnt-cup-chat-bubble {
    max-width: 100%;
    margin: 0 !important;
    padding: 11px 13px;
    border-radius: 14px 14px 14px 4px;
    background: rgba(20, 20, 18, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: #F2E8D8 !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere;
}

.hnt-cup-chat-message.is-own .hnt-cup-chat-bubble {
    border-radius: 14px 14px 4px 14px;
    background: linear-gradient(135deg, rgba(214, 168, 79, 0.94), rgba(185, 139, 56, 0.94));
    color: #141412 !important;
    border-color: rgba(214, 168, 79, 0.28);
}

.hnt-cup-chat-bubble a {
    color: var(--accent-green);
    font-weight: 900;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.hnt-cup-chat-bubble a:hover {
    color: #F2E8D8;
}

.hnt-cup-chat-message.is-own .hnt-cup-chat-bubble a {
    color: #141412;
}

.hnt-cup-chat-message.is-own .hnt-cup-chat-bubble a:hover {
    color: #2B260F;
}

.cup-content-grid .hnt-cup-chat-empty {
    margin: 0;
    padding: 16px;
    border-radius: 14px;
    background: rgba(20, 20, 18, 0.62);
    color: #A79C8E;
    text-align: center;
}

.hnt-cup-chat-compose {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hnt-cup-chat-compose form {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.hnt-cup-chat-compose input {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(20, 20, 18, 0.82);
    color: #F2E8D8;
    padding: 0 14px;
    outline: none;
}

.hnt-cup-chat-compose input::placeholder {
    color: #A79C8E;
}

.hnt-cup-chat-compose input:focus {
    border-color: rgba(155, 228, 71, 0.42);
    box-shadow: 0 0 0 3px rgba(155, 228, 71, 0.10);
}

.hnt-cup-chat-compose button {
    min-height: 42px;
    margin: 0;
    white-space: nowrap;
}

.hnt-cup-chat-compose button:disabled {
    opacity: 0.68;
    cursor: wait;
}

.cup-content-grid .hnt-cup-chat-status {
    margin: 10px 0 0;
    font-size: 12px;
    font-weight: 800;
}

.hnt-cup-chat-status.is-success {
    color: var(--accent-green);
}

.hnt-cup-chat-status.is-error {
    color: #D6A84F;
}

.hnt-cup-chat-login {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(20, 20, 18, 0.62);
    color: #D8CDBE;
    font-size: 14px;
}

/* PATCH 732: Friend request sidebar icon uses the same visual weight as the other sidebar icons */
.nav-item.nav-friend-requests > svg ,

/* PATCH 732: Friend request sidebar icon uses the same visual weight as the other sidebar icons */
.nav-item.nav-friend-requests > .ph {
    width: 22px;
    height: 22px;
    min-width: 22px;
}

@media (max-width: 768px) {
    .cup-content-grid .hnt-cup-chat-panel {
        padding: 18px;
    }

    .hnt-cup-chat-list {
        max-height: 320px;
    }

    .hnt-cup-chat-message {
        max-width: 96%;
    }

    .hnt-cup-chat-compose form {
        grid-template-columns: minmax(0, 1fr);
    }

    .hnt-cup-chat-compose form > .hnt-cup-chat-avatar {
        display: none;
    }

    .hnt-cup-chat-compose button,
    .hnt-cup-chat-login .btn-create {
        width: 100%;
    }

    .hnt-cup-chat-login {
        align-items: stretch;
        flex-direction: column;
    }
}

/* PATCH 733: Feed post translation action */
.hnt-post-meta-line {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.hnt-post-translate-link {
    border: 0;
    padding: 0;
    background: transparent;
    color: #D6A84F;
    font: inherit;
    font-weight: 800;
    line-height: inherit;
    cursor: pointer;
}

.hnt-post-translate-link:hover,
.hnt-post-translate-link:focus-visible {
    color: var(--accent-green);
    text-decoration: underline;
    outline: none;
}

.hnt-post-translate-link:disabled {
    opacity: 0.62;
    cursor: wait;
    text-decoration: none;
}

.hnt-post-translation {
    margin: 10px 0 0;
    padding: 12px 14px;
    border: 1px solid rgba(214, 168, 79, 0.18);
    border-radius: 14px;
    background: rgba(26, 26, 24, 0.72);
}

.hnt-post-translation.is-error {
    border-color: rgba(184, 70, 58, 0.28);
}

.hnt-post-translation-meta {
    margin: 0 0 7px;
    color: #A79C8E;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.hnt-post-translation.is-error .hnt-post-translation-meta {
    color: #D6A84F;
}

.hnt-post-translation-body {
    color: #F2E8D8;
}

/* Patch 735: Compact language switcher inside the HNT preview profile dropdown */
.profile-menu .profile-menu-language {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 2px 0 !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
    border: 0 !important;
    background: transparent !important;
}

.profile-menu .profile-menu-language:hover {
    background: var(--tag-bg) !important;
}

.profile-menu .profile-menu-language-title {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.profile-menu .profile-menu-language-options {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
    padding: 2px !important;
    border: 1px solid rgba(214, 168, 79, 0.18) !important;
    border-radius: 999px !important;
    background: rgba(11, 11, 10, 0.58) !important;
}

.profile-menu a.profile-menu-language-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 30px !important;
    height: 22px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    color: var(--text-muted) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.06em !important;
    text-decoration: none !important;
}

.profile-menu a.profile-menu-language-pill:hover {
    background: rgba(214, 168, 79, 0.12) !important;
    color: var(--text-main) !important;
}

.profile-menu a.profile-menu-language-pill.is-active {
    background: linear-gradient(135deg, var(--accent-primary), #C9973F) !important;
    color: #15110a !important;
    box-shadow: 0 6px 14px rgba(214, 168, 79, 0.22) !important;
}

/* =========================================
   PATCH 738: HNT preview App-Beta page
========================================= */
.app-beta-main {
    padding: 32px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.app-beta-shell {
    width: min(calc(100% - 64px), 760px);
    margin: 0 auto;
}

.app-beta-alert {
    margin-bottom: 20px;
}

.app-beta-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 24px;
    min-height: 310px;
    padding: 30px;
    margin-bottom: 24px;
    border-radius: 18px;
    border: 1px solid rgba(214, 168, 79, 0.16);
    background:
        radial-gradient(circle at 82% 18%, rgba(214, 168, 79, 0.22), transparent 28%),
        radial-gradient(circle at 12% 20%, rgba(155, 228, 71, 0.11), transparent 30%),
        linear-gradient(135deg, rgba(12, 13, 12, 0.96), rgba(26, 26, 24, 0.90) 58%, rgba(38, 32, 22, 0.72));
    overflow: hidden;
}

.app-beta-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 62%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 64px);
    pointer-events: none;
}

.app-beta-hero-glow {
    position: absolute;
    right: 42px;
    bottom: 34px;
    width: 220px;
    height: 92px;
    border-radius: 999px;
    background: rgba(214, 168, 79, 0.18);
    filter: blur(32px);
    pointer-events: none;
}

.app-beta-hero-copy,
.app-beta-device-card {
    position: relative;
    z-index: 2;
}

.app-beta-kicker,
.app-beta-section-head span,
.app-beta-form-copy span,
.app-beta-info-card span {
    display: inline-flex;
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.app-beta-hero h1 {
    max-width: 520px;
    margin: 14px 0 14px;
    color: #F2E8D8;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 0.98;
    font-weight: 950;
    letter-spacing: -0.055em;
}

.app-beta-hero p {
    max-width: 560px;
    color: #A79C8E;
    font-size: 14px;
    line-height: 1.72;
}

.app-beta-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 24px;
}

.app-beta-hero-actions span {
    color: rgba(242, 232, 216, 0.62);
    font-size: 12px;
    font-weight: 800;
}

.app-beta-device-card {
    align-self: center;
    justify-self: center;
    width: 172px;
    height: 248px;
    padding: 12px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(43, 42, 37, 0.94), rgba(12, 12, 11, 0.96));
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.11);
    transform: rotate(3deg);
}

.app-beta-device-notch {
    position: absolute;
    top: 12px;
    left: 50%;
    width: 58px;
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.58);
    transform: translateX(-50%);
    z-index: 3;
}

.app-beta-device-screen {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    height: 100%;
    padding: 22px 14px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 70% 18%, rgba(214, 168, 79, 0.30), transparent 30%),
        linear-gradient(160deg, rgba(18, 18, 17, 0.80), rgba(32, 32, 30, 0.95));
    overflow: hidden;
}

.app-beta-device-logo {
    color: var(--accent-primary);
    font-size: 26px;
    font-weight: 950;
    letter-spacing: -0.05em;
}

.app-beta-device-line {
    display: block;
    width: 70%;
    height: 8px;
    border-radius: 999px;
    background: rgba(242, 232, 216, 0.14);
}

.app-beta-device-line.wide {
    width: 100%;
}

.app-beta-device-pill {
    display: inline-flex;
    width: max-content;
    padding: 7px 11px;
    border-radius: 999px;
    color: #141412;
    background: var(--accent-primary);
    font-size: 11px;
    font-weight: 950;
}

.app-beta-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

.app-beta-info-card,
.app-beta-test-card,
.app-beta-form-panel,
.app-beta-side-widget {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(32, 32, 30, 0.78);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.20);
}

.app-beta-info-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    min-height: 150px;
    padding: 18px;
    border-radius: 16px;
}

.app-beta-info-icon,
.app-beta-test-icon,
.app-beta-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: var(--accent-primary);
    background: rgba(214, 168, 79, 0.12);
    border: 1px solid rgba(214, 168, 79, 0.16);
}

.app-beta-info-icon svg,
.app-beta-test-icon svg,
.app-beta-badge-icon svg ,

.app-beta-info-icon .ph,
.app-beta-test-icon .ph,
.app-beta-badge-icon .ph {
    width: 22px;
    height: 22px;
}

.app-beta-info-card h2 {
    margin: 8px 0 8px;
    color: #F2E8D8;
    font-size: 16px;
    line-height: 1.16;
    font-weight: 900;
}

.app-beta-info-card p,
.app-beta-test-card p,
.app-beta-form-copy p,
.app-beta-side-widget p,
.app-beta-steps p {
    color: #A79C8E;
    font-size: 13px;
    line-height: 1.58;
}

.app-beta-section {
    margin-bottom: 26px;
}

.app-beta-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.app-beta-section-head h2,
.app-beta-form-copy h2,
.app-beta-side-widget h2 {
    margin-top: 6px;
    color: #F2E8D8;
    font-size: 22px;
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.app-beta-section-head a {
    color: var(--accent-primary);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.app-beta-test-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.app-beta-test-card {
    padding: 18px;
    border-radius: 16px;
}

.app-beta-test-card h3 {
    margin: 14px 0 8px;
    color: #F2E8D8;
    font-size: 15px;
    line-height: 1.22;
    font-weight: 900;
}

.app-beta-form-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: 22px;
    padding: 24px;
    border-radius: 18px;
    margin-bottom: 32px;
}

.app-beta-form {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.app-beta-hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.app-beta-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.app-beta-field span {
    color: rgba(242, 232, 216, 0.86);
    font-size: 12px;
    font-weight: 900;
}

.app-beta-field input {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #F2E8D8;
    background: rgba(20, 20, 18, 0.72);
    outline: 0;
    font: inherit;
    font-size: 13px;
}

.app-beta-field input:focus {
    border-color: rgba(214, 168, 79, 0.44);
    box-shadow: 0 0 0 3px rgba(214, 168, 79, 0.10);
}

.app-beta-field input::placeholder {
    color: rgba(167, 156, 142, 0.70);
}

.app-beta-field em {
    color: rgba(167, 156, 142, 0.82);
    font-size: 11px;
    font-style: normal;
    line-height: 1.45;
}

.app-beta-field small,
.app-beta-error-block {
    color: #ff8f82;
    font-size: 11px;
    line-height: 1.4;
}

.app-beta-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 14px;
    color: #A79C8E;
    background: rgba(20, 20, 18, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12px;
    line-height: 1.5;
}

.app-beta-consent input {
    margin-top: 3px;
    accent-color: var(--accent-primary);
}

.app-beta-submit {
    width: 100%;
}

.app-beta-sidebar .widget {
    margin-bottom: 18px;
}

.app-beta-side-widget {
    padding: 18px;
    border-radius: 18px;
}

.app-beta-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
}

.app-beta-steps li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.app-beta-steps li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    color: #141412;
    background: var(--accent-primary);
    font-size: 12px;
    font-weight: 950;
    box-shadow: 0 10px 24px rgba(214, 168, 79, 0.20);
}

.app-beta-steps strong {
    display: block;
    margin-bottom: 3px;
    color: #F2E8D8;
    font-size: 13px;
    font-weight: 900;
}

.app-beta-badge-widget {
    background:
        radial-gradient(circle at 80% 10%, rgba(214, 168, 79, 0.18), transparent 32%),
        rgba(32, 32, 30, 0.78);
}

.app-beta-badge-widget h2 {
    margin-top: 14px;
}

.app-beta-badge-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 14px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(20, 20, 18, 0.62);
    border: 1px solid rgba(214, 168, 79, 0.12);
}

.app-beta-badge-row strong {
    color: #F2E8D8;
    font-size: 13px;
    font-weight: 900;
}

.app-beta-badge-row span {
    color: #A79C8E;
    font-size: 12px;
}

@media (max-width: 1200px) {
    .app-beta-shell {
        width: min(calc(100% - 40px), 760px);
    }

    .app-beta-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-beta-device-card {
        display: none;
    }

    .app-beta-test-grid,
    .app-beta-form-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hnt-preview-body .app-beta-main {
        padding: calc(var(--hnt-mobile-topbar-height, 58px) + 18px) 0 calc(var(--hnt-mobile-bottom-height, 74px) + env(safe-area-inset-bottom) + 22px) !important;
    }

    .app-beta-shell {
        width: min(calc(100% - 28px), 560px);
    }

    .app-beta-hero,
    .app-beta-form-panel {
        padding: 20px;
        border-radius: 18px;
    }

    .app-beta-hero h1 {
        font-size: 34px;
    }

    .app-beta-card-grid,
    .app-beta-test-grid {
        grid-template-columns: 1fr;
    }

    .app-beta-info-card {
        min-height: 0;
    }

    .app-beta-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

/* PATCH 741: Cup-internal team hub and team chat */
.hnt-cup-team-hub-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: stretch;
}

.cup-content-grid .hnt-cup-team-hub-panel {
    padding: 22px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 0% 0%, rgba(214, 168, 79, 0.10), transparent 34%),
        rgba(32, 32, 30, 0.78);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.hnt-cup-team-hub-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.hnt-cup-team-hub-head span,
.hnt-cup-team-card span,
.hnt-cup-team-invite span {
    display: inline-flex;
    margin-bottom: 4px;
    color: var(--accent-green);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cup-content-grid .hnt-cup-team-hub-head h2,
.cup-content-grid .hnt-cup-team-card h3 {
    margin: 2px 0 0;
    padding: 0;
}

.cup-content-grid .hnt-cup-team-hub-head h2::after,
.cup-content-grid .hnt-cup-team-card h3::after {
    display: none;
}

.hnt-cup-team-hub-head p,
.hnt-cup-team-invite p {
    margin: 8px 0 0;
    color: #A79C8E;
}

.hnt-cup-team-hub-head > strong {
    display: inline-flex;
    min-width: 50px;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 999px;
    color: #141412;
    background: #D6A84F;
    box-shadow: 0 12px 26px rgba(214, 168, 79, 0.22);
    font-size: 14px;
    font-weight: 950;
}

.hnt-cup-team-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(20, 20, 18, 0.66);
}

.hnt-cup-team-statuses {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.hnt-cup-team-statuses span {
    margin: 0;
    padding: 6px 9px;
    border-radius: 999px;
    color: #F2E8D8;
    background: rgba(255, 255, 255, 0.07);
    letter-spacing: 0.04em;
}

.hnt-cup-team-members {
    display: grid;
    gap: 10px;
}

.hnt-cup-team-member {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 10px;
    border-radius: 14px;
    color: #F2E8D8;
    background: rgba(20, 20, 18, 0.46);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.hnt-cup-team-member:hover {
    transform: translateY(-1px);
    border-color: rgba(155, 228, 71, 0.26);
    background: rgba(20, 20, 18, 0.72);
}

.hnt-cup-team-member-avatar {
    width: 42px;
    height: 42px;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(155, 228, 71, 0.18);
}

.hnt-cup-team-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hnt-cup-team-member strong {
    display: block;
    overflow: hidden;
    color: #F2E8D8;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hnt-cup-team-member small {
    display: block;
    margin-top: 3px;
    color: #A79C8E;
    font-size: 12px;
    font-weight: 800;
}

.hnt-cup-team-invite {
    margin-top: 16px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(214, 168, 79, 0.18);
    background: rgba(214, 168, 79, 0.08);
}

.hnt-cup-team-invite input {
    width: 100%;
    margin-top: 10px;
    min-height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(20, 20, 18, 0.82);
    color: #F2E8D8;
    padding: 0 12px;
    outline: none;
}

.hnt-cup-team-chat-panel {
    min-height: 100%;
}

@media (max-width: 980px) {
    .hnt-cup-team-hub-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .hnt-cup-team-hub-head,
    .hnt-cup-team-card {
        flex-direction: column;
    }

    .hnt-cup-team-statuses {
        justify-content: flex-start;
    }
}

/* PATCH 742: Cup team hub as own page */
.hnt-cup-team-page .hnt-cup-team-page-hero .cup-cover-art {
    min-height: 190px;
}

.hnt-cup-team-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.hnt-cup-team-page-actions .btn-create,
.hnt-cup-team-page-actions .btn-following {
    min-height: 44px;
    border-radius: 14px;
}

.hnt-cup-team-start-grid {
    grid-template-columns: minmax(0, 0.72fr) minmax(260px, 0.28fr);
}

.hnt-cup-team-create-form {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.hnt-cup-team-create-form label {
    color: #A79C8E;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hnt-cup-team-create-form input {
    min-height: 48px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(20, 20, 18, 0.82);
    color: #F2E8D8;
    padding: 0 14px;
    outline: none;
}

.hnt-cup-team-create-form input:focus {
    border-color: rgba(214, 168, 79, 0.42);
    box-shadow: 0 0 0 3px rgba(214, 168, 79, 0.10);
}

.hnt-cup-team-create-form .btn-create {
    justify-self: flex-start;
    min-width: 210px;
    min-height: 48px;
}

.hnt-cup-team-locked-note {
    margin-top: 18px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(20, 20, 18, 0.56);
}

.hnt-cup-team-locked-note h3 {
    margin: 0 0 8px;
    color: #F2E8D8;
}

.hnt-cup-team-locked-note p {
    margin: 0 0 6px;
    color: #A79C8E;
}

@media (max-width: 980px) {
    .hnt-cup-team-start-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .hnt-cup-team-page-actions,
    .hnt-cup-team-create-form .btn-create {
        width: 100%;
    }

    .hnt-cup-team-page-actions > *,
    .hnt-cup-team-page-actions form,
    .hnt-cup-team-page-actions .btn-create,
    .hnt-cup-team-page-actions .btn-following {
        width: 100%;
    }
}

/* PATCH 743: Cup team page stack layout and editable team name */
.hnt-cup-team-page .hnt-cup-team-hub-grid,
.hnt-cup-team-page .hnt-cup-team-start-grid {
    grid-template-columns: 1fr;
}

.hnt-cup-team-page .hnt-cup-team-hub-panel,
.hnt-cup-team-page .hnt-cup-team-chat-panel {
    width: 100%;
}

.hnt-cup-team-name-form {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(20, 20, 18, 0.46);
}

.hnt-cup-team-name-form label {
    color: #A79C8E;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hnt-cup-team-name-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.hnt-cup-team-name-row input {
    min-height: 44px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(20, 20, 18, 0.82);
    color: #F2E8D8;
    padding: 0 14px;
    outline: none;
}

.hnt-cup-team-name-row input:focus {
    border-color: rgba(214, 168, 79, 0.42);
    box-shadow: 0 0 0 3px rgba(214, 168, 79, 0.10);
}

.hnt-cup-team-name-row .btn-create {
    min-height: 44px;
    min-width: 150px;
    border-radius: 14px;
}

.hnt-cup-team-name-form p {
    margin: 0;
    color: #A79C8E;
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 640px) {
    .hnt-cup-team-name-row {
        grid-template-columns: 1fr;
    }

    .hnt-cup-team-name-row .btn-create {
        width: 100%;
    }
}

/* PATCH 744: Cup team captain-only submission states */
.hnt-cup-team-submit-state {
    display: grid;
    gap: 6px;
    margin: 0 0 16px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(214, 168, 79, 0.18);
    background: rgba(214, 168, 79, 0.07);
}

.hnt-cup-team-submit-state strong {
    color: #F2E8D8;
    font-size: 14px;
    font-weight: 900;
}

.hnt-cup-team-submit-state p {
    margin: 0;
    color: #A79C8E;
    font-size: 13px;
    line-height: 1.45;
}

.hnt-cup-team-submit-state.is-ready {
    border-color: rgba(155, 228, 71, 0.18);
    background: rgba(155, 228, 71, 0.055);
}

/* PATCH 745: Cup roster lock hint */
.hnt-cup-team-submit-state.is-locked {
    border-color: rgba(242, 232, 216, 0.12);
    background: rgba(255, 255, 255, 0.045);
}

/* PATCH 747: HNT Cup admin submission review */
.hnt-cup-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.hnt-cup-section-head span,
.hnt-cup-section-head p {
    color: #A79C8E;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hnt-cup-section-head h2 {
    margin: 4px 0 6px;
}

.hnt-cup-section-head p {
    margin: 0;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}

.hnt-cup-section-head > strong {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(214, 168, 79, 0.10);
    border: 1px solid rgba(214, 168, 79, 0.22);
    color: #D6A84F;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.hnt-cup-submission-list {
    display: grid;
    gap: 14px;
}

.hnt-cup-submission-card {
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(20, 20, 18, 0.62);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

.hnt-cup-submission-card.is-review {
    border-color: rgba(214, 168, 79, 0.24);
}

.hnt-cup-submission-card.is-approved {
    border-color: rgba(155, 228, 71, 0.18);
}

.hnt-cup-submission-card.is-rejected {
    border-color: rgba(184, 70, 58, 0.24);
}

.hnt-cup-submission-main {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    padding: 16px;
}

.hnt-cup-submission-id {
    width: 46px;
    min-height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(214, 168, 79, 0.10);
    color: #D6A84F;
    font-size: 13px;
    font-weight: 900;
}

.hnt-cup-submission-info {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.hnt-cup-submission-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.hnt-cup-submission-title-row h3 {
    margin: 0;
    color: #F2E8D8;
    font-size: 16px;
    font-weight: 900;
}

.hnt-cup-submission-title-row span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    color: #141412;
    background: #D6A84F;
    font-size: 11px;
    font-weight: 900;
}

.hnt-cup-submission-card.is-approved .hnt-cup-submission-title-row span {
    background: #9BE447;
}

.hnt-cup-submission-card.is-rejected .hnt-cup-submission-title-row span {
    color: #F2E8D8;
    background: #B8463A;
}

.hnt-cup-submission-info p {
    margin: 0;
    color: #A79C8E;
    font-size: 13px;
    line-height: 1.45;
}

.hnt-cup-submission-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hnt-cup-submission-metrics span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 12px;
    background: rgba(32, 32, 30, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #A79C8E;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.hnt-cup-submission-metrics strong {
    color: #F2E8D8;
    font-size: 14px;
}

.hnt-cup-submission-flags {
    display: grid;
    gap: 6px;
}

.hnt-cup-submission-flags span {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 7px 10px;
    border-radius: 12px;
    background: rgba(214, 168, 79, 0.08);
    border: 1px solid rgba(214, 168, 79, 0.16);
    color: #D6A84F;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.hnt-cup-submission-actions {
    display: flex;
    justify-content: flex-end;
    min-width: 150px;
}

.hnt-cup-review-box {
    display: grid;
    gap: 14px;
    padding: 14px 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(26, 26, 24, 0.64);
}

.hnt-cup-review-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hnt-cup-review-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: #A79C8E;
    font-size: 11px;
    font-weight: 900;
}

.hnt-cup-review-quick-actions,
.hnt-cup-admin-row,
.hnt-cup-inline-form,
.hnt-cup-score-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.hnt-cup-inline-form {
    flex: 1 1 300px;
}

.hnt-cup-inline-form input,
.hnt-cup-score-form input {
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    background: rgba(20, 20, 18, 0.82);
    color: #F2E8D8;
    padding: 0 12px;
    outline: none;
}

.hnt-cup-inline-form input {
    flex: 1 1 220px;
}

.hnt-cup-inline-form input:focus,
.hnt-cup-score-form input:focus {
    border-color: rgba(214, 168, 79, 0.42);
    box-shadow: 0 0 0 3px rgba(214, 168, 79, 0.10);
}

.hnt-cup-danger-btn,
.hnt-cup-secondary-btn {
    min-height: 42px;
    border: 0;
    border-radius: 13px;
    padding: 0 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
}

.hnt-cup-danger-btn {
    color: #F2E8D8;
    background: #B8463A;
}

.hnt-cup-secondary-btn {
    color: #F2E8D8;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.hnt-cup-review-details {
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(20, 20, 18, 0.42);
    padding: 12px;
}

.hnt-cup-review-details summary {
    cursor: pointer;
    color: #F2E8D8;
    font-size: 13px;
    font-weight: 900;
}

.hnt-cup-score-form {
    align-items: flex-end;
    padding-top: 12px;
}

.hnt-cup-score-form label {
    display: grid;
    gap: 6px;
    color: #A79C8E;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.hnt-cup-score-form label:not(.hnt-cup-score-note) input {
    width: 92px;
}

.hnt-cup-score-note {
    flex: 1 1 220px;
}

.hnt-cup-score-note input {
    width: 100%;
}

@media (max-width: 760px) {
    .hnt-cup-section-head,
    .hnt-cup-submission-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .hnt-cup-submission-main {
        grid-template-columns: 1fr;
    }

    .hnt-cup-submission-id {
        width: fit-content;
        padding: 0 12px;
    }

    .hnt-cup-submission-actions,
    .hnt-cup-submission-actions .cup-submission-shot-link,
    .hnt-cup-submission-actions .cup-submission-shot-missing,
    .hnt-cup-review-quick-actions .btn-create,
    .hnt-cup-danger-btn,
    .hnt-cup-secondary-btn,
    .hnt-cup-inline-form,
    .hnt-cup-inline-form input,
    .hnt-cup-admin-row form,
    .hnt-cup-score-form button {
        width: 100%;
    }

    .hnt-cup-review-quick-actions,
    .hnt-cup-admin-row,
    .hnt-cup-inline-form,
    .hnt-cup-score-form {
        align-items: stretch;
        flex-direction: column;
    }

    .hnt-cup-score-form label,
    .hnt-cup-score-form label:not(.hnt-cup-score-note) input,
    .hnt-cup-score-note,
    .hnt-cup-score-note input {
        width: 100%;
    }
}

/* Patch 748: Cup randomizer admin draw */
.hnt-cup-randomizer-panel {
    display: grid;
    gap: 14px;
    margin: 16px 0 18px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(214, 168, 79, 0.18);
    background: linear-gradient(135deg, rgba(214, 168, 79, 0.10), rgba(26, 26, 24, 0.76));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

.hnt-cup-randomizer-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.hnt-cup-randomizer-main span,
.hnt-cup-randomizer-form span,
.hnt-cup-randomizer-eligible > span {
    color: #D6A84F;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hnt-cup-randomizer-main h3 {
    margin: 6px 0 6px;
    color: #F2E8D8;
    font-size: 20px;
    font-weight: 900;
}

.hnt-cup-randomizer-main p,
.hnt-cup-randomizer-hint,
.hnt-cup-randomizer-history p {
    margin: 0;
    color: #A79C8E;
    font-size: 13px;
    line-height: 1.45;
}

.hnt-cup-randomizer-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.hnt-cup-randomizer-stats span {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 13px;
    background: rgba(20, 20, 18, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: #A79C8E;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.hnt-cup-randomizer-stats strong {
    color: #F2E8D8;
    font-size: 16px;
}

.hnt-cup-randomizer-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.hnt-cup-randomizer-form label {
    display: grid;
    gap: 6px;
}

.hnt-cup-randomizer-form input {
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    background: rgba(20, 20, 18, 0.82);
    color: #F2E8D8;
    padding: 0 12px;
    outline: none;
}

.hnt-cup-randomizer-form input:focus {
    border-color: rgba(214, 168, 79, 0.42);
    box-shadow: 0 0 0 3px rgba(214, 168, 79, 0.10);
}

.hnt-cup-randomizer-form .btn-create:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.hnt-cup-randomizer-eligible {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.hnt-cup-randomizer-eligible strong,
.hnt-cup-randomizer-eligible em {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #F2E8D8;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.hnt-cup-randomizer-history {
    display: grid;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.hnt-cup-randomizer-history h4 {
    margin: 0;
    color: #F2E8D8;
    font-size: 14px;
    font-weight: 900;
}

.hnt-cup-randomizer-history article {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: 15px;
    background: rgba(20, 20, 18, 0.56);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.hnt-cup-randomizer-history article div {
    display: grid;
    gap: 4px;
}

.hnt-cup-randomizer-history article strong {
    color: #F2E8D8;
    font-size: 14px;
    font-weight: 900;
}

.hnt-cup-randomizer-history article span {
    color: #D6A84F;
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 820px) {
    .hnt-cup-randomizer-main,
    .hnt-cup-randomizer-history article {
        flex-direction: column;
    }

    .hnt-cup-randomizer-stats {
        justify-content: flex-start;
    }

    .hnt-cup-randomizer-form {
        grid-template-columns: 1fr;
    }

    .hnt-cup-randomizer-form .btn-create {
        width: 100%;
    }
}


/* =========================================
   PATCH 752: Cup submit screenshot example thumb + lightbox
========================================= */
.hnt-cup-example-panel p {
    margin-bottom: 14px;
}

.hnt-cup-example-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(10,10,9,0.72);
    box-shadow: 0 20px 55px rgba(0,0,0,0.34);
}

.hnt-cup-example-thumb img {
    display: block;
    width: 100%;
    height: auto;
}

.hnt-cup-example-thumb::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 44%;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.72));
    pointer-events: none;
}

.hnt-cup-example-thumb-badge {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(214,168,79,0.96);
    color: #141412;
    font-size: 12px;
    font-weight: 950;
    box-shadow: 0 12px 32px rgba(214,168,79,0.28);
}

.hnt-cup-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 26px;
}

.hnt-cup-lightbox:target {
    display: flex;
}

.hnt-cup-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7,7,6,0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hnt-cup-lightbox-dialog {
    position: relative;
    z-index: 1;
    width: min(1100px, 100%);
    max-height: calc(100vh - 52px);
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(242,232,216,0.08);
    background: linear-gradient(145deg, rgba(32,32,30,0.96), rgba(20,20,18,0.985));
    box-shadow: 0 40px 120px rgba(0,0,0,0.62);
}

.hnt-cup-lightbox-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.hnt-cup-lightbox-head strong {
    display: block;
    color: var(--text-main);
    font-size: 18px;
    line-height: 1.15;
    font-weight: 950;
}

.hnt-cup-lightbox-head span {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
}

.hnt-cup-lightbox-close {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    background: rgba(255,255,255,0.06);
    font-size: 28px;
    line-height: 1;
    font-weight: 400;
}

.hnt-cup-lightbox-dialog img {
    display: block;
    width: 100%;
    max-height: calc(100vh - 160px);
    object-fit: contain;
    border-radius: 12px;
    background: #0d0d0c;
}

@media (max-width: 768px) {
    .hnt-cup-lightbox {
        padding: 14px;
    }

    .hnt-cup-lightbox-dialog {
        padding: 14px;
        max-height: calc(100vh - 28px);
    }

    .hnt-cup-lightbox-head strong {
        font-size: 16px;
    }

    .hnt-cup-lightbox-dialog img {
        max-height: calc(100vh - 132px);
    }
}

/* =========================================
   PATCH 755 — HNT outbound link page
========================================= */
.outbound-main {
    padding: 38px;
    overflow-y: auto;
    background:
        radial-gradient(circle at 78% 18%, rgba(214, 168, 79, 0.10), transparent 34%),
        linear-gradient(180deg, rgba(20, 20, 18, 0.92), rgba(20, 20, 18, 1));
}

.outbound-shell {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.outbound-hero-card {
    position: relative;
    width: min(100%, 880px);
    overflow: hidden;
    border: 1px solid rgba(214, 168, 79, 0.18);
    border-radius: 26px;
    padding: clamp(28px, 5vw, 56px);
    background:
        linear-gradient(145deg, rgba(32, 32, 30, 0.94), rgba(20, 20, 18, 0.98)),
        radial-gradient(circle at 88% 20%, rgba(214, 168, 79, 0.14), transparent 30%);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
}

.outbound-hero-glow {
    position: absolute;
    inset: -40% -30% auto auto;
    width: 360px;
    height: 360px;
    border-radius: 999px;
    background: rgba(214, 168, 79, 0.16);
    filter: blur(38px);
    pointer-events: none;
}

.outbound-badge-icon {
    position: absolute;
    top: 34px;
    right: 34px;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    background: rgba(214, 168, 79, 0.08);
    border: 1px solid rgba(214, 168, 79, 0.20);
}

.outbound-badge-icon svg ,

.outbound-badge-icon .ph {
    width: 34px;
    height: 34px;
}

.outbound-kicker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 18px;
    color: var(--accent-primary);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 950;
}

.outbound-hero-card h1 {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0;
    color: var(--text-main);
    font-size: clamp(42px, 6vw, 72px);
    line-height: 0.95;
    letter-spacing: -0.055em;
    font-weight: 950;
}

.outbound-hero-card > p {
    position: relative;
    z-index: 1;
    max-width: 740px;
    margin: 18px 0 0;
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1.65;
    font-weight: 700;
}

.outbound-target-card,
.outbound-warning-card {
    position: relative;
    z-index: 1;
    margin-top: 30px;
    border-radius: 18px;
    border: 1px solid rgba(214, 168, 79, 0.16);
    background: rgba(15, 15, 14, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.outbound-target-card {
    padding: 22px;
}

.outbound-target-card span,
.outbound-warning-card strong,
.outbound-side-widget h2 {
    display: block;
    color: var(--accent-primary);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 950;
}

.outbound-target-card strong {
    display: block;
    margin-top: 10px;
    color: var(--text-main);
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.05;
    word-break: break-word;
}

.outbound-target-card small {
    display: block;
    margin-top: 10px;
    color: rgba(242, 232, 216, 0.78);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 900;
}

.outbound-target-card p,
.outbound-warning-card p,
.outbound-side-widget p,
.outbound-side-widget li {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 700;
}

.outbound-target-card p {
    margin-top: 12px;
    white-space: pre-line;
}

.outbound-warning-card {
    display: flex;
    gap: 16px;
    padding: 18px;
    border-color: rgba(184, 70, 58, 0.22);
    background: rgba(184, 70, 58, 0.07);
}

.outbound-warning-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #e3b85a;
    background: rgba(214, 168, 79, 0.08);
    border: 1px solid rgba(214, 168, 79, 0.18);
}

.outbound-warning-icon svg ,

.outbound-warning-icon .ph {
    width: 22px;
    height: 22px;
}

.outbound-warning-card p {
    margin-top: 6px;
}

.outbound-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.outbound-action {
    min-height: 56px;
    padding: 0 26px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 950;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.outbound-action.primary {
    color: #11100e;
    background: linear-gradient(135deg, #D6A84F, #c89531);
    box-shadow: 0 20px 40px rgba(214, 168, 79, 0.18);
}

.outbound-action.secondary {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(242, 232, 216, 0.10);
}

.outbound-action:hover {
    transform: translateY(-1px);
}

.outbound-action.secondary:hover {
    border-color: rgba(214, 168, 79, 0.28);
}

.outbound-sidebar {
    padding-top: 38px;
}

.outbound-side-widget {
    border: 1px solid rgba(214, 168, 79, 0.12);
    background: linear-gradient(180deg, rgba(32, 32, 30, 0.74), rgba(20, 20, 18, 0.96));
}

.outbound-side-widget ul {
    margin-top: 18px;
    padding-left: 18px;
    display: grid;
    gap: 12px;
}

.outbound-side-widget li::marker {
    color: var(--accent-primary);
}

@media (max-width: 1180px) {
    .outbound-main {
        padding: 24px;
    }

    .outbound-sidebar {
        display: none;
    }
}

@media (max-width: 768px) {
    .outbound-main {
        padding: 18px;
    }

    .outbound-shell {
        align-items: flex-start;
    }

    .outbound-hero-card {
        border-radius: 20px;
        padding: 24px;
    }

    .outbound-badge-icon {
        position: static;
        margin-bottom: 18px;
        width: 56px;
        height: 56px;
    }

    .outbound-badge-icon svg ,

    .outbound-badge-icon .ph {
        width: 28px;
        height: 28px;
    }

    .outbound-actions {
        display: grid;
    }

    .outbound-action {
        width: 100%;
    }
}

/* Phase 757: Cup team feed activity quick comments */
.hnt-cup-team-activity-actions {
    margin: 14px 0 4px;
    padding: 12px;
    border: 1px solid rgba(214, 168, 79, .18);
    border-radius: 16px;
    background: rgba(18, 18, 16, .56);
}

.hnt-cup-team-activity-actions-label {
    display: block;
    margin-bottom: 9px;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(242, 232, 216, .58);
}

.hnt-cup-team-activity-action-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hnt-cup-team-activity-quick-comment {
    min-height: 34px;
    padding: 7px 12px;
    border-color: rgba(214, 168, 79, .26);
    background: rgba(32, 32, 30, .88);
    color: rgba(242, 232, 216, .9);
    font-size: 12px;
}

.hnt-cup-team-activity-quick-comment:hover,
.hnt-cup-team-activity-quick-comment:focus-visible {
    border-color: rgba(214, 168, 79, .58);
    color: #f2e8d8;
}

@media (max-width: 680px) {
    .hnt-cup-team-activity-action-list {
        flex-direction: column;
    }

    .hnt-cup-team-activity-quick-comment {
        width: 100%;
        justify-content: center;
    }
}

/* Patch 759: Cup team finder */
.hnt-cup-team-finder-panel {
  display: grid;
  gap: 18px;
}

.hnt-cup-team-finder-toggle,
.hnt-cup-team-finder-self {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(214, 168, 79, 0.22);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(214, 168, 79, 0.08), rgba(20, 20, 18, 0.78));
}

.hnt-cup-team-finder-toggle strong,
.hnt-cup-team-finder-self strong {
  display: block;
  color: #f2e8d8;
  font-size: 0.96rem;
  margin-bottom: 4px;
}

.hnt-cup-team-finder-toggle p,
.hnt-cup-team-finder-self p,
.hnt-cup-team-finder-empty,
.hnt-cup-team-finder-card p,
.hnt-cup-team-finder-player-card p {
  margin: 0;
  color: rgba(242, 232, 216, 0.68);
  font-size: 0.88rem;
  line-height: 1.55;
}

.hnt-cup-team-finder-self blockquote {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 2px solid rgba(214, 168, 79, 0.72);
  background: rgba(255, 255, 255, 0.035);
  border-radius: 12px;
  color: rgba(242, 232, 216, 0.82);
}

.hnt-cup-team-finder-form {
  display: grid;
  gap: 12px;
  width: 100%;
}

.hnt-cup-team-finder-form label {
  display: block;
  color: rgba(242, 232, 216, 0.76);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.hnt-cup-team-finder-form select,
.hnt-cup-team-finder-form textarea {
  width: 100%;
  border: 1px solid rgba(214, 168, 79, 0.18);
  border-radius: 14px;
  background: rgba(8, 8, 7, 0.72);
  color: #f2e8d8;
  padding: 12px 14px;
  outline: none;
}

.hnt-cup-team-finder-form textarea {
  resize: vertical;
  min-height: 92px;
}

.hnt-cup-team-finder-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.hnt-cup-team-finder-columns > div {
  display: grid;
  align-content: start;
  gap: 10px;
}

.hnt-cup-team-finder-columns h3 {
  margin: 0 0 2px;
  color: #f2e8d8;
  font-size: 0.96rem;
}

.hnt-cup-team-finder-card,
.hnt-cup-team-finder-player-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: rgba(32, 32, 30, 0.72);
}

.hnt-cup-team-finder-card strong {
  display: block;
  color: #f2e8d8;
  margin-bottom: 4px;
}

.hnt-cup-team-finder-player-card {
  align-items: flex-start;
  flex-direction: column;
}

.hnt-cup-team-finder-player-card .hnt-cup-team-member {
  width: 100%;
}

.hnt-cup-team-finder-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(155, 228, 71, 0.12);
  color: #9be447;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .hnt-cup-team-finder-toggle,
  .hnt-cup-team-finder-self,
  .hnt-cup-team-finder-card {
    align-items: stretch;
    flex-direction: column;
  }

  .hnt-cup-team-finder-columns {
    grid-template-columns: 1fr;
  }
}

/* Patch 760: Cup overview Team-Finder CTA */
.cup-panel-btn-secondary {
    margin-top: 10px;
    border-color: rgba(214, 168, 79, 0.42);
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: none;
}

.cup-panel-btn-secondary:hover {
    border-color: rgba(214, 168, 79, 0.72);
    color: #D6A84F;
    background: rgba(214, 168, 79, 0.08);
}

/* Patch 761: make Cup Team-Finder CTA match panel button sizing */
.cup-content-grid .cup-join-panel .cup-panel-btn {
    width: 100%;
    min-width: 0;
}

.cup-content-grid .cup-join-panel .cup-panel-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

/* Patch 762: HNT emoji picker for post composer and comments */
.hnt-emoji-input-button {
    border: 0;
    background: rgba(255, 255, 255, 0.06);
    color: #D8CDBE;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.hnt-emoji-input-button:hover,
.hnt-emoji-input-button:focus-visible {
    background: rgba(214, 168, 79, 0.18);
    color: #F2E8D8;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(214, 168, 79, 0.18);
    outline: none;
}

.hnt-composer-emoji-button {
    position: absolute;
    right: 16px;
    bottom: 14px;
    z-index: 4;
}

.composer-input-shell .composer-preview-strip {
    right: 62px;
}

.post-modal-tools .hnt-emoji-input-button {
    width: 26px;
    height: 26px;
    min-width: 26px;
    font-size: 17px;
    background: transparent;
}

.hnt-emoji-picker {
    position: fixed;
    z-index: 10050;
    max-height: min(430px, calc(100vh - 24px));
    overflow: hidden;
    border-radius: 20px;
    background:
        radial-gradient(circle at 18% 0%, rgba(214, 168, 79, 0.14), transparent 34%),
        linear-gradient(145deg, rgba(32, 32, 30, 0.98), rgba(20, 20, 18, 0.98));
    border: 1px solid rgba(214, 168, 79, 0.22);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: #F2E8D8;
    backdrop-filter: blur(14px);
}

.hnt-emoji-picker[hidden] {
    display: none !important;
}

.hnt-emoji-picker-tabs {
    display: flex;
    gap: 5px;
    padding: 10px 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    scrollbar-width: thin;
}

.hnt-emoji-tab {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 0;
    background: transparent;
    color: rgba(242, 232, 216, 0.72);
    font-size: 19px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.hnt-emoji-tab:hover,
.hnt-emoji-tab.is-active {
    background: rgba(214, 168, 79, 0.16);
    color: #F2E8D8;
    transform: translateY(-1px);
}

.hnt-emoji-picker-section {
    padding: 12px 12px 14px;
    max-height: 360px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.hnt-emoji-picker-section > strong {
    display: block;
    margin: 0 0 10px;
    color: #F2E8D8;
    font-size: 14px;
    font-weight: 800;
}

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

.hnt-emoji-choice {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    color: #F2E8D8;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}

.hnt-emoji-choice:hover,
.hnt-emoji-choice:focus-visible {
    background: rgba(214, 168, 79, 0.18);
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
    outline: none;
}

@media (max-width: 640px) {
    .hnt-emoji-picker {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-height: min(420px, calc(100vh - 24px));
    }

    .hnt-emoji-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .hnt-composer-emoji-button {
        right: 12px;
        bottom: 12px;
    }
}

/* Patch 763: stabilize emoji picker placement and real recent state */
.hnt-emoji-empty {
    margin: 0;
    padding: 14px 10px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(216, 205, 190, 0.78);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.composer-modal .hnt-emoji-input-button,
.post-detail-modal .hnt-emoji-input-button {
    flex: 0 0 auto;
}

.hnt-emoji-picker.open {
    animation: hntEmojiPickerIn 0.14s ease-out;
}

@keyframes hntEmojiPickerIn {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* =========================================
   PATCH 726: Cups create/edit HNT preview form
   Localized to Cup admin form only.
========================================= */
.cup-form-main-page {
    padding: 32px 0;
}

.cup-form-page-shell {
    width: min(calc(100% - 64px), 1120px);
}

.cup-form-page-shell > form {
    display: block;
}

.cup-form-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
}

.cup-form-main,
.cup-form-aside {
    min-width: 0;
}

.cup-form-panel,
.cup-form-card {
    background: rgba(32, 32, 30, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    box-shadow: none;
    overflow: hidden;
}

.cup-form-hero {
    position: relative;
    min-height: 240px;
    overflow: hidden;
    background: #1A1A18;
}

.cup-form-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.42;
}

.cup-form-hero-shade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 26%, rgba(214, 168, 79, 0.20), transparent 28%),
        linear-gradient(180deg, rgba(20, 20, 18, 0.18), rgba(20, 20, 18, 0.94));
    pointer-events: none;
}

.cup-form-hero-content {
    position: relative;
    z-index: 1;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
}

.cup-form-kicker,
.cup-form-side-kicker {
    width: max-content;
    max-width: 100%;
    color: var(--accent-primary);
    background: rgba(214, 168, 79, 0.12);
    border: 1px solid rgba(214, 168, 79, 0.20);
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cup-form-hero h1 {
    margin-top: 14px;
    color: var(--text-main);
    font-size: clamp(30px, 4vw, 46px);
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.cup-form-hero p,
.cup-form-card p,
.cup-form-note-list p {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.65;
}

.cup-form-body {
    display: grid;
    gap: 28px;
    padding: 24px;
}

.cup-form-section {
    display: grid;
    gap: 16px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.cup-form-section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.cup-form-section-title,
.cup-form-card h3,
.cup-form-locale-card h3,
.cup-form-prize-block h4 {
    color: var(--text-main);
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.cup-form-section-text,
.cup-form-help {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
}

.cup-form-help {
    display: block;
    margin-top: 8px;
}

.cup-form-grid,
.cup-form-locale-grid,
.cup-form-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.cup-form-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.cup-form-input {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(20, 20, 18, 0.62);
    color: var(--text-main);
    padding: 0 13px;
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.cup-form-input[type="file"] {
    min-height: 52px;
    padding: 13px;
}

.cup-form-input::placeholder {
    color: rgba(167, 156, 142, 0.62);
}

.cup-form-input:focus {
    border-color: rgba(214, 168, 79, 0.48);
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 0 0 4px rgba(214, 168, 79, 0.08);
}

.cup-form-textarea {
    min-height: 116px;
    resize: vertical;
    padding: 13px;
    line-height: 1.55;
}

.cup-form-check-list,
.cup-form-locale-card,
.cup-form-prize-block,
.cup-form-note-list {
    display: grid;
    gap: 12px;
}

.cup-form-check-option {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-main);
    padding: 11px 12px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.cup-form-check-option--stack {
    align-items: flex-start;
    min-height: 0;
}

.hnt-cup-check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.hnt-cup-check-box {
    position: relative;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 1px solid rgba(214, 168, 79, 0.48);
    border-radius: 5px;
    background: rgba(20, 20, 18, 0.86);
}

.hnt-cup-check-input:checked + .hnt-cup-check-box {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 14px rgba(214, 168, 79, 0.20);
}

.hnt-cup-check-input:checked + .hnt-cup-check-box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #141412;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.cup-form-check-title {
    display: block;
    color: var(--text-main);
}

.cup-form-locale-card,
.cup-form-prize-block,
.cup-form-stat {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.055);
    padding: 16px;
}

.cup-form-prize-block {
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cup-form-card {
    display: grid;
    gap: 18px;
    padding: 20px;
}

.cup-form-card h3 {
    margin-top: 8px;
}

.cup-form-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cup-form-stat div {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.cup-form-stat strong {
    display: block;
    margin-top: 5px;
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.cup-form-summary-list {
    display: grid;
    gap: 10px;
    color: var(--text-muted);
    font-size: 13px;
}

.cup-form-summary-list div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.cup-form-summary-list strong {
    color: var(--text-main);
    text-align: right;
}

.cup-form-actions {
    display: flex;
    gap: 10px;
    padding-top: 4px;
}

.cup-form-actions .btn-create {
    flex: 1 1 auto;
    min-height: 46px;
}

.cup-form-actions .cup-icon-btn {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
}

.cup-form-alert {
    border-color: rgba(184, 70, 58, 0.30);
    background: rgba(184, 70, 58, 0.10);
}

.cup-form-alert ul {
    margin: 10px 0 0 18px;
    color: #f0c4bd;
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 1200px) {
    .cup-form-page-shell {
        width: min(calc(100% - 48px), 900px);
    }

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

    .cup-form-aside-stack {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .cup-form-main-page {
        padding: 16px 0 28px;
    }

    .cup-form-page-shell {
        width: 100%;
        padding: 0 16px;
    }

    .cup-form-body,
    .cup-form-hero-content {
        padding: 18px;
    }

    .cup-form-grid,
    .cup-form-locale-grid,
    .cup-form-stat-grid,
    .cup-form-aside-stack {
        grid-template-columns: 1fr;
    }

    .cup-form-hero,
    .cup-form-hero-content {
        min-height: 210px;
    }

    .cup-form-actions {
        flex-wrap: wrap;
    }

    .cup-form-actions .btn-create {
        flex-basis: calc(100% - 56px);
    }
}

/* PATCH 727: real Phosphor icons in HNT preview left sidebar */
.sidebar-left .icon-btn > .ph,
.sidebar-left .nav-item > .ph,
.sidebar-left .chevron,
.sidebar-left .nav-dropdown-chev,
.sidebar-left .nav-submenu-close > .ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex: 0 0 auto;
}

.sidebar-left .icon-btn > .ph {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.sidebar-left .nav-item > .ph {
    width: 20px;
    height: 20px;
    min-width: 20px;
    font-size: 20px;
}

.sidebar-left .nav-item.active > .ph {
    color: var(--accent-green);
}

.sidebar-left .chevron {
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: var(--text-muted);
}

.sidebar-left .nav-dropdown-chev {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px;
    font-size: 14px;
}

.sidebar-left .nav-submenu-close > .ph {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.app-window.sidebar-collapsed .sidebar-toggle > .ph {
    transform: rotate(180deg);
}

/* PATCH 727: neutralize the older SVG-only friend-request sidebar sizing for Phosphor */
.nav-item.nav-friend-requests > .ph {
    width: 20px;
    height: 20px;
    min-width: 20px;
    font-size: 20px;
}


/* =========================================
   PATCH 729: Phosphor icon dimension polish for feed + comments
   Phosphor icons are icon-font glyphs. Width/height alone does not size them,
   so feed/comment controls need explicit font-size to match the old SVG scale.
========================================= */
.hnt-preview-body .ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex: 0 0 auto;
    vertical-align: -0.12em;
}

.hnt-preview-body .post-actions,
.hnt-preview-body .hnt-post-actions {
    align-items: center;
}

.hnt-preview-body .post-actions .action-group,
.hnt-preview-body .hnt-post-actions .action-group {
    align-items: center;
    gap: 22px;
}

.hnt-preview-body .post-actions .action-btn,
.hnt-preview-body .hnt-post-actions .action-btn {
    min-height: 24px;
    line-height: 1;
    gap: 8px;
    align-items: center;
}

.hnt-preview-body .post-actions .action-btn > .ph,
.hnt-preview-body .hnt-post-actions .action-btn > .ph,
.hnt-preview-body .post-actions .action-btn > i.ph,
.hnt-preview-body .hnt-post-actions .action-btn > i.ph {
    width: 21px;
    height: 21px;
    font-size: 21px;
}

.hnt-preview-body .post-actions .action-btn span,
.hnt-preview-body .hnt-post-actions .action-btn span {
    line-height: 1;
}

.hnt-preview-body .hnt-bookmark-icon-button {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hnt-preview-body .hnt-bookmark-icon-button > .ph,
.hnt-preview-body .hnt-bookmark-icon-button > i.ph {
    width: 21px;
    height: 21px;
    font-size: 21px;
}

.hnt-preview-body .icon-btn-green > .ph,
.hnt-preview-body .icon-btn-green > i.ph,
.hnt-preview-body .hnt-post-report-button > .ph,
.hnt-preview-body .hnt-post-report-button > i.ph {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.hnt-preview-body .btn-following .ph,
.hnt-preview-body .hnt-post-options-toggle .ph {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.hnt-preview-body .hnt-video-center-play > .ph,
.hnt-preview-body .hnt-video-center-play > i.ph {
    width: 28px;
    height: 28px;
    font-size: 28px;
}

.hnt-preview-body .hnt-video-control > .ph,
.hnt-preview-body .hnt-video-control > i.ph {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.hnt-preview-body .hnt-post-media-nav > .ph,
.hnt-preview-body .hnt-post-media-nav > i.ph {
    width: 22px;
    height: 22px;
    font-size: 22px;
}

.hnt-preview-body .post-modal-close > .ph,
.hnt-preview-body .post-modal-close > i.ph {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.hnt-preview-body .hnt-comment-modal-actions .action-btn > .ph,
.hnt-preview-body .hnt-comment-modal-actions .action-btn > i.ph {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.hnt-preview-body .hnt-comment-action-icon,
.hnt-preview-body .hnt-comment-like-summary {
    align-items: center;
    line-height: 1;
}

.hnt-preview-body .hnt-comment-action-icon > .ph,
.hnt-preview-body .hnt-comment-action-icon > i.ph {
    width: 15px;
    height: 15px;
    font-size: 15px;
}

.hnt-preview-body .hnt-comment-like-button > .ph,
.hnt-preview-body .hnt-comment-like-button > i.ph {
    width: 15px;
    height: 15px;
    font-size: 15px;
}

.hnt-preview-body .post-modal-tools button > .ph,
.hnt-preview-body .post-modal-tools button > i.ph {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.hnt-preview-body .post-modal-send > .ph,
.hnt-preview-body .post-modal-send > i.ph,
.hnt-preview-body .hnt-comment-reply-submit > .ph,
.hnt-preview-body .hnt-comment-reply-submit > i.ph {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

@media (max-width: 768px) {
    .hnt-preview-body .post-actions .action-group,
    .hnt-preview-body .hnt-post-actions .action-group {
        gap: 18px;
    }

    .hnt-preview-body .post-actions .action-btn > .ph,
    .hnt-preview-body .hnt-post-actions .action-btn > .ph,
    .hnt-preview-body .post-actions .action-btn > i.ph,
    .hnt-preview-body .hnt-post-actions .action-btn > i.ph,
    .hnt-preview-body .hnt-bookmark-icon-button > .ph,
    .hnt-preview-body .hnt-bookmark-icon-button > i.ph {
        width: 20px;
        height: 20px;
        font-size: 20px;
    }
}

/* =========================================
   PATCH 730 - MOMENTS PHOSPHOR ICON DIMENSIONS
   Scope: HNT preview Moments viewer/comments only.
   Reason: Phosphor icon-fonts need explicit font-size; width/height alone
   only worked for the previous inline SVG icons.
========================================= */
.hnt-moment-screen .hnt-moment-action .ph:not([hidden]),
.hnt-moment-screen .hnt-moment-mute .ph:not([hidden]),
.hnt-moment-screen .hnt-moment-create-overlay .ph:not([hidden]),
.hnt-moment-screen .hnt-moment-desktop-nav .ph:not([hidden]),
.hnt-moment-screen .hnt-moment-mobile-icon .ph:not([hidden]),
.hnt-moment-comments .hnt-moment-panel-head button .ph:not([hidden]),
.hnt-moment-more-sheet .hnt-moment-panel-head button .ph:not([hidden]),
.hnt-moment-more-sheet .hnt-moment-more-action .ph:not([hidden]),
.hnt-moment-screen .hnt-moment-action-friend-badge .ph:not([hidden]) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 1em !important;
    height: 1em !important;
    line-height: 1 !important;
    vertical-align: -0.12em;
}

.hnt-moment-screen .hnt-moment-action .ph:not([hidden]) {
    font-size: 21px !important;
}

.hnt-moment-screen .hnt-moment-mute .ph:not([hidden]),
.hnt-moment-screen .hnt-moment-create-overlay .ph:not([hidden]) {
    font-size: 19px !important;
}

.hnt-moment-screen .hnt-moment-desktop-nav .ph:not([hidden]) {
    font-size: 24px !important;
}

.hnt-moment-screen .hnt-moment-action-friend-badge .ph:not([hidden]) {
    font-size: 15px !important;
}

.hnt-moment-comments .hnt-moment-panel-head button .ph:not([hidden]),
.hnt-moment-more-sheet .hnt-moment-panel-head button .ph:not([hidden]) {
    font-size: 19px !important;
}

.hnt-moment-more-sheet .hnt-moment-more-action .ph:not([hidden]) {
    font-size: 18px !important;
}

.hnt-moment-screen .hnt-moment-pause-state .ph:not([hidden]) {
    display: inline-grid !important;
    place-items: center;
    width: 72px !important;
    height: 72px !important;
    line-height: 1 !important;
    font-size: 34px !important;
}

@media (max-width: 768px) {
    .hnt-moment-screen .hnt-moment-action .ph:not([hidden]) {
        font-size: 26px !important;
    }

    .hnt-moment-screen .hnt-moment-mobile-mute-action .hnt-moment-action .ph:not([hidden]) {
        font-size: 21px !important;
    }

    .hnt-moment-screen .hnt-moment-mobile-icon .ph:not([hidden]) {
        font-size: 34px !important;
    }

    .hnt-moment-screen .hnt-moment-mobile-icon:last-child .ph:not([hidden]) {
        font-size: 28px !important;
    }

    .hnt-moment-screen .hnt-moment-pause-state .ph:not([hidden]) {
        width: 74px !important;
        height: 74px !important;
        font-size: 34px !important;
    }
}



/* =========================================
   PATCH 731 - MOMENT STUDIO MOBILE LAYOUT STABILIZATION
   Scope: /moments/create mobile HNT/Lens editor layout only.
   Keeps the accepted Studio functionality intact; fixes the stacked mobile layout,
   tool/pro rails and Phosphor sizing after the sitewide icon switch.
========================================= */
.hnt-studio-tool-icon.has-phosphor::before {
    content: none !important;
}

.hnt-studio-tool-icon.has-phosphor .ph {
    width: 1em !important;
    height: 1em !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
}

@media (max-width: 860px) {
    .hnt-studio-window,
    .hnt-studio-main,
    .hnt-studio {
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    .hnt-studio {
        grid-template-rows: calc(56px + env(safe-area-inset-top)) minmax(0, 1fr) clamp(174px, 24dvh, 204px) !important;
    }

    .hnt-studio-topbar {
        height: auto !important;
        min-height: calc(56px + env(safe-area-inset-top)) !important;
        padding: env(safe-area-inset-top) 12px 0 !important;
        align-items: center !important;
        gap: 10px !important;
        z-index: 30 !important;
    }

    .hnt-studio-project-meta {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .hnt-studio-back {
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 13px !important;
    }

    .hnt-studio-back .ph {
        font-size: 22px !important;
        width: 1em !important;
        height: 1em !important;
    }

    .hnt-studio-project-meta strong {
        max-width: min(42vw, 190px) !important;
        font-size: 15px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .hnt-studio-top-actions {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    .hnt-studio-publish {
        min-width: 0 !important;
        max-width: 42vw !important;
        height: 38px !important;
        padding: 0 14px !important;
        border-radius: 14px !important;
        font-size: 12px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .hnt-studio-shell {
        position: relative !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(0, 1fr) 52px 52px !important;
        overflow: hidden !important;
        background: #1A1A18 !important;
    }

    .hnt-studio-center {
        grid-row: 1 !important;
        grid-column: 1 !important;
        display: grid !important;
        grid-template-rows: minmax(0, 1fr) 40px !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .hnt-studio-canvas-toolbar {
        display: none !important;
    }

    .hnt-studio-preview {
        min-height: 0 !important;
        padding: 8px 12px 2px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hnt-studio-phone-frame {
        width: min(54vw, 246px) !important;
        min-width: 150px !important;
        max-width: 246px !important;
        max-height: 100% !important;
        aspect-ratio: 9 / 16 !important;
        border-radius: 10px !important;
    }

    .hnt-studio-playbar {
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 12px !important;
        gap: 7px !important;
        font-size: 10px !important;
        background: rgba(26, 26, 24, 0.92) !important;
        border-top: 1px solid rgba(242, 232, 216, 0.045) !important;
    }

    .hnt-studio-play {
        width: 30px !important;
        height: 30px !important;
    }

    .hnt-studio-play .ph {
        width: 1em !important;
        height: 1em !important;
        font-size: 17px !important;
    }

    .hnt-studio-left {
        grid-row: 2 !important;
        grid-column: 1 !important;
        position: static !important;
        inset: auto !important;
        width: auto !important;
        height: 52px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 46px !important;
        grid-template-areas: "tools import" !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 6px 10px !important;
        border: 0 !important;
        border-top: 1px solid rgba(242, 232, 216, 0.06) !important;
        background: #20201E !important;
        pointer-events: auto !important;
        overflow: hidden !important;
    }

    .hnt-studio-toolrail {
        grid-area: tools !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .hnt-studio-toolrail::-webkit-scrollbar,
    .hnt-studio-pro-panel::-webkit-scrollbar {
        display: none !important;
    }

    .hnt-studio-tool {
        flex: 0 0 42px !important;
        min-width: 42px !important;
        width: 42px !important;
        min-height: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        display: grid !important;
        place-items: center !important;
        font-size: 0 !important;
    }

    .hnt-studio-tool-icon,
    .hnt-studio-tool-icon.has-phosphor {
        width: 24px !important;
        height: 24px !important;
        display: grid !important;
        place-items: center !important;
    }

    .hnt-studio-tool-icon.has-phosphor .ph {
        font-size: 22px !important;
    }

    .hnt-studio-tool small,
    .hnt-studio-tool em {
        display: none !important;
    }

    .hnt-studio-media-panel {
        grid-area: import !important;
        display: block !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }

    .hnt-studio-media-panel .hnt-studio-panel-head,
    .hnt-studio-media-panel .hnt-studio-import-note,
    .hnt-studio-media-panel .hnt-studio-media-list {
        display: none !important;
    }

    .hnt-studio-import {
        width: 46px !important;
        min-width: 46px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        display: grid !important;
        place-items: center !important;
        justify-content: center !important;
        color: #141412 !important;
        background: var(--accent-primary) !important;
        box-shadow: none !important;
        font-size: 0 !important;
    }

    .hnt-studio-import .ph {
        width: 1em !important;
        height: 1em !important;
        font-size: 22px !important;
    }

    .hnt-studio-right {
        grid-row: 3 !important;
        grid-column: 1 !important;
        position: static !important;
        inset: auto !important;
        width: auto !important;
        height: 52px !important;
        display: block !important;
        padding: 6px 10px !important;
        border: 0 !important;
        border-top: 1px solid rgba(242, 232, 216, 0.06) !important;
        border-radius: 0 !important;
        background: #1A1A18 !important;
        overflow: hidden !important;
    }

    .hnt-studio-pro-panel {
        width: 100% !important;
        height: 40px !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        background: transparent !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .hnt-studio-side-feature {
        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        display: grid !important;
        place-items: center !important;
        background: #20201E !important;
        border-color: rgba(242, 232, 216, 0.08) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .hnt-studio-side-feature strong,
    .hnt-studio-side-feature em,
    .hnt-studio-publish-panel {
        display: none !important;
    }

    .hnt-studio-side-feature .hnt-studio-tool-icon {
        width: 24px !important;
        height: 24px !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .hnt-studio-side-feature .hnt-studio-tool-icon.has-phosphor .ph {
        font-size: 21px !important;
    }

    .hnt-studio-timeline {
        min-height: 0 !important;
        padding: 8px 10px calc(10px + env(safe-area-inset-bottom)) !important;
        overflow: hidden !important;
        background: #181817 !important;
    }

    .hnt-studio-timeline-head {
        margin-bottom: 4px !important;
        gap: 8px !important;
    }

    .hnt-studio-timeline-head strong {
        font-size: 13px !important;
    }

    .hnt-studio-timeline-head span {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    .hnt-studio-duration-pill {
        min-height: 28px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    .hnt-studio-time-ruler {
        height: 18px !important;
        margin-left: 48px !important;
        grid-template-columns: repeat(4, 1fr) !important;
        font-size: 9px !important;
        overflow: hidden !important;
    }

    .hnt-studio-time-ruler span:nth-child(n+5) {
        display: none !important;
    }

    .hnt-studio-track {
        min-height: 44px !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .hnt-studio-track > span {
        font-size: 10px !important;
    }

    .hnt-studio-text-track > div,
    .hnt-studio-timeline-empty,
    .hnt-studio-text-lane {
        min-height: 30px !important;
        border-radius: 9px !important;
        font-size: 10px !important;
        line-height: 1.22 !important;
    }

    .hnt-studio-timeline-empty,
    .hnt-studio-text-empty {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .hnt-studio-timeline-clip {
        min-width: 88px !important;
        min-height: 32px !important;
    }
}

@media (max-width: 420px) {
    .hnt-studio {
        grid-template-rows: calc(54px + env(safe-area-inset-top)) minmax(0, 1fr) clamp(162px, 23dvh, 184px) !important;
    }

    .hnt-studio-topbar {
        min-height: calc(54px + env(safe-area-inset-top)) !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .hnt-studio-back {
        flex-basis: 36px !important;
        width: 36px !important;
        height: 36px !important;
    }

    .hnt-studio-project-meta strong {
        max-width: 120px !important;
        font-size: 14px !important;
    }

    .hnt-studio-publish {
        max-width: 43vw !important;
        height: 36px !important;
        padding: 0 12px !important;
        font-size: 11px !important;
    }

    .hnt-studio-shell {
        grid-template-rows: minmax(0, 1fr) 48px 48px !important;
    }

    .hnt-studio-left,
    .hnt-studio-right {
        height: 48px !important;
        padding: 4px 8px !important;
    }

    .hnt-studio-toolrail,
    .hnt-studio-pro-panel {
        height: 40px !important;
    }

    .hnt-studio-tool,
    .hnt-studio-side-feature {
        flex-basis: 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    .hnt-studio-import {
        width: 42px !important;
        min-width: 42px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    .hnt-studio-phone-frame {
        width: min(58vw, 228px) !important;
        max-width: 228px !important;
    }

    .hnt-studio-timeline {
        padding-top: 7px !important;
    }

    .hnt-studio-timeline-head strong {
        font-size: 12px !important;
    }

    .hnt-studio-duration-pill {
        min-height: 26px !important;
        font-size: 10px !important;
    }

    .hnt-studio-track {
        min-height: 40px !important;
    }
}

@media (max-width: 860px) and (max-height: 720px) {
    .hnt-studio {
        grid-template-rows: calc(52px + env(safe-area-inset-top)) minmax(0, 1fr) 152px !important;
    }

    .hnt-studio-shell {
        grid-template-rows: minmax(0, 1fr) 44px 44px !important;
    }

    .hnt-studio-left,
    .hnt-studio-right {
        height: 44px !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }

    .hnt-studio-phone-frame {
        width: min(48vw, 210px) !important;
    }

    .hnt-studio-playbar {
        height: 34px !important;
        min-height: 34px !important;
    }

    .hnt-studio-timeline-head span,
    .hnt-studio-time-ruler {
        display: none !important;
    }

    .hnt-studio-track {
        min-height: 39px !important;
    }
}


/* =========================================
   PATCH 732 - MOMENT STUDIO MOBILE VERTICAL FIT
   Scope: /moments/create mobile layout only.
   Moves the editor stack upward and reserves enough height for the full timeline.
========================================= */
@media (max-width: 860px) {
    body.hnt-preview-body:has(.hnt-studio-window),
    html:has(.hnt-studio-window) {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    .hnt-studio-window {
        position: fixed !important;
        inset: 0 !important;
        margin: 0 !important;
    }

    .hnt-studio-main {
        position: fixed !important;
        inset: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .hnt-studio {
        grid-template-rows: calc(52px + env(safe-area-inset-top)) minmax(0, 1fr) clamp(206px, 28dvh, 236px) !important;
    }

    .hnt-studio-topbar {
        min-height: calc(52px + env(safe-area-inset-top)) !important;
        padding-top: env(safe-area-inset-top) !important;
        padding-bottom: 0 !important;
    }

    .hnt-studio-shell {
        grid-template-rows: minmax(0, 1fr) 48px 48px !important;
    }

    .hnt-studio-center {
        grid-template-rows: minmax(0, 1fr) 36px !important;
    }

    .hnt-studio-preview {
        align-items: flex-start !important;
        padding-top: 6px !important;
        padding-bottom: 0 !important;
    }

    .hnt-studio-phone-frame {
        width: min(51vw, 216px) !important;
        max-width: 216px !important;
    }

    .hnt-studio-playbar {
        height: 36px !important;
        min-height: 36px !important;
    }

    .hnt-studio-left,
    .hnt-studio-right {
        height: 48px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .hnt-studio-timeline {
        min-height: 0 !important;
        padding: 8px 10px calc(10px + env(safe-area-inset-bottom)) !important;
        overflow: hidden !important;
    }

    .hnt-studio-timeline-head {
        margin-bottom: 4px !important;
    }

    .hnt-studio-time-ruler {
        height: 17px !important;
    }

    .hnt-studio-track {
        min-height: 42px !important;
    }
}

@media (max-width: 420px) {
    .hnt-studio {
        grid-template-rows: calc(50px + env(safe-area-inset-top)) minmax(0, 1fr) clamp(204px, 29dvh, 232px) !important;
    }

    .hnt-studio-topbar {
        min-height: calc(50px + env(safe-area-inset-top)) !important;
    }

    .hnt-studio-shell {
        grid-template-rows: minmax(0, 1fr) 46px 46px !important;
    }

    .hnt-studio-center {
        grid-template-rows: minmax(0, 1fr) 34px !important;
    }

    .hnt-studio-preview {
        padding-top: 4px !important;
    }

    .hnt-studio-phone-frame {
        width: min(49vw, 204px) !important;
        max-width: 204px !important;
    }

    .hnt-studio-playbar {
        height: 34px !important;
        min-height: 34px !important;
    }

    .hnt-studio-left,
    .hnt-studio-right {
        height: 46px !important;
    }

    .hnt-studio-toolrail,
    .hnt-studio-pro-panel {
        height: 38px !important;
    }

    .hnt-studio-tool,
    .hnt-studio-side-feature,
    .hnt-studio-import {
        height: 38px !important;
        min-height: 38px !important;
    }

    .hnt-studio-timeline-head span {
        display: block !important;
    }

    .hnt-studio-track {
        min-height: 41px !important;
    }
}

@media (max-width: 860px) and (max-height: 720px) {
    .hnt-studio {
        grid-template-rows: calc(48px + env(safe-area-inset-top)) minmax(0, 1fr) 184px !important;
    }

    .hnt-studio-phone-frame {
        width: min(45vw, 188px) !important;
        max-width: 188px !important;
    }

    .hnt-studio-timeline-head span {
        display: none !important;
    }

    .hnt-studio-track {
        min-height: 38px !important;
    }
}


/* =========================================
   PATCH 733 - MOMENT STUDIO MOBILE TOP FIT
   Scope: /moments/create mobile layout only.
   Pins the fullscreen studio to the viewport top, reduces unused preview padding
   and reserves more vertical space for the complete timeline.
========================================= */
@media (max-width: 1024px) {
    .app-window.hnt-studio-window,
    .hnt-preview-shell.hnt-studio-window {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        height: 100svh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
        overflow: hidden !important;
    }

    .hnt-studio-window .hnt-studio-main {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100svh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
}

@media (max-width: 860px) {
    .hnt-studio {
        grid-template-rows: calc(48px + env(safe-area-inset-top)) minmax(0, 1fr) clamp(224px, 32dvh, 262px) !important;
    }

    .hnt-studio-topbar {
        height: calc(48px + env(safe-area-inset-top)) !important;
        min-height: calc(48px + env(safe-area-inset-top)) !important;
        padding-top: env(safe-area-inset-top) !important;
        padding-bottom: 0 !important;
    }

    .hnt-studio-back {
        flex-basis: 34px !important;
        width: 34px !important;
        height: 34px !important;
    }

    .hnt-studio-project-meta strong {
        font-size: 14px !important;
    }

    .hnt-studio-publish {
        height: 34px !important;
        border-radius: 12px !important;
    }

    .hnt-studio-shell {
        grid-template-rows: minmax(0, 1fr) 44px 44px !important;
    }

    .hnt-studio-center {
        grid-template-rows: minmax(0, 1fr) 32px !important;
    }

    .hnt-studio-preview {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .hnt-studio-phone-frame {
        width: min(48vw, 202px) !important;
        max-width: 202px !important;
        min-width: 150px !important;
    }

    .hnt-studio-playbar {
        height: 32px !important;
        min-height: 32px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .hnt-studio-left,
    .hnt-studio-right {
        height: 44px !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }

    .hnt-studio-toolrail,
    .hnt-studio-pro-panel {
        height: 38px !important;
    }

    .hnt-studio-tool,
    .hnt-studio-side-feature {
        flex-basis: 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }

    .hnt-studio-import {
        width: 42px !important;
        min-width: 42px !important;
        height: 38px !important;
        min-height: 38px !important;
    }

    .hnt-studio-timeline {
        padding: 8px 10px calc(12px + env(safe-area-inset-bottom)) !important;
    }

    .hnt-studio-timeline-head {
        margin-bottom: 4px !important;
    }

    .hnt-studio-timeline-head strong {
        font-size: 13px !important;
        line-height: 1.05 !important;
    }

    .hnt-studio-timeline-head span {
        font-size: 10px !important;
        line-height: 1.12 !important;
    }

    .hnt-studio-duration-pill {
        min-height: 26px !important;
        font-size: 10px !important;
    }

    .hnt-studio-time-ruler {
        height: 17px !important;
    }

    .hnt-studio-track {
        min-height: 44px !important;
    }
}

@media (max-width: 420px) {
    .hnt-studio {
        grid-template-rows: calc(46px + env(safe-area-inset-top)) minmax(0, 1fr) clamp(224px, 33dvh, 260px) !important;
    }

    .hnt-studio-topbar {
        height: calc(46px + env(safe-area-inset-top)) !important;
        min-height: calc(46px + env(safe-area-inset-top)) !important;
    }

    .hnt-studio-shell {
        grid-template-rows: minmax(0, 1fr) 42px 42px !important;
    }

    .hnt-studio-center {
        grid-template-rows: minmax(0, 1fr) 30px !important;
    }

    .hnt-studio-phone-frame {
        width: min(46vw, 190px) !important;
        max-width: 190px !important;
    }

    .hnt-studio-playbar {
        height: 30px !important;
        min-height: 30px !important;
    }

    .hnt-studio-left,
    .hnt-studio-right {
        height: 42px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    .hnt-studio-toolrail,
    .hnt-studio-pro-panel {
        height: 36px !important;
    }

    .hnt-studio-tool,
    .hnt-studio-side-feature,
    .hnt-studio-import {
        height: 36px !important;
        min-height: 36px !important;
    }

    .hnt-studio-track {
        min-height: 43px !important;
    }
}

@media (max-width: 860px) and (max-height: 720px) {
    .hnt-studio {
        grid-template-rows: calc(44px + env(safe-area-inset-top)) minmax(0, 1fr) 210px !important;
    }

    .hnt-studio-phone-frame {
        width: min(42vw, 174px) !important;
        max-width: 174px !important;
    }

    .hnt-studio-left,
    .hnt-studio-right {
        height: 40px !important;
    }

    .hnt-studio-shell {
        grid-template-rows: minmax(0, 1fr) 40px 40px !important;
    }

    .hnt-studio-track {
        min-height: 40px !important;
    }
}


/* PATCH 767: mobile bottom-bar icon readability */
@media (max-width: 768px) {
    .hnt-mobile-bottom-item svg,
    .hnt-mobile-bottom-item .ph {
        width: 26px !important;
        height: 26px !important;
        font-size: 26px !important;
        line-height: 1 !important;
    }

    .hnt-mobile-bottom-item.active svg,
    .hnt-mobile-bottom-item.active .ph,
    .hnt-mobile-bottom-item[aria-expanded="true"] svg,
    .hnt-mobile-bottom-item[aria-expanded="true"] .ph {
        width: 28px !important;
        height: 28px !important;
        font-size: 28px !important;
    }

    .hnt-mobile-bottom-item span {
        font-size: 11px;
        line-height: 1.1;
    }
}