/* ============================================
   AQUA ROYAL ACADEMY - Style Sheet
   Mobile-first, Discord-inspired
   Brand: Royal Blue + Gold
   ============================================ */

:root {
    /* Brand colors */
    --gold: #c9a961;
    --gold-light: #e0c489;
    --gold-dark: #a88a3f;
    --royal-blue: #1e4d8b;
    --royal-blue-light: #2c6bbf;
    --royal-blue-dark: #143866;

    /* Surfaces (Discord-like dark theme with navy tint) */
    --bg-app: #0a1628;
    --bg-sidebar: #0d1d36;
    --bg-content: #122844;
    --bg-elevated: #1a3458;
    --bg-input: #0a1c33;
    --bg-hover: rgba(201, 169, 97, 0.08);
    --bg-active: rgba(201, 169, 97, 0.18);

    /* Text */
    --text-primary: #e8eef7;
    --text-secondary: #a4b5cc;
    --text-muted: #6a7d96;
    --text-inverse: #0a1628;

    /* Borders */
    --border: rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.12);

    /* Status */
    --success: #43b581;
    --danger: #e0524d;
    --warning: #faa61a;

    /* Sizes */
    --sidebar-w: 280px;
    --members-w: 240px;
    --header-h: 56px;
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;

    /* Shadow */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);

    /* Transitions */
    --t-fast: 0.15s ease;
    --t: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html, body {
    margin: 0;
    padding: 0;
    /* Fill the FULL screen INCLUDING iOS safe-area zones.
       CRITICAL: do NOT use 100dvh/100svh here — in iOS PWA standalone
       those values EXCLUDE the safe-area zone, leaving a visible strip
       below the content. 100vh on iOS Safari IS the largest viewport
       (includes safe area). 100lvh (Large Viewport Height) is the
       same in PWA and explicitly the largest size where supported. */
    height: 100%;
    min-height: 100vh;
    min-height: 100lvh;
    overflow: hidden;
    background: var(--bg-app);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body {
    overscroll-behavior: none;
}

#app {
    width: 100%;
    /* CRITICAL FIX: use 100vh / 100lvh ONLY. Do NOT cascade through
     * 100svh / 100dvh — those EXCLUDE the iOS safe-area zone in PWA
     * standalone mode, which leaves a visible strip at the bottom (the
     * iOS home indicator area shows html/body bg). 100vh in iOS PWA
     * is the LARGEST viewport including safe-area = full screen. */
    height: 100vh;
    height: 100lvh;
    min-height: 100vh;
    min-height: 100lvh;
    display: flex;
    flex-direction: column;
    background: var(--bg-app);
}

.view {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.hidden {
    display: none !important;
}

/* ============================================
   AUTH (LOGIN / REGISTER)
   ============================================ */

.auth-view {
    background:
        radial-gradient(ellipse at top, #1a3458 0%, transparent 50%),
        radial-gradient(ellipse at bottom, #0d1d36 0%, #050d1c 100%);
    overflow-y: auto;
    padding: 24px 20px;
    -webkit-overflow-scrolling: touch;
}

.auth-container {
    max-width: 420px;
    width: 100%;
    margin: auto;
    padding: 32px 24px;
    background: rgba(13, 29, 54, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: fadeUp 0.5s ease;
}

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

.auth-logo {
    text-align: center;
    margin-bottom: 28px;
}

.crown-logo {
    width: 90px;
    height: 90px;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 12px rgba(201, 169, 97, 0.3));
}
/* When an admin uploads a custom brand logo, it lands here and replaces
   the SVG above. Centered, capped at a sensible auth-screen size, with
   the same soft gold glow as the SVG so visual feel stays consistent. */
.auth-brand-logo-slot {
    display: flex;
    justify-content: center;
    align-items: center;
}
.auth-brand-img {
    max-width: 140px;
    max-height: 140px;
    object-fit: contain;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 12px rgba(201, 169, 97, 0.3));
}

.brand-title {
    font-family: 'Cinzel', serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--gold);
    margin: 0;
}

.brand-subtitle {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 8px;
    color: var(--royal-blue-light);
    margin: 4px 0 0;
}

.auth-tabs {
    display: flex;
    background: var(--bg-input);
    padding: 4px;
    border-radius: var(--radius);
    margin-bottom: 24px;
}

.auth-tab {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--t);
}

.auth-tab.active {
    background: linear-gradient(135deg, var(--royal-blue) 0%, var(--royal-blue-light) 100%);
    color: white;
    box-shadow: var(--shadow-sm);
}

.auth-form {
    display: none;
    flex-direction: column;
    gap: 16px;
}

.auth-form.active {
    display: flex;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input,
.form-group select,
.form-group textarea {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
    transition: var(--t-fast);
    width: 100%;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
}

.form-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--gold);
}

.forgot-link, .link-gold {
    color: var(--gold);
    text-decoration: none;
}

.forgot-link:hover, .link-gold:hover {
    text-decoration: underline;
}

.btn-primary {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: var(--bg-app);
    border: none;
    border-radius: var(--radius-sm);
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--t);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(201, 169, 97, 0.4);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-block {
    width: 100%;
}

.btn-ghost {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 11px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--t-fast);
}

.btn-ghost:hover {
    background: var(--bg-hover);
    border-color: var(--gold);
}

.btn-danger {
    background: rgba(224, 82, 77, 0.15);
    color: var(--danger);
    border: 1px solid rgba(224, 82, 77, 0.3);
    border-radius: var(--radius-sm);
    padding: 11px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--t-fast);
}

.btn-danger:hover {
    background: rgba(224, 82, 77, 0.25);
}

.btn-social {
    background: white;
    color: black;
    border: none;
    border-radius: var(--radius-sm);
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.btn-social:hover {
    background: #f0f0f0;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 4px 0;
}

.auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-strong);
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    color: var(--text-muted);
    font-size: 12px;
}

/* ============================================
   MAIN APP LAYOUT
   ============================================ */

.main-view {
    flex-direction: row;
    /* Use 100vh / 100lvh — NOT 100dvh which excludes safe-area zone
     * in iOS PWA and leaves a visible strip at the bottom. */
    height: 100vh;
    height: 100lvh;
    overflow: hidden;
}

.backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    /* Above bottom bars (diary z-index 100) so the backdrop can swallow
     * clicks that would otherwise hit a button under an open sidebar.
     * Below the sidebar itself (10100) so the sidebar stays interactive. */
    z-index: 9000;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t);
}
/* Both class names supported — JS historically used .show, newer code
 * may use .active. Either makes the backdrop visible & clickable. */
.backdrop.show,
.backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================
   SIDEBAR
   ============================================ */

.sidebar {
    width: var(--sidebar-w);
    background: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    position: relative;
    z-index: 60;
    flex-shrink: 0;
}

.server-header {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(30, 77, 139, 0.2) 0%, transparent 100%);
}

/* When admin uploaded a custom logo, .server-header switches to a tight
 * edge-to-edge banner so the logo spans the full sidebar width. */
.server-header.has-custom-logo {
    padding: 0;
    background: transparent;
    border-bottom: 1px solid var(--border);
}
.server-header.has-custom-logo .brand-default-logo,
.server-header.has-custom-logo .brand-default-title {
    display: none !important;
}
.server-header.has-custom-logo .brand-logo-slot {
    width: 100%;
    display: block;
    line-height: 0;     /* kill the inline-element whitespace below img */
}
.server-header.has-custom-logo .brand-logo-slot img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    object-fit: cover;
}

.server-logo {
    width: 44px;
    height: 44px;
    background: var(--bg-app);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
}

.server-logo svg {
    width: 32px;
    height: 28px;
}

.server-title h2 {
    font-family: 'Cinzel', serif;
    font-size: 15px;
    margin: 0;
    color: var(--gold);
    letter-spacing: 2px;
}

.server-title span {
    font-size: 9px;
    letter-spacing: 4px;
    color: var(--royal-blue-light);
}

.search-bar {
    padding: 8px 12px;
    margin: 8px 12px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}

.search-bar input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    flex: 1;
    font-size: 13px;
    outline: none;
}

.search-bar input::placeholder {
    color: var(--text-muted);
}

/* Sidebar shortcut buttons (Saved posts, etc.) — sit between search and channels */
.sidebar-shortcut {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 16px);
    margin: 0 8px 6px;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
    border-radius: 10px;
    color: var(--gold);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: rgba(201, 169, 97, 0.3);
}
.sidebar-shortcut:hover {
    background: color-mix(in srgb, var(--gold) 8%, transparent);
    border-color: color-mix(in srgb, var(--gold) 35%, transparent);
}
.sidebar-shortcut svg {
    flex-shrink: 0;
}

/* Inline composer media preview — uploading state shows spinner card */
.preview-item.preview-uploading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed color-mix(in srgb, var(--gold) 40%, var(--border));
    border-radius: 8px;
    min-height: 84px;
    padding: 10px;
    gap: 6px;
}
.preview-uploading-label {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}

.inline-picker-hint {
    background: rgba(255, 184, 77, 0.08);
    border: 1px solid rgba(255, 184, 77, 0.3);
    color: #ffb84d;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    margin-top: 8px;
}

.ios-video-tip {
    background: rgba(30, 144, 255, 0.10);
    border-left: 3px solid #1e90ff;
    color: var(--text-primary);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
    margin: 8px 0;
}
.ios-video-tip strong { color: #5db1ff; }
.composer-video {
    margin-bottom: 4px;
}

/* Post pending-sync badge — shown next to title while waiting for cloud */
.post-pending-badge {
    display: inline-block;
    background: rgba(255, 184, 77, 0.18);
    color: #ffb84d;
    border: 1px solid rgba(255, 184, 77, 0.45);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    vertical-align: middle;
    margin-left: 6px;
    animation: pendingPulse 1.8s ease-in-out infinite;
}
@keyframes pendingPulse {
    0%, 100% { opacity: 0.65; }
    50%      { opacity: 1; }
}

.channels-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 8px 8px 8px;
    -webkit-overflow-scrolling: touch;
}

.channel-category {
    margin-bottom: 4px;
}

.category-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    user-select: none;
    transition: var(--t-fast);
}

.category-header:hover {
    color: var(--text-primary);
}

.category-header svg {
    transition: transform var(--t);
    flex-shrink: 0;
}

.channel-category.collapsed .category-header svg {
    transform: rotate(-90deg);
}

.channel-category.collapsed .category-channels {
    display: none;
}

/* While searching, force-expand all categories */
.channels-list.searching .channel-category .category-channels {
    display: flex !important;
}
.channels-list.searching .channel-category.collapsed .category-header svg {
    transform: rotate(0deg);
}

.category-channels {
    display: flex;
    flex-direction: column;
}

.category-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: var(--t-fast);
    margin-left: auto;
}

.category-header:hover .category-actions {
    opacity: 1;
}

.channel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--t-fast);
    font-size: 14px;
    user-select: none;
    margin-bottom: 1px;
    text-decoration: none;
}

.channel:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.channel.active {
    background: var(--bg-active);
    color: var(--gold);
    font-weight: 600;
}

.channel .channel-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.channel .channel-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel .badge {
    background: var(--gold);
    color: var(--bg-app);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
}

.channel .unread {
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* "Open admin panel" button in the sidebar — only rendered (display:flex)
 * for admins via JS. Gold gradient call-to-action so admins can jump
 * straight into the office view without going through Settings. */
.sidebar-admin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 10px 12px;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--border));
    border-radius: 10px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 12%, var(--bg-elevated)), var(--bg-elevated));
    color: var(--gold);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease;
}
.sidebar-admin-btn:hover {
    background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 20%, var(--bg-elevated)), color-mix(in srgb, var(--gold) 6%, var(--bg-elevated)));
    border-color: var(--gold);
    transform: translateY(-1px);
}
.sidebar-admin-btn:active { transform: translateY(0); }
.sidebar-admin-btn svg { flex-shrink: 0; }

.user-bar {
    /* Compact (~30% shorter) — smaller padding + smaller avatar so the
     * sidebar's settings row takes less vertical space. */
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--border);
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--royal-blue) 0%, var(--gold) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    color: white;
    flex-shrink: 0;
    border: 2px solid var(--bg-elevated);
    position: relative;
}

.user-avatar::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background: var(--success);
    border-radius: 50%;
    border: 2px solid var(--bg-elevated);
}

.user-info {
    flex: 1;
    overflow: hidden;
}

.user-name {
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-status {
    font-size: 9.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.status-dot {
    width: 6px;
    height: 6px;
    background: var(--success);
    border-radius: 50%;
}

/* ============================================
   MAIN CONTENT
   ============================================ */

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-content);
    min-width: 0;
    overflow: hidden;
}

.content-header {
    height: var(--header-h);
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-content);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.icon-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--t-fast);
}

.icon-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.channel-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.channel-prefix {
    color: var(--text-muted);
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
}

.channel-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel-divider {
    width: 1px;
    height: 20px;
    background: var(--border-strong);
}

.channel-topic {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-actions {
    display: flex;
    gap: 4px;
}

.view-container {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.content-view {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
}

.content-view.active {
    display: flex;
}

/* Belt-and-braces: any view without .active is hidden no matter what other
   CSS later in the file tries to do. */
.content-view:not(.active) {
    display: none !important;
    visibility: hidden;
}

/* ============================================
   CHAT
   ============================================ */

.messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.message {
    display: flex;
    gap: 12px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    transition: var(--t-fast);
    animation: msgIn 0.3s ease;
}

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

.message:hover {
    background: var(--bg-hover);
}

.message-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--royal-blue) 0%, var(--royal-blue-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

.message-avatar.coach {
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);
    color: var(--bg-app);
}

.message-content {
    flex: 1;
    min-width: 0;
}

.message-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.message-author {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
}

.message-author.coach {
    color: var(--gold);
}

.message-author.coach::after {
    content: 'TRÉNER';
    font-size: 9px;
    background: var(--gold);
    color: var(--bg-app);
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 6px;
    letter-spacing: 0.5px;
}

.message-time {
    font-size: 11px;
    color: var(--text-muted);
}

.message-text {
    color: var(--text-primary);
    word-wrap: break-word;
    font-size: 14.5px;
    line-height: 1.5;
}

.message-attachment {
    margin-top: 8px;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    padding: 10px;
    border: 1px solid var(--border);
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: var(--t-fast);
}

.message-attachment:hover {
    border-color: var(--gold);
}

.message-attachment.video {
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--royal-blue-dark) 100%);
}

.attachment-icon {
    width: 40px;
    height: 40px;
    background: var(--gold);
    color: var(--bg-app);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.attachment-info {
    min-width: 0;
}

.attachment-name {
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.day-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.day-divider::before, .day-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* "New messages" divider — appears above the first unread when entering a chat */
.new-msgs-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 10px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.new-msgs-divider span {
    background: color-mix(in srgb, var(--gold) 12%, transparent);
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}
.new-msgs-divider::before, .new-msgs-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--gold) 30%, transparent);
}

.message-input-wrap {
    padding: 12px 16px 16px;
    flex-shrink: 0;
}

.message-input {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px 4px 4px 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    min-width: 0;
    box-sizing: border-box;
    width: 100%;
    transition: var(--t-fast);
}

.message-input:focus-within {
    border-color: var(--gold);
}

.message-input input,
.message-input textarea {
    flex: 1;
    min-width: 0;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 16px;       /* iOS won't zoom on focus when >=16px */
    outline: none;
    padding: 10px 0;
    font-family: inherit;
    resize: none;          /* textarea: user can't drag-resize */
    line-height: 1.4;
    min-height: 24px;
    max-height: 120px;     /* ≈ 5 lines */
    overflow-y: auto;
}

/* iPhone 16 / narrow widths — tighten composer so send button stays inside the bar */
@media (max-width: 420px) {
    .message-input {
        padding: 3px 3px 3px 10px;
        gap: 2px;
    }
    .message-input .icon-btn {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
    }
    .send-btn {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0;
    }
    .message-input-wrap {
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
    }
}

.message-input input::placeholder {
    color: var(--text-muted);
}

.send-btn {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    border: none;
    color: var(--bg-app);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--t);
    flex-shrink: 0;
    align-self: center; /* keep it vertically centered with the input row */
    box-shadow: 0 2px 8px rgba(201, 169, 97, 0.25);
}
.send-btn svg {
    margin-left: -2px; /* visually center the paper-plane icon */
}

.send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 12px rgba(201, 169, 97, 0.4);
}
.send-btn:active {
    transform: scale(0.95);
}

/* ============================================
   HOME / DASHBOARD
   ============================================ */

.welcome-hero {
    margin: 16px 16px 0;
    height: 160px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(10, 22, 40, 0.85) 0%, rgba(30, 77, 139, 0.65) 100%),
        radial-gradient(circle at 70% 30%, var(--royal-blue-light) 0%, transparent 60%);
}

.hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(201, 169, 97, 0.2) 0%, transparent 30%),
        radial-gradient(circle at 80% 20%, rgba(30, 107, 191, 0.3) 0%, transparent 40%);
}

.hero-content {
    position: relative;
    height: 100%;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-content h2 {
    font-family: 'Cinzel', serif;
    font-size: 24px;
    margin: 0 0 6px;
    color: white;
}

.gold-text {
    color: var(--gold);
}

.hero-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.dashboard-grid {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
}

.dashboard-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    cursor: pointer;
    transition: var(--t);
}

.dashboard-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
}

.dashboard-card .card-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.dashboard-card h3 {
    margin: 0 0 4px;
    font-size: 15px;
    color: var(--text-primary);
}

.dashboard-card p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.dashboard-card .card-meta {
    margin-top: 10px;
    font-size: 11px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

/* ============================================
   TRAINING / CONTENT FEED
   ============================================ */

.content-feed {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
}

.content-post {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    animation: msgIn 0.4s ease;
}

.post-header {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border);
}

.post-author-info {
    flex: 1;
}

.post-author {
    font-weight: 600;
    font-size: 13px;
}

.post-time {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Single-row post header: avatar | name | (pin pill) | spacer | save | time | menu */
.post-head-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    flex-wrap: nowrap;
}
.post-head-row .msg-avatar { flex-shrink: 0; }
.post-head-row .post-author {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.post-head-spacer { flex: 1; }
.post-save-btn {
    color: var(--text-muted);
    transition: color 0.15s, transform 0.1s;
}
.post-save-btn.is-saved {
    color: var(--gold);
}
.post-save-btn:hover { color: var(--gold); transform: scale(1.1); }

.pinned-pill {
    background: rgba(255, 184, 77, 0.18);
    color: #ffb84d;
    border: 1px solid rgba(255, 184, 77, 0.4);
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.training-post.is-pinned {
    border: 1px solid rgba(255, 184, 77, 0.35);
    background: linear-gradient(180deg, rgba(255, 184, 77, 0.04) 0%, transparent 80%);
}

@media (max-width: 480px) {
    .post-head-row .post-author { max-width: 100px; font-size: 13px; }
    .pinned-pill { font-size: 9px; padding: 2px 6px; }
    .post-head-row { gap: 6px; padding: 8px 10px; }
}

.post-thumb {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, var(--royal-blue-dark), var(--royal-blue));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.post-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.4) 100%);
}

.play-btn {
    width: 60px;
    height: 60px;
    background: rgba(201, 169, 97, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-app);
    z-index: 1;
    transition: var(--t);
    border: none;
    cursor: pointer;
}

.play-btn:hover {
    transform: scale(1.1);
}

.inline-composer {
    background: var(--bg-card, #16243a);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.composer-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.composer-author {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 14px;
}

.composer-hint {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 12px;
}

.composer-title,
.composer-body,
.composer-video {
    width: 100%;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.composer-title {
    font-weight: 600;
    font-size: 15px;
}

.composer-body {
    resize: vertical;
    min-height: 70px;
    line-height: 1.4;
}

.composer-title:focus,
.composer-body:focus,
.composer-video:focus {
    outline: none;
    border-color: var(--gold);
}

.composer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.composer-actions .btn-primary {
    margin-left: auto;
}

@media (max-width: 480px) {
    .inline-composer {
        padding: 10px;
        margin-bottom: 12px;
    }
    .composer-actions {
        gap: 8px;
    }
    .composer-actions .btn-primary {
        flex: 1;
    }
    .file-upload-btn {
        flex: 1;
        justify-content: center;
    }
}

.file-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-active);
    color: var(--gold);
    border: 1px dashed var(--gold);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: var(--t-fast);
    user-select: none;
}

.file-upload-btn:hover {
    background: var(--bg-hover);
}

.post-files-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.post-files-preview .preview-item {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #000;
    border: 1px solid var(--border);
}

.post-files-preview .preview-item img,
.post-files-preview .preview-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.post-files-preview .preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.post-media {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    background: transparent;     /* no black backdrop — photos look natural */
}

.post-media.cols-2 { grid-template-columns: 1fr 1fr; }
.post-media.cols-2 .post-media-item { aspect-ratio: 1 / 1; }

.post-media-item {
    position: relative;
    width: 100%;
    background: transparent;
    overflow: hidden;
    border-radius: 8px;
}

/* SINGLE-image / single-video case: let the natural aspect ratio dictate
 * size — no letterboxing. The image is centered horizontally and capped
 * at 70vh tall so it doesn't dominate the feed. */
.post-media-item img,
.post-media-img,
.post-media-video {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 70vh;
    margin: 0 auto;
    background: transparent;
    border-radius: 8px;
}

@media (max-width: 600px) {
    .post-media-img,
    .post-media-video {
        max-height: 60vh;
        max-width: 100%;
    }
}

.post-media-item video {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 70vh;
    margin: 0 auto;
    background: transparent;
    border-radius: 8px;
}

/* MULTI-image grid (cols-2 etc.) keeps Instagram-style 1:1 tiles via
 * cover-fit. Crops slightly but no gaps. */
.post-media.cols-2 .post-media-item img,
.post-media.cols-2 .post-media-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
}

.post-video {
    width: 100%;
    background: #000;
}

.post-video .video-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.post-video .video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Inline action chips inside payment-abandoned notification rows */
.notif-row-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.notif-row.is-abandon {
    background: color-mix(in srgb, var(--warning, #faa61a) 8%, transparent);
    border-left: 3px solid var(--warning, #faa61a);
}
.notif-row .btn-mini.btn-warn {
    background: color-mix(in srgb, var(--danger, #e0524d) 20%, transparent);
    color: var(--danger, #e0524d);
    border: 1px solid color-mix(in srgb, var(--danger, #e0524d) 35%, transparent);
}
.notif-row .btn-mini.btn-warn:hover {
    background: color-mix(in srgb, var(--danger, #e0524d) 28%, transparent);
}

/* Tiny gold CTA chip — used for "🪙 Buy credits" in the notification panel
   head. Sits next to "Mark all read" and the close button. */
.btn-mini.btn-gold {
    background: linear-gradient(135deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 70%, #000) 100%);
    color: #0a1628;
    font-weight: 700;
    border: 0;
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(201, 169, 97, 0.3);
    transition: transform 0.1s, box-shadow 0.15s;
}
.btn-mini.btn-gold:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(201, 169, 97, 0.4);
}

/* Bulk-action bar in Payments — shows when admin ticks 1+ invoice rows.
   Floats above the table so it stays visible while scrolling rows. */
.pay-bulk-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 10px 0;
    background: linear-gradient(135deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 80%, #000) 100%);
    color: #0a1628;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(201, 169, 97, 0.3);
}
.pay-bulk-bar.hidden { display: none; }
.pay-bulk-bar #pay-bulk-count {
    font-size: 18px;
    background: rgba(0, 0, 0, 0.15);
    padding: 2px 10px;
    border-radius: 999px;
}
.pay-check-col {
    width: 36px;
    text-align: center;
}
.pay-check-col input[type=checkbox] {
    cursor: pointer;
    width: 18px;
    height: 18px;
    margin: 0;
}

/* LITE YOUTUBE — thumbnail + play button before iframe loads.
   Avoids hundreds of iframes spawning in a long feed which freezes
   iOS Safari (audio plays but video frame stays static). */
.yt-lite {
    cursor: pointer;
    background: #000;
}
.yt-lite .yt-lite-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}
.yt-lite .yt-lite-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0.95;
    transition: opacity 0.15s, transform 0.2s;
    z-index: 2;
}
.yt-lite .yt-lite-play:hover {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
}
.yt-lite.is-playing .yt-lite-thumb,
.yt-lite.is-playing .yt-lite-play {
    display: none;
}

/* YouTube Shorts variant — render in 9:16 portrait (Reels-style).
   Uses padding-bottom trick (not aspect-ratio) for max iOS Safari
   compatibility; aspect-ratio occasionally froze iframe paints on
   older WebKit. Capped at 380px wide and centered. */
.post-video.is-shorts {
    background: transparent;
    text-align: center;
}
.post-video .video-embed-shorts {
    position: relative;
    width: 100%;
    max-width: 380px;
    height: 0;
    padding-bottom: 177.78%; /* 16/9 inverse = 9:16 */
    margin: 0 auto;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.post-video .video-embed-shorts iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
@media (min-width: 768px) {
    .post-video .video-embed-shorts { max-width: 340px; }
}

.post-video video {
    display: block;
    width: 100%;
    max-height: 70vh;
    background: #000;
}

.post-video .video-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-active);
    color: var(--gold);
    text-decoration: none;
    font-weight: 600;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transition: var(--t-fast);
}

.post-video .video-link:hover {
    background: var(--bg-hover);
}

.post-video .video-link-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--bg-app);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.post-video .video-link-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.post-body {
    padding: 16px;
    /* Preserve line breaks and paragraphs the author typed in the composer.
     * Without pre-wrap, browsers collapse \n into single spaces and the
     * carefully-formatted post becomes one wall of text. */
    white-space: pre-wrap;
    word-wrap: break-word;
}

.post-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--text-primary);
}

.post-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.post-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.post-tag {
    font-size: 11px;
    background: var(--bg-active);
    color: var(--gold);
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.post-actions {
    padding: 6px 10px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
}

/* Compact single-row variant: emoji-only actions, comments first */
.post-actions-compact {
    padding: 4px 8px;
    gap: 2px;
    overflow: hidden;
}
.post-actions-compact .post-action {
    padding: 6px 10px;
    font-size: 18px;
    gap: 4px;
    min-height: 36px;
    line-height: 1;
}
.post-actions-compact .pa-ico {
    font-size: 18px;
    line-height: 1;
}
.post-actions-compact .pa-count {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

.post-action {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    transition: var(--t-fast);
    white-space: nowrap;
}

.post-action:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.post-action.active {
    color: var(--gold);
}

.post-action.is-liked {
    color: #e0524d;
    font-weight: 600;
}

.post-action.is-saved {
    color: var(--gold);
    font-weight: 600;
}

/* === CHALLENGE BANNER inside the calendar (high-priority featured item) === */
.challenge-banner-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.challenge-banner {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, var(--bg-card)) 0%, var(--bg-card) 100%);
    border: 1.5px solid var(--c);
    border-radius: 14px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--c) 28%, transparent);
    position: relative;
    overflow: hidden;
}
.challenge-banner::before {
    content: '★';
    position: absolute;
    top: -6px;
    right: 14px;
    font-size: 30px;
    color: var(--c);
    opacity: 0.5;
}
.challenge-banner-icon {
    font-size: 38px;
    line-height: 1;
    flex-shrink: 0;
}
.challenge-banner-body {
    flex: 1;
    min-width: 0;
}
.challenge-banner-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--c);
    margin-bottom: 4px;
}
.challenge-banner-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.challenge-banner-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.challenge-banner-desc {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.challenge-banner-open {
    flex-shrink: 0;
    border: 1px solid var(--c);
    color: var(--c);
    font-weight: 600;
}

/* === INBOX BADGE on the hamburger menu (mobile + top-left desktop indicator) === */
#menu-toggle {
    position: relative;
}
.inbox-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--danger, #e0524d);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-app, #0a1628);
    pointer-events: none;
    line-height: 1;
}
.inbox-badge.hidden { display: none; }
/* Show inbox badge on desktop too — many users keep sidebar collapsed */
@media (min-width: 769px) {
    #menu-toggle {
        display: inline-flex;
    }
    #menu-toggle:not(.mobile-only-strict) {
        /* keep visible on desktop so badge has an anchor */
    }
}

/* === ADMIN PAGE (was modal, now a content-view) === */
#admin-view {
    overflow-y: auto;
    padding: 0;
}
.admin-page-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 22px 80px;
}
#admin-view .admin-tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg-app);
    margin: -18px -22px 14px;
    padding: 14px 22px 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    overflow-x: auto;
}
#admin-view .admin-tab {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--t-fast);
    white-space: nowrap;
}
#admin-view .admin-tab:hover { color: var(--text-primary); }
#admin-view .admin-tab.active {
    background: var(--bg-active);
    color: var(--gold);
    border-color: var(--gold);
}
#admin-view .admin-pane { display: none; }
#admin-view .admin-pane.active { display: block; }

/* === ADMIN REPORTS === */
.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.report-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
}
.report-icon {
    font-size: 22px;
    margin-bottom: 6px;
}
.report-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 6px;
}
.report-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Cinzel', serif;
}
.report-sub {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}
.report-section {
    margin-top: 22px;
}
.report-section h3 {
    font-size: 14px;
    margin: 0 0 10px;
    color: var(--gold);
}
.report-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.report-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.report-rank {
    color: var(--gold);
    font-weight: 700;
    font-family: 'Cinzel', serif;
    min-width: 32px;
}
.report-name {
    flex: 1;
    color: var(--text-primary);
}
.report-num {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
}

/* === ADMIN SETTINGS: LOGO UPLOAD === */
.logo-upload-row {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
}
.logo-preview {
    width: 220px;
    height: 80px;
    background: var(--bg-input);
    border: 1px dashed var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.logo-upload-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Custom logo display in sidebar — hide the default crown SVG when a logo is set */
.brand-logo-slot:not(:empty) ~ .brand-default-logo,
.brand-logo-slot:not(:empty) ~ .brand-default-title {
    display: none;
}

/* === TRAINING DETAIL OVERLAY (layered over calendar) === */
.training-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    /* Above EVERYTHING — bumped to 100k with !important so it can't be
     * outranked by per-view fixed bars / sidebars / global search / the
     * calendar modal (which is 11000). User reported the detail still
     * opened behind the trainings list at 12000, so we go absolute-max. */
    z-index: 100000 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: tdOverlayIn 0.18s ease-out;
    /* Defensive: own stacking context so children render above siblings */
    isolation: isolate;
}
@keyframes tdOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.training-detail-card {
    background: var(--bg-elevated, #142440);
    border: 1px solid var(--border);
    border-radius: 14px;
    max-width: 540px;
    width: 100%;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.training-detail-card .modal-header {
    flex-shrink: 0;
    /* Push header below iOS notch / Android status bar */
    padding-top: max(14px, env(safe-area-inset-top));
    position: sticky;
    top: 0;
    background: var(--bg-elevated, #142440);
    z-index: 5;
    /* Larger row so the X has more breathing room */
    min-height: 56px;
    align-items: center;
}
.training-detail-card .modal-body {
    overflow-y: auto;
    flex: 1;
}
/* Big, easy-to-tap close button — 48x48 hits Apple HIG / Material guidelines.
 * z-index keeps it on top of any sticky header content. */
#td-overlay-close {
    width: 48px;
    height: 48px;
    min-width: 48px;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 10;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(201, 169, 97, 0.3);
}
#td-overlay-close:hover,
#td-overlay-close:active {
    background: rgba(255, 255, 255, 0.14);
}
@media (max-width: 600px) {
    .training-detail-overlay { padding: 0; }
    .training-detail-card {
        max-width: 100%;
        width: 100%;
        height: 100vh;
        height: 100lvh;     /* fills full screen incl. safe-area */
        max-height: none;
        border-radius: 0;
        border: 0;
    }
    .training-detail-card .modal-header {
        /* On phones add an extra cushion so the X clears the status bar even
         * when env(safe-area-inset-top) reports 0 (e.g. PWA in standalone mode
         * without notch detection). */
        padding-top: max(20px, env(safe-area-inset-top));
        padding-bottom: 12px;
    }
    #td-overlay-close {
        width: 52px;
        height: 52px;
        min-width: 52px;
        font-size: 26px;
    }
}

.comments-box {
    display: none;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.15);
    padding: 10px 12px;
}

.comments-box.open {
    display: block;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.comments-list:empty {
    margin-bottom: 0;
}

.comment {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.comment-avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
    flex-shrink: 0;
}

.comment-body {
    flex: 1;
    background: var(--bg-app);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    min-width: 0;
}

.comment-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.comment-author {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.comment-time {
    font-size: 11px;
    color: var(--text-muted);
}

.comment-text {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.4;
    word-wrap: break-word;
    /* Preserve enter-key line breaks the author typed in the comment input. */
    white-space: pre-wrap;
}

/* Channel + DM message bubbles — keep paragraphs / line breaks as typed.
 * Without pre-wrap the browser collapses every \n into a single space and
 * a carefully-formatted message becomes one wall of text. */
.msg-text {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.comment-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.comment-input {
    flex: 1;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.comment-input:focus {
    outline: none;
    border-color: var(--gold);
}

.comment-send {
    padding: 8px 14px;
    font-size: 13px;
    flex-shrink: 0;
}

.comment-del-btn {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

.comment-del-btn:hover {
    color: var(--danger, #e0524d);
    background: rgba(224, 82, 77, 0.1);
}

/* === MESSAGE / POST MENU === */
.msg-menu {
    position: relative;
    margin-left: auto;
}

.msg-menu-btn {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    padding: 2px 8px;
    border-radius: 4px;
    line-height: 1;
}

.msg-menu-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.msg-menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-card, #16243a);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 16px rgba(0,0,0,0.5);
    padding: 4px;
    z-index: 100;
    min-width: 120px;
}

.msg-menu-dropdown.open {
    display: block;
}

.msg-menu-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    color: var(--text-primary);
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
}

.msg-menu-dropdown button:hover {
    background: var(--bg-hover);
}

.msg-menu-dropdown button[data-act^="delete"]:hover {
    color: var(--danger, #e0524d);
    background: rgba(224, 82, 77, 0.1);
}

/* === REACTIONS === */
.reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.reaction-pill {
    background: var(--bg-app);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
    transition: var(--t-fast);
}

.reaction-pill:hover {
    border-color: var(--gold);
}

.reaction-pill.mine {
    background: rgba(201, 169, 97, 0.15);
    border-color: var(--gold);
    color: var(--gold);
}

.msg-react-btn {
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 6px;
    margin-left: 4px;
    opacity: 0.5;
    transition: var(--t-fast);
}

.message:hover .msg-react-btn {
    opacity: 1;
}

.reaction-picker {
    position: absolute;
    background: var(--bg-card, #16243a);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px;
    display: flex;
    gap: 4px;
    z-index: 200;
    box-shadow: 0 6px 16px rgba(0,0,0,0.5);
}

.reaction-picker button {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 22px;
    padding: 4px 6px;
    border-radius: 4px;
}

.reaction-picker button:hover {
    background: var(--bg-hover);
}

/* === MSG EDIT === */
.msg-edit-input,
.edit-input,
.edit-textarea {
    width: 100%;
    background: var(--bg-app);
    border: 1px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.edit-textarea { resize: vertical; min-height: 80px; }

.msg-edit-actions,
.edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.msg-edit-actions button,
.edit-actions button {
    padding: 6px 14px;
    font-size: 13px;
}

.clickable-user {
    cursor: pointer;
}

.clickable-user:hover {
    text-decoration: underline;
}

/* === PROFILE MODAL === */
.profile-card {
    text-align: center;
    padding: 20px 0;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
}

.profile-card h3 {
    margin: 0 0 4px;
    font-size: 22px;
}

.profile-role {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 14px;
}

.profile-bio {
    color: var(--text-primary);
    font-size: 14px;
    margin: 14px 16px;
    padding: 12px;
    background: var(--bg-app);
    border-radius: var(--radius-sm);
    text-align: left;
}

.profile-bio-empty {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
}

.profile-stats {
    display: flex;
    justify-content: space-around;
    margin: 18px 0;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.profile-stats div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-stats strong {
    font-size: 22px;
    color: var(--gold);
}

.profile-stats span {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-plan {
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

/* === SAVED LIST === */
.saved-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.saved-item {
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    cursor: pointer;
    transition: var(--t-fast);
}

.saved-item:hover {
    border-color: var(--gold);
}

.saved-meta {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.saved-channel {
    color: var(--gold);
    font-weight: 600;
}

.saved-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.saved-body {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.saved-meta {
    align-items: center;
}
.saved-note-btn,
.saved-unsave-btn {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: var(--t-fast);
}
.saved-note-btn { margin-left: auto; }
.saved-unsave-btn:hover { color: #ff6b6b; background: rgba(255,107,107,0.10); }
.saved-note-btn:hover { color: var(--gold); background: rgba(201,169,97,0.10); }
.saved-note {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(201, 169, 97, 0.08);
    border-left: 3px solid var(--gold);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    font-style: italic;
}

/* Brief gold flash when scrolling to a specific post from the Saved list */
.training-post.post-flash {
    animation: postFlash 1.4s ease-out;
}
@keyframes postFlash {
    0%   { box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.55); }
    100% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0); }
}

/* === MESSAGE SEARCH BAR === */
.msg-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-card, #16243a);
    border-bottom: 1px solid var(--border);
}

.msg-search-bar.hidden {
    display: none;
}

.msg-search-bar input {
    flex: 1;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    color: var(--text-primary);
    font-size: 14px;
    box-sizing: border-box;
}

.msg-search-bar input:focus {
    outline: none;
    border-color: var(--gold);
}

/* === CHAT ATTACH PREVIEW === */
.chat-attach-preview {
    padding: 8px 12px 0;
}

.chat-attach-preview:empty {
    padding: 0;
}

.message a {
    color: var(--gold);
    text-decoration: underline;
}

.comment-text a {
    color: var(--gold);
    text-decoration: underline;
}

/* === CALENDAR / TRAININGS === */
.credits-pill {
    background: var(--gold);
    color: var(--bg-app);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    padding: 1px 6px;
    margin-left: 6px;
    line-height: 1;
}
.credits-pill.hidden { display: none; }

.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.credits-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;          /* let buttons drop to next row instead of squeezing label */
}

.credits-summary-label {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;       /* never break "Your credits" into multiple lines */
    flex-shrink: 0;
}

.credits-summary-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--gold);
    white-space: nowrap;       /* keep "16" on one line, never stack digits */
    flex-shrink: 0;
    line-height: 1;
}

.cal-admin-actions.hidden { display: none; }

.calendar-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    overflow-x: auto;          /* allow horizontal scroll if all 4 tabs don't fit */
    scrollbar-width: none;
}
.calendar-tabs::-webkit-scrollbar { display: none; }
.calendar-tabs .diary-tab {
    white-space: nowrap;       /* keep "Upcoming" / "My signups" on one line */
    flex-shrink: 0;
}

/* Mobile-specific tightening — phones < 480px wide */
@media (max-width: 480px) {
    .credits-summary {
        gap: 8px;
    }
    .credits-summary-label {
        font-size: 11px;
    }
    .credits-summary-value {
        font-size: 22px;
    }
    .credits-summary .btn-ghost {
        font-size: 12px;
        padding: 6px 10px;
        white-space: nowrap;
    }
    .calendar-tabs {
        gap: 4px;
    }
    .calendar-tabs .diary-tab {
        font-size: 13px;
        padding: 8px 10px;
    }
}

.calendar-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Compact stacked layout — date+time, title+tag, coach+location,
 * credits+spots, sign-up button. Replaces the 3-column flex layout. */
.training-card.training-card-v2 {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: var(--bg-card, var(--bg-elevated));
    border: 1px solid var(--border);
    border-radius: 12px;
    border-left: 4px solid var(--gold);
}
.training-card-v2 .tc-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
}
.training-card-v2 .tc-row-datetime {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    justify-content: flex-start;
}
.training-card-v2 .tc-row-datetime .tr-edit-btn {
    margin-left: auto;
}
.training-card-v2 .tc-row-title {
    align-items: center;
    gap: 8px;
}
.training-card-v2 .tc-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
.training-card-v2 .tc-row-where {
    font-size: 13px;
    color: var(--text-secondary);
}
.training-card-v2 .tc-row-stats {
    font-size: 13px;
    color: var(--text-secondary);
}
.training-card-v2 .tc-row-stats .tc-credits,
.training-card-v2 .tc-row-stats .tc-spots,
.training-card-v2 .tc-row-stats .tc-wait {
    background: rgba(255,255,255,0.04);
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
}
.training-card-v2 .tc-row-action {
    margin-top: 6px;
    justify-content: flex-end;
}
.training-card-v2 .tc-row-action button {
    width: 100%;
    max-width: 280px;
}
@media (max-width: 600px) {
    .training-card-v2 .tc-row-action button { max-width: none; }
}

.training-card {
    display: flex;
    gap: 14px;
    padding: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 4%, var(--bg-app)) 0%, var(--bg-app) 100%);
    border: 1px solid var(--border);
    border-left: 4px solid var(--gold);  /* thick colored left edge — overridden per type */
    border-radius: 14px;
    align-items: center;
    margin-bottom: 10px;
    transition: border-color 0.2s, transform 0.15s;
    position: relative;
}
.training-card:hover {
    border-color: color-mix(in srgb, var(--gold) 40%, var(--border));
}

.training-card.cancelled {
    opacity: 0.55;
}

/* === Color-coded training types ===
 * Each type gets its own left-edge color, type badge tint, and subtle
 * background gradient so members can scan their week at a glance. */
.training-card[data-tr-type="pool"] {
    border-left-color: #1e90ff;
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.07) 0%, var(--bg-app) 60%);
}
.training-card[data-tr-type="dryland"] {
    border-left-color: #e0524d;
    background: linear-gradient(135deg, rgba(224, 82, 77, 0.07) 0%, var(--bg-app) 60%);
}
.training-card[data-tr-type="recovery"] {
    border-left-color: #43b581;
    background: linear-gradient(135deg, rgba(67, 181, 129, 0.07) 0%, var(--bg-app) 60%);
}
.training-card[data-tr-type="individual"] {
    border-left-color: #c084fc;
    background: linear-gradient(135deg, rgba(192, 132, 252, 0.08) 0%, var(--bg-app) 60%);
}

/* Small inline type chip shown next to the title */
.training-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 6px;
}
.training-type-chip[data-tr-type="pool"] {
    background: rgba(30, 144, 255, 0.18); color: #5db1ff;
}
.training-type-chip[data-tr-type="dryland"] {
    background: rgba(224, 82, 77, 0.18); color: #ff8480;
}
.training-type-chip[data-tr-type="recovery"] {
    background: rgba(67, 181, 129, 0.18); color: #6dd7a3;
}
.training-type-chip[data-tr-type="individual"] {
    background: rgba(192, 132, 252, 0.2); color: #d6acff;
}

.training-when {
    flex-shrink: 0;
    text-align: center;
    background: var(--bg-card, #16243a);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    min-width: 90px;
}

.training-date {
    font-weight: 700;
    color: var(--gold);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.training-time {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.training-main {
    flex: 1;
    min-width: 0;
}

.training-main h4 {
    margin: 0 0 4px;
    font-size: 15px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.training-meta {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    font-size: 12.5px;
    color: var(--text-secondary);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    /* Hide scrollbar but allow horizontal flow */
    scrollbar-width: none;
}
.training-meta::-webkit-scrollbar { display: none; }
.training-meta > span {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 2px 8px;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: 999px;
    line-height: 1.5;
}

.training-desc {
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.training-action {
    flex-shrink: 0;
    position: relative;
    z-index: 2;     /* above any sibling — prevents accidental overlay by chip / pseudo */
}

.training-action button {
    padding: 10px 16px;
    font-size: 13px;
    min-height: 40px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(201, 169, 97, 0.3);
}

@media (max-width: 600px) {
    .training-card {
        flex-direction: column;
        align-items: stretch;
    }
    .training-when { text-align: left; }
    .training-action button {
        width: 100%;
        min-height: 48px;     /* Apple HIG minimum touch target */
        font-size: 15px;
        padding: 12px 16px;
    }
}

.signup-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.signup-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: var(--bg-app);
    border-radius: var(--radius-sm);
}

.training-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 14px;
}

.office-trainings-list .office-table {
    margin-top: 10px;
}

.external-tag {
    background: rgba(155, 89, 182, 0.15);
    color: #b07ad6;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 6px;
    letter-spacing: 0.5px;
}

/* Force LTR on inputs (fix RTL bug) */
input, textarea, select {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}

/* === MEMBERSHIP CAROUSEL === */
.membership-carousel-wrap {
    position: relative;
    margin: 0 -16px;
    padding-bottom: 14px;
}
.membership-carousel {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 18px 5%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    perspective: 1200px;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    will-change: scroll-position;
}
.membership-carousel::-webkit-scrollbar { display: none; }

/* (legacy carousel CSS — disabled, replaced by the newer block lower in this file) */
.mc-card--legacy-disabled {
    /* placeholder */
}
.mc-card.is-current {
    border-color: var(--plan-color);
}
.mc-tier {
    color: var(--plan-color);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 2px;
}
.mc-trial { margin-bottom: 8px; }
.mc-perks { margin: 8px auto 10px; padding: 8px 10px; }
.mc-perk { font-size: 12px; }
.mc-action { margin-top: 6px; }
.mc-features { margin: 8px 0; }
.mc-popular {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--plan-color);
    color: var(--bg-app);
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 10px;
    letter-spacing: 0.5px;
}

/* Red diagonal ribbon in top-right corner for FREE plan */
.mc-ribbon-free {
    position: absolute;
    top: 14px;
    right: -34px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, #e53935, #b71c1c);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 4px 40px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 10;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.mc-card.is-free .mc-tier { display: none; } /* tier label not needed when ribbon present */
.mc-current-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(67, 181, 129, 0.15);
    color: #43b581;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 10px;
    letter-spacing: 0.5px;
}
.mc-card h3 {
    margin: 4px 0 2px;
    font-size: 17px;
    color: var(--plan-color);
}
.mc-price {
    font-size: 26px;
    font-weight: 800;
    margin: 4px 0 2px;
    color: var(--text-primary);
}
.mc-price span {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
    margin-left: 4px;
}
.mc-trial {
    color: var(--gold);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
}

.mc-perks {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px auto 14px;
    padding: 10px 12px;
    background: rgba(201, 169, 97, 0.08);
    border: 1px solid rgba(201, 169, 97, 0.3);
    border-radius: 10px;
    max-width: 280px;
}
.mc-perk {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
    text-align: left;
}
.mc-perk strong {
    color: var(--plan-color, var(--gold));
}
.mc-perk-icon {
    font-size: 16px;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
}
.mc-features {
    list-style: none;
    padding: 0 4px 0 0;
    margin: 12px 0;
    text-align: left;
    font-size: 13px;
    color: var(--text-secondary);
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--gold) transparent;
}
.mc-features::-webkit-scrollbar { width: 6px; }
.mc-features::-webkit-scrollbar-track { background: transparent; }
.mc-features::-webkit-scrollbar-thumb { background: rgba(201, 169, 97, 0.4); border-radius: 3px; }
.mc-features::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.mc-features li {
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.mc-features li:last-child { border-bottom: 0; }
.mc-feature-clickable {
    cursor: pointer;
    color: var(--text-primary);
    transition: color 0.15s;
}
.mc-feature-clickable:hover {
    color: var(--gold);
}
.info-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(201, 169, 97, 0.18);
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.feature-popup-icon {
    font-size: 36px;
    text-align: center;
    margin-bottom: 12px;
}
#feature-popup-desc {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 16px;
}

/* === Keypad — moved to body, very high z-index, always above bottom bar ===
   NOTE: previously had padding-bottom: 90px which made the visible button
   area NOT match the actual touch area on iOS (touches landed ~0.5cm above
   the finger). Now we keep clean padding so touch coords match visual. */
.diary-keypad {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.55);
    z-index: 99999 !important;
}
@media (min-width: 769px) {
    .diary-keypad {
        left: auto !important;
        right: 24px !important;
        bottom: 24px !important;
        max-width: 380px;
        border-radius: 18px;
    }
}
.diary-bottom-bar { z-index: 100; }
/* Hide bottom bar when sidebar or members panel is open from diary */
/* While the sidebar is open on mobile, slide content-area bottom bars
 * OFF-SCREEN (diary / calendar / chat input) so they don't sit on top of
 * the sidebar's own bottom (the user-bar with the Settings cog).
 *
 * IMPORTANT: .user-bar is INSIDE the sidebar — never hide it here. The
 * user-bar IS the sidebar's bottom row containing the avatar + Settings
 * cog, which is the exact thing the user expects to see. */
body.has-sidebar-open .diary-bottom-bar,
body.has-sidebar-open .calendar-bottom-bar,
body.has-sidebar-open .message-input-wrap,
body.has-sidebar-open .diary-keypad,
body.has-members-open .diary-bottom-bar,
body.has-members-open .diary-keypad {
    transform: translateY(110%);
    transition: transform 0.25s ease;
    pointer-events: none;
}

/* === MOBILE HEADER: hide prefix icon + topic — keep just title === */
@media (max-width: 768px) {
    #channel-prefix { display: none; }
    .channel-divider { display: none; }
    .channel-topic { display: none; }
    .channel-info { gap: 0 !important; }
}

/* === USER AVATAR DM BADGE === */
.user-avatar { position: relative; }
.user-dm-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: var(--danger, #e0524d);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 999px;
    min-width: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg-sidebar, var(--bg-card));
    pointer-events: none;
}

/* WhatsApp-style delivery ticks on outgoing DM messages */
.dm-tick {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    letter-spacing: -1px;
    line-height: 1;
    color: var(--text-muted);
    vertical-align: middle;
}
.dm-tick.is-sending { opacity: 0.55; }
.dm-tick.is-sent    { color: var(--text-muted); }
.dm-tick.is-failed  { color: var(--danger, #e0524d); }
.user-dm-badge.hidden { display: none; }

/* === HABIT PENCIL BUTTON === */
.habit-row-edit {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    margin-right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.habit-row-edit:hover { background: rgba(255,255,255,0.35); }

/* === BACK TO WEEKLY (monthly + records pages) === */
.back-to-weekly {
    background: transparent;
    border: 0;
    color: var(--gold);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: 10px;
}
.back-to-weekly:hover { color: #fff; }

/* === MONTHLY HEADER WITH INLINE NAV === */
.monthly-header {
    align-items: center;
    margin-bottom: 12px;
}
.month-title-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}
.month-title-nav > div {
    flex: 1;
    text-align: center;
}
.month-title-nav .icon-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

/* === RESPONSIVE 7-COL HEATMAP === */
.rings-heatmap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}
.rings-heatmap-block {
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
}
.rings-heatmap-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.rings-heatmap-icon {
    font-size: 22px;
    width: 32px;
    text-align: center;
}
.rings-heatmap-name {
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
}
.rings-heatmap-summary {
    color: var(--c, var(--gold));
    font-weight: 800;
    font-size: 14px;
}
.rings-heatmap-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}
.rings-heatmap-weekdays span {
    text-align: center;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rings-heatmap-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.rings-cell {
    aspect-ratio: 1;
    background: color-mix(in srgb, var(--c) calc(20% + var(--int, 0) * 80%), transparent);
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}
.rings-cell.empty { background: transparent; border-color: transparent; }
.rings-cell.is-met { color: #fff; }
.rings-cell.is-today {
    box-shadow: 0 0 0 2px var(--gold);
    color: var(--gold);
}

/* === RECORDS HISTORY === */
.record-history-card {
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 14px;
}
.record-history-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}
.record-history-title {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 16px;
}
.record-history-best {
    color: var(--gold);
    font-size: 13px;
    margin-top: 2px;
    font-weight: 600;
}
.record-history-count {
    background: var(--bg-active, var(--bg-content));
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 10px;
}
.record-history-chart {
    width: 100%;
    height: 40px;
    margin: 6px 0 10px;
    background: linear-gradient(to top, rgba(201, 169, 97, 0.1), transparent);
    border-radius: 6px;
}
.record-history-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.record-history-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px 6px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.record-history-row:last-child { border-bottom: 0; }
.record-history-row.is-best { background: rgba(201, 169, 97, 0.07); border-radius: 6px; }
.record-history-date {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    width: 90px;
}
.record-history-time {
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
    width: 90px;
}
.record-history-note {
    color: var(--text-secondary);
    font-size: 12px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.record-history-row {
    cursor: pointer;
    transition: background 0.15s;
}
.record-history-row:hover {
    background: var(--bg-hover, rgba(255,255,255,0.04));
    border-radius: 6px;
}
.record-history-edit {
    margin-left: auto;
    opacity: 0.5;
    font-size: 12px;
    flex-shrink: 0;
}
.record-history-row:hover .record-history-edit { opacity: 1; }

/* === APPLE-STYLE RINGS (monthly summary) === */
.rings-wrap {
    display: flex;
    justify-content: center;
    margin: 18px 0 22px;
}
.rings-svg { max-width: 100%; height: auto; }
.rings-month {
    fill: var(--text-primary);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1.5px;
}
.rings-year {
    fill: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}
.rings-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 30px;
}
.rings-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}
.ring-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

/* Coach challenges section inside monthly view */
.rings-challenges {
    margin: 18px 0 22px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--gold) 6%, var(--bg-elevated));
    border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--border));
    border-radius: 14px;
}
.rings-challenges-title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.5px;
}
.rings-challenges .ring-stat-row {
    margin-bottom: 6px;
}
.rings-challenges .ring-stat-row:last-child { margin-bottom: 0; }
.ring-stat-row.challenge-row {
    border-left-color: var(--c, var(--gold));
}
.ring-stat-dates {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ring-stat-sub strong {
    color: var(--text-primary);
    font-weight: 700;
}
.ring-stat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-left: 4px solid var(--c, var(--gold));
    border-radius: 12px;
    padding: 10px 14px;
}
.ring-stat-bullet {
    width: 10px; height: 10px; border-radius: 50%;
    flex-shrink: 0;
}
.ring-stat-icon { font-size: 22px; }
.ring-stat-text { flex: 1; min-width: 0; }
.ring-stat-name { font-weight: 700; color: var(--text-primary); }
.ring-stat-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.ring-stat-pct {
    font-size: 18px;
    font-weight: 800;
    color: var(--c, var(--gold));
    flex-shrink: 0;
}
.rings-heatmap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
}
.rings-heatmap-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rings-heatmap-label {
    width: 22px;
    text-align: center;
    flex-shrink: 0;
    font-size: 18px;
}
.rings-heatmap-cells {
    display: grid;
    grid-template-columns: repeat(31, 1fr);
    gap: 2px;
    flex: 1;
}
.rings-heatmap-cell {
    aspect-ratio: 1;
    background: var(--c, var(--gold));
    border-radius: 3px;
    color: transparent;
    font-size: 8px;
    text-align: center;
    cursor: default;
}
.rings-heatmap-cell.is-met { color: rgba(255,255,255,0.85); }
.rings-heatmap-cell.is-today { box-shadow: 0 0 0 2px var(--gold); border-radius: 4px; }

/* === VOICE MESSAGES === */
.voice-msg {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 6px 10px;
    background: var(--bg-app);
    border-radius: 10px;
    max-width: 360px;
}
.voice-msg audio {
    flex: 1;
    height: 32px;
}
.voice-duration {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
#mic-btn.is-recording {
    color: var(--danger, #e0524d);
    animation: micPulse 1.2s ease-in-out infinite;
}
@keyframes micPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}
.voice-indicator {
    background: rgba(224, 82, 77, 0.12);
    color: var(--danger, #e0524d);
    border-bottom: 1px solid rgba(224, 82, 77, 0.3);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    animation: indPulse 1.6s ease-in-out infinite;
}
@keyframes indPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* === MENTIONS === */
.mention {
    color: var(--gold);
    font-weight: 600;
    background: rgba(201, 169, 97, 0.12);
    padding: 1px 4px;
    border-radius: 4px;
    cursor: pointer;
}
.mention.is-self {
    color: #fff;
    background: var(--gold);
}
.mention-popup {
    position: absolute;
    background: var(--bg-card, #16243a);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    padding: 4px;
    z-index: 9000;
    max-width: 320px;
}
.mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-primary);
}
.mention-item.is-active, .mention-item:hover { background: var(--bg-hover); }

/* === GLOBAL SEARCH === */
.global-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    z-index: 12000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 20px 20px;
}
.global-search-overlay.hidden { display: none; }
.global-search-box {
    background: var(--bg-content, #16243a);
    border: 1px solid var(--border-strong, var(--border));
    border-radius: 14px;
    width: 100%;
    max-width: 600px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.6);
    animation: modalIn 0.2s ease;
}
.global-search-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.global-search-head svg { color: var(--text-muted); flex-shrink: 0; }
.global-search-head input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--text-primary);
    font-size: 16px;
}
.global-search-head kbd {
    background: var(--bg-app);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    font-family: inherit;
}
.global-search-results {
    max-height: 60vh;
    overflow-y: auto;
}
.gs-hint { padding: 30px; color: var(--text-muted); text-align: center; }
.gs-group { padding: 6px 0; }
.gs-group-title {
    padding: 6px 16px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}
.gs-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 8px 16px;
    cursor: pointer;
    color: var(--text-primary);
    text-align: left;
}
.gs-item:hover { background: var(--bg-hover); }

/* === LEGAL PAGES === */
.legal-body h3 {
    margin: 16px 0 6px;
    font-size: 15px;
    color: var(--gold);
}
.legal-body p {
    margin: 0 0 10px;
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 14px;
}

/* === COOKIE BANNER === */
.cookie-banner {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    max-width: 720px;
    margin: 0 auto;
    background: var(--bg-card, #16243a);
    border: 1px solid var(--border-strong, var(--border));
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    z-index: 9500;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.cookie-banner.hidden { display: none; }
.cookie-banner-text {
    flex: 1;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.5;
    min-width: 240px;
}
.cookie-banner-text a { color: var(--gold); text-decoration: underline; }

/* === DM VIEW LAYOUT (defensive — input always at bottom) === */
#dm-view.content-view {
    display: none;
    flex-direction: column;
}
#dm-view.content-view.active { display: flex; }
#dm-view #dm-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Disable browser scroll-anchoring — without this, when cloud refresh
     * loads older messages and re-renders, iOS Safari tries to keep some
     * element visible by snapping scroll position to a day-divider higher
     * up in the conversation. We always want to stay at the bottom. */
    overflow-anchor: none;
}
#dm-view .message-input-wrap {
    flex-shrink: 0;
    background: var(--bg-content, var(--bg-app));
    border-top: 1px solid var(--border);
}
#dm-view .message-input { gap: 6px; }

/* === MEMBERS PANEL (DM list + search) === */
.members-search {
    position: relative;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}
.members-search svg {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.members-search input {
    width: 100%;
    padding: 8px 10px 8px 30px;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    box-sizing: border-box;
}
.members-search input:focus { outline: none; border-color: var(--gold); }

.member-item {
    position: relative;
    cursor: pointer;
    transition: var(--t-fast);
}
.member-item:hover { background: var(--bg-hover); }

.member-name-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
}
.member-time {
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.member-unread {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--danger, #e0524d);
    color: #fff;
    border-radius: 999px;
    min-width: 18px;
    padding: 0 6px;
    height: 18px;
    line-height: 18px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.online-dot {
    position: absolute;
    bottom: 0; right: 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
    border: 2px solid var(--bg-sidebar, var(--bg-card));
}
.member-avatar {
    position: relative;
}
.online-dot.is-online {
    background: #43b581;
}

/* === Calendar month grid view === */
.cal-month-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.cal-month-label {
    font-size: 16px;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    text-transform: capitalize;
}
.cal-month-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 4px;
}
.cal-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.cal-day {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 3px;
    min-height: 36px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    color: var(--text-primary);
    transition: var(--t-fast);
}
.cal-day:hover { border-color: var(--gold); }
.cal-day.selected { border-color: var(--gold); background: rgba(201, 169, 97, 0.12); }
.cal-day.today .cal-day-num {
    color: var(--gold);
    font-weight: 700;
}
.cal-day.other-month { opacity: 0.35; }
.cal-day-num {
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    line-height: 1;
}
.cal-day-dots {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    align-items: center;
}
.cal-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--royal-blue-light, #5a78b3);
}
.cal-dot.mine { background: var(--gold); }
.cal-dot.more {
    width: auto;
    height: auto;
    background: transparent;
    color: var(--text-muted);
    font-size: 10px;
}
.cal-day-detail {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Ensure at least ~2 training rows fit comfortably below the grid */
    min-height: 120px;
}
.cal-day-tr {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--t-fast);
}
.cal-day-tr:hover { border-color: var(--gold); }
.cal-day-tr-time {
    color: var(--gold);
    font-weight: 700;
    font-size: 13px;
    min-width: 48px;
}
.cal-day-tr-title { flex: 1; }
.cal-day-tr-cap { color: var(--text-muted); font-size: 12px; }

/* === DM message bubbles === */
.dm-message {
    user-select: text;
}
.dm-message.is-mine .msg-body {
    background: rgba(201, 169, 97, 0.10);
    border-radius: 10px;
    padding: 6px 10px;
}
/* Hint that messages have a hidden context menu (right-click / long-press) */
.dm-message {
    cursor: context-menu;
}

/* === DM context menu (right-click / long-press) === */
.dm-context-menu {
    position: fixed;
    z-index: 9999;
    min-width: 180px;
    background: var(--bg-app, #0a1628);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
    padding: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: dmCtxIn 120ms ease-out;
}
@keyframes dmCtxIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}
.dm-context-menu .dm-ctx-item {
    background: transparent;
    border: none;
    color: var(--text-primary, #e6ecf3);
    padding: 10px 14px;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    border-radius: 6px;
    transition: background 80ms ease;
}
.dm-context-menu .dm-ctx-item:hover {
    background: rgba(255, 255, 255, 0.06);
}
.dm-context-menu .dm-ctx-item.danger {
    color: #ff6b6b;
}
.dm-context-menu .dm-ctx-item.danger:hover {
    background: rgba(255, 107, 107, 0.10);
}

/* === RECURRING TAG === */
.recurring-tag {
    background: rgba(67, 181, 129, 0.15);
    color: #43b581;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 4px;
}

/* === RECURRING FIELDS === */
.recurring-fields {
    margin-top: 8px;
    padding: 12px;
    background: rgba(67, 181, 129, 0.06);
    border: 1px solid rgba(67, 181, 129, 0.25);
    border-radius: 10px;
}
.weekday-picker {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-top: 6px;
}
.weekday-picker label {
    background: var(--bg-app);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 8px 4px;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    user-select: none;
    transition: var(--t-fast);
}
.weekday-picker label input { display: none; }
.weekday-picker label:has(input:checked) {
    background: var(--gold);
    color: var(--bg-app);
    border-color: var(--gold);
}

/* === ONBOARDING TOUR === */
.tour-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 20000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 16px 30px;
    backdrop-filter: blur(2px);
}
.tour-spotlight {
    position: fixed;
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid var(--gold);
    border-radius: 14px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65), 0 0 0 4px rgba(201, 169, 97, 0.5);
    pointer-events: none;
    transition: all 0.35s cubic-bezier(.2,.8,.2,1);
    z-index: 1;
}
.tour-card {
    position: relative;
    z-index: 2;
    background: var(--bg-content, #16243a);
    border: 1px solid var(--border-strong, var(--border));
    border-radius: 16px;
    padding: 22px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.tour-card .tour-step {
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.tour-card h3 {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-size: 18px;
}
.tour-card p {
    margin: 0 0 18px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}
.tour-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.tour-actions button { padding: 8px 14px; font-size: 13px; }
.tour-skip { margin-right: auto; }

/* === DIARY PAGE (habit tracker, full-page view) === */
#diary-view.content-view {
    display: none;
    flex-direction: column;
    height: 100%;
}
#diary-view.content-view.active {
    display: flex;
}

.diary-page {
    flex: 1;
    overflow-y: auto;
    padding: 16px 16px 110px; /* extra bottom for the bar */
    -webkit-overflow-scrolling: touch;
    /* Prevent iOS rubber-band overscroll from dragging position:fixed
     * elements (like the diary-bottom-bar) up and off the screen when
     * user pulls past the top of the records / diary list. */
    overscroll-behavior: contain;
    overscroll-behavior-y: contain;
}

.diary-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}
.diary-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
}
.diary-date {
    font-size: 13px;
    color: var(--text-muted);
}

.diary-week-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px 4px;
    gap: 10px;
}
.diary-week-label {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.diary-week-arrow {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 999px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.diary-week-arrow:hover {
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 12%, var(--bg-elevated));
}
.diary-week-arrow:active { transform: scale(0.92); }

.diary-week-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 16px;
}
.diary-day {
    background: var(--bg-app);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 14px;
    padding: 10px 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: var(--t-fast);
}
.diary-day .diary-dn {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
}
.diary-day .diary-dd {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
.diary-day.is-today .diary-dd {
    color: var(--gold);
}
.diary-day.is-selected {
    background: var(--gold);
    border-color: var(--gold);
}
.diary-day.is-selected .diary-dn,
.diary-day.is-selected .diary-dd { color: var(--bg-app); }

.diary-groups {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin-bottom: 14px;
    padding-bottom: 4px;
}
.diary-chip {
    flex-shrink: 0;
    background: var(--bg-app);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.diary-chip.is-active {
    background: var(--gold);
    color: var(--bg-app);
    border-color: var(--gold);
}

/* HABIT ROW — colored card with progress fill */
.diary-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.habit-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-app);
    border: 1.5px solid color-mix(in srgb, var(--c) 35%, var(--border));
    border-radius: 16px;
    padding: 14px;
    overflow: hidden;
    cursor: pointer;
    color: var(--text-primary);
    transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
    isolation: isolate;
}
/* Tint layer at 20% color always visible */
.habit-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--c);
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}
/* Fill bar at 100% color, width = --p */
.habit-row::after {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: var(--p, 0%);
    background: var(--c);
    opacity: 0.95;
    transition: width 0.4s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
    z-index: 1;
}
.habit-row > * { position: relative; z-index: 2; }
.habit-row:active { transform: scale(0.98); }
.habit-row.is-done {
    border-color: var(--c);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--c) 30%, transparent);
}
.habit-row.is-done::after { width: 100%; }
/* legacy element kept for compatibility but invisible */
.habit-row-fill { display: none; }
.habit-row-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.habit-row-text {
    flex: 1;
    min-width: 0;
}
.habit-row-name {
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.habit-row-prog {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    margin-top: 2px;
}
/* "+ 30 reps today" — what was logged on the currently-selected day.
 * Distinct from the period cumulative shown in .habit-row-prog. Helps
 * users see daily contribution when scrolling back through past days
 * on a weekly/monthly goal. */
.habit-row-day-amt {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--c, var(--gold));
    background: rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    text-shadow: none;
}
.habit-row-period {
    /* Inline chip near the name — sits in flex flow so it can never overlap the pencil/add buttons */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    background: rgba(0, 0, 0, 0.22);
    padding: 3px 8px;
    border-radius: 999px;
    margin-right: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}
.habit-row-add {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--bg-app);
    border: 0;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.habit-row.is-done .habit-row-add {
    background: #43b581;
    color: #fff;
}

/* DIARY BOTTOM BAR */
.diary-bottom-bar {
    /* Pin to viewport bottom — never scrolls with content. */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    background: var(--bg-app);
    border-top: 1px solid var(--border);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 100;
    /* NOTE: previously had `transform: translateZ(0)` here to "promote
     * to GPU layer" — REMOVED because on iOS Safari, transform on a
     * position:fixed element can re-scope its containing block,
     * breaking the fixed positioning and hiding the bar. */
}
/* 4-column variant when Weekly button is added (Add | Weekly | Monthly | Records) */
.diary-bottom-bar.diary-bottom-bar-4col {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
/* 5-column variant with Daily added (Add | Daily | Weekly | Monthly | Records) */
.diary-bottom-bar.diary-bottom-bar-5col {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.diary-bottom-bar.diary-bottom-bar-5col .diary-bb-btn span {
    font-size: 10.5px;  /* tighter labels for 5 buttons */
}
/* DESKTOP: bar lives ONLY in the content column between the two sidebars.
 * Without this it overlaps the left user-bar (Settings cog) and right
 * messages panel. Scoped to >= 901px so mobile keeps full-width bar. */
@media (min-width: 901px) {
    .diary-bottom-bar {
        left: var(--sidebar-w, 280px) !important;
        right: var(--members-w, 240px) !important;
    }
}
/* MOBILE force-visible: ensure no leftover state hides the diary bar
 * on phones. Scoped to diary view + mobile. Overrides any stale
 * .has-sidebar-open / .has-members-open transforms left on body. */
@media (max-width: 900px) {
    body[data-view="diary"]:not(.has-sidebar-open):not(.has-members-open) .diary-bottom-bar {
        display: grid !important;
        transform: none !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}
/* When the sidebar is open on mobile, the bottom bar should not overlap it. */
body.has-sidebar-open .diary-bottom-bar {
    z-index: 10;
}
.diary-bb-btn {
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
    border-radius: 10px;
    transition: var(--t-fast);
}
.diary-bb-btn span {
    font-size: 11px;
    font-weight: 600;
}
.diary-bb-btn:hover { color: var(--gold); background: var(--bg-hover); }
#diary-bb-add { color: var(--gold); }
#diary-bb-add:hover { color: #fff; background: var(--gold); }

/* INLINE KEYPAD */
.diary-keypad {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--bg-card, #16243a);
    border-top: 1px solid var(--border);
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 1500;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    /* NOTE: removed transform animation — on iOS it left a residual offset
       that shifted touch coords ~0.5cm upward from where the finger landed. */
    animation: kpFadeIn 0.18s ease;
}
@keyframes kpFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.diary-keypad.hidden { display: none; }
.diary-keypad-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.diary-keypad-head span#diary-keypad-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.diary-keypad-display {
    text-align: center;
    margin: 8px 0 14px;
}
#diary-keypad-value {
    font-size: 44px;
    font-weight: 800;
    color: var(--text-primary);
}
#diary-keypad-unit {
    font-size: 14px;
    color: var(--text-muted);
    margin-left: 6px;
}
.diary-keypad-tabs {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 10px;
}
.dkpt {
    background: var(--bg-app);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 6px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.dkpt.is-active {
    background: var(--gold);
    color: var(--bg-app);
    border-color: var(--gold);
}
.diary-keypad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}
.dkp {
    background: var(--bg-app);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 14px 0;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    /* Prevent double-tap zoom on rapid taps (iOS) */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.dkp:active { transform: scale(0.96); background: var(--bg-hover); }
.dkp-clear { color: var(--danger, #e0524d); font-size: 16px; }
.dkp-bs { color: var(--text-muted); }

/* Big primary OK button below grid */
.dkp-ok-big {
    width: 100%;
    background: var(--gold);
    color: var(--bg-app);
    border: 0;
    border-radius: 14px;
    padding: 18px 0;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    box-shadow: 0 6px 20px rgba(201, 169, 97, 0.35);
    transition: transform 0.12s, box-shadow 0.12s;
    letter-spacing: 1px;
}
.dkp-ok-big:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(201, 169, 97, 0.25);
}

/* Same protection for the big keypad value display so rapid taps don't zoom */
.diary-keypad, .diary-keypad * {
    touch-action: manipulation;
}

/* === COACH CHALLENGE PRIORITY CARD === */
.habit-row.is-challenge {
    border: 2px solid #ff5252;
    box-shadow: 0 4px 16px rgba(255, 82, 82, 0.25);
    padding-top: 28px;
    background: color-mix(in srgb, var(--c) 40%, var(--bg-app));
}
.challenge-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #ff5252, #d32f2f);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    padding: 4px 10px;
    border-radius: 14px 0 14px 0;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* === BUY CREDITS — clean cards (notification style) === */
.credits-pack-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}
.credit-pack-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: var(--t-fast);
    position: relative;
}
.credit-pack-card:hover {
    border-color: var(--c, var(--gold));
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.credit-pack-card.is-popular {
    border-color: var(--c, var(--gold));
    background: linear-gradient(90deg, color-mix(in srgb, var(--c) 12%, transparent), var(--bg-app) 60%);
}
.credit-pack-icon {
    width: 50px; height: 50px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--c) 25%, var(--bg-content));
    color: var(--c);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    overflow: hidden;
}
.credit-pack-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.credit-pack-info { flex: 1; min-width: 0; }
.credit-pack-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.credit-pack-pop-tag {
    background: var(--gold);
    color: var(--bg-app);
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}
.credit-pack-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
}
.credit-pack-price {
    text-align: right;
    flex-shrink: 0;
}
.credit-pack-price-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
}
.credit-pack-price-per {
    font-size: 11px;
    color: var(--text-muted);
}
.credit-pack-buy {
    background: var(--gold);
    color: var(--bg-app);
    border: 0;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
    flex-shrink: 0;
    margin-left: 6px;
}

.credits-balance-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.18), rgba(201, 169, 97, 0.06));
    border: 1px solid rgba(201, 169, 97, 0.35);
    border-radius: 14px;
    margin-bottom: 6px;
}
.credits-balance-card .credit-pack-icon {
    background: var(--gold);
    color: var(--bg-app);
}
.credits-balance-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.credits-balance-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--gold);
    line-height: 1.1;
}

@media (min-width: 769px) {
    .diary-page { padding: 24px 24px 130px; }
    .diary-keypad { left: auto; right: 24px; bottom: 24px; max-width: 380px; border-radius: 18px; }
}

/* === GOAL MODE TABS (Habit modal) === */
.goal-mode-tabs {
    display: flex;
    gap: 6px;
    background: var(--bg-app);
    padding: 4px;
    border-radius: var(--radius-sm, 10px);
}
.goal-mode-tab {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: var(--t-fast);
}
.goal-mode-tab.active {
    background: var(--bg-active);
    color: var(--gold);
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.goal-mode-pane {
    display: none;
    margin-top: 12px;
    padding: 14px;
    background: rgba(67, 181, 129, 0.06);
    border: 1px solid rgba(67, 181, 129, 0.25);
    border-radius: var(--radius-sm, 10px);
}
.goal-mode-pane.active { display: block; }

/* === NOTIFICATIONS LIST === */
.notif-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 10px);
    cursor: pointer;
    transition: var(--t-fast);
    position: relative;
}
.notif-item:hover {
    border-color: var(--gold);
    background: var(--bg-hover);
}
.notif-item.unread {
    border-left: 3px solid var(--gold);
    padding-left: 12px;
    background: linear-gradient(90deg, rgba(201,169,97,0.08), var(--bg-app) 60%);
}

.notif-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: rgba(201, 169, 97, 0.15);
}

.notif-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notif-text {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.4;
    word-wrap: break-word;
}

.notif-time {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.notif-item.unread .notif-text {
    font-weight: 600;
}
.notif-item.unread::after {
    content: '';
    position: absolute;
    top: 14px;
    right: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger, #e0524d);
}

/* === FLOATING FEATURE POPUP (sits ABOVE settings modal) === */
.feature-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    animation: modalIn 0.2s ease;
}
.feature-popup {
    background: var(--bg-content, #16243a);
    border: 1px solid var(--border-strong, var(--border));
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    width: 100%;
    max-width: 440px;
    overflow: hidden;
    animation: modalIn 0.25s ease;
}
.feature-popup-head {
    padding: 14px 18px;
    background: var(--bg-sidebar, var(--bg-card));
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.feature-popup-head h3 {
    margin: 0;
    font-size: 16px;
    color: var(--text-primary);
}
.feature-popup-body {
    padding: 22px 22px 20px;
    text-align: center;
}
.feature-popup-body p {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

.mc-groups {
    margin: 10px 0 14px;
    text-align: left;
    font-size: 12px;
}
.mc-groups-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10px;
    display: block;
    margin-bottom: 6px;
}
.mc-groups-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.mc-group-pill {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.mc-action { margin-top: 10px; }

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: 1px solid var(--border);
    cursor: pointer;
    z-index: 5;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel-arrow:hover { background: rgba(0,0,0,0.85); }
.carousel-prev { left: 4px; }
.carousel-next { right: 4px; }

@media (max-width: 480px) {
    .carousel-arrow { display: none; } /* swipe on mobile */
    /* mc-card mobile sizing handled at the bottom of this file (newer block) */
}

/* Slightly bigger typography on wider screens */
@media (min-width: 600px) {
    .mc-card h3 { font-size: 20px; }
    .mc-price { font-size: 32px; }
    .mc-features { font-size: 14px; max-height: none; }
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}
.mc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    border: 0;
    cursor: pointer;
    padding: 0;
    transition: var(--t-fast);
}
.mc-dot.active {
    background: var(--dot-color, var(--gold));
    transform: scale(1.4);
}

/* === AVATAR IMAGES === */
.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.user-avatar, .msg-avatar, .member-avatar, .profile-avatar, .avatar-preview {
    overflow: hidden;
}

/* Chat message avatar (DM and channel) — small, WhatsApp-style */
.msg-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

/* === AVATAR UPLOADER === */
.avatar-uploader {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg-active);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 28px;
    flex-shrink: 0;
}
.avatar-uploader-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}
.avatar-uploader-actions .btn-primary,
.avatar-uploader-actions .btn-ghost {
    padding: 8px 14px;
    font-size: 13px;
}
.avatar-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* === CREDITS SECTION IN PROFILE === */
.credits-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.18), rgba(201, 169, 97, 0.06));
    border: 1px solid rgba(201, 169, 97, 0.35);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 14px;
}
.credits-card-main { flex: 1; min-width: 0; }
.credits-card-label {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.credits-card-value {
    color: var(--gold);
    font-size: 36px;
    font-weight: 800;
    line-height: 1.1;
}
.credits-card-sub {
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 2px;
}
.credits-card .btn-primary { padding: 10px 16px; font-size: 13px; flex-shrink: 0; }

.credits-history {
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}
.credits-history-head {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.credits-log {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.credits-log-empty {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 12px;
}
.credits-log-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.credits-log-row:last-child { border-bottom: 0; }
.credits-log-when {
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
}
.credits-log-reason {
    flex: 1;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.credits-log-delta {
    font-weight: 700;
    flex-shrink: 0;
}
.credits-log-row.positive .credits-log-delta { color: #43b581; }
.credits-log-row.negative .credits-log-delta { color: var(--danger, #e0524d); }

/* Tier badge in plan list */
.tier-badge {
    display: inline-block;
    background: var(--plan-color);
    color: var(--bg-app);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    margin-right: 6px;
    letter-spacing: 0.5px;
}

.groups-meta {
    margin-top: 4px;
    font-size: 11px;
}
.groups-meta span {
    margin-right: 8px;
    font-weight: 600;
}

/* Coach challenge YouTube demo embed.
   Shorts (`.is-shorts`) render in 9:16 portrait, capped at 380px wide so
   on desktop they look like a Reel; on mobile they take the full row width.
   Regular YouTube videos use 16:9 landscape full-width.
   Wrapper goes BELOW the challenge habit row (single child of the same
   .habit-list container) — keeps the row layout untouched. */
.challenge-video-wrap {
    position: relative;
    width: 100%;
    height: 0;
    margin: 8px 0 14px;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.challenge-video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* padding-bottom trick (16:9 → 56.25%, 9:16 → 177.78%) — safer than
   aspect-ratio on older iOS Safari which sometimes froze iframe paints. */
.challenge-video-wrap.is-landscape { padding-bottom: 56.25%; }
.challenge-video-wrap.is-shorts {
    padding-bottom: 177.78%;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 768px) {
    .challenge-video-wrap.is-shorts { max-width: 320px; }
}

/* Push notification per-category preference rows */
.push-pref-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
}
.push-pref-row:last-of-type { border-bottom: none; }
.push-pref-row input[type=checkbox] {
    flex: 0 0 auto;
    margin: 0;
}

/* Roles checkbox list in plan editor */
.roles-checkbox-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
@media (max-width: 480px) {
    .roles-checkbox-list { grid-template-columns: 1fr; }
}
/* Channel-allowlist list in plan editor — grouped by category for clarity.
   Each category is its own row (full width). Inside a category, channels
   are a clean left-aligned 2-column grid so checkboxes line up vertically
   and labels don't jump around. */
.plan-ch-group {
    margin-bottom: 14px;
}
.plan-ch-cat {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.plan-ch-grid {
    /* Single column — each channel sits on its own row beneath the
       category header. User wants them all stacked vertically so the
       checkbox + icon + name line up cleanly without the 2-column drift. */
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.plan-ch-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    cursor: pointer;
    text-align: left;
    line-height: 1.2;
}
.plan-ch-item input[type=checkbox] {
    flex: 0 0 auto;
    margin: 0;
}
.plan-ch-icon {
    flex: 0 0 auto;
    font-size: 13px;
}
.plan-ch-name {
    flex: 1 1 auto;
    font-size: 13px;
    color: var(--text-primary);
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.role-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    transition: var(--t-fast);
}
.role-checkbox:hover { border-color: var(--gold); }
.role-checkbox input { margin: 0; width: 16px; height: 16px; }
.role-checkbox .role-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Recipient mode tabs in invoice modal */
.iv-mode-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    background: var(--bg-app);
    padding: 4px;
    border-radius: var(--radius-sm);
}
.iv-mode-tab {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.iv-mode-tab.active {
    background: var(--bg-active);
    color: var(--gold);
}
.iv-new-user-form {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: rgba(201, 169, 97, 0.08);
    border: 1px dashed var(--gold);
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
}
.iv-new-user-form.active { display: flex; }
.iv-new-user-form .form-row { gap: 8px; }
.iv-new-user-form h4 {
    margin: 0;
    font-size: 13px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   MEMBERS SIDEBAR
   ============================================ */

.members-sidebar {
    width: var(--members-w);
    background: var(--bg-sidebar);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.members-header {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}

.members-header h3 {
    margin: 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    font-weight: 700;
}

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

.members-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
}

.member-group {
    margin-bottom: 12px;
}

.member-group-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    padding: 4px 8px;
}

.member-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--t-fast);
}

.member-item:hover {
    background: var(--bg-hover);
}

.member-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--royal-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    position: relative;
}

.member-avatar::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: var(--success);
    border-radius: 50%;
    border: 2px solid var(--bg-sidebar);
}

.member-avatar.offline::after {
    background: var(--text-muted);
}

.member-avatar.coach {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: var(--bg-app);
}

.member-name {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-item.coach .member-name {
    color: var(--gold);
    font-weight: 600;
}

/* ============================================
   MODALS
   ============================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    /* Above the open sidebar (z-index 10100) so Settings / profile / any
     * modal opened FROM the sidebar lands on top, not behind it. */
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: fadeIn var(--t);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal {
    background: var(--bg-content);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modalIn 0.3s ease;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.modal-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    background: var(--bg-sidebar);
    flex-shrink: 0;
}

.modal-header h2 {
    margin: 0;
    font-size: 17px;
    color: var(--text-primary);
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
}

.section-heading {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin: 24px 0 12px;
    font-weight: 700;
}

.section-heading:first-child {
    margin-top: 0;
}

.form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}

/* ============================================
   RECORDS
   ============================================ */

.records-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.stat-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
}

.stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--gold);
    font-family: 'Cinzel', serif;
}

.records-actions {
    margin-bottom: 12px;
}

.records-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.record-item {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Newer 2-row record card layout (used in renderRecordsList) */
.record-card {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 6px;
}
.record-card .record-card-row1 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.record-card .record-card-row2 {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 12.5px;
}
.record-card .pb-flag {
    background: rgba(201, 169, 97, 0.15);
    color: var(--gold);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    flex-shrink: 0;
}
.record-card .record-disc {
    font-weight: 700;
    font-size: 16px;
}
.record-card .record-distance {
    color: var(--text-secondary);
    font-size: 14px;
}
.record-card .record-time {
    margin-left: auto;
    color: var(--gold);
    font-weight: 700;
    font-size: 18px;
    font-family: 'Cinzel', serif;
}
.record-card .record-note {
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
}

.record-discipline {
    font-size: 24px;
}

.record-info {
    flex: 1;
    min-width: 0;
}

.record-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}

.record-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.record-time {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--gold);
}

.record-best-badge {
    font-size: 9px;
    background: var(--gold);
    color: var(--bg-app);
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.add-record-form {
    background: var(--bg-elevated);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    padding: 16px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.add-record-form h3 {
    margin: 0;
    font-size: 15px;
    color: var(--gold);
}

/* ============================================
   PLANS / SUBSCRIPTION
   ============================================ */

.current-plan {
    background: linear-gradient(135deg, var(--royal-blue-dark) 0%, var(--royal-blue) 100%);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 8px;
    border: 1px solid var(--gold);
    position: relative;
    overflow: hidden;
}

.current-plan::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(201, 169, 97, 0.3) 0%, transparent 70%);
}

.plan-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    font-weight: 600;
}

.plan-name {
    font-family: 'Cinzel', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--gold);
    margin: 4px 0;
}

.plan-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.badge {
    display: inline-block;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.badge-active {
    background: rgba(67, 181, 129, 0.2);
    color: var(--success);
    border: 1px solid var(--success);
}

.plans-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.plan-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    position: relative;
    transition: var(--t);
    cursor: pointer;
}

.plan-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
}

.plan-card.featured {
    border-color: var(--gold);
    background: linear-gradient(135deg, var(--bg-elevated) 0%, rgba(201, 169, 97, 0.08) 100%);
}

.plan-badge {
    position: absolute;
    top: -8px;
    right: 16px;
    background: var(--gold);
    color: var(--bg-app);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    letter-spacing: 0.5px;
}

.plan-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}

.plan-card h4 {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    color: var(--gold);
    margin: 0;
}

.plan-price {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}

.plan-price .amount {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.plan-price .currency {
    font-size: 16px;
    color: var(--gold);
    font-weight: 700;
}

.plan-price .period {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 4px;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

.plan-features li {
    line-height: 1.4;
}

.payment-info {
    margin-top: 16px;
}

.payment-methods {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.pay-method {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 8px;
    color: var(--text-primary);
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: var(--t-fast);
}

.pay-method:hover {
    border-color: var(--gold);
}

.pay-method.active {
    border-color: var(--gold);
    background: var(--bg-active);
}

.payment-note {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    margin: 12px 0 0;
}

/* ============================================
   SETTINGS
   ============================================ */

.settings-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.settings-section:last-child {
    border-bottom: none;
}

.settings-section h3 {
    margin: 0 0 12px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 14px;
    cursor: pointer;
}

.toggle-row input[type="checkbox"] {
    display: none;
}

.toggle-switch {
    width: 40px;
    height: 22px;
    background: var(--bg-input);
    border-radius: 12px;
    position: relative;
    transition: var(--t-fast);
    flex-shrink: 0;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: var(--t-fast);
}

.toggle-row input:checked ~ .toggle-switch {
    background: var(--gold);
}

.toggle-row input:checked ~ .toggle-switch::after {
    transform: translateX(18px);
}

/* ============================================
   ADMIN
   ============================================ */

.admin-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: var(--bg-input);
    padding: 4px;
    border-radius: var(--radius-sm);
}

.admin-tab {
    flex: 1;
    padding: 8px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.admin-tab.active {
    background: var(--royal-blue);
    color: white;
}

.admin-pane {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.admin-pane.active {
    display: flex;
}

.admin-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.admin-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.admin-row .row-info {
    flex: 1;
    font-size: 14px;
}

.admin-row .row-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.icon-picker {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    background: var(--bg-input);
    padding: 8px;
    border-radius: var(--radius-sm);
}

.icon-picker button {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: var(--t-fast);
}

.icon-picker button:hover, .icon-picker button.active {
    background: var(--bg-active);
    border-color: var(--gold);
}

/* ============================================
   TOAST
   ============================================ */

.toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--bg-elevated);
    border: 1px solid var(--gold);
    color: var(--text-primary);
    padding: 12px 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    /* Above everything (modals 11000, Paymob 100001, training detail 100000)
       so error messages — especially payment failures — are actually visible
       instead of getting trapped behind the subscription / settings modal. */
    z-index: 200000 !important;
    opacity: 0;
    transition: var(--t);
    font-size: 14px;
    pointer-events: none;
    max-width: calc(100vw - 32px);
    text-align: center;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================
   MOBILE-FIRST: BASE IS MOBILE
   Now add desktop overrides
   ============================================ */

.mobile-only {
    display: inline-flex;
}

/* Hide sidebars on mobile by default */
@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        /* iOS PWA: 100dvh EXCLUDES safe-area at the bottom — using 100lvh
         * (Large Viewport Height) ensures the sidebar reaches the absolute
         * screen bottom including the home-indicator zone. No visible strip. */
        height: 100vh;
        height: 100lvh;
        transform: translateX(-100%);
        transition: transform var(--t);
        box-shadow: var(--shadow-lg);
        width: min(85vw, 320px);
    }

    .sidebar.open {
        transform: translateX(0);
        /* Sidebar is the topmost overlay on mobile — bottom bars (diary,
         * calendar, etc.) and any in-page sticky widgets must stay below. */
        z-index: 10100 !important;
    }

    .members-sidebar {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        /* Use 100lvh — NOT 100dvh which leaves a strip at the bottom */
        height: 100vh;
        height: 100lvh;
        transform: translateX(100%);
        transition: transform var(--t);
        z-index: 60;
        box-shadow: var(--shadow-lg);
        width: min(80vw, 280px);
    }

    .members-sidebar.open {
        transform: translateX(0);
        /* Match the left sidebar: cover top app header AND any bottom bars
         * so the panel is a true full-height overlay. */
        z-index: 10100 !important;
    }

    .channel-divider, .channel-topic {
        display: none;
    }

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

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

/* DESKTOP layout */
@media (min-width: 901px) {
    .mobile-only {
        display: none !important;
    }

    .backdrop {
        display: none !important;
    }

    /* DESKTOP: BOTH sidebars are ALWAYS visible. Override any leftover
     * mobile rules (.open class, .hidden class, transforms) so the user
     * never sees the layout collapse when JS toggles classes. */
    .sidebar {
        display: flex !important;
        position: relative !important;
        transform: none !important;
        width: var(--sidebar-w) !important;
        height: auto !important;
        z-index: 60 !important;
        box-shadow: none !important;
    }
    .members-sidebar {
        display: flex !important;
        position: relative !important;
        transform: none !important;
        width: var(--members-w) !important;
        height: auto !important;
        z-index: 60 !important;
        box-shadow: none !important;
    }
    /* On desktop nothing should hide a channel divider/topic — they fit fine */
    .channel-divider, .channel-topic {
        display: inline-flex;
    }
}

@media (max-width: 600px) {
    :root {
        --header-h: 52px;
    }

    .auth-container {
        padding: 24px 18px;
    }

    .brand-title {
        font-size: 24px;
    }

    .channel-title {
        font-size: 15px;
        display: none; /* On mobile only the channel emoji/icon is shown next to the hamburger */
    }
    /* Hide the topic line on mobile too — header stays compact */
    #channel-topic {
        display: none;
    }
    /* But keep the channel icon visible on mobile (override the desktop @media that hides it) */
    #channel-prefix {
        display: inline-block !important;
        font-size: 22px;
    }

    .messages {
        padding: 12px;
    }

    .message {
        gap: 10px;
        padding: 4px 6px;
    }

    .message-avatar {
        width: 34px;
        height: 34px;
    }

    .welcome-hero {
        margin: 12px 12px 0;
        height: 130px;
    }

    .hero-content h2 {
        font-size: 19px;
    }

    .dashboard-grid {
        padding: 12px;
    }

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

/* SCROLLBARS */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--bg-elevated);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold-dark);
}

@media (max-width: 900px) {
    ::-webkit-scrollbar {
        width: 4px;
    }
}

/* SAFE AREA - iOS notch */
.sidebar {
    padding-top: env(safe-area-inset-top);
}

.message-input-wrap {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.content-header {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--header-h) + env(safe-area-inset-top));
}

/* ============================================
   LANGUAGE SWITCHER
   ============================================ */
.lang-switcher {
    display: inline-flex;
    gap: 4px;
    background: var(--bg-input);
    padding: 4px;
    border-radius: var(--radius-sm);
    margin: 8px 0;
}
.lang-switcher button {
    padding: 6px 14px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    letter-spacing: 0.5px;
}
.lang-switcher button.active {
    background: var(--gold);
    color: var(--text-inverse);
}
#lang-switcher-auth {
    display: flex;
    justify-content: center;
    margin: 4px auto 16px;
}

/* ============================================
   DEMO LOGIN PILLS
   ============================================ */
.auth-demo-hint {
    margin-top: 16px;
    padding: 10px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.auth-demo-hint strong {
    font-size: 12px;
    color: var(--text-muted);
    width: 100%;
    margin-bottom: 4px;
}
.demo-login {
    padding: 5px 10px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--t-fast);
}
.demo-login:hover {
    background: var(--gold);
    color: var(--text-inverse);
    border-color: var(--gold);
}

/* ============================================
   ROLE BADGE
   ============================================ */
.role-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: rgba(201, 169, 97, 0.15);
    color: var(--gold);
}
.role-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}
.msg-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    margin-left: 4px;
    letter-spacing: 0.5px;
    vertical-align: middle;
}
.msg-badge.admin { background: var(--gold); color: var(--text-inverse); }
.msg-badge.coach { background: rgba(67, 181, 129, 0.2); color: #43b581; }

/* ============================================
   READ-ONLY BANNER
   ============================================ */
.readonly-banner {
    background: rgba(201, 169, 97, 0.08);
    border-left: 3px solid var(--gold);
    padding: 10px 14px;
    margin: 12px 0;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
}

/* ============================================
   CHANNEL BADGES
   ============================================ */
.ch-badge {
    margin-left: auto;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(201, 169, 97, 0.15);
    color: var(--gold);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.channel-payment .ch-badge {
    background: rgba(67, 181, 129, 0.15);
    color: #43b581;
}

.unread-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--danger, #e0524d);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg-app);
    flex-shrink: 0;
}

.channel.has-unread .channel-name {
    color: var(--text-primary);
    font-weight: 600;
}

.channel.has-unread::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 8px;
    background: #fff;
    border-radius: 0 2px 2px 0;
}

.channel {
    position: relative;
}

/* ============================================
   MODAL WIDE / SMALL
   ============================================ */
.modal-wide {
    max-width: 920px !important;
}
.modal-small {
    max-width: 420px !important;
}

/* ============================================
   ADMIN — extras
   ============================================ */
.admin-help {
    color: var(--text-muted);
    font-size: 12px;
    margin: 4px 0 8px;
}
.admin-row .admin-row-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.admin-row .row-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.admin-row .row-actions {
    display: flex;
    gap: 4px;
}
.role-select {
    padding: 6px 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
}
.admin-cat {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    margin-bottom: 8px;
}
.admin-cat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    margin-bottom: 8px;
}
.admin-cat-channels {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ============================================
   PERMISSIONS MATRIX
   ============================================ */
.perms-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}
.perms-legend .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
.dot-none { background: var(--bg-input); border: 1px solid var(--border); }
.dot-view { background: rgba(88, 101, 242, 0.5); border: 1px solid #5865f2; }
.dot-edit { background: var(--gold); }

.perms-matrix-wrap {
    overflow-x: auto;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    padding: 8px;
}
.perms-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 600px;
}
.perms-matrix th, .perms-matrix td {
    padding: 6px 8px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.perms-matrix th:first-child, .perms-matrix td:first-child {
    text-align: left;
    white-space: nowrap;
}
.perms-matrix .cat-row td {
    background: var(--bg-input);
    color: var(--gold);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* .perm-cell on a <td> must NOT use display:inline-flex — that would
 * break the table grid (cells would inline-wrap, breaking column
 * alignment). Layout properties live in #perms-matrix td.perm-cell
 * below. This rule only holds the cursor + transition. */
.perm-cell {
    cursor: pointer;
    transition: var(--t-fast);
}

/* Save-permissions toolbar — sticky bar above the matrix with dirty-state
 * indicator + save button. Without this, admins click cells, navigate away,
 * and discover nothing got saved to the cloud. */
.perms-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 12px;
    position: sticky;
    top: 8px;
    z-index: 5;
}
.perms-dirty-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
}
.perms-dirty-label.is-dirty {
    color: #ffb84d;
    animation: pendingPulse 1.6s ease-in-out infinite;
}
#save-perms-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ============================================
   PAYMENTS
   ============================================ */
.payments-wrap {
    padding: 16px;
    overflow-y: auto;
    height: 100%;
}
.payments-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.payments-stats .stat-card {
    background: var(--bg-elevated);
    border-radius: var(--radius);
    padding: 14px;
    border-left: 3px solid var(--gold);
}
.stat-paid { border-left-color: #43b581 !important; }
.stat-pending { border-left-color: #faa61a !important; }
.stat-overdue { border-left-color: #e0524d !important; }

.payments-actions {
    margin-bottom: 12px;
    display: flex;
    gap: 8px;
}
.payments-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 13px;
}
.payments-table th {
    background: var(--bg-input);
    padding: 10px;
    text-align: left;
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.payments-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border);
}
.pay-status {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}
.pay-status.status-paid { background: rgba(67, 181, 129, 0.2); color: #43b581; }
.pay-status.status-pending { background: rgba(250, 166, 26, 0.2); color: #faa61a; }
.pay-status.status-overdue { background: rgba(224, 82, 77, 0.2); color: #e0524d; }
.pay-status.status-rejected { background: rgba(160, 64, 192, 0.18); color: #c585e0; border: 1px solid rgba(160, 64, 192, 0.3); }

/* Onboarding role picker — first-login questionnaire for r-pending users */
.onb-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 6px;
}
.onb-choice {
    background: var(--bg-app);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 16px 8px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    color: var(--text-primary);
}
.onb-choice:hover { border-color: var(--gold); transform: translateY(-2px); }
.onb-choice.is-selected {
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 12%, var(--bg-app));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--gold) 30%, transparent);
}
.onb-choice-icon {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 6px;
}
.onb-choice-name {
    font-size: 13px;
    font-weight: 600;
}

/* Inline status dropdown in admin Payments table — sits next to PDF / Email
   buttons. Styled to feel like a btn-mini, just narrower. */
.btn-mini.pay-status-select {
    background: var(--bg-app, #0a1628);
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
    min-width: 100px;
}
.btn-mini.pay-status-select:hover {
    border-color: var(--gold);
}
.btn-mini.pay-status-select option { background: var(--bg-content); color: var(--text-primary); }
.pay-status.status-cancelled { background: rgba(120, 120, 120, 0.18); color: #888; text-decoration: line-through; }

/* === Loading overlay — swim-themed (use .loading-overlay on any container) === */
.loading-overlay {
    position: relative;
    pointer-events: none;
}
.loading-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 22, 40, 0.45);
    backdrop-filter: blur(2px);
    z-index: 50;
}
.loading-overlay::before {
    /* Swimmer emoji bobbing through animated waves */
    content: '🏊';
    position: absolute;
    top: 50%; left: 50%;
    font-size: 44px;
    transform: translate(-50%, -50%);
    animation: swimStroke 1.4s ease-in-out infinite;
    z-index: 51;
    text-shadow: 0 0 12px rgba(30, 77, 139, 0.6);
}
@keyframes swimStroke {
    0%   { transform: translate(-58%, -50%) rotate(-10deg); }
    50%  { transform: translate(-42%, -53%) rotate(10deg); }
    100% { transform: translate(-58%, -50%) rotate(-10deg); }
}

/* === Standalone swim loader — use anywhere as <div class="swim-loader"></div> ===
 * Optional <span class="swim-loader-label">Loading…</span> shows centered below.
 * Wrap both in .swim-loader-wrap for a centered block layout. */
.swim-loader-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    gap: 14px;
}
.swim-loader {
    width: 120px;
    height: 70px;
    position: relative;
    display: inline-block;
}
.swim-loader::before {
    content: '🏊';
    position: absolute;
    top: 4px;
    left: 50%;
    font-size: 38px;
    line-height: 1;
    transform: translateX(-50%) rotate(-10deg);
    animation: swimStroke 1.4s ease-in-out infinite;
}
/* Wave under swimmer — two layered waves moving in opposite phases */
.swim-loader::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 14px;
    background:
        radial-gradient(ellipse 30% 60% at 20% 100%, rgba(30, 77, 139, 0.7), transparent 70%),
        radial-gradient(ellipse 30% 60% at 50% 100%, rgba(30, 77, 139, 0.7), transparent 70%),
        radial-gradient(ellipse 30% 60% at 80% 100%, rgba(30, 77, 139, 0.7), transparent 70%);
    border-radius: 50%;
    animation: swimWave 1.6s ease-in-out infinite;
    filter: blur(1px);
}
@keyframes swimWave {
    0%, 100% { transform: translateX(-6px) scaleY(1); opacity: 0.85; }
    50%      { transform: translateX(6px) scaleY(0.7); opacity: 1; }
}
.swim-loader-label {
    color: var(--text-muted, #94a3b8);
    font-size: 13px;
    letter-spacing: 0.3px;
    text-align: center;
    animation: swimLabelPulse 1.6s ease-in-out infinite;
}
@keyframes swimLabelPulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

/* Legacy alias — old aquaSpin keyframes left for any third-party references */
@keyframes aquaSpin {
    to { transform: rotate(360deg); }
}

/* === Inline mini spinner for buttons === */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--gold, #c9a961);
    animation: aquaSpin 0.7s linear infinite;
}

/* === Paymob payment modal ===
   Must sit ABOVE the subscription/settings modal (.modal-overlay = 11000)
   so the user actually sees the card form when they click Subscribe from
   inside the plan picker. Was 10000 → silently opened BEHIND, forcing
   the user to close the front modal first to see the payment screen. */
.paymob-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 22, 40, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100001 !important;
    padding: 16px;
    isolation: isolate;
}
.paymob-modal-inner {
    /* Reverted to the original lighter elevated bg — user preferred the
       previous look. The "grey strip" on mobile is handled by pulling
       the iframe UP a few px in the mobile media query below so it
       overlaps the amount card and hides any seam. */
    background: var(--bg-elevated, #142440);
    border: 1px solid var(--border, #2a3856);
    border-radius: 14px;
    width: 100%;
    max-width: 880px;
    height: 92vh;
    max-height: 960px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.paymob-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.paymob-modal-head h3 {
    margin: 0;
    color: var(--gold, #c9a961);
    font-family: 'Cinzel', serif;
    font-size: 16px;
}

/* === NEW Paymob branded layout ===
   Brand strip + amount card sit ABOVE the iframe so the user sees
   AQUA ROYAL ACADEMY (or tenant name) and what they're paying for in
   our blue/gold theme. The white Paymob iframe blends in as a card form
   on top of that branded background. */
.paymob-brand-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    background: linear-gradient(135deg, var(--bg-sidebar, #0e1f33) 0%, var(--bg-app, #0a1628) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 30%, var(--border));
    flex-shrink: 0;
}
.paymob-brand-name {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--gold, #c9a961);
}
.paymob-close-btn {
    color: var(--text-secondary);
    font-size: 20px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.paymob-close-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.14); }
.paymob-amount-card {
    background: linear-gradient(180deg, var(--bg-content, #16243a) 0%, var(--bg-elevated, #142440) 100%);
    padding: 18px 20px 16px;
    text-align: center;
    flex-shrink: 0;
}
.paymob-amount-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.paymob-amount-value {
    font-family: 'Cinzel', serif;
    font-size: 38px;
    font-weight: 700;
    color: var(--gold, #c9a961);
    line-height: 1.1;
    margin-bottom: 10px;
}
.paymob-secure-row {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
    max-width: 360px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .paymob-brand-name { font-size: 16px; letter-spacing: 1.5px; }
    .paymob-amount-card { padding: 14px 16px 12px; }
    .paymob-amount-value { font-size: 32px; }
}
.paymob-modal-body {
    flex: 1;
    min-height: 0;
    display: block;          /* not flex — flex was leaving a 1px gap on iOS */
    overflow: hidden;
    padding: 0;
    margin: 0;
    /* Solid dark navy that matches Paymob's dark iframe background.
       The grey strip the user was seeing was the .paymob-modal-inner
       background (#142440) showing through a transparent body before
       the iframe finished painting. */
    background: #0a1628;
    font-size: 0;            /* kill the iframe baseline whitespace gap */
}
#paymob-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    display: block;          /* removes any inline-element baseline gap */
    vertical-align: top;
    background: #0a1628;
}

/* Mobile — go full-screen so card form has room to breathe */
@media (max-width: 768px) {
    .paymob-modal-overlay {
        padding: 0;
    }
    .paymob-modal-inner {
        max-width: 100%;
        width: 100%;
        height: 100vh;
        height: 100lvh;
        max-height: none;
        border-radius: 0;
        border: 0;
    }
    #paymob-iframe {
        border-radius: 0;
        /* Pull iframe up 72px — fully covers grey strip on mobile.
           Paymob has ~40px internal top padding so 72px overlap is
           safe (no text gets clipped). */
        margin-top: -72px;
        position: relative;
        z-index: 1;
    }
    .paymob-amount-card {
        /* +20 padding-bottom to keep "Secure payment..." caption clear */
        padding-bottom: 76px;
    }
}
.btn-mini.btn-pay {
    background: linear-gradient(135deg, var(--gold, #c9a961) 0%, var(--gold-dark, #9c7d3a) 100%);
    color: var(--bg-app, #0a1628);
    border: none;
    font-weight: 700;
    padding: 5px 11px;
}
.btn-mini.btn-pay:hover { filter: brightness(1.1); }

.payments-wrap, #payments-view {
    overflow-x: auto;
    max-width: 100%;
}

/* ====== DESKTOP: proper horizontal table rows (≥769px) ====== */
@media (min-width: 769px) {
    .payments-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
    .payments-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 13.5px;
    }
    .payments-table thead { display: table-header-group; }
    .payments-table thead tr {
        background: var(--bg-input);
    }
    .payments-table thead th {
        padding: 12px 14px;
        text-align: left;
        color: var(--text-secondary);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        font-weight: 700;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }
    .payments-table tbody tr {
        background: var(--bg-elevated);
        transition: background 0.12s;
    }
    .payments-table tbody tr:hover {
        background: color-mix(in srgb, var(--gold) 5%, var(--bg-elevated));
    }
    .payments-table tbody td {
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
        color: var(--text-primary);
    }
    .payments-table tbody tr:last-child td { border-bottom: none; }
    /* Invoice number stands out */
    .payments-table tbody td:first-child strong {
        color: var(--gold);
        font-size: 12px;
        letter-spacing: 0.5px;
    }
    /* Amount column gold + bigger */
    .payments-table tbody td:nth-child(5) {
        color: var(--gold);
        font-weight: 700;
        font-size: 15px;
        white-space: nowrap;
    }
    /* User column = colspan offset depending on admin vs member view (5th col for member) */
    .payments-table tbody td:nth-last-child(1) {
        text-align: right;
        white-space: nowrap;
    }
    .payments-table tbody td:nth-last-child(1) .btn-mini {
        margin-left: 4px;
    }
    /* No pseudo-labels on desktop */
    .payments-table tbody td::before { content: none !important; }
}

/* ====== MOBILE / TABLET (≤768px): card layout ====== */
@media (max-width: 768px) {
    .payments-table,
    .payments-table thead,
    .payments-table tbody,
    .payments-table tr,
    .payments-table td {
        display: block;
        width: 100%;
    }
    .payments-table thead { display: none; }
    .payments-table tr {
        background: var(--bg-elevated);
        border: 1px solid var(--border);
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 14px 16px;
        transition: border-color 0.15s;
    }
    .payments-table tr:hover { border-color: var(--gold); }
    .payments-table td {
        border: 0;
        padding: 5px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        font-size: 14px;
    }
    .payments-table td:empty { display: none; }
    .payments-table td:nth-child(1)::before { content: 'Invoice'; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
    .payments-table td:nth-child(2)::before { content: 'Member'; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
    .payments-table td:nth-child(3)::before { content: 'Description'; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
    .payments-table td:nth-child(4)::before { content: 'Issued'; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
    .payments-table td:nth-child(5)::before { content: 'Amount'; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
    .payments-table td:nth-child(6)::before { content: 'Due'; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
    .payments-table td:nth-child(7)::before { content: 'Status'; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
    .payments-table td:nth-child(5) {
        font-size: 17px;
        font-weight: 700;
        color: var(--gold);
    }
    .payments-table td:last-child {
        justify-content: flex-end;
        padding-top: 10px;
        border-top: 1px solid var(--border);
        margin-top: 10px;
        gap: 6px;
        flex-wrap: wrap;
    }
    .payments-table td:last-child::before { content: ''; }
}
@media (max-width: 768px) {
    .payments-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .payments-toolbar > * {
        flex: 1 1 100%;
    }
    .payments-stats {
        flex-direction: column;
        gap: 8px;
    }
    .payments-stats .stat-card {
        width: 100%;
    }
    .pagination {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
    }
}
.btn-mini {
    padding: 4px 8px;
    background: var(--gold);
    color: var(--text-inverse);
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

/* ============================================
   DIARY (HABIT TRACKER)
   ============================================ */
.diary-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-input);
    padding: 4px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}
.diary-tab {
    flex: 1;
    padding: 8px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.diary-tab.active {
    background: var(--gold);
    color: var(--text-inverse);
}

.diary-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    align-items: center;
}
.diary-tip {
    background: rgba(201, 169, 97, 0.08);
    border: 1px solid rgba(201, 169, 97, 0.3);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}
.diary-tip strong {
    color: var(--gold);
    margin-right: 8px;
}

.diary-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.diary-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}
.diary-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.diary-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}
.diary-period {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 200px;
    text-align: center;
}

.habit-card {
    background: var(--bg-elevated);
    border-radius: var(--radius);
    padding: 14px;
    border-left: 3px solid var(--c, var(--gold));
}
.habit-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 8px;
}
.habit-id {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.habit-emoji {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.habit-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 15px;
}
.habit-meta {
    font-size: 11px;
    color: var(--text-muted);
}
.habit-actions {
    display: flex;
    gap: 4px;
}

.habit-cells {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.habit-cell {
    position: relative;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 4px;
    overflow: hidden;
    color: var(--text-primary);
    transition: var(--t-fast);
}
.habit-cell:hover {
    border-color: var(--c);
}
.habit-cell.today {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold);
}
.habit-cell.future {
    opacity: 0.4;
    cursor: not-allowed;
}
.cell-day {
    font-size: 9px;
    text-transform: uppercase;
    color: var(--text-muted);
    z-index: 2;
    line-height: 1;
}
.cell-num {
    font-size: 16px;
    font-weight: 700;
    z-index: 2;
    margin-top: 1px;
    line-height: 1;
}
.cell-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--c);
    opacity: 0.3;
    z-index: 1;
}
.cell-check {
    position: absolute;
    bottom: 4px;
    z-index: 2;
    color: var(--c);
    font-weight: 700;
    font-size: 14px;
}
.cell-amt {
    position: absolute;
    bottom: 2px;
    z-index: 2;
    font-size: 9px;
    color: var(--text-secondary);
}

/* Monthly grid */
.m-grid-head {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    font-size: 10px;
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.m-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.m-cell {
    aspect-ratio: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--text-primary);
    font-weight: 600;
    transition: var(--t-fast);
}
.m-cell.empty {
    background: transparent;
    border: none;
    cursor: default;
}
.m-cell.done {
    background: var(--c);
    border-color: var(--c);
    color: white;
}
.m-cell.today {
    box-shadow: 0 0 0 2px var(--gold);
}
.m-cell.future { opacity: 0.4; cursor: not-allowed; }
.m-num { font-size: 11px; }

/* Yearly grid */
.y-grid {
    display: grid;
    grid-template-columns: repeat(53, 1fr);
    gap: 2px;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, 1fr);
}
.y-cell {
    aspect-ratio: 1;
    background: var(--bg-input);
    border-radius: 2px;
    min-width: 6px;
    min-height: 6px;
}
.y-cell.empty { background: transparent; }
.y-cell.today { outline: 1px solid var(--gold); }

/* Habit form presets */
.habit-presets {
    display: flex;
    gap: 4px;
    background: var(--bg-input);
    padding: 4px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}
.preset-tab {
    flex: 1;
    padding: 6px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.preset-tab.active {
    background: var(--royal-blue);
    color: white;
}
.habit-presets-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
    padding: 4px;
}
.preset-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: var(--t-fast);
}
.preset-btn:hover {
    background: var(--bg-active);
    border-color: var(--gold);
}
.habit-form-divider {
    height: 1px;
    background: var(--border);
    margin: 16px 0;
}

/* Color picker */
.color-picker {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.color-picker button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--t-fast);
}
.color-picker button.active {
    border-color: white;
    transform: scale(1.1);
    box-shadow: 0 0 0 2px var(--gold);
}

/* ============================================
   MOBILE - DIARY adjustments
   ============================================ */
@media (max-width: 600px) {
    .habit-cells {
        grid-template-columns: repeat(7, 1fr);
        gap: 3px;
    }
    .habit-cell { height: 56px; }
    .cell-num { font-size: 13px; }
    .payments-stats { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
    .payments-stats .stat-card { padding: 8px; }
    .payments-stats .stat-value { font-size: 16px; }
    .perms-matrix { font-size: 10px; }
    .habit-presets-list { grid-template-columns: 1fr; }
    .admin-tabs { overflow-x: auto; }
    .admin-tab { white-space: nowrap; flex: none; padding: 8px 12px; }
}

/* ============================================
   DASH CARDS (home dashboard)
   ============================================ */
.dash-card[data-action] { cursor: pointer; }


/* ============================================
   ADMIN USERS TABLE (single-row layout)
   ============================================ */
.admin-users-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
}
.admin-users-row {
    display: grid;
    grid-template-columns: 44px 1.4fr 1.6fr 1fr 100px 90px 80px;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.15s, transform 0.1s;
}
.admin-users-row:hover {
    border-color: var(--gold);
    transform: translateY(-1px);
}
.admin-users-head {
    background: transparent;
    border: none;
    padding: 4px 12px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    font-weight: 600;
}
.admin-users-head:hover { border: none; transform: none; }
.auc-avatar .msg-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    overflow: hidden;
}
.auc-name { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auc-email { color: var(--text-secondary); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auc-role { font-size: 13px; font-weight: 600; }
.auc-joined { font-size: 12px; color: var(--text-secondary); }
.auc-spent { font-size: 14px; font-weight: 700; color: var(--gold); text-align: right; }
.auc-actions { display: flex; gap: 4px; justify-content: flex-end; }
@media (max-width: 900px) {
    .admin-users-head { display: none; }
    .admin-users-row {
        grid-template-columns: 44px 1fr 80px;
        grid-template-areas:
            "avatar name actions"
            "avatar email actions"
            "avatar meta actions";
        row-gap: 2px;
    }
    .auc-avatar { grid-area: avatar; align-self: start; }
    .auc-name { grid-area: name; }
    .auc-email { grid-area: email; font-size: 12px; }
    .auc-role { display: none; }
    .auc-joined, .auc-spent {
        display: inline-block; margin-right: 8px;
        grid-area: meta; font-size: 11px;
    }
    .auc-spent { color: var(--gold); }
    .auc-actions { grid-area: actions; flex-direction: column; }
}

/* ============================================
   PERMISSIONS MATRIX (3-state grid)
   ============================================ */
#perms-matrix {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    margin-top: 10px;
}
#perms-matrix th {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 6px;
    background: var(--bg-elevated);
    border-radius: 8px;
}
#perms-matrix th.perm-corner { background: transparent; }
#perms-matrix td.perm-channel-name {
    padding: 8px 12px;
    background: var(--bg-card);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
}
#perms-matrix td.perm-cell {
    text-align: center;
    padding: 14px 8px;
    background: var(--bg-card);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s, transform 0.08s;
    user-select: none;
}
#perms-matrix td.perm-cell:hover {
    background: var(--bg-elevated);
    transform: scale(1.05);
}
#perms-matrix td.perm-cell:active {
    transform: scale(0.95);
}
#perms-matrix .dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    vertical-align: middle;
}
.dot-none { background: #4a5568; border: 1.5px solid #6b7280; }
.dot-view { background: #faa61a; border: 1.5px solid #f59e0b; }
.dot-edit { background: #43b581; border: 1.5px solid #10b981; }
.perms-legend {
    display: flex;
    gap: 18px;
    margin: 8px 0 14px;
    font-size: 13px;
    color: var(--text-secondary);
}
.perms-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ============================================
   MEMBERSHIP CAROUSEL (Settings) — v2 polished
   ============================================ */
.membership-carousel-wrap {
    position: relative;
    margin: 18px 0 12px;
}
.membership-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 14px 1cm 24px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* Soft fade on off-screen edges so neighbors feel secondary to the focused card */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.membership-carousel::-webkit-scrollbar { display: none; }

.mc-card {
    /* WIDER cards — user wants the card to almost fill the viewport with
       1cm margins on each side. `calc(100% - 2cm)` makes the visible card
       fill the carousel minus the side padding, and max-width keeps it
       reasonable on tablets/desktops. Height reverted to the original
       compact 360px — user said don't stretch tall. */
    flex: 0 0 calc(100% - 2cm);
    max-width: 520px;
    min-height: 360px;
    scroll-snap-align: center;
    padding: 26px 28px 28px;
    background:
        radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c, #c9a961) 12%, transparent) 0%, transparent 60%),
        linear-gradient(180deg, var(--bg-card, #16243a) 0%, color-mix(in srgb, var(--bg-card, #16243a) 92%, #000) 100%);
    border: 1px solid color-mix(in srgb, var(--c, #c9a961) 24%, var(--border));
    border-radius: 20px;
    text-align: center;
    position: relative;
    /* FOCAL EFFECT — non-active cards sit "behind": dimmed + scaled down.
       Even snappier (0.16s → 0.10s) so the slide feels instant. */
    transform: scale(0.86);
    opacity: 0.45;
    filter: saturate(0.7);
    transition: transform 0.10s cubic-bezier(.2,.8,.2,1), opacity 0.10s, filter 0.10s, border-color 0.10s, box-shadow 0.10s;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    z-index: 1;
    /* IMPORTANT: kill leftover legacy margins/transform from earlier in the file */
    margin: 0;
}
/* Active (centered) card — brought to front, full opacity, scaled up.
   Sits on top of siblings via z-index so the popular ribbon/save pill
   can overhang the dimmed cards on either side. */
.mc-card.is-active {
    transform: scale(1.0);
    opacity: 1;
    filter: none;
    z-index: 10;
    box-shadow: 0 18px 48px rgba(0,0,0,0.45), 0 0 0 1px color-mix(in srgb, var(--c, var(--gold)) 40%, transparent);
}
/* Push CTA button to the bottom of the card so it never touches the
   last feature line. `margin-top:auto` claims any leftover vertical
   space when the features list is short. */
.mc-card > .mc-select {
    margin-top: auto;
}

/* Currently-selected plan — colored accent only.
   Transform/opacity is owned by the focal-carousel rules (.is-active),
   so we DON'T override scale here — otherwise a current-but-not-centered
   card would stay big while siblings dim, breaking the focal effect. */
.mc-card.is-current {
    border-color: var(--c, var(--gold));
    box-shadow:
        0 14px 40px color-mix(in srgb, var(--c, var(--gold)) 36%, transparent),
        0 0 0 1px var(--c, var(--gold)) inset;
}

/* Popular / promoted plan — softer accent */
.mc-card.is-popular {
    border-color: color-mix(in srgb, var(--c, var(--gold)) 60%, var(--border));
    /* Reserve room for the inline popular tag so it doesn't overlap the name */
    padding-top: calc(26px + 14px);
}
@media (max-width: 480px) {
    .mc-card.is-popular { padding-top: calc(22px + 0.5cm + 14px); }
}
.mc-card.is-popular::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    pointer-events: none;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--c, var(--gold)) 18%, transparent) 0%,
        transparent 55%);
}

/* Top-center popular ribbon.
   NOTE: the card has overflow:hidden (so the save corner ribbon gets
   clipped to the rounded corner). That clipping was hiding the tag's
   overhang above the top edge — so we anchor it INSIDE the card at
   top: 8px, with a soft glow + z-index so it remains prominent on
   mobile where the card is the only visible UI element. */
.mc-card .popular-tag {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    background: linear-gradient(135deg, var(--c, var(--gold)) 0%, color-mix(in srgb, var(--c, var(--gold)) 70%, #fff) 100%);
    color: #0a1a2f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    padding: 6px 14px;
    border-radius: 999px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--c, var(--gold)) 40%, transparent);
    z-index: 3;
}

/* Top-right "✓ CURRENT" pill */
.mc-card .current-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    background: color-mix(in srgb, var(--c, var(--gold)) 18%, transparent);
    color: var(--c, var(--gold));
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--c, var(--gold)) 40%, transparent);
    z-index: 3;
}

.mc-name {
    font-family: 'Cinzel', serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--c, var(--gold));
    letter-spacing: 1px;
    margin: 6px 0 6px;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

.mc-price {
    font-size: 38px;
    font-weight: 800;
    color: var(--text-primary);
    font-family: 'Cinzel', serif;
    margin: 2px 0 4px;
    line-height: 1;
    position: relative;
    z-index: 2;
}
.mc-price .mc-period {
    font-size: 0.32em; /* small inline period — sits next to the big price on one line */
    color: var(--text-muted);
    font-weight: 500;
    margin-left: 4px;
    font-family: var(--font-body, system-ui);
    vertical-align: middle;
    letter-spacing: 0;
}
/* SALE row — sits ABOVE the big monthly price.
   Layout: [~~original~~]  [Save -N% pill]  on one short row,
   then the big monthly price beneath it. */
.mc-sale-row {
    /* Sits BELOW the big monthly price now (user request).
       Compact spacing so the price+old-price reads as one block. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 2px 0 4px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}
.mc-sale-row .mc-price-old {
    font-size: 15px;
    color: var(--text-muted);
    text-decoration: line-through;
    font-weight: 600;
    font-family: var(--font-body, system-ui);
    opacity: 0.75;
}
.mc-sale-row .mc-save-pill {
    display: inline-block;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 9px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    font-family: var(--font-body, system-ui);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
    text-transform: uppercase;
}

/* SAVE CORNER RIBBON — green diagonal strip anchored to the top-right
   of the card. Rotated 45° so it reads like a classic discount banner.
   The card already has overflow:hidden on the corners via border-radius;
   we use a small wrapper trick: the ribbon is positioned absolute and
   the card's own border-radius clips its corners. */
.mc-card {
    overflow: hidden; /* required so the ribbon's overhang gets clipped to the rounded corner */
}
.mc-save-corner {
    position: absolute;
    top: 18px;
    right: -42px;
    width: 150px;
    transform: rotate(45deg);
    transform-origin: center;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    padding: 5px 0;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-family: var(--font-body, system-ui);
    box-shadow: 0 3px 8px rgba(16, 185, 129, 0.4);
    z-index: 5;
    pointer-events: none;
}
@media (min-width: 600px) {
    .mc-save-corner { font-size: 12px; top: 22px; right: -48px; width: 170px; padding: 6px 0; }
}
/* Desktop bump — sale row stays compact but readable next to bigger price */
@media (min-width: 600px) {
    .mc-sale-row .mc-price-old { font-size: 17px; }
    .mc-sale-row .mc-save-pill { font-size: 12px; padding: 5px 11px; }
}

.mc-credits {
    font-size: 13px;
    color: var(--c, var(--gold));
    margin: 4px 0 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    position: relative;
    z-index: 2;
}

.mc-features {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    max-height: none; /* No internal scroll — card grows to fit so the CTA sits naturally at the bottom */
    text-align: left;
    flex: 1;
    position: relative;
    z-index: 2;
}
.mc-features li {
    padding: 8px 0 8px 22px;
    color: var(--text-secondary);
    font-size: 13px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    position: relative;
}
.mc-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 7px;
    color: var(--c, var(--gold));
    font-weight: 800;
    font-size: 12px;
}
.mc-features li:last-child { border-bottom: none; }

.mc-select {
    width: 100%;
    margin-top: 14px;
    background: linear-gradient(135deg, var(--c, var(--gold)) 0%, color-mix(in srgb, var(--c, var(--gold)) 72%, #000) 100%);
    color: #0a1a2f;
    border: none;
    padding: 13px 14px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s, box-shadow 0.15s;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--c, var(--gold)) 25%, transparent);
    position: relative;
    z-index: 2;
}
.mc-select:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--c, var(--gold)) 40%, transparent);
}
.mc-select:active:not(:disabled) { transform: translateY(0); }
.mc-select:disabled {
    background: color-mix(in srgb, var(--c, var(--gold)) 15%, var(--bg-elevated));
    color: var(--c, var(--gold));
    cursor: default;
    box-shadow: none;
    opacity: 0.85;
}

/* Carousel arrows — visible nav circles on the sides */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(10,26,47,0.95), rgba(15,35,60,0.95));
    color: var(--gold);
    border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--border));
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    line-height: 1;
}
.carousel-arrow:hover {
    background: var(--gold);
    color: #0a1a2f;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--gold) 50%, transparent);
}
.carousel-arrow:active { transform: translateY(-50%) scale(0.94); }
.carousel-prev { left: 6px; }
.carousel-next { right: 6px; }

/* Tablet/desktop / landscape — wider max, height NOT stretched.
   User reverted the height to original (~400) and asked for it just wider:
   max-width 432 → 520 (+20%). Carousel padding switched to fixed 1cm so
   the cards almost reach the screen edge. */
@media (min-width: 600px) {
    .mc-card {
        flex: 0 0 calc(100% - 2cm);
        max-width: 520px;
        min-height: 400px;
    }
    .mc-card.is-active {
        transform: scale(1.06);
    }
    .membership-carousel { padding: 18px 1cm 28px; }
    .mc-name { font-size: 22px; }
    .mc-price { font-size: 44px; }
}

/* Mobile-specific overrides — STACKED carousel effect.
   - Card occupies 92% of viewport width (wide, almost edge-to-edge)
   - Gap collapsed to 0, carousel side padding 4% (centers each card)
   - Inactive cards scale 0.72 + heavy dim so they sit visually BEHIND
     the active card (peeking from underneath)
   - Active card z-index high so it overlaps both neighbours
   The 472px min-height + extended vertical padding preserved from the
   previous request — the user only wants the wider/stacked look added. */
@media (max-width: 480px) {
    .membership-carousel { padding: 12px 4% 20px; gap: 0; }
    .mc-card {
        flex: 0 0 92%;
        max-width: none;
        min-height: 472px;
        padding: calc(22px + 0.5cm) 22px calc(18px + 0.5cm);
    }
    .mc-card:not(.is-active) {
        /* Stronger shrink than the desktop base (0.86) so siblings clearly
           sit "behind" the front card on a small screen. */
        transform: scale(0.72);
        opacity: 0.45;
        filter: saturate(0.6);
    }
    .mc-card.is-active {
        transform: scale(1.0);
        z-index: 20;
        box-shadow: 0 14px 40px rgba(0,0,0,0.55), 0 0 0 1px color-mix(in srgb, var(--c, var(--gold)) 35%, transparent);
    }
    .mc-name { font-size: 18px; }
    .mc-price { font-size: 32px; }
    .mc-features { max-height: 280px; overflow-y: auto; }
    .mc-features li { font-size: 12.5px; padding: 6px 0 6px 22px; }
}

/* Real desktop (>=1024px) — make the card SHORTER + WIDER so the whole
   subscription page fits on one screen without scrolling. User asked
   for less vertical bulk; desktop has horizontal room to spare. */
@media (min-width: 1024px) {
    .mc-card {
        max-width: 640px;
        min-height: 300px;
        padding: 20px 28px 22px;
    }
    .mc-card.is-active {
        transform: scale(1.04);
    }
    .mc-name { font-size: 20px; margin-bottom: 4px; }
    .mc-price { font-size: 38px; }
    .mc-features { margin: 10px 0 0; }
    .mc-features li { padding: 5px 0 5px 22px; font-size: 13px; }
    .mc-sale-row { margin: 4px 0 0; }
    .mc-select { margin-top: 12px; padding-top: 12px; padding-bottom: 12px; }
}

/* ============================================
   CREDITS LOG (Settings)
   ============================================ */
.credits-log-row {
    display: grid;
    grid-template-columns: 90px 1fr 80px;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    align-items: center;
}
.credits-log-row:last-child { border-bottom: none; }
.credits-log-time { color: var(--text-muted); font-size: 12px; }
.credits-log-reason { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.credits-log-delta { text-align: right; font-weight: 700; }
.credits-log-delta.plus { color: var(--success, #43b581); }
.credits-log-delta.minus { color: var(--danger, #e0524d); }

/* ============================================
   POLISH — added 2026-05-12 batch
   Loading states, animations, print, mobile spacing.
   ============================================ */

/* === Loading skeleton placeholder === */
.skeleton {
    background: linear-gradient(90deg,
        var(--bg-card, #1a2a44) 0%,
        var(--bg-elevated, #243757) 50%,
        var(--bg-card, #1a2a44) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s linear infinite;
    border-radius: 8px;
    color: transparent;
    pointer-events: none;
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-line {
    height: 14px;
    margin: 6px 0;
    width: 100%;
}
.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 70%; }

/* === Smoother button presses === */
button:active:not(:disabled) {
    transform: scale(0.97);
}
button {
    transition: transform 0.08s ease, opacity 0.12s, background-color 0.12s, color 0.12s;
}
button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* === Focus rings — visible for keyboard users === */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible {
    outline: 2px solid var(--gold, #c9a961);
    outline-offset: 2px;
}

/* === Toast slide-in === */
.toast {
    animation: toastIn 0.22s cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* === Modal fade-in === */
.modal:not(.hidden),
.modal-overlay:not(.hidden) {
    animation: modalFadeIn 0.18s ease-out;
}
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* === Empty state — make it less austere === */
.empty-state {
    padding: 32px 20px;
    text-align: center;
    color: var(--text-secondary, #8090a4);
}
.empty-state .empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.7;
    animation: emptyFloat 3.5s ease-in-out infinite;
}
@keyframes emptyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.empty-state h3 {
    color: var(--text-primary);
    margin: 0 0 6px;
}
.empty-state p {
    margin: 0;
    max-width: 320px;
    margin-inline: auto;
    line-height: 1.5;
}

/* === Mobile spacing fine-tunes === */
@media (max-width: 768px) {
    .message-input-wrap {
        padding: 8px 12px max(12px, env(safe-area-inset-bottom));
    }
    .content-header {
        padding-left: 12px;
        padding-right: 12px;
    }
    .channel-topic {
        display: none; /* save horizontal space on mobile header */
    }
    .modal-header h2 {
        font-size: 16px;
    }
    .training-detail-card .modal-body,
    .training-detail-card .modal-header {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* === iPhone safe-area for floating buttons === */
@supports (padding: max(0px)) {
    .diary-bottom-bar {
        padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }
}

/* === Improved scrollbar (desktop) === */
@media (min-width: 901px) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: var(--border, #2a3856);
        border-radius: 5px;
        border: 2px solid var(--bg-app, #0a1628);
    }
    ::-webkit-scrollbar-thumb:hover {
        background: var(--gold-dark, #9c7d3a);
    }
}

/* === Larger tap targets on mobile (Apple HIG: 44px) === */
@media (pointer: coarse) {
    .icon-btn,
    .post-action,
    .channel,
    .signup-row,
    .credit-pack-buy {
        min-height: 44px;
    }
}

/* === Print styles — invoices look professional when printed === */
@media print {
    body * { visibility: hidden; }
    .modal:not(.hidden),
    .modal:not(.hidden) *,
    #payments-view,
    #payments-view * {
        visibility: visible;
    }
    .modal:not(.hidden) {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        background: white !important;
        color: black !important;
        box-shadow: none;
    }
    .modal-close,
    .post-action,
    .icon-btn,
    button {
        display: none !important;
    }
    .payments-table tr {
        page-break-inside: avoid;
    }
    @page {
        size: A4;
        margin: 1.5cm;
    }
}

/* === Slight glow on new content (e.g. just-arrived message) === */
.message.is-new,
.training-card.is-new,
.report-row.is-new {
    animation: newItemGlow 1.6s ease-out;
}
@keyframes newItemGlow {
    0% { background: color-mix(in srgb, var(--gold, #c9a961) 22%, transparent); }
    100% { background: transparent; }
}

/* === Visually distinguish disabled-state buttons === */
.btn-primary[disabled],
.btn-ghost[disabled] {
    opacity: 0.5;
    filter: saturate(0.5);
}

/* === Loader spinner (inline use) === */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border, #2a3856);
    border-top-color: var(--gold, #c9a961);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* === Better hover feedback on cards === */
.training-card:hover,
.credit-pack-card:hover,
.dash-card:hover,
.office-plan-row:hover {
    transform: translateY(-1px);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

/* === Pinned message visual cue === */
.message[data-msg-id]:has(.msg-badge.pinned) {
    background: color-mix(in srgb, var(--gold, #c9a961) 7%, transparent);
    border-left: 3px solid var(--gold, #c9a961);
    padding-left: 8px;
}
.msg-badge.pinned {
    color: var(--gold, #c9a961);
    margin-right: 6px;
}

/* === Inbox badge pulse when count changes === */
.inbox-badge:not(.hidden) {
    animation: inboxPulse 1.4s ease-out;
}
@keyframes inboxPulse {
    0% { transform: scale(1); }
    25% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* === Form input gentle highlight on focus === */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--gold, #c9a961) !important;
}

/* === Voice message bubble polish === */
.voice-msg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-elevated, #142440);
    border-radius: 12px;
    margin-top: 4px;
}
.voice-msg audio {
    height: 32px;
    max-width: 240px;
}
.voice-duration {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

/* ============================================================
   NOTIFICATIONS PANEL (dropdown from bell button)
   ============================================================ */
.notif-panel {
    position: absolute;
    top: 44px;
    right: 0;
    width: 320px;
    max-width: calc(100vw - 24px);
    max-height: 70vh;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
    z-index: 1500;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.notif-panel.hidden { display: none; }

/* On mobile the bell button can sit near the right edge — the dropdown would
 * fall off-screen. Switch to a centered fixed sheet so it's always reachable. */
@media (max-width: 600px) {
    .notif-panel {
        position: fixed;
        top: auto;
        right: auto;
        left: 50%;
        bottom: auto;
        transform: translateX(-50%);
        top: 64px;
        width: calc(100vw - 24px);
        max-width: 420px;
        max-height: 75vh;
    }
}
.notif-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
}
.notif-panel-head h3 {
    margin: 0;
    font-size: 14px;
    color: var(--text-primary);
}
#notif-mark-all {
    font-size: 11px;
    color: var(--gold);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    width: auto;
    height: auto;
}
.notif-panel-list {
    overflow-y: auto;
    flex: 1;
}
.notif-panel-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.notif-row {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 10px;
    cursor: pointer;
    transition: background 0.12s;
    position: relative;
}
.notif-row:hover { background: var(--bg-hover); }
.notif-row.is-unread { background: color-mix(in srgb, var(--gold) 8%, transparent); }
.notif-row-icon {
    font-size: 20px;
    flex-shrink: 0;
}
.notif-row-body { flex: 1; min-width: 0; }
.notif-row-text {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.notif-row-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}
.notif-row-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
    margin-top: 6px;
}

/* ============================================================
   EMOJI PICKER — popover above message composer
   ============================================================ */
.emoji-popover {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.5);
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
    width: 280px;
    max-height: 260px;
    overflow-y: auto;
}
@media (max-width: 480px) {
    .emoji-popover {
        width: calc(100vw - 24px);
        grid-template-columns: repeat(8, 1fr);
        left: 12px !important;
    }
}
.emoji-btn-item {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 22px;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.12s, transform 0.1s;
    line-height: 1;
}
.emoji-btn-item:hover {
    background: var(--bg-app);
    transform: scale(1.2);
}
.emoji-btn-item:active { transform: scale(0.95); }

/* Visual cue when mic is recording */
#mic-btn.is-recording {
    background: var(--danger, #e0524d) !important;
    color: white !important;
    animation: mic-pulse 1.4s infinite;
}
@keyframes mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224, 82, 77, 0.5); }
    50%      { box-shadow: 0 0 0 8px rgba(224, 82, 77, 0); }
}

/* ============================================================
   ONBOARDING TOUR — first-run guided overlay
   ============================================================ */
.onb-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    /* Stronger blur + opacity so background UI is genuinely obscured.
       New users were getting confused trying to tap things behind the
       overlay; now it's clear the tour is the only thing to interact with. */
    background: rgba(10, 22, 40, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    pointer-events: none;
}
.onb-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* "Spotlight" highlight around the target element — bigger / more vivid
   so users can't miss what we're pointing at. The HUGE outer shadow
   creates the dim+blur over the rest of the screen. */
.onb-spotlight {
    position: fixed;
    border-radius: 14px;
    pointer-events: none;
    box-shadow:
        0 0 0 9999px rgba(10, 22, 40, 0.94),
        0 0 0 4px var(--gold),
        0 0 36px color-mix(in srgb, var(--gold) 80%, transparent),
        0 0 60px color-mix(in srgb, var(--gold) 50%, transparent);
    transition: top 0.35s cubic-bezier(.2,.8,.2,1),
                left 0.35s cubic-bezier(.2,.8,.2,1),
                width 0.35s cubic-bezier(.2,.8,.2,1),
                height 0.35s cubic-bezier(.2,.8,.2,1);
    animation: onb-pulse 1.6s ease-in-out infinite;
}
@keyframes onb-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 9999px rgba(10, 22, 40, 0.94),
            0 0 0 4px var(--gold),
            0 0 36px color-mix(in srgb, var(--gold) 80%, transparent),
            0 0 60px color-mix(in srgb, var(--gold) 50%, transparent);
    }
    50% {
        box-shadow:
            0 0 0 9999px rgba(10, 22, 40, 0.94),
            0 0 0 5px var(--gold),
            0 0 50px color-mix(in srgb, var(--gold) 100%, transparent),
            0 0 90px color-mix(in srgb, var(--gold) 70%, transparent);
    }
}

/* The instructional card */
.onb-card {
    position: fixed;
    width: 320px;
    max-width: calc(100vw - 24px);
    background: linear-gradient(160deg, var(--bg-elevated) 0%, color-mix(in srgb, var(--bg-elevated) 88%, var(--bg-app)) 100%);
    border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--border));
    border-radius: 14px;
    padding: 18px 18px 14px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
    z-index: 99999;
    color: var(--text-primary);
    transition: top 0.3s, left 0.3s;
}
.onb-card.is-center {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: 380px;
}

.onb-progress {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}
.onb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-strong, rgba(255,255,255,0.12));
    transition: background 0.2s, transform 0.2s;
}
.onb-dot.active {
    background: var(--gold);
    transform: scale(1.3);
}
.onb-dot.done { background: color-mix(in srgb, var(--gold) 50%, transparent); }

.onb-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    border: 0;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.onb-close:hover {
    background: var(--bg-app);
    color: var(--text-primary);
}
.onb-title {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    /* Cinzel renders ALL CAPS by default — keep title casing readable */
    text-transform: none;
}
.onb-body {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-secondary);
}
/* Inline link inside an onboarding step (e.g. final step → #welcome) */
.onb-link {
    display: inline-block;
    margin-top: 6px;
    color: var(--gold);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.onb-link:hover { opacity: 0.85; }
.onb-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.onb-skip {
    background: transparent;
    color: var(--text-muted);
    border: 0;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 8px;
    transition: color 0.15s;
}
.onb-skip:hover { color: var(--text-primary); }
.onb-nav {
    display: flex;
    gap: 6px;
}
.onb-prev, .onb-next {
    background: var(--bg-app);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    font-size: 13px;
}
.onb-prev {
    width: 36px;
    padding: 8px 0;
    font-size: 16px;
}
.onb-next {
    background: linear-gradient(135deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 70%, #000) 100%);
    color: #0a1a2f;
    border-color: transparent;
    min-width: 80px;
}
.onb-next:hover { filter: brightness(1.08); transform: translateY(-1px); }
.onb-prev:hover { border-color: var(--gold); }

/* Prevent body scroll during tour */
body.onb-active { overflow: hidden; }

@media (max-width: 768px) {
    /* FORCE-CENTER the tour card on every step — admin asked for this so
       new users don't see the card jumping around the screen between
       steps. Override the inline top/left set by the JS placement logic. */
    .onb-card {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100vw - 24px) !important;
        max-width: 360px;
        padding: 20px 18px 16px;
    }
    .onb-title { font-size: 17px; }
    .onb-body { font-size: 14px; }
}

/* ============================================================
   MY PROGRESS DASHBOARD — member retention feature
   ============================================================ */
.progress-wrap {
    padding: 4px 0 16px;
}

/* Hero stats grid */
.progress-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.progress-card {
    background: linear-gradient(160deg, var(--bg-elevated) 0%, color-mix(in srgb, var(--bg-elevated) 80%, var(--bg-app)) 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s, box-shadow 0.18s;
}
.progress-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.3);
}
.progress-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 8%, transparent) 0%, transparent 60%);
    pointer-events: none;
}
.progress-card-icon {
    font-size: 28px;
    margin-bottom: 6px;
}
.progress-card-value {
    font-family: 'Cinzel', serif;
    font-size: 32px;
    font-weight: 800;
    color: var(--gold);
    line-height: 1.1;
    margin-bottom: 4px;
}
.progress-card-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 700;
}
.progress-card-sub {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.85;
}
/* Card variants — left accent line */
.progress-card-trainings { border-left: 3px solid #3b82f6; }
.progress-card-distance  { border-left: 3px solid #14b8a6; }
.progress-card-pbs       { border-left: 3px solid var(--gold); }
.progress-card-streak    { border-left: 3px solid #f97316; }

/* Sections */
.progress-section {
    margin-top: 22px;
    padding: 18px 18px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
}
.progress-section h3 {
    margin: 0 0 6px;
    font-size: 16px;
    color: var(--text-primary);
}
.progress-section-sub {
    margin: 0 0 14px;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* === Coach Goals (personal targets set by coach) === */
.coach-goals-section {
    background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 8%, var(--bg-elevated)) 0%, var(--bg-elevated) 60%);
    border-color: color-mix(in srgb, var(--gold) 30%, var(--border));
}
.goals-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.goal-row {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    align-items: flex-start;
}
.goal-row.is-done {
    background: rgba(67, 181, 129, 0.10);
    border-color: rgba(67, 181, 129, 0.45);
}
.goal-row.is-cancelled {
    opacity: 0.55;
}
.goal-icon {
    flex-shrink: 0;
    font-size: 24px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}
.goal-body {
    flex: 1;
    min-width: 0;
}
.goal-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.goal-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}
.goal-status-pill {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.goal-status-pill.done {
    background: rgba(67, 181, 129, 0.25);
    color: #6dd7a3;
}
.goal-status-pill.cancelled {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}
.goal-days, .goal-due, .goal-overdue {
    font-size: 11px;
    color: var(--text-muted);
}
.goal-due { color: #ffb84d; font-weight: 600; }
.goal-overdue { color: #e0524d; font-weight: 600; }
.goal-desc {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
    line-height: 1.4;
}
.goal-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
    margin: 6px 0 6px;
}
.goal-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), #ffd278);
    border-radius: 4px;
    transition: width 0.4s ease-out;
}
.goal-row.is-done .goal-progress-fill {
    background: linear-gradient(90deg, #43b581, #6dd7a3);
}
.goal-progress-text {
    font-size: 12px;
    color: var(--text-muted);
}
.goal-reward {
    color: var(--gold);
}

/* === Strava-style goal card === */
.goal-row.strava-style {
    display: flex;
    gap: 14px;
    padding: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--c) 8%, var(--bg-elevated)) 0%, var(--bg-elevated) 60%);
    border: 1px solid color-mix(in srgb, var(--c) 25%, var(--border));
    border-left: 4px solid var(--c);
    border-radius: 14px;
    align-items: center;
    transition: transform 0.15s, box-shadow 0.15s;
}
.goal-row.strava-style:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.goal-row.strava-style.is-done {
    background: linear-gradient(135deg, rgba(67, 181, 129, 0.16) 0%, var(--bg-elevated) 60%);
    border-color: rgba(67, 181, 129, 0.5);
    border-left-color: #43b581;
}
.goal-ring-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}
.goal-ring {
    transform: rotate(0deg);
}
.goal-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 5;
}
.goal-ring-fg {
    fill: none;
    stroke: var(--c);
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease-out;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 50%, transparent));
}
.goal-row.is-done .goal-ring-fg { stroke: #43b581; }
.goal-ring-emoji {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    line-height: 1;
}
.goal-row.is-done .goal-ring-emoji {
    color: #43b581;
    font-weight: 800;
    font-size: 24px;
}
.goal-type-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: var(--c);
    margin-bottom: 4px;
    opacity: 0.9;
}
.goal-pct {
    color: var(--c);
    font-weight: 700;
}
.goal-row.is-done .goal-pct { color: #43b581; }
.goal-progress-text strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* === Goal achievement story (for completed goals) ===
 * Shows the "before / after" narrative: when the goal was set, what the
 * target was, and when it was achieved. Lives inside .goal-progress-text. */
.goal-achievement-story {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: rgba(67, 181, 129, 0.10);
    border-left: 3px solid #43b581;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.goal-achievement-story .gas-set {
    color: var(--text-secondary);
}
.goal-achievement-story .gas-arrow {
    color: #43b581;
    font-weight: 700;
    text-align: center;
    margin: 2px 0;
    font-size: 14px;
}
.goal-achievement-story .gas-done {
    color: #43b581;
    font-weight: 600;
}
.goal-achievement-story strong {
    color: var(--text-primary);
    font-weight: 700;
}
.goal-achievement-story .gas-done strong {
    color: #43b581;
}
/* On wider screens, lay the story out horizontally if it fits */
@media (min-width: 600px) {
    .goal-achievement-story {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    .goal-achievement-story .gas-arrow { margin: 0; }
}

/* === Custom metrics (weight, bench press, etc.) ===
 * Cards live inside the Records modal, below swimming bests. Each card
 * shows Start → Now → Goal with a tiny sparkline of readings over time.
 */
.metrics-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.metric-card {
    /* Match the lighter blue used by swimming-record cards (var(--bg-elevated))
       so My Records feels visually unified between disciplines and metrics. */
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius, 12px);
    padding: 14px;
}
.metric-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.metric-emoji {
    font-size: 24px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    flex-shrink: 0;
}
.metric-name-block { flex: 1; min-width: 0; }
.metric-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.2;
}
.metric-sub {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.metric-target { color: #43b581; font-weight: 600; }
/* "goal 125 kg" — green target number inlined with the metric name */
.metric-goal-inline {
    color: #43b581;
    font-weight: 800;
}
.metric-goal-by {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 12px;
    margin-left: 4px;
}
/* 2-column variant (Start + Now) since Goal block was removed — target
   value lives in the title now. */
.metric-values-row.metric-values-row-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) {
    .metric-values-row.metric-values-row-2 { grid-template-columns: 1fr 1fr; }
    .metric-values-row.metric-values-row-2 .metric-val-block:nth-child(3) { display: none; }
}
.metric-edit-btn {
    padding: 4px 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1;
}
.metric-values-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.metric-val-block {
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    padding: 8px 10px;
    text-align: center;
}
.metric-val-block.metric-val-current {
    /* Subtle white wash to highlight current — was using rgba(var(--c)…)
       which is invalid CSS (var() returns a hex, not raw RGB triples)
       and rendered as opaque dark blue in some browsers. */
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.metric-val-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 4px;
    font-weight: 600;
}
.metric-val {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}
.metric-val-date {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 2px;
    opacity: 0.7;
}
.metric-delta {
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}
.metric-sparkline-wrap {
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    padding: 6px 8px;
    margin-bottom: 10px;
    min-height: 60px;
    display: flex;
    align-items: center;
}
.metric-sparkline { display: block; }
.metric-spark-empty {
    color: var(--text-secondary);
    font-size: 12px;
    text-align: center;
    width: 100%;
    opacity: 0.6;
}
.metric-actions {
    display: flex;
    justify-content: flex-end;
}
.metric-add-reading-btn {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 8px;
}
@media (max-width: 480px) {
    .metric-values-row { grid-template-columns: 1fr 1fr; }
    .metric-values-row .metric-val-block:nth-child(3) { grid-column: 1 / -1; }
}

/* === Celebration banner — confetti + centered card === */
.celebrate-banner {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 22, 40, 0);
    pointer-events: none;
    transition: background 0.3s ease-out;
}
.celebrate-banner.is-visible {
    background: rgba(10, 22, 40, 0.55);
    backdrop-filter: blur(3px);
    pointer-events: auto;
}
.celebrate-card {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--bg-elevated)) 0%, var(--bg-elevated) 80%);
    border: 2px solid var(--accent);
    border-radius: 20px;
    padding: 32px 40px;
    text-align: center;
    transform: scale(0.6);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease-out;
    box-shadow: 0 20px 60px color-mix(in srgb, var(--accent) 40%, transparent), 0 8px 24px rgba(0,0,0,0.5);
    max-width: 90vw;
}
.celebrate-banner.is-visible .celebrate-card {
    transform: scale(1);
    opacity: 1;
}
.celebrate-icon {
    font-size: 72px;
    line-height: 1;
    margin-bottom: 12px;
    animation: celebrateBounce 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite alternate;
}
@keyframes celebrateBounce {
    from { transform: translateY(0) rotate(-5deg); }
    to   { transform: translateY(-8px) rotate(5deg); }
}
.celebrate-title {
    font-size: 26px;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    text-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
.celebrate-sub {
    font-size: 15px;
    color: var(--text-secondary);
    font-style: italic;
}
@media (max-width: 480px) {
    .celebrate-card { padding: 24px 28px; }
    .celebrate-icon { font-size: 56px; }
    .celebrate-title { font-size: 20px; }
}

/* === Coach "Attention Needed" dashboard === */
.attention-section {
    background: linear-gradient(135deg, rgba(252, 76, 2, 0.06) 0%, var(--bg-elevated) 70%);
    border-color: rgba(252, 76, 2, 0.3);
}
.attention-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.attention-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.attention-info {
    flex: 1;
    min-width: 0;
}
.attention-name {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 6px;
}
.attention-role {
    font-weight: 500;
    font-size: 12px;
}
.attention-flags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.attention-flag {
    background: color-mix(in srgb, var(--c) 18%, transparent);
    color: var(--c);
    border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* === Banner channel — portrait hero (80vh) + scrollable body below === */
.banner-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;        /* whole page scrolls — hero stays in place until pushed up */
    overflow-x: hidden;
}
.banner-hero {
    flex-shrink: 0;
    width: 100%;
    min-height: 80vh;        /* portrait-friendly: at least 80% of viewport height */
    min-height: 80dvh;       /* better mobile behavior (excludes browser chrome) */
    background-size: cover;
    background-position: center top;
    background-color: var(--bg-elevated);
    position: relative;
}
.banner-hero::after {
    /* Soft fade at the bottom for readability when text starts below */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 70%, rgba(10, 22, 40, 0.55) 100%);
    pointer-events: none;
}
.banner-hero.is-empty {
    background: linear-gradient(135deg, #1e4d8b, #0a1628);
    display: flex;
    align-items: center;
    justify-content: center;
}
.banner-hero.is-empty::before {
    content: '📌';
    font-size: 96px;
    opacity: 0.3;
}
.banner-body-scroll {
    flex: 0 0 auto;          /* natural height; .banner-page handles scroll */
    padding: 32px 32px 80px;
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.banner-body-scroll h1, .banner-body-scroll h2, .banner-body-scroll h3 {
    margin-top: 24px;
    margin-bottom: 12px;
    color: var(--gold);
}
.banner-body-scroll p {
    margin: 0 0 14px;
}
.banner-body-empty {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 40px 20px;
}

/* Admin: Welcome screen image manager */
.welcome-images-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 8px;
}
.welcome-image-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.welcome-image-card-label {
    font-weight: 600;
    color: var(--gold);
    font-size: 13px;
}

/* ============ Feature flags admin panel ============ */
.feature-flags-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}
.feature-flag-card {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 14px;
    align-items: center;
}
.feature-flag-card.is-beta-only {
    border-color: rgba(255, 200, 80, 0.45);
    background: linear-gradient(180deg, rgba(255,200,80,0.06), var(--bg-input));
}
.feature-flag-key {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.feature-flag-key .ff-key {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
    letter-spacing: 0.2px;
}
.feature-flag-key .ff-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}
.feature-flag-toggles {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}
.ff-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    color: var(--text-muted);
    transition: all 0.18s ease;
}
.ff-toggle input { display: none; }
.ff-toggle.is-on { color: #fff; }
.ff-toggle.ff-enabled.is-on {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: #16a34a;
}
.ff-toggle.ff-beta.is-on {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: #d97706;
}
.ff-roles-row {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}
.ff-roles-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}
.ff-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.15s ease;
}
.ff-role-chip.is-on {
    background: var(--gold);
    border-color: var(--gold);
    color: #1a1a1a;
    font-weight: 600;
}
.ff-status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 4px;
}
.ff-status-pill.s-live { background: rgba(34,197,94,0.15); color: #22c55e; }
.ff-status-pill.s-beta { background: rgba(245,158,11,0.18); color: #f59e0b; }
.ff-status-pill.s-off  { background: rgba(120,120,120,0.18); color: var(--text-muted); }

/* "👁️ You see it" / "🙈 Hidden from you" indicator — shows admin what
 * they'll actually see in the app for each flag. */
.ff-you-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-left: 4px;
}
.ff-you-pill.y-on  { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.ff-you-pill.y-off { background: rgba(160, 160, 160, 0.15); color: var(--text-muted); }

/* "Hide for all" quick action — turns off everything in one click */
.ff-hide-all {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #ef4444;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ff-hide-all:hover {
    background: rgba(239, 68, 68, 0.22);
}
@media (max-width: 600px) {
    .feature-flag-card { grid-template-columns: 1fr; }
    .feature-flag-toggles { justify-content: flex-start; }
}

.welcome-image-preview {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--bg-input);
    border: 1px dashed var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    overflow: hidden;
}
.welcome-image-preview-mobile {
    width: 180px;
    aspect-ratio: 9 / 19.5;        /* matches modern iPhone viewport */
    min-height: 360px;             /* safety fallback if aspect-ratio fails */
    background-size: contain;      /* preview shows full image (no crop) */
    align-self: center;            /* needed in flex column (margin auto unreliable) */
}
.welcome-image-preview-desktop {
    aspect-ratio: 16 / 9;
    width: 100%;
}
.welcome-image-placeholder {
    padding: 16px;
}
.welcome-image-placeholder small {
    opacity: 0.6;
    font-size: 11px;
}
@media (max-width: 600px) {
    .welcome-images-grid { grid-template-columns: 1fr; }
}

/* === Home (Welcome) hero — fills the FULL viewport bottom-to-top so
 * the photo extends into the iOS home indicator safe area. No dark band
 * at the bottom. Static image — captures clicks so nothing underneath
 * accidentally triggers when the user taps the photo.
 *
 * Two layers per hero so aspect-ratio mismatches look intentional instead
 * of letterboxed:
 *   .home-hero-blur  → same image scaled to COVER, heavily blurred — fills
 *                      the whole screen behind, no empty space ever.
 *   .home-hero-image → same image scaled to CONTAIN — the real photo, never
 *                      cropped, no important content lost.
 * Same trick used by Spotify, Instagram, Apple Music when art doesn't
 * match the viewport aspect ratio. === */
.home-hero-wrap {
    position: fixed;
    /* Start BELOW the app header (height set as CSS var by JS). Extend
     * INTO the iOS home indicator safe-area zone by giving the bottom
     * a negative offset equal to env(safe-area-inset-bottom). This is
     * the standard "edge-to-edge" trick — the photo physically covers
     * the strip iOS reserves for the home indicator. */
    top: var(--app-header-height, 56px);
    left: 0;
    right: 0;
    bottom: calc(0px - env(safe-area-inset-bottom, 0px));
    /* Below the sidebar so it doesn't cover the chrome on desktop */
    z-index: 1;
    /* Capture ALL clicks → static photo, no taps reach hidden dashboard */
    pointer-events: auto;
    overflow: hidden;
    background-color: #0a1929;
    /* Smooth transition when the viewport / sidebars change size (browser
     * zoom, window resize, sidebar toggle). Photo scales proportionally
     * between the sidebars without a jumpy reflow. */
    transition: left 0.18s ease, right 0.18s ease, top 0.18s ease;
}
.home-hero-blur,
.home-hero-image {
    /* Inherit the smooth transition so background re-scale animates too */
    transition: background-size 0.18s ease, background-position 0.18s ease;
}
/* On desktop, leave room for the left sidebar so the hero starts after it. */
@media (min-width: 769px) {
    .home-hero-wrap {
        /* Fallback matches the actual --sidebar-w (280px) so the photo
         * never momentarily covers the sidebar on first render. */
        left: var(--sidebar-w, 280px);
        /* On desktop also leave room for the right messages-sidebar so
         * the photo is properly centered between the two sidebars
         * (not stretched over the conversation list). */
        right: var(--members-w, 240px);
    }
}
/* Hide hero on any non-home view (it's position:fixed so otherwise it'd
 * float over chat, training, etc. after navigating away). */
body:not([data-view="home"]) .home-hero-wrap {
    display: none !important;
}
.home-hero-blur,
.home-hero-image {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
}
.home-hero-blur {
    background-size: cover;
    /* Anchor blur to the BOTTOM so the gap below the contained photo is
     * filled with a blurred version of the photo's bottom area — not the
     * top. Looks like the photo continues naturally beyond its frame. */
    background-position: center bottom;
    filter: blur(36px) brightness(0.85);
    /* Scale up so the blur edges don't reveal the underlying bg color */
    transform: scale(1.2);
}
.home-hero-image {
    background-size: contain;
    /* Anchor to TOP so any leftover space (when container ratio doesn't
     * match the image) falls at the bottom — never as an empty band above
     * the photo. Looks natural because the bottom can blend with nav bars
     * or simply continues the blur fill. */
    background-position: top center;
    z-index: 2;
}
/* DESKTOP: switch foreground photo to COVER so the area between sidebars
 * is filled completely — no grey side bars regardless of upload aspect
 * ratio. Important content should be centered (safe-zone). Mobile keeps
 * CONTAIN (full image visible, blur fills any gap). */
@media (min-width: 901px) {
    .home-hero-wrap.home-hero-desktop .home-hero-image {
        background-size: cover;
        background-position: center center;
    }
}
/* Anchor it relative to the home-view container so absolute positioning
 * is scoped to the main content column. Allow the hero to extend INTO the
 * iOS home indicator safe area at the bottom so the photo fills edge to edge. */
body[data-view="home"].has-welcome-hero #home-view {
    position: relative;
    overflow: hidden;
    margin-bottom: calc(0px - env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Show one wrapper and hide the other based on viewport — done in CSS so
 * there's no JS recalculation on resize. Each wrapper has its own image
 * URL set via inline background-image. */
.home-hero-wrap.home-hero-mobile  { display: none; }
.home-hero-wrap.home-hero-desktop { display: block; }
@media (max-width: 768px) {
    .home-hero-wrap.home-hero-mobile  { display: block; }
    .home-hero-wrap.home-hero-desktop { display: none; }
}
body[data-view="home"].has-welcome-hero #home-view {
    background: transparent;
}

/* ============================================================
 * Per-view #app background — so the iOS PWA safe-area zone at the
 * bottom ALWAYS shows a colour that matches what's above it. This
 * is the only reliable way to make the home-indicator strip
 * "disappear" — paint underneath with the right colour for the view.
 * ============================================================ */
body[data-view="auth"] #app {
    /* Match the darkest point of the auth gradient (bottom of the ellipse) */
    background: #050d1c;
}
body[data-view="chat"] #app,
body[data-view="dm"] #app,
body[data-view="training"] #app,
body[data-view="payments"] #app,
body[data-view="readonly"] #app,
body[data-view="admin"] #app,
body[data-view="banner"] #app,
body[data-view="diary"] #app,
body[data-view="home"]:not(.has-welcome-hero) #app {
    /* Match the main content area so the bottom strip blends in */
    background: var(--bg-content);
}
/* On home with a welcome photo, the hero already extends INTO the safe
 * area (via negative bottom). Body bg matches dark photo bottom as a
 * safety net in case the hero doesn't render. */
body[data-view="home"].has-welcome-hero #app {
    background: #0a1929;
}
/* Hide ALL underlying home-view content when a welcome image is set —
 * the .welcome-hero text block AND the dashboard cards. Without this,
 * clicks pass through the fixed hero (older config) and trigger card
 * actions on hidden buttons. Use both the real class names and the
 * legacy .home-wrap selector for safety. */
body[data-view="home"].has-welcome-hero #home-view > .welcome-hero,
body[data-view="home"].has-welcome-hero #home-view > .dashboard-grid,
body[data-view="home"].has-welcome-hero #home-view > .home-wrap {
    display: none !important;
}

/* Admin: banner preview in channel modal */
.banner-image-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.banner-image-preview {
    width: 120px;
    height: 70px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 11px;
}
.banner-image-placeholder {
    text-align: center;
    padding: 4px;
}

@media (max-width: 600px) {
    /* keep 80dvh on mobile too — looks great with phone-aspect portrait photos */
    .banner-body-scroll { padding: 24px 18px 80px; font-size: 14px; }
    .banner-hero::after {
        background: linear-gradient(180deg, transparent 65%, rgba(10, 22, 40, 0.7) 100%);
    }
}

/* Weekly activity chart */
.progress-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 140px;
    padding: 8px 0 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}
.chart-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    min-width: 0;
}
.chart-bar {
    width: 100%;
    max-width: 32px;
    background: linear-gradient(180deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 70%, var(--bg-app)) 100%);
    border-radius: 6px 6px 2px 2px;
    transition: height 0.4s cubic-bezier(.2,.8,.2,1), opacity 0.3s;
    min-height: 4px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 3px;
}
.chart-bar-val {
    color: var(--bg-app);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}
.chart-bar-label {
    margin-top: 6px;
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
}

/* Personal bests */
.progress-pbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.progress-pb {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.15s;
}
.progress-pb:hover { border-color: color-mix(in srgb, var(--gold) 40%, var(--border)); }
.progress-pb-icon {
    font-size: 26px;
    flex-shrink: 0;
}
.progress-pb-body {
    flex: 1;
    min-width: 0;
}
.progress-pb-disc {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 14px;
}
.progress-pb-meta {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}
.progress-pb-time {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: var(--gold);
    font-size: 20px;
    line-height: 1;
}
.progress-pb-time small {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 2px;
    font-family: inherit;
}

/* Empty state */
.progress-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
}
.progress-empty-icon {
    display: block;
    font-size: 36px;
    margin-bottom: 8px;
    opacity: 0.6;
}

/* Achievement badges grid */
.progress-badges {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}
.progress-badge {
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 8px 10px;
    text-align: center;
    transition: transform 0.15s, border-color 0.2s, background 0.2s;
    cursor: pointer;
    position: relative;
    color: inherit;
    font-family: inherit;
    width: 100%;
}
.progress-badge:hover { transform: translateY(-2px); }
.progress-badge.is-locked:hover { border-color: var(--text-mute); }
/* Detail modal — status chip + how-to label */
.ach-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}
.ach-status-done { background: rgba(67, 181, 129, 0.15); color: #43b581; }
.ach-status-locked { background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); }
.ach-howto-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-mute);
    font-weight: 700;
    margin: 6px 0 8px;
}
.ach-howto-text {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}
.ach-progress-row {
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(201, 169, 97, 0.08);
    border: 1px solid rgba(201, 169, 97, 0.2);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}
.ach-progress-row strong { color: var(--gold-bright, var(--gold)); }
.progress-badge.is-unlocked {
    border-color: color-mix(in srgb, var(--gold) 40%, var(--border));
    background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 7%, var(--bg-app)) 0%, var(--bg-app) 100%);
}
.progress-badge.is-unlocked:hover {
    transform: translateY(-3px);
    border-color: var(--gold);
}
.progress-badge.is-locked {
    opacity: 0.45;
    filter: grayscale(0.6);
}
.progress-badge-icon {
    font-size: 32px;
    margin-bottom: 6px;
    line-height: 1;
}
.progress-badge-name {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.progress-badge-progress {
    margin-top: 4px;
    font-size: 10px;
    color: var(--gold);
    font-weight: 600;
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .progress-hero { grid-template-columns: 1fr 1fr; gap: 10px; }
    .progress-card-value { font-size: 26px; }
    .progress-chart { height: 110px; }
    .progress-pb-time { font-size: 17px; }
    .progress-badges { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
    .progress-badge-icon { font-size: 26px; }
}

/* ============================================================
   I18N — language picker + RTL support
   ============================================================ */
.lang-select {
    width: 100%;
    background: var(--bg-input, #0a1c33);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%23c9a961'><path d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px;
    padding-inline-end: 36px;
}
.lang-select:hover { border-color: color-mix(in srgb, var(--gold) 40%, var(--border)); }
.lang-select:focus {
    border-color: var(--gold);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);
}
.lang-select option {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.settings-help {
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.4;
    margin: 6px 0 10px;
}

/* Translated content badge (under chat msg / post / comment) */
.translated-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}
.translated-badge:hover { color: var(--gold); }
.translated-badge::before {
    content: '🌐';
    font-size: 11px;
    font-style: normal;
}
.translated-badge.is-showing-original { color: var(--gold); }

/* === RTL support === */
html[dir="rtl"],
body.rtl {
    direction: rtl;
}
/* Mirror sidebar + main panes for Arabic */
body.rtl .sidebar { border-right: 0; border-left: 1px solid var(--border); }
body.rtl .channel-header,
body.rtl .messages-list,
body.rtl .post,
body.rtl .training-card,
body.rtl .lang-select {
    text-align: right;
}
/* Right-anchor placeholders */
body.rtl .message-input-wrap input,
body.rtl .message-input-wrap textarea { text-align: right; }
/* Flip arrows */
body.rtl .carousel-prev { left: auto; right: 6px; transform: translateY(-50%) scaleX(-1); }
body.rtl .carousel-next { right: auto; left: 6px; transform: translateY(-50%) scaleX(-1); }
/* Keep things LTR where it matters (numbers, code, URLs, emails) */
body.rtl input[type="number"],
body.rtl input[type="email"],
body.rtl input[type="tel"],
body.rtl input[type="url"],
body.rtl input[type="password"],
body.rtl code,
body.rtl .invoice-number,
body.rtl .badge {
    direction: ltr;
    text-align: left;
    unicode-bidi: embed;
}
/* Mirror common icon-button paddings to use logical properties */
body.rtl .post-action,
body.rtl .btn-icon {
    flex-direction: row-reverse;
}

/* ============================================================
   COMPOSER STICKY AT BOTTOM (WhatsApp-style)
   ============================================================ */
/* IMPORTANT: only apply flex layout when the view is ACTIVE, otherwise
   both #chat-view and #dm-view would render at the same time and we'd
   see channel + DM content layered on top of each other. */
#chat-view.active, #dm-view.active {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
#chat-view.active #messages,
#dm-view.active #dm-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}
#chat-view.active .message-input-wrap,
#dm-view.active .message-input-wrap {
    flex-shrink: 0;
    padding: 8px 12px max(8px, env(safe-area-inset-bottom, 8px));
    background: var(--bg-content, var(--bg-app));
    border-top: 1px solid var(--border);
    margin: 0;
    /* High z-index so nothing in our page can cover the text input.
     * Keyboard avoidance is handled by visualViewport JS handler
     * which adds translateY only when textarea is focused. */
    z-index: 99999;
}

/* Members panel — preview text truncation (last message, one line only) */
.member-status {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    color: var(--text-muted);
    font-size: 12.5px;
}
.member-info {
    min-width: 0;
    flex: 1;
    overflow: hidden;
}
.member-name-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.member-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.member-time {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted);
}

/* ============================================================
   VIEW-SPECIFIC UI — hide all fixed/sticky bars when irrelevant
   ============================================================ */
/* The message composers (input bars) are nested inside chat/dm views.
   Belt-and-braces: hard-hide when not in chat/dm view. */
body[data-view="home"] .message-input-wrap,
body[data-view="training"] .message-input-wrap,
body[data-view="payments"] .message-input-wrap,
body[data-view="diary"] .message-input-wrap,
body[data-view="admin"] .message-input-wrap,
body[data-view="readonly"] .message-input-wrap {
    display: none !important;
}
.content-view:not(.active) .message-input-wrap {
    display: none !important;
}

/* Diary bottom bar is position:fixed → would show over OTHER views unless
   we explicitly hide it. Only show on diary view. */
body:not([data-view="diary"]) .diary-bottom-bar {
    display: none !important;
}

/* ============================================================
   AUTO-GROWING CHAT TEXTAREA (WhatsApp-style)
   ============================================================ */
#message-text, #dm-text {
    resize: none;
    overflow-y: auto;
    line-height: 1.4;
    min-height: 40px;
    max-height: 140px;            /* ≈ 5 lines × 28px */
    padding: 10px 14px;
    font-family: inherit;
    font-size: 15px;
    border-radius: 22px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    transition: border-color 0.15s, height 0.05s;
    width: 100%;
    flex: 1;
}
#message-text:focus, #dm-text:focus {
    outline: none;
    border-color: var(--gold);
}
/* Subtle visual cue for messages that are sending / failed */
.dm-message.is-pending .msg-text,
.message.is-pending .msg-text {
    opacity: 0.7;
}
.dm-message.is-pending::after,
.message.is-pending::after {
    content: '⏳';
    font-size: 11px;
    margin-left: 6px;
    opacity: 0.6;
}
.dm-message.is-failed .msg-text,
.message.is-failed .msg-text {
    color: var(--danger, #e0524d);
}
.dm-message.is-failed::after,
.message.is-failed::after {
    content: '⚠️ Failed — tap to retry';
    display: block;
    font-size: 11px;
    color: var(--danger, #e0524d);
    margin-top: 4px;
    cursor: pointer;
}

/* ============================================================
   MOBILE OVERFLOW GUARD — last block, highest priority
   ------------------------------------------------------------
   Hard rule: NOTHING ever pushes past viewport width on any
   device, with extra clamps on mobile. Lifesaver for chat
   images, video embeds, code blocks, long URLs, foreign-script
   long words, etc.
   ============================================================ */

/* Root containers — never wider than the screen, never scroll horizontally */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

/* Every block-level element respects parent width */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Media (images, video, iframes, canvas, svg) — never overflow parent */
img, video, iframe, embed, object, canvas, svg, picture {
    max-width: 100%;
    height: auto;
}

/* Long words / URLs / paths — wrap instead of forcing horizontal scroll */
.msg-text, .post-body, .post-title,
.comment-text, .training-desc, .post-card p, .post-card h2,
.records-list, .training-card, .invoice-card,
.modal-body p, .modal-body div, .empty-state p,
.notification-row, .notif-text {
    overflow-wrap: anywhere;
    word-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

/* Pre / code blocks — scroll inside the element, not the page */
pre, code, samp {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Tables — let them scroll internally if they have too many columns */
table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== EXTRA STRICT on phones (<=600px) ===== */
@media (max-width: 600px) {
    html, body {
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
    }
    /* Main app containers */
    #main-view, #auth-view, .main-content, .channel-area, .messages-list,
    .post-card, .training-card, .invoice-card, .modal, .modal-body,
    .training-feed, .post, .post-media, .post-media-item {
        max-width: 100vw;
        overflow-x: hidden;
    }
    /* Chat / DM message bubbles — width-capped relative to viewport */
    .msg, .message, .dm-msg, .comment {
        max-width: calc(100vw - 24px);
    }
    /* Any media inside a message OR post — hard cap so portrait/landscape
       photos can't push the page sideways. */
    .msg img, .msg video,
    .message img, .message video,
    .dm-msg img, .dm-msg video,
    .post img, .post video,
    .post-media img, .post-media video,
    .post-media-img, .post-media-video,
    .training-card img, .training-card video,
    .comment img, .comment video {
        max-width: 100% !important;
        max-height: 50vh;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
        border-radius: 8px;
    }
    /* iframes (YouTube embeds etc.) keep 16:9 inside the viewport */
    .msg iframe, .post iframe, .post-media iframe, .message iframe {
        max-width: 100%;
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
    }
}