/* ==== styles.css ==== */
/* CSS Variables */
:root {
    --bg-dark: #0f0f1a;
    --bg-darker: #0a0a12;
    --bg-card: #1a1a2e;
    --bg-hover: #252540;
    --text-primary: #ffffff;
    --text-secondary: #a0a0b0;
    --accent-purple: #7c3aed;
    --accent-blue: #3b82f6;
    --accent-green: #10b981;
    --accent-orange: #f59e0b;
    --accent-pink: #ec4899;
    --accent-cyan: #06b6d4;
    --gradient-purple: linear-gradient(135deg, #7c3aed, #a855f7);
    --gradient-blue: linear-gradient(135deg, #3b82f6, #06b6d4);
    --gradient-green: linear-gradient(135deg, #10b981, #34d399);
    --gradient-orange: linear-gradient(135deg, #f59e0b, #fb923c);
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --border-radius: 12px;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-dark);
    color: var(--text-primary);
    min-height: 100vh;
    overflow: hidden;
}

/* Top Bar - iOS 26 Style */
.top-bar {
    position: fixed;
    top: 0;
    left: 260px;
    right: 0;
    height: 60px;
    background: rgba(15, 15, 26, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 100;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sign-in-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sign-in-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    transform: scale(1.02);
}

.sign-in-btn.hidden {
    display: none;
}

.sign-in-btn svg {
    opacity: 0.9;
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 6px 6px;
    background: rgba(124, 58, 237, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.user-pill:hover {
    background: rgba(124, 58, 237, 0.3);
}

.user-pill.hidden {
    display: none;
}

.user-pill-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.user-pill-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}


/* Settings Page */
#settings {
    max-width: 680px;
    margin: 0 auto;
    padding-bottom: 40px;
}

.settings-title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 32px;
    background: linear-gradient(to right, #fff, #a0a0ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Profile Card */
.profile-card {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15) 0%, rgba(59, 130, 246, 0.1) 100%);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.profile-card::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.profile-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    background: var(--bg-hover);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid rgba(124, 58, 237, 0.5);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.profile-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

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

.btn-signout {
    padding: 10px 20px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 10px;
    color: #f87171;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: inherit;
}

.btn-signout:hover {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.45);
    transform: translateY(-1px);
}

/* Settings Cards */
.settings-card {
    background: rgba(22, 22, 40, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    padding: 6px 0;
    margin-bottom: 16px;
    overflow: hidden;
}

.settings-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.settings-card-icon {
    font-size: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 8px;
}

.settings-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Settings Rows */
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    transition: background 0.15s ease;
}

.settings-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.settings-row + .settings-row {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.settings-row-info {
    flex: 1;
    min-width: 0;
    padding-right: 20px;
}

.settings-row-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.settings-row-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Dropdown */
.settings-dropdown {
    padding: 10px 36px 10px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0a0b0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    min-width: 170px;
    transition: all 0.2s ease;
}

.settings-dropdown:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(124, 58, 237, 0.4);
}

.settings-dropdown:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.settings-dropdown option {
    background: #1a1a2e;
    color: #fff;
}

/* Toggle Switch */
.toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
    cursor: pointer;
}

.toggle input {
    display: none;
}

.toggle-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 28px;
    transition: background 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.toggle-track:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.toggle input:checked + .toggle-track {
    background: var(--accent-purple);
    border-color: transparent;
}

.toggle input:checked + .toggle-track:before {
    transform: translateX(22px);
}

/* Save Button */
.settings-save-btn {
    display: block;
    width: 100%;
    padding: 16px;
    background: var(--gradient-purple);
    border: none;
    border-radius: 14px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.35);
}

.settings-save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.5);
}

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

.settings-save-btn.saved {
    background: var(--gradient-green);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.35);
}

/* App Container */
.app-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar Styles */
.sidebar {
    width: 260px;
    background: var(--bg-darker);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    padding: 20px 12px 12px 12px;
    overflow-y: auto;
    height: 100vh;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 24px;
}

.logo-icon {
    font-size: 28px;
}

.logo-text {
    font-size: 22px;
    font-weight: 800;
    background: var(--gradient-purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-section {
    margin-bottom: 24px;
}

.nav-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 1px;
    padding: 0 12px;
    margin-bottom: 8px;
}

.nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

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

.nav-btn.active {
    background: var(--gradient-purple);
    color: white;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}

.nav-icon {
    font-size: 18px;
}

.user-section {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    background: var(--bg-card);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    margin-bottom: 10px;
}

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

.user-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: var(--bg-hover);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    overflow: hidden;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

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

.user-status {
    font-size: 12px;
    color: var(--text-secondary);
}

.user-settings-icon {
    font-size: 16px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.user-section:hover .user-settings-icon {
    opacity: 1;
}

/* Main Content Area */
.main-content {
    flex: 1;
    overflow-y: auto;
    padding: 90px 40px 30px 40px;
    background: linear-gradient(180deg, var(--bg-dark) 0%, #12121f 100%);
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

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

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

.content-header {
    margin-bottom: 30px;
}

.content-header h1 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(to right, #fff, #a0a0ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.content-header p {
    color: var(--text-secondary);
    font-size: 16px;
}

/* Welcome Grid */
.welcome-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.welcome-card {
    padding: 28px;
    border-radius: 16px;
    color: white;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.welcome-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.welcome-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.welcome-card:hover::before {
    opacity: 1;
}

.gradient-purple {
    background: var(--gradient-purple);
}

.gradient-blue {
    background: var(--gradient-blue);
}

.gradient-green {
    background: var(--gradient-green);
}

.gradient-orange {
    background: var(--gradient-orange);
}

.card-icon {
    font-size: 36px;
    margin-bottom: 16px;
}

.welcome-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.welcome-card p {
    font-size: 14px;
    opacity: 0.9;
}

/* Quick Stats */
.quick-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.stat-card {
    background: var(--bg-card);
    padding: 24px 32px;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 150px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.stat-card:hover {
    border-color: var(--accent-purple);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.2);
}

.stat-number {
    font-size: 36px;
    font-weight: 800;
    background: var(--gradient-purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Chat Container */
.chat-container {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.chat-container.large {
    height: calc(100vh - 250px);
    display: flex;
    flex-direction: column;
}

.chat-messages {
    max-height: 350px;
    overflow-y: auto;
    padding: 10px;
    margin-bottom: 16px;
    min-height: 150px;
}

.chat-messages:empty::before {
    content: "No messages yet. Be the first to say something!";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 130px;
    color: var(--text-secondary);
    font-size: 14px;
    text-align: center;
}

.chat-container.large .chat-messages {
    flex: 1;
    max-height: none;
}

.message {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.message.self {
    flex-direction: row-reverse;
}

.message-avatar {
    width: 40px;
    height: 40px;
    background: var(--bg-hover);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.message-content {
    max-width: 70%;
    background: var(--bg-hover);
    padding: 12px 16px;
    border-radius: 16px;
    border-top-left-radius: 4px;
}

.message.self .message-content {
    background: var(--gradient-purple);
    border-radius: 16px;
    border-top-right-radius: 4px;
}

.message-author {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-cyan);
    display: block;
    margin-bottom: 4px;
}

.message.self .message-author {
    display: none;
}

.message-content p {
    font-size: 14px;
    line-height: 1.5;
}

.message-time {
    font-size: 11px;
    color: var(--text-secondary);
    display: block;
    margin-top: 6px;
}

.message.self .message-time {
    color: rgba(255, 255, 255, 0.7);
}

/* Message action buttons (unsend / edit) */
.message-actions {
    display: none;
    gap: 4px;
    margin-top: 6px;
    justify-content: flex-end;
}

.message:hover .message-actions {
    display: flex;
}

.msg-edit-btn,
.msg-unsend-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 8px;
    padding: 3px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
    color: #fff;
}

.msg-edit-btn:hover {
    background: rgba(59, 130, 246, 0.5);
}

.msg-unsend-btn:hover {
    background: rgba(239, 68, 68, 0.5);
}

.edited-tag {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    margin-left: 4px;
}

.chat-input-container {
    display: flex;
    gap: 12px;
}

.chat-input {
    flex: 1;
    background: var(--bg-hover);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.chat-input:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

.chat-input::placeholder {
    color: var(--text-secondary);
}

.send-btn {
    background: var(--gradient-purple);
    border: none;
    border-radius: 12px;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}

/* Resources Panel */
.resources-panel {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.resources-panel h3 {
    font-size: 16px;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.resource-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.resource-link {
    background: var(--bg-hover);
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.resource-link:hover {
    background: var(--accent-purple);
    color: white;
}

/* Meme Grid */
.meme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.meme-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.meme-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-pink);
}

.meme-placeholder {
    font-size: 64px;
    margin-bottom: 12px;
}

.meme-card p {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Gaming Grid */
.gaming-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.game-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.game-fav-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, color 0.15s ease;
}
.game-fav-btn:hover { transform: scale(1.15); color: #ffd166; }
.game-fav-btn.active { color: #ffd166; }

.game-card:hover {
    border-color: var(--accent-cyan);
    transform: scale(1.05);
}

.game-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.game-name {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
}

.game-players {
    font-size: 12px;
    color: var(--accent-green);
}

/* Game toolbar */
.game-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.game-search {
    width: 100%;
    padding: 11px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--bg-card);
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.game-search:focus {
    border-color: var(--accent-cyan);
}

.game-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.game-filter-btn {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.game-filter-btn.active {
    background: rgba(6, 182, 212, 0.2);
    border-color: var(--accent-cyan);
    color: #fff;
}

.game-filter-btn:hover:not(.active) {
    background: var(--bg-hover);
}

.game-card.playable:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.15);
}

.game-iframe-wrap {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #000;
}

#gameBackBtn:hover {
    background: var(--bg-card) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Music Player */
.music-source-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.music-src-btn {
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.music-src-btn.active {
    background: rgba(124, 58, 237, 0.2);
    border-color: var(--accent-purple);
    color: #fff;
}

.music-src-btn:hover:not(.active) {
    background: var(--bg-hover);
}

.music-search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.music-url-input {
    flex: 1;
    padding: 11px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--bg-card);
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.music-url-input:focus {
    border-color: var(--accent-purple);
}

.music-play-btn {
    padding: 11px 22px;
    border-radius: 10px;
    border: none;
    background: var(--gradient-green);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.2s;
}

.music-play-btn:hover {
    opacity: 0.85;
}

.music-player-area {
    margin-bottom: 16px;
}

.music-player-wrap {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #000;
}

.music-player-wrap iframe {
    width: 100%;
    border: none;
    display: block;
}

/* Audius search + player */
.audius-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 340px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.audius-status {
    padding: 14px;
    color: var(--text-secondary);
    font-size: 14px;
}

.audius-track {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: var(--bg-card);
    color: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

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

.audius-track.playing {
    border-color: var(--accent-purple);
    background: rgba(124, 58, 237, 0.2);
}

.audius-track img,
.audius-track .audius-art-fallback {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.audius-art-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    font-size: 20px;
}

.audius-track-info,
.audius-now-info {
    flex: 1;
    min-width: 0;
}

.audius-track-title {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audius-track-artist {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audius-track-time {
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.audius-now-playing {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-card);
}

.audius-now-playing > img,
.audius-now-playing > .audius-art-fallback {
    width: 96px;
    height: 96px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.audius-now-playing audio {
    width: 100%;
    margin-top: 10px;
}

@media (max-width: 520px) {
    .audius-now-playing > img,
    .audius-now-playing > .audius-art-fallback {
        width: 64px;
        height: 64px;
    }
}

/* Notes Container */
.notes-container {
    display: flex;
    gap: 20px;
    height: calc(100vh - 200px);
}

.notes-sidebar {
    width: 250px;
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.new-note-btn {
    width: 100%;
    background: var(--gradient-purple);
    border: none;
    border-radius: 10px;
    padding: 14px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

.new-note-btn:hover {
    transform: scale(1.02);
}

.notes-list {
    flex: 1;
    overflow-y: auto;
}

.note-item {
    padding: 14px;
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.note-item:hover,
.note-item.active {
    background: var(--bg-hover);
}

.note-item.active {
    border-left: 3px solid var(--accent-purple);
}

.note-title {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.note-date {
    font-size: 12px;
    color: var(--text-secondary);
}

.notes-editor {
    flex: 1;
    background: var(--bg-card);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.note-title-input {
    background: transparent;
    border: none;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.note-title-input:focus {
    outline: none;
}

.note-content {
    flex: 1;
    background: var(--bg-hover);
    border: none;
    border-radius: 12px;
    padding: 16px;
    font-size: 14px;
    color: var(--text-primary);
    resize: none;
    line-height: 1.6;
}

.note-content:focus {
    outline: none;
}

.notes-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.save-note-btn,
.share-note-btn,
.pin-note-btn,
.delete-note-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.save-note-btn {
    background: var(--gradient-green);
    color: white;
}

.share-note-btn,
.pin-note-btn {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.delete-note-btn {
    background: var(--bg-hover);
    color: #ff6b6b;
}

.save-note-btn:hover,
.share-note-btn:hover,
.pin-note-btn:hover,
.delete-note-btn:hover {
    transform: scale(1.05);
}

.pin-note-btn:disabled,
.delete-note-btn:disabled {
    opacity: 0.4;
    cursor: default;
    transform: none !important;
}

.note-pin-dot {
    color: #ffb454;
    margin-right: 4px;
    font-size: 12px;
}

/* Calendar Container */
.calendar-container {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 24px;
    max-width: 600px;
}

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

.calendar-header h3 {
    font-size: 20px;
    font-weight: 700;
}

.cal-nav {
    background: var(--bg-hover);
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cal-nav:hover {
    background: var(--accent-purple);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 24px;
}

.cal-day-header {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 8px;
}

.cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

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

.cal-day.today {
    background: var(--gradient-purple);
    font-weight: 700;
}

.cal-day.event {
    color: var(--accent-orange);
    font-weight: 600;
}

.event-dot {
    position: absolute;
    bottom: 4px;
    width: 6px;
    height: 6px;
    background: var(--accent-orange);
    border-radius: 50%;
}

.upcoming-events h4 {
    font-size: 16px;
    margin-bottom: 16px;
}

.event-item {
    display: flex;
    gap: 16px;
    padding: 12px;
    background: var(--bg-hover);
    border-radius: 10px;
    margin-bottom: 10px;
}

.event-date {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-purple);
    min-width: 60px;
}

.event-name {
    font-size: 14px;
}

/* Resources Grid */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.resource-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.resource-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-5px);
}

.resource-icon {
    font-size: 36px;
    display: block;
    margin-bottom: 16px;
}

.resource-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.resource-card p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.resource-btn {
    display: inline-block;
    color: var(--accent-blue);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.resource-btn:hover {
    color: var(--accent-cyan);
}

/* ── Home Page Additions ──────────────────────────────────────────────────── */
.announcement-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(251, 146, 60, 0.08));
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 14px;
    padding: 16px 20px;
    margin-top: 28px;
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.5;
}

.announcement-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.announcement-text strong {
    color: #fbbf24;
}

.home-section {
    margin-top: 32px;
}

.section-heading {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.section-sub {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.channel-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.channel-pill {
    padding: 10px 20px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.channel-pill:hover {
    background: var(--gradient-purple);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35);
}

.ai-room-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}

.ai-room-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 22px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
}

.ai-room-card:hover {
    border-color: rgba(124, 58, 237, 0.45);
    background: var(--bg-hover);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.2);
}

.ai-room-icon {
    font-size: 30px;
}

.ai-room-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.ai-room-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 50px;
    background: rgba(124, 58, 237, 0.18);
    color: #a78bfa;
    border: 1px solid rgba(124, 58, 237, 0.3);
}

.study-tip-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(6, 182, 212, 0.07));
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 16px;
    padding: 22px 24px;
    margin-top: 28px;
}

.study-tip-icon {
    font-size: 36px;
    flex-shrink: 0;
}

.study-tip-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-green);
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.study-tip-text {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.6;
}

.quick-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.quick-tool-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.quick-tool-card:hover {
    border-color: rgba(59, 130, 246, 0.4);
    background: var(--bg-hover);
    transform: translateY(-3px);
}

.quick-tool-icon {
    font-size: 28px;
}

.quick-tool-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.quick-tool-desc {
    font-size: 11px;
    color: var(--text-secondary);
}

/* ── AI Tutor message styles ──────────────────────────────────────────────── */
.ai-author {
    color: #a78bfa !important;
}

.ai-typing-bubble {
    background: rgba(124, 58, 237, 0.1) !important;
    border: 1px solid rgba(124, 58, 237, 0.2);
}

.typing-dots {
    display: flex;
    gap: 5px;
    align-items: center;
    height: 20px;
}

.typing-dots span {
    width: 7px;
    height: 7px;
    background: #a78bfa;
    border-radius: 50%;
    animation: typingBounce 1.2s infinite ease-in-out;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-6px); opacity: 1; }
}

/* ── Toast notification ───────────────────────────────────────────────────── */
#toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(30, 30, 50, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

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

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-darker);
}

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

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-purple);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .sidebar {
        width: 220px;
    }

    .main-content {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .app-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 12px;
        overflow-x: auto;
    }

    .nav-section {
        display: flex;
        gap: 8px;
        margin-bottom: 0;
    }

    .nav-label {
        display: none;
    }

    .nav-btn span:last-child {
        display: none;
    }

    .logo-text {
        display: none;
    }

    .user-section {
        margin-top: 0;
    }

    .user-info {
        display: none;
    }

    .main-content {
        height: calc(100vh - 80px);
    }

    .notes-container {
        flex-direction: column;
        height: auto;
    }

    .notes-sidebar {
        width: 100%;
        height: 200px;
    }
}

/* ── Unread Badge ─────────────────────────────────────────────────────────── */
.unread-badge {
    margin-left: auto;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
}

.unread-badge.hidden {
    display: none;
}

.nav-btn.hidden {
    display: none !important;
}

/* ── Reply Bar ────────────────────────────────────────────────────────────── */
.reply-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(124, 58, 237, 0.12);
    border-left: 3px solid var(--accent-purple);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.reply-bar-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-bar-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    padding: 0 4px;
    line-height: 1;
}

/* ── Reply Quote in messages ─────────────────────────────────────────────── */
.reply-quote {
    background: rgba(255, 255, 255, 0.07);
    border-left: 3px solid var(--accent-purple);
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reply-quote strong {
    color: var(--accent-cyan);
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
}

/* ── Typing indicator ────────────────────────────────────────────────────── */
.typing-display {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 4px 10px;
    min-height: 20px;
    font-style: italic;
}

/* ── Reaction bar ────────────────────────────────────────────────────────── */
.react-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
    align-items: center;
}

.react-btn-add {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: #fff;
    position: relative;
}

.react-btn-add:hover {
    background: rgba(124, 58, 237, 0.3);
}

.react-picker {
    position: absolute;
    bottom: 30px;
    left: 0;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 6px 10px;
    display: flex;
    gap: 6px;
    z-index: 50;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.react-picker button {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
    transition: background 0.15s;
}

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

.reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 2px 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-primary);
}

.reaction-chip:hover {
    background: rgba(124, 58, 237, 0.2);
    border-color: rgba(124, 58, 237, 0.4);
}

.reaction-chip.mine {
    background: rgba(124, 58, 237, 0.25);
    border-color: rgba(124, 58, 237, 0.6);
}

/* ── Reply button ────────────────────────────────────────────────────────── */
.msg-reply-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 8px;
    padding: 3px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
    color: #fff;
}

.msg-reply-btn:hover {
    background: rgba(124, 58, 237, 0.4);
}

/* ── Flashcard styles ────────────────────────────────────────────────────── */
.flashcard-generator {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 20px;
}

.flashcard-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.flashcard {
    width: 420px;
    height: 240px;
    max-width: 90vw;
    perspective: 1000px;
    cursor: pointer;
}

.flashcard-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.55s ease;
    border-radius: 18px;
}

.flashcard.flipped .flashcard-inner {
    transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
}

.flashcard-front {
    background: linear-gradient(135deg, rgba(124,58,237,0.25), rgba(59,130,246,0.2));
    border: 1px solid rgba(124, 58, 237, 0.4);
    color: var(--text-primary);
}

.flashcard-back {
    background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(6,182,212,0.15));
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: var(--text-primary);
    transform: rotateY(180deg);
}

.flashcard-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}

/* ── Quiz Me button ──────────────────────────────────────────────────────── */
.quiz-me-btn {
    background: linear-gradient(135deg, rgba(245,158,11,0.25), rgba(251,146,60,0.2));
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #fbbf24;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: inherit;
}

.quiz-me-btn:hover {
    background: linear-gradient(135deg, rgba(245,158,11,0.4), rgba(251,146,60,0.35));
    transform: scale(1.05);
}

/* ── Live Announcement Banner ────────────────────────────────────────────── */
#liveBanner {
    display: none;
}

#liveBanner.visible {
    display: flex;
    animation: bannerSlideIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#liveBanner.hiding {
    animation: bannerSlideOut 0.35s ease-in forwards;
}

@keyframes bannerSlideIn {
    0%   { transform: translateY(100%); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: translateY(0);   opacity: 1; }
}

@keyframes bannerSlideOut {
    0%   { transform: translateY(0);   opacity: 1; }
    100% { transform: translateY(100%); opacity: 0; }
}

#liveBannerIcon {
    display: inline-block;
    animation: iconPulse 1.8s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    30%      { transform: scale(1.3) rotate(-8deg); }
    60%      { transform: scale(1.1) rotate(5deg); }
}

/* ── Profile modal flex fix ──────────────────────────────────────────────── */
#profileModal.visible,
#dmModal.visible {
    display: flex;
}

/* Compact Mode */
body.compact-mode .message {
    padding: 6px 0;
}

body.compact-mode .message-content p {
    font-size: 13px;
}

body.compact-mode .welcome-card {
    padding: 16px;
}

body.compact-mode .chat-messages {
    padding: 6px;
}

body.compact-mode .nav-btn {
    padding: 8px 12px;
}

/* Hide Timestamps */
body.hide-timestamps .message-time {
    display: none;
}

/* ── Theme Swatches ──────────────────────────────────────────────────────── */
.theme-swatches {
    display: flex;
    gap: 8px;
    align-items: center;
}

.theme-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
    outline: none;
}

.theme-swatch:hover {
    transform: scale(1.15);
}

.theme-swatch.active {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
    transform: scale(1.1);
}

/* ── Study Streak Badge ──────────────────────────────────────────────────── */
.sidebar-streak {
    font-size: 11px;
    font-weight: 700;
    color: #f59e0b;
    letter-spacing: 0.3px;
    display: block;
    margin-top: 2px;
}

.sidebar-streak.hidden {
    display: none;
}

/* ── Status input row ────────────────────────────────────────────────────── */
#statusInputRow {
    display: none;
    gap: 8px;
    align-items: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.07);
}

#statusInputRow.visible {
    display: flex;
}

/* ── Leaderboard ─────────────────────────────────────────────────────────── */
.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.leaderboard-empty {
    color: var(--text-secondary);
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 10px 16px;
    animation: fadeInUp 0.3s ease;
}

.leaderboard-rank {
    font-size: 20px;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.leaderboard-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    overflow: hidden;
    flex-shrink: 0;
}

.leaderboard-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.leaderboard-name {
    font-size: 14px;
    font-weight: 600;
    flex: 1;
}

.leaderboard-count {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-hover);
    padding: 3px 10px;
    border-radius: 20px;
}

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

/* ── Poll Card ───────────────────────────────────────────────────────────── */
.poll-card {
    background: var(--bg-hover);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 4px;
    max-width: 320px;
}

.poll-question {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #fff;
}

.poll-option-btn {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 6px;
    text-align: left;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.poll-option-btn:hover {
    background: rgba(124,58,237,0.2);
    border-color: rgba(124,58,237,0.4);
}

.poll-option-btn.voted {
    border-color: rgba(124,58,237,0.6);
}

.poll-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(124,58,237,0.15);
    border-radius: 7px;
    transition: width 0.4s ease;
    z-index: 0;
}

.poll-option-text {
    position: relative;
    z-index: 1;
    flex: 1;
}

.poll-option-pct {
    position: relative;
    z-index: 1;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

.poll-footer {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 8px;
}

.poll-create-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 600;
    align-items: center;
    justify-content: center;
}

.poll-create-modal.visible {
    display: flex;
}

.poll-create-box {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 24px;
    width: 380px;
    max-width: 95vw;
}

.poll-create-box h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
}

.poll-input {
    width: 100%;
    background: var(--bg-hover);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 10px 14px;
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    margin-bottom: 10px;
}

.poll-input::placeholder {
    color: var(--text-secondary);
}

/* ── GIF card ────────────────────────────────────────────────────────────── */
.gif-message img {
    max-width: 240px;
    border-radius: 10px;
    display: block;
    margin-top: 4px;
    cursor: pointer;
}

.gif-search-box {
    display: none;
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 14px;
    z-index: 400;
    width: 380px;
    max-width: 95vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.gif-search-box.visible {
    display: block;
}

.gif-search-input {
    width: 100%;
    background: var(--bg-hover);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 9px 14px;
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    margin-bottom: 10px;
}

.gif-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
}

.gif-result-item {
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1;
    background: var(--bg-hover);
}

.gif-result-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s;
}

.gif-result-item:hover img {
    opacity: 0.85;
}

/* ── Sticker Tray ────────────────────────────────────────────────────────── */
.sticker-tray {
    display: none;
    position: absolute;
    bottom: 60px;
    right: 0;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 10px;
    z-index: 350;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.sticker-tray.visible {
    display: grid;
    grid-template-columns: repeat(5, 40px);
    gap: 4px;
}

.sticker-btn {
    width: 40px;
    height: 40px;
    background: var(--bg-hover);
    border: none;
    border-radius: 8px;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s;
}

.sticker-btn:hover {
    background: rgba(124,58,237,0.2);
    transform: scale(1.15);
}

.sticker-message {
    font-size: 48px;
    line-height: 1.1;
    display: block;
}

/* ── Link Preview ────────────────────────────────────────────────────────── */
.link-preview {
    display: flex;
    gap: 12px;
    background: var(--bg-hover);
    border: 1px solid rgba(255,255,255,0.07);
    border-left: 3px solid var(--accent-purple);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 6px;
    max-width: 320px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.link-preview:hover {
    background: rgba(255,255,255,0.05);
}

.link-preview-img {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.link-preview-info {
    flex: 1;
    overflow: hidden;
}

.link-preview-title {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}

.link-preview-desc {
    font-size: 11px;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.link-preview-domain {
    font-size: 11px;
    color: var(--accent-purple);
    margin-top: 4px;
    font-weight: 600;
}

/* ── Video Call ───────────────────────────────────────────────────────────── */

/* Expanded (fullscreen-like) mode — default on call start */
#videoCallModal.vc-expanded {
    position: fixed;
    inset: 0;
    background: #0a0a0a;
    z-index: 900;
    display: flex;
    flex-direction: column;
}

/* PiP (floating window) mode — shrink into corner */
#videoCallModal.vc-pip {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 380px;
    height: 260px;
    background: #0a0a0a;
    z-index: 900;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
    resize: both;
}

.vc-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 2;
    flex-shrink: 0;
    cursor: grab;
}
.vc-topbar:active { cursor: grabbing; }
.vc-topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.vc-connected-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
}
.vc-title { font-size: 14px; font-weight: 700; color: #fff; }
.vc-status { font-size: 12px; color: rgba(255, 255, 255, 0.45); }
.vc-topbar-actions { display: flex; gap: 6px; }
.vc-size-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.vc-size-btn:hover { background: rgba(255, 255, 255, 0.18); }

.vc-stage {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #000;
}
.vc-remote {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.vc-self-wrap {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 160px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    z-index: 3;
}
.vc-expanded .vc-self-wrap {
    width: 200px;
    height: 120px;
}
.vc-pip .vc-self-wrap {
    width: 100px;
    height: 64px;
    bottom: 10px;
    right: 10px;
    border-radius: 8px;
}
.vc-local {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vc-name-tag {
    position: absolute;
    bottom: 7px;
    left: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    padding: 2px 9px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    pointer-events: none;
}
.vc-name-self { left: 7px; bottom: 6px; font-size: 11px; }
.vc-pip .vc-name-tag { display: none; }

/* Controls — Discord-style floating pill */
.vc-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
    flex-shrink: 0;
}
.vc-expanded .vc-controls {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 28px;
    padding: 10px 24px;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.vc-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, border-color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vc-btn:hover { background: rgba(255, 255, 255, 0.18); transform: scale(1.07); }
/* Muted / camera off — red background like Discord */
.vc-btn-toggle.active {
    background: rgba(239, 68, 68, 0.35);
    border-color: rgba(239, 68, 68, 0.6);
}
.vc-btn-end {
    background: #ed4245;
    border-color: #ed4245;
    width: 46px;
    height: 46px;
    font-size: 18px;
}
.vc-btn-end:hover { background: #d63638; border-color: #d63638; }

/* PiP mode — smaller buttons */
.vc-pip .vc-btn {
    width: 34px;
    height: 34px;
    font-size: 14px;
}
.vc-pip .vc-btn-end {
    width: 34px;
    height: 34px;
    font-size: 14px;
}
.vc-pip .vc-controls {
    padding: 6px 12px;
    gap: 6px;
}

/* Group Call PiP (minimized) mode */
#groupCallModal.gc-pip {
    inset: auto;
    bottom: 24px;
    right: 24px;
    width: 380px;
    height: 280px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
    resize: both;
}
#groupCallModal.gc-pip #groupCallGrid {
    gap: 4px;
    padding: 4px;
}
#groupCallModal.gc-pip .vc-controls {
    padding: 6px 12px;
    gap: 6px;
}
#groupCallModal.gc-pip .vc-btn {
    width: 34px;
    height: 34px;
    font-size: 14px;
}

/* Incoming call ringing animation */
@keyframes vcRing {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
}
#incomingCallBanner {
    animation: vcRing 1.5s ease-in-out infinite;
}

/* ── Confessions Room ────────────────────────────────────────────────────── */
.confession-anon-name {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 2px;
}

/* ── Hype / confetti message ─────────────────────────────────────────────── */
.hype-message {
    text-align: center;
    font-size: 22px;
    padding: 8px 0;
    animation: hypePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes hypePop {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ── Chat input container relative for sticker tray ─────────────────────── */
.chat-input-container {
    position: relative;
}

/* ── Toolbar buttons (sticker, gif, poll) ────────────────────────────────── */
.chat-tool-btn {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px 10px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.chat-tool-btn:hover {
    background: rgba(124,58,237,0.25);
    border-color: rgba(124,58,237,0.4);
}

/* ── Sidebar status display ──────────────────────────────────────────────── */
.sidebar-user-status {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 1px;
    display: flex;
    align-items: center;
    gap: 3px;
}


/* ── Call History ──────────────────────────────────────────────────────────── */
.call-history-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 14px 16px;
    transition: background 0.15s;
}
.call-history-item:hover { background: var(--bg-hover); }
.call-history-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    overflow: hidden;
}
.call-history-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.call-history-info { flex: 1; min-width: 0; }
.call-history-name { font-weight: 700; font-size: 15px; margin-bottom: 3px; }
.call-history-meta { font-size: 12px; color: var(--text-secondary); }
.call-history-icon { font-size: 22px; flex-shrink: 0; }
.call-history-action {
    background: var(--gradient-purple);
    border: none;
    border-radius: 10px;
    padding: 8px 14px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.call-history-action:hover { opacity: 0.85; }

/* ── Contacts Tab ──────────────────────────────────────────────────────────── */
.contacts-search-row {
    margin-bottom: 20px;
    max-width: 480px;
}
.contacts-search-input {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 10px 16px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.contacts-search-input:focus { border-color: var(--accent-purple); }
.contacts-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.contacts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 480px;
}
.contacts-empty {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 8px 0;
}
.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 12px 14px;
    transition: background 0.15s;
}
.contact-item:hover { background: var(--bg-hover); }
.contact-avatar {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    overflow: visible;
}
.contact-avatar img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}
.contact-online-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
}
.contact-online-dot.online { background: #4ade80; }
.contact-online-dot.inactive { background: #f59e0b; }
.contact-online-dot.offline { background: #6b7280; }
.contact-info { flex: 1; min-width: 0; }
.contact-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.contact-actions { display: flex; gap: 8px; flex-shrink: 0; }
.contact-action-btn {
    background: var(--bg-hover);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 9px;
    padding: 6px 12px;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.contact-action-btn:hover { background: var(--accent-purple); border-color: var(--accent-purple); }
.contact-action-btn.primary {
    background: var(--gradient-purple);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}

/* ── Admin Panel Tab ────────────────────────────────────────────────────────── */
#banScreen { display: flex; }

.admin-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.admin-quick-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.admin-quick-btn {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 9px 16px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.admin-quick-btn:hover { background: var(--bg-hover); }
.admin-quick-btn.danger { color: #f87171; border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.08); }
.admin-quick-btn.danger:hover { background: rgba(239,68,68,0.18); }

.admin-hint { font-size: 12px; color: var(--text-secondary); margin: -4px 0 12px; max-width: 600px; }
.admin-count-chip {
    display: inline-block;
    background: rgba(239,68,68,0.15);
    color: #f87171;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 6px;
    text-transform: none;
    letter-spacing: 0;
}
.admin-filter-row { display: flex; gap: 8px; margin-bottom: 12px; }
.admin-quick-btn.mod-filter { padding: 6px 14px; font-size: 12px; opacity: 0.6; }
.admin-quick-btn.mod-filter.active { opacity: 1; background: var(--bg-hover); border-color: var(--accent-purple); }

.mod-empty { color: var(--text-secondary); font-size: 13px; padding: 16px 0; }

.mod-reports-list { display: grid; gap: 10px; max-width: 700px; margin-bottom: 8px; }
.mod-report {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px 16px;
}
.mod-report.resolved { opacity: 0.55; }
.mod-report-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 11px; color: var(--text-secondary); }
.mod-report-room { font-weight: 700; color: var(--accent-purple); }
.mod-report-time { margin-left: auto; }
.mod-report-status { text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; }
.mod-report-status.resolved { color: #34d399; }
.mod-report-status.dismissed { color: var(--text-secondary); }
.mod-report-body { font-size: 13px; line-height: 1.6; }
.mod-report-msg { color: var(--text-secondary); font-style: italic; margin-top: 4px; }
.mod-report-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mod-report-actions button {
    background: var(--bg-hover);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 6px 12px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.mod-report-actions button:hover { background: var(--accent-purple); color: #fff; }

.sched-composer { display: grid; gap: 8px; max-width: 500px; margin-bottom: 16px; }
.sched-textarea {
    width: 100%;
    min-height: 60px;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 12px;
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}
.sched-datetime {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 9px 12px;
    color: #fff;
    font-size: 13px;
    font-family: inherit;
}
.sched-list { display: grid; gap: 8px; max-width: 500px; }
.sched-item { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 10px 14px; }
.sched-item-text { font-size: 13px; margin-bottom: 6px; }
.sched-item-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-secondary); }
.sched-item-meta button { background: none; border: none; color: #f87171; cursor: pointer; font-size: 11px; font-family: inherit; }

.audit-log-list { display: grid; gap: 6px; max-width: 700px; }
.audit-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg-card);
    border-radius: 8px;
    font-size: 12px;
}
.audit-action { color: var(--text-primary); }
.audit-meta { color: var(--text-secondary); white-space: nowrap; }

.admin-user-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 14px 16px;
}
.admin-user-card.banned { border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.05); }
.admin-user-card.timedout { border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.05); }

.admin-user-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.admin-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    overflow: hidden;
}
.admin-user-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.admin-user-name { font-weight: 700; font-size: 14px; }
.admin-user-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.admin-user-status-badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}
.admin-user-status-badge.banned { background: rgba(239,68,68,0.2); color: #f87171; }
.admin-user-status-badge.timedout { background: rgba(245,158,11,0.2); color: #f59e0b; }
.admin-user-status-badge.online { background: rgba(74,222,128,0.15); color: #4ade80; }

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.admin-action-btn {
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
}
.admin-action-btn:hover { opacity: 0.8; }
.admin-action-btn.red { background: rgba(239,68,68,0.2); color: #f87171; }
.admin-action-btn.amber { background: rgba(245,158,11,0.2); color: #f59e0b; }
.admin-action-btn.green { background: rgba(74,222,128,0.15); color: #4ade80; }
.admin-action-btn.blue { background: rgba(99,102,241,0.2); color: #818cf8; }

/* ── Group Call Grid ─────────────────────────────────────────────────────── */
.gc-participant {
    position: relative;
    background: #111;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}
.gc-participant video { width:100%;height:100%;object-fit:cover;border-radius:12px; }
.gc-participant-label {
    position: absolute;
    bottom: 8px;
    left: 10px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
}
.gc-participant-avatar { font-size: 44px; }

/* ── Meeting Feature ────────────────────────────────────────────────────────── */

/* Lock nav buttons when meeting is active */
.sidebar.meeting-active .nav-btn:not([data-tab="meeting"]) {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(0.5);
}

/* Dynamic meeting nav button */
.nav-btn.meeting-nav {
    background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(239,68,68,0.15));
    border: 1px solid rgba(245,158,11,0.4);
    animation: meetingPulse 2s ease-in-out infinite;
}
.nav-btn.meeting-nav.active {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    box-shadow: 0 4px 20px rgba(245,158,11,0.4);
    animation: none;
}

@keyframes meetingPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.3); }
    50% { box-shadow: 0 0 0 8px rgba(245,158,11,0); }
}

/* Meeting header */
.meeting-header {
    background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(239,68,68,0.08));
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    max-width: 1000px;
}
.meeting-header-top {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.meeting-header-icon {
    font-size: 48px;
    flex-shrink: 0;
}
.meeting-header-info {
    flex: 1;
    min-width: 200px;
}
.meeting-header-info h1 {
    font-size: 22px;
    font-weight: 800;
    margin: 0;
    color: var(--text-primary);
}
.meeting-header-info p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 4px 0 0;
}
.meeting-header-stats {
    display: flex;
    gap: 20px;
}
.meeting-stat {
    text-align: center;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 10px 18px;
}
.meeting-stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    display: block;
    margin-bottom: 4px;
}
.meeting-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: #f59e0b;
    font-variant-numeric: tabular-nums;
}

#meetingAdminBar {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Meeting textarea */
.meeting-textarea {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 12px;
    color: #fff;
    font-size: 13px;
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
    box-sizing: border-box;
    margin-bottom: 8px;
}
.meeting-textarea:focus {
    outline: none;
    border-color: rgba(245,158,11,0.5);
}

/* Topic cards */
.meeting-topic-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 16px;
    transition: border-color 0.2s;
}
.meeting-topic-card:hover {
    border-color: rgba(245,158,11,0.3);
}
.meeting-topic-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.meeting-topic-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
}
.meeting-topic-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.meeting-topic-author {
    font-size: 12px;
    font-weight: 700;
    color: #f59e0b;
}
.meeting-topic-text {
    font-size: 14px;
    line-height: 1.5;
    margin: 4px 0 0;
    color: var(--text-primary);
    white-space: pre-wrap;
}
.meeting-topic-time {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 6px;
}
.meeting-topic-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}
.meeting-reply-toggle {
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #f59e0b;
    cursor: pointer;
    transition: background 0.15s;
}
.meeting-reply-toggle:hover {
    background: rgba(245,158,11,0.25);
}

/* Reply thread */
.meeting-replies-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: none;
}
.meeting-replies-section.open {
    display: block;
}
.meeting-replies-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 10px;
}
.meeting-reply {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
}
.meeting-reply-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
}
.meeting-reply-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.meeting-reply-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-cyan);
}
.meeting-reply-text {
    font-size: 13px;
    color: var(--text-primary);
    margin-top: 2px;
}
.meeting-reply-time {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.meeting-reply-input-row {
    display: flex;
    gap: 8px;
}
.meeting-reply-input-row .chat-input {
    flex: 1;
    font-size: 13px;
    padding: 8px 12px;
}
.meeting-reply-input-row .send-btn {
    padding: 8px 14px;
    font-size: 12px;
}

/* Suggestion cards */
.meeting-suggestion-input-row {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}
.meeting-suggestion-input-row .chat-input {
    flex: 1;
}
.meeting-suggestion-card {
    background: rgba(124,58,237,0.08);
    border: 1px solid rgba(124,58,237,0.2);
    border-radius: 10px;
    padding: 10px 14px;
}
.meeting-suggestion-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.meeting-suggestion-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
}
.meeting-suggestion-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.meeting-suggestion-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-cyan);
}
.meeting-suggestion-time {
    font-size: 10px;
    color: var(--text-secondary);
    margin-left: auto;
}
.meeting-suggestion-text {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
}

/* Game cards: real artwork on top (script.js gameThumb) */
.game-card .game-thumb { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; margin: -4px 0 10px; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,0.25); }
.game-card .game-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-card .game-thumb-img.is-icon { width: 56px; height: 56px; object-fit: contain; image-rendering: auto; }
.game-card .game-thumb .game-icon { margin: 0; }

/* 🕹️ Tots Originals (gamelayout.js) — the in-house games, below the real ones */
.og-head { margin: 28px 0 12px; }
.og-head h2 { margin: 0; font-size: 20px; }
.og-head p { margin: 4px 0 0; opacity: .7; font-size: 13px; }
.og-games { display: flex; flex-direction: column; gap: 10px; }

/* ==== decoy.css ==== */
/* Tots — 🥸 Decoy / Stealth landing (decoy.js). A believable "ScholarDesk" study portal. */
#decoyGate {
    position: fixed; inset: 0; z-index: 2147483600; background: #f4f6fb; color: #1f2733;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; overflow-y: auto;
    transition: opacity .25s ease; -webkit-font-smoothing: antialiased;
}
.dk-top { display: flex; align-items: center; gap: 20px; padding: 0 24px; height: 60px; background: #fff; border-bottom: 1px solid #e4e8f0; position: sticky; top: 0; }
.dk-logo { font-size: 20px; font-weight: 800; color: #2b3a67; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.dk-logo-mark { color: #4f7cff; font-size: 16px; }
.dk-nav { display: flex; gap: 20px; flex: 1; }
.dk-nav a { font-size: 14px; color: #5a6578; text-decoration: none; cursor: pointer; }
.dk-nav a:hover { color: #2b3a67; }
.dk-acct { font-size: 14px; color: #5a6578; }
.dk-main { max-width: 980px; margin: 0 auto; padding: 28px 24px 60px; }
.dk-hero { background: linear-gradient(120deg, #4f7cff, #6a5cff); color: #fff; border-radius: 18px; padding: 28px 30px; margin-bottom: 28px; }
.dk-hero h1 { margin: 0 0 6px; font-size: 26px; }
.dk-hero p { margin: 0 0 18px; opacity: .9; font-size: 15px; }
.dk-search { display: flex; gap: 8px; max-width: 520px; }
.dk-search input { flex: 1; padding: 12px 16px; border-radius: 10px; border: none; font-size: 15px; outline: none; }
.dk-search button { padding: 12px 22px; border-radius: 10px; border: none; background: #1f2b50; color: #fff; font-weight: 700; cursor: pointer; }
.dk-h2 { font-size: 17px; margin: 24px 0 14px; color: #2b3a67; }
.dk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.dk-card { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid #e4e8f0; border-radius: 14px; padding: 16px; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.dk-card:hover { box-shadow: 0 8px 24px rgba(40,60,120,.1); transform: translateY(-2px); }
.dk-ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex: 0 0 auto; }
.dk-cbody { flex: 1; min-width: 0; }
.dk-cbody h3 { margin: 0 0 8px; font-size: 15px; color: #1f2733; }
.dk-bar { height: 7px; border-radius: 99px; background: #eef1f6; overflow: hidden; margin-bottom: 4px; }
.dk-bar span { display: block; height: 100%; border-radius: 99px; }
.dk-cbody small { color: #8a94a6; font-size: 12px; }
.dk-assign { list-style: none; padding: 0; margin: 0; background: #fff; border: 1px solid #e4e8f0; border-radius: 14px; overflow: hidden; }
.dk-assign li { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #eef1f6; font-size: 14.5px; }
.dk-assign li:last-child { border-bottom: none; }
.dk-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.dk-assign em { margin-left: auto; color: #8a94a6; font-style: normal; font-size: 13px; }
.dk-foot { text-align: center; color: #9aa3b2; font-size: 12.5px; padding: 24px; }
@media (max-width: 640px) { .dk-nav { display: none; } .dk-hero h1 { font-size: 22px; } }

/* ===== 🖥️ SerumOS skin ===== */
#decoyGate.dk-os { background: radial-gradient(1200px 800px at 70% -10%, #2a3f6b, #0d1322 60%); color: #e8edf7; }
.os-bar { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 16px; background: rgba(10,16,30,.55); backdrop-filter: blur(10px); font-size: 13px; }
.os-brand { font-weight: 800; cursor: pointer; user-select: none; }
.os-status { opacity: .9; }
.os-desk { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 32px); gap: 40px; padding: 20px; }
.os-welcome { text-align: center; }
.os-welcome h1 { font-size: 54px; margin: 0 0 6px; font-weight: 800; letter-spacing: -1px; }
.os-welcome p { margin: 0 0 24px; opacity: .8; font-size: 16px; }
.os-enter { padding: 14px 34px; border-radius: 12px; border: none; background: linear-gradient(120deg, #4f7cff, #7b5cff); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px rgba(80,120,255,.4); }
.os-enter:hover { filter: brightness(1.08); }
.os-dock { display: flex; gap: 14px; padding: 12px 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; backdrop-filter: blur(14px); flex-wrap: wrap; justify-content: center; }
.os-app { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 62px; cursor: pointer; transition: transform .12s; }
.os-app:hover { transform: translateY(-4px); }
.os-app span { font-size: 30px; }
.os-app small { font-size: 11px; opacity: .85; }
.os-hidden { display: none; position: fixed; bottom: -60px; opacity: 0; }

/* ===== 🎓 Classroom skin ===== */
#decoyGate.dk-cr { background: #fff; color: #3c4043; }
.cr-top { display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 22px; border-bottom: 1px solid #e0e0e0; position: sticky; top: 0; background: #fff; }
.cr-logo { font-size: 20px; font-weight: 500; color: #3c4043; cursor: pointer; user-select: none; white-space: nowrap; }
.cr-search { flex: 1; max-width: 560px; }
.cr-search input { width: 100%; padding: 11px 16px; border-radius: 8px; border: none; background: #f1f3f4; font-size: 15px; outline: none; }
.cr-acct { font-size: 18px; letter-spacing: 8px; color: #5f6368; }
.cr-main { max-width: 1060px; margin: 0 auto; padding: 26px 22px 60px; }
.cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.cr-card { border: 1px solid #dadce0; border-radius: 10px; overflow: hidden; background: #fff; transition: box-shadow .15s; }
.cr-card:hover { box-shadow: 0 2px 10px rgba(60,64,67,.18); }
.cr-banner { padding: 18px; color: #fff; min-height: 90px; }
.cr-banner h3 { margin: 0 0 4px; font-size: 20px; font-weight: 500; }
.cr-banner small { opacity: .95; font-size: 13px; }
.cr-body { padding: 18px; min-height: 70px; color: #5f6368; font-size: 14px; border-bottom: 1px solid #e0e0e0; }
.cr-foot { padding: 10px 18px; text-align: right; color: #5f6368; letter-spacing: 10px; }
@media (max-width: 640px) { .cr-search { display: none; } .os-welcome h1 { font-size: 40px; } }

/* ==== liquid-glass.css ==== */
/* ============================================================
   Tots — Liquid Glass
   Apple-style layered translucency + neon futurism.
   Loads AFTER styles.css and overrides it. Delete the <link>
   in index.html to revert to the old theme instantly.
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
    /* Neon spectrum */
    --lg-violet:   #a06bff;
    --lg-indigo:   #6366f1;
    --lg-cyan:     #22d3ee;
    --lg-mint:     #34e8b0;
    --lg-pink:     #ff5fa2;
    --lg-amber:    #ffb443;

    /* Depth stack — near-black with a blue cast */
    --lg-void:     #05060f;
    --lg-abyss:    #080a18;
    --lg-deep:     #0c0f22;

    /* Glass surfaces: translucent white over the ambient backdrop */
    --lg-glass-1:  rgba(255, 255, 255, 0.045);
    --lg-glass-2:  rgba(255, 255, 255, 0.075);
    --lg-glass-3:  rgba(255, 255, 255, 0.11);
    --lg-glass-4:  rgba(255, 255, 255, 0.16);

    /* Edges — the thin bright rim that sells the glass */
    --lg-rim:      rgba(255, 255, 255, 0.14);
    --lg-rim-soft: rgba(255, 255, 255, 0.08);
    --lg-rim-hot:  rgba(255, 255, 255, 0.30);

    /* Specular: the inner top highlight, as if light grazes the panel */
    --lg-specular: inset 0 1px 0 rgba(255, 255, 255, 0.22),
                   inset 0 -1px 0 rgba(255, 255, 255, 0.04);

    /* Elevation */
    --lg-lift-1: 0 2px 10px rgba(0, 0, 0, 0.35);
    --lg-lift-2: 0 12px 36px rgba(0, 0, 0, 0.45);
    --lg-lift-3: 0 28px 70px rgba(0, 0, 0, 0.58);

    /* Glow */
    --lg-glow-violet: 0 0 28px rgba(160, 107, 255, 0.42);
    --lg-glow-cyan:   0 0 28px rgba(34, 211, 238, 0.38);

    /* Blur strength */
    --lg-blur:      blur(28px) saturate(175%);
    --lg-blur-deep: blur(48px) saturate(200%);

    /* iOS-ish continuous corners */
    --lg-r-sm: 12px;
    --lg-r-md: 18px;
    --lg-r-lg: 26px;
    --lg-r-xl: 34px;
    --lg-r-pill: 999px;

    /* Springs */
    --lg-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --lg-ease:   cubic-bezier(0.32, 0.72, 0, 1);

    /* Remap the original palette so untouched components inherit the new look */
    --bg-dark:       var(--lg-abyss);
    --bg-darker:     var(--lg-void);
    --bg-card:       var(--lg-glass-2);
    --bg-hover:      var(--lg-glass-3);
    --text-primary:  #f4f6ff;
    --text-secondary: rgba(233, 237, 255, 0.62);
    --accent-purple: var(--lg-violet);
    --accent-blue:   var(--lg-indigo);
    --accent-cyan:   var(--lg-cyan);
    --accent-green:  var(--lg-mint);
    --accent-pink:   var(--lg-pink);
    --accent-orange: var(--lg-amber);
    --gradient-purple: linear-gradient(135deg, var(--lg-violet), var(--lg-pink));
    --gradient-blue:   linear-gradient(135deg, var(--lg-indigo), var(--lg-cyan));
    --gradient-green:  linear-gradient(135deg, var(--lg-mint), var(--lg-cyan));
    --gradient-orange: linear-gradient(135deg, var(--lg-amber), var(--lg-pink));
    --shadow: var(--lg-lift-2);
    --border-radius: var(--lg-r-lg);
}

/* ---------- 2. Ambient backdrop ---------- */
/* Slow-drifting colour fields. Everything else is glass floating over this. */
body {
    background: var(--lg-void) !important;
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
                 'Inter', system-ui, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.011em;
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: -30%;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(38% 44% at 18% 16%, rgba(160, 107, 255, 0.32), transparent 62%),
        radial-gradient(34% 40% at 84% 22%, rgba(34, 211, 238, 0.24), transparent 60%),
        radial-gradient(44% 46% at 72% 84%, rgba(255, 95, 162, 0.20), transparent 64%),
        radial-gradient(40% 40% at 26% 88%, rgba(52, 232, 176, 0.16), transparent 62%);
    filter: blur(28px);
    animation: lg-drift 34s var(--lg-ease) infinite alternate;
}

/* Fine grain so the large gradients don't band on cheap panels */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes lg-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
    100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); }
}

/* ---------- 3. Glass primitives ---------- */
.app-container { background: transparent !important; }

.sidebar,
.top-bar,
.chat-container,
.welcome-card,
.settings-card,
.stat-card,
.resource-card,
.quick-tool-card,
.ai-room-card,
.meme-card,
.resources-panel,
.note-item,
.poll-card,
.leaderboard-item,
.contact-item,
.call-history-item,
.admin-user-card,
.meeting-topic-card,
.meeting-suggestion-card,
.chat-input-container {
    background: var(--lg-glass-2) !important;
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
    border: 1px solid var(--lg-rim) !important;
    box-shadow: var(--lg-specular), var(--lg-lift-2) !important;
}

/* ---------- 4. Sidebar ---------- */
.sidebar {
    border-radius: 0 var(--lg-r-xl) var(--lg-r-xl) 0 !important;
    -webkit-backdrop-filter: var(--lg-blur-deep);
    backdrop-filter: var(--lg-blur-deep);
    padding-top: 14px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 18px;
}

.logo-icon {
    font-size: 26px;
    filter: drop-shadow(0 0 14px rgba(160, 107, 255, 0.85));
}

.logo-text {
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.03em;
    background: linear-gradient(120deg, #ffffff 10%, var(--lg-violet) 48%, var(--lg-cyan) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    color: rgba(233, 237, 255, 0.34) !important;
    padding-left: 16px;
}

.nav-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% - 12px);
    margin: 2px 6px;
    padding: 10px 13px !important;
    border: 1px solid transparent !important;
    border-radius: var(--lg-r-md) !important;
    background: transparent !important;
    color: rgba(233, 237, 255, 0.72) !important;
    font-size: 14.5px;
    font-weight: 550;
    letter-spacing: -0.012em;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.34s var(--lg-spring),
                background 0.22s var(--lg-ease),
                color 0.22s var(--lg-ease),
                border-color 0.22s var(--lg-ease);
}

.nav-btn:hover {
    background: var(--lg-glass-2) !important;
    border-color: var(--lg-rim-soft) !important;
    color: #fff !important;
    transform: translateX(3px);
}

.nav-btn:active { transform: translateX(3px) scale(0.975); }

.nav-btn.active {
    background: linear-gradient(120deg,
        rgba(160, 107, 255, 0.30),
        rgba(34, 211, 238, 0.16)) !important;
    border-color: rgba(160, 107, 255, 0.45) !important;
    color: #fff !important;
    box-shadow: var(--lg-specular), var(--lg-glow-violet);
}

/* Left indicator bar on the active tab */
.nav-btn.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    height: 62%;
    width: 3px;
    border-radius: var(--lg-r-pill);
    background: linear-gradient(180deg, var(--lg-violet), var(--lg-cyan));
    box-shadow: 0 0 12px var(--lg-violet);
    transform: translateY(-50%);
}

.nav-icon {
    font-size: 17px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

/* ---------- 5. Top bar ---------- */
.top-bar {
    border-radius: 0 0 var(--lg-r-lg) var(--lg-r-lg) !important;
    -webkit-backdrop-filter: var(--lg-blur-deep);
    backdrop-filter: var(--lg-blur-deep);
}

.sign-in-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: var(--lg-r-pill) !important;
    background: linear-gradient(120deg, var(--lg-violet), var(--lg-indigo)) !important;
    color: #fff !important;
    font-weight: 650;
    font-size: 14px;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: var(--lg-specular), var(--lg-glow-violet);
    transition: transform 0.34s var(--lg-spring), box-shadow 0.24s var(--lg-ease);
}

.sign-in-btn:hover {
    transform: translateY(-2px) scale(1.025);
    box-shadow: var(--lg-specular), 0 0 40px rgba(160, 107, 255, 0.68);
}

.sign-in-btn:active { transform: translateY(0) scale(0.97); }

.user-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 15px 5px 5px !important;
    border: 1px solid var(--lg-rim) !important;
    border-radius: var(--lg-r-pill) !important;
    background: var(--lg-glass-3) !important;
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
    box-shadow: var(--lg-specular);
}

.user-pill-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    object-fit: cover;
}

.user-pill-name { font-weight: 600; font-size: 13.5px; }

/* ---------- 6. Headings ---------- */
.content-header h1,
.content-header h2,
.section-heading {
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    background: linear-gradient(120deg, #ffffff 20%, rgba(200, 190, 255, 0.85) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.content-header { border-bottom: 1px solid var(--lg-rim-soft) !important; }
.section-sub, .content-header p { color: var(--text-secondary) !important; }

/* ---------- 7. Cards ---------- */
.welcome-card,
.settings-card,
.stat-card,
.resource-card,
.quick-tool-card,
.ai-room-card,
.meme-card,
.note-item {
    border-radius: var(--lg-r-lg) !important;
    transition: transform 0.4s var(--lg-spring),
                box-shadow 0.3s var(--lg-ease),
                border-color 0.3s var(--lg-ease);
}

.stat-card:hover,
.resource-card:hover,
.quick-tool-card:hover,
.ai-room-card:hover,
.meme-card:hover,
.note-item:hover {
    transform: translateY(-5px) scale(1.014);
    border-color: rgba(160, 107, 255, 0.42) !important;
    box-shadow: var(--lg-specular), var(--lg-lift-3), var(--lg-glow-violet) !important;
}

.stat-number {
    font-weight: 800;
    letter-spacing: -0.04em;
    background: linear-gradient(120deg, var(--lg-cyan), var(--lg-violet));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-label, .quick-tool-desc, .settings-row-desc, .note-date {
    color: var(--text-secondary) !important;
}

.card-icon, .quick-tool-icon, .resource-icon, .settings-card-icon, .ai-room-icon {
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.5));
}

/* ---------- 8. Chat ---------- */
.chat-container {
    border-radius: var(--lg-r-lg) !important;
    overflow: hidden;
}

.chat-messages { background: transparent !important; }

.message {
    border-radius: var(--lg-r-md) !important;
    padding: 9px 13px !important;
    transition: background 0.22s var(--lg-ease), transform 0.28s var(--lg-spring);
    animation: lg-msg-in 0.42s var(--lg-spring) both;
}

@keyframes lg-msg-in {
    from { opacity: 0; transform: translateY(9px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.message:hover {
    background: var(--lg-glass-1) !important;
    transform: translateX(2px);
}

.message-avatar {
    border-radius: 50% !important;
    border: 1.5px solid var(--lg-rim) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.message-author {
    font-weight: 650 !important;
    letter-spacing: -0.012em;
    color: #fff !important;
}

.message-time { color: rgba(233, 237, 255, 0.36) !important; font-size: 11.5px !important; }
.message-content { color: rgba(244, 246, 255, 0.92) !important; line-height: 1.55 !important; }

/* ---------- 9. Composer ---------- */
.chat-input-container {
    border-radius: var(--lg-r-xl) !important;
    padding: 7px 7px 7px 8px !important;
    gap: 7px;
    transition: border-color 0.25s var(--lg-ease), box-shadow 0.25s var(--lg-ease);
}

.chat-input-container:focus-within {
    border-color: rgba(160, 107, 255, 0.55) !important;
    box-shadow: var(--lg-specular), var(--lg-lift-2), var(--lg-glow-violet) !important;
}

.chat-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
    background: transparent !important;
    border: none !important;
    color: var(--text-primary) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    letter-spacing: -0.011em;
    outline: none !important;
}

.chat-input::placeholder, input::placeholder, textarea::placeholder {
    color: rgba(233, 237, 255, 0.34) !important;
}

/* Standalone inputs outside the composer keep a glass shell */
.game-search,
.gif-search-input {
    background: var(--lg-glass-2) !important;
    border: 1px solid var(--lg-rim) !important;
    border-radius: var(--lg-r-pill) !important;
    padding: 11px 20px !important;
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
    box-shadow: var(--lg-specular);
    transition: border-color 0.24s var(--lg-ease), box-shadow 0.24s var(--lg-ease);
}

.game-search:focus, .gif-search-input:focus {
    border-color: rgba(160, 107, 255, 0.6) !important;
    box-shadow: var(--lg-specular), var(--lg-glow-violet);
}

.send-btn {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--lg-violet), var(--lg-indigo)) !important;
    color: #fff !important;
    cursor: pointer;
    box-shadow: var(--lg-specular), var(--lg-glow-violet);
    transition: transform 0.34s var(--lg-spring), box-shadow 0.24s var(--lg-ease);
}

.send-btn:hover {
    transform: scale(1.1) rotate(8deg);
    box-shadow: var(--lg-specular), 0 0 34px rgba(160, 107, 255, 0.75);
}

.send-btn:active { transform: scale(0.92); }

.chat-tool-btn,
.gif-tool-btn,
.poll-tool-btn,
.sticker-tool-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--lg-rim-soft) !important;
    border-radius: 50% !important;
    background: var(--lg-glass-2) !important;
    color: rgba(233, 237, 255, 0.75) !important;
    cursor: pointer;
    transition: transform 0.3s var(--lg-spring), background 0.2s var(--lg-ease);
}

.chat-tool-btn:hover,
.gif-tool-btn:hover,
.poll-tool-btn:hover,
.sticker-tool-btn:hover {
    background: var(--lg-glass-4) !important;
    transform: translateY(-2px) scale(1.06);
}

/* ---------- 10. Buttons, pills, chips ---------- */
.channel-pill,
.game-filter-btn,
.music-src-btn,
.meeting-nav {
    border: 1px solid var(--lg-rim-soft) !important;
    border-radius: var(--lg-r-pill) !important;
    background: var(--lg-glass-1) !important;
    color: rgba(233, 237, 255, 0.72) !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -0.01em;
    padding: 8px 17px !important;
    cursor: pointer;
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
    transition: all 0.26s var(--lg-ease);
}

.channel-pill:hover,
.game-filter-btn:hover,
.music-src-btn:hover {
    background: var(--lg-glass-3) !important;
    color: #fff !important;
    transform: translateY(-1.5px);
}

.game-filter-btn.active,
.channel-pill.active,
.music-src-btn.active {
    background: linear-gradient(120deg, var(--lg-violet), var(--lg-indigo)) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    color: #fff !important;
    box-shadow: var(--lg-specular), var(--lg-glow-violet);
}

.resource-btn,
.admin-quick-btn,
.quiz-me-btn,
.vc-btn,
.poll-option-btn {
    border: 1px solid var(--lg-rim) !important;
    border-radius: var(--lg-r-md) !important;
    background: var(--lg-glass-2) !important;
    color: #fff !important;
    font-weight: 600;
    cursor: pointer;
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
    box-shadow: var(--lg-specular);
    transition: transform 0.32s var(--lg-spring), background 0.22s var(--lg-ease);
}

.resource-btn:hover,
.admin-quick-btn:hover,
.quiz-me-btn:hover,
.poll-option-btn:hover {
    background: var(--lg-glass-4) !important;
    transform: translateY(-2px);
}

.reaction-chip,
.react-btn-add,
.sticker-btn {
    border: 1px solid var(--lg-rim-soft) !important;
    border-radius: var(--lg-r-pill) !important;
    background: var(--lg-glass-2) !important;
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
    transition: transform 0.3s var(--lg-spring), background 0.2s var(--lg-ease);
}

.reaction-chip:hover, .react-btn-add:hover, .sticker-btn:hover {
    background: var(--lg-glass-4) !important;
    transform: scale(1.12);
}

.unread-badge {
    background: linear-gradient(120deg, var(--lg-pink), var(--lg-violet)) !important;
    border-radius: var(--lg-r-pill) !important;
    font-weight: 700;
    font-size: 11px;
    box-shadow: 0 0 14px rgba(255, 95, 162, 0.6);
}

/* ---------- 11. Voice / video call controls ---------- */
.vc-topbar, .vc-controls, .gc-participant {
    background: var(--lg-glass-2) !important;
    -webkit-backdrop-filter: var(--lg-blur-deep);
    backdrop-filter: var(--lg-blur-deep);
    border: 1px solid var(--lg-rim) !important;
    border-radius: var(--lg-r-lg) !important;
    box-shadow: var(--lg-specular), var(--lg-lift-2);
}

.vc-btn { width: 52px; height: 52px; border-radius: 50% !important; }

.vc-btn-end {
    background: linear-gradient(135deg, #ff4d6d, #c9184a) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    box-shadow: var(--lg-specular), 0 0 26px rgba(255, 77, 109, 0.6) !important;
}

.vc-connected-dot {
    background: var(--lg-mint) !important;
    box-shadow: 0 0 12px var(--lg-mint);
    animation: lg-pulse 2s ease-in-out infinite;
}

@keyframes lg-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.86); }
}

/* ---------- 12. Games ---------- */
.gaming-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)) !important;
    gap: 15px !important;
}

.game-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 22px 12px !important;
    background: var(--lg-glass-2) !important;
    border: 1px solid var(--lg-rim) !important;
    border-radius: var(--lg-r-lg) !important;
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
    box-shadow: var(--lg-specular), var(--lg-lift-1);
    cursor: pointer;
    overflow: hidden;
    text-align: center;
    transition: transform 0.42s var(--lg-spring),
                box-shadow 0.3s var(--lg-ease),
                border-color 0.3s var(--lg-ease);
}

/* Sheen that sweeps across on hover */
.game-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 38%,
                rgba(255, 255, 255, 0.16) 50%, transparent 62%);
    transform: translateX(-120%);
    transition: transform 0.75s var(--lg-ease);
    pointer-events: none;
}

.game-card:hover::after { transform: translateX(120%); }

.game-card:hover {
    transform: translateY(-7px) scale(1.045);
    border-color: rgba(34, 211, 238, 0.5) !important;
    box-shadow: var(--lg-specular), var(--lg-lift-3), var(--lg-glow-cyan) !important;
}

.game-card:active { transform: translateY(-2px) scale(0.99); }

.game-icon, .game-card .game-icon { font-size: 34px; line-height: 1; }

.game-name, .game-card .game-name {
    font-size: 13px;
    font-weight: 620;
    letter-spacing: -0.012em;
    color: rgba(244, 246, 255, 0.94);
}

.game-iframe-wrap {
    border-radius: var(--lg-r-lg) !important;
    overflow: hidden;
    border: 1px solid var(--lg-rim) !important;
    box-shadow: var(--lg-lift-3);
    background: #000;
}

.game-iframe-wrap iframe { display: block; border: 0; }

.game-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
    margin-bottom: 17px;
}

.game-filters { display: flex; flex-wrap: wrap; gap: 7px; }

/* ---------- 13. Modals / sheets ---------- */
.modal, .poll-create-modal, .react-picker, .sticker-tray, .gif-results {
    background: rgba(12, 15, 34, 0.72) !important;
    -webkit-backdrop-filter: var(--lg-blur-deep);
    backdrop-filter: var(--lg-blur-deep);
    border: 1px solid var(--lg-rim) !important;
    border-radius: var(--lg-r-xl) !important;
    box-shadow: var(--lg-specular), var(--lg-lift-3) !important;
    animation: lg-sheet-in 0.44s var(--lg-spring) both;
}

@keyframes lg-sheet-in {
    from { opacity: 0; transform: translateY(20px) scale(0.965); }
    to   { opacity: 1; transform: none; }
}

/* ---------- 14. Settings rows & toggles ---------- */
.settings-row {
    border-bottom: 1px solid var(--lg-rim-soft) !important;
    padding: 15px 4px !important;
}

.settings-row:last-child { border-bottom: none !important; }
.settings-row-title { font-weight: 620 !important; letter-spacing: -0.012em; }

.toggle-track {
    background: var(--lg-glass-3) !important;
    border: 1px solid var(--lg-rim) !important;
    border-radius: var(--lg-r-pill) !important;
    transition: background 0.32s var(--lg-ease), box-shadow 0.32s var(--lg-ease);
}

.toggle.active .toggle-track,
.toggle-track.active {
    background: linear-gradient(120deg, var(--lg-mint), var(--lg-cyan)) !important;
    box-shadow: 0 0 20px rgba(52, 232, 176, 0.55);
}

.theme-swatch {
    border-radius: 50% !important;
    border: 2px solid var(--lg-rim) !important;
    transition: transform 0.32s var(--lg-spring);
}

.theme-swatch:hover { transform: scale(1.16); }

/* ---------- 15. Leaderboard ---------- */
.leaderboard-item {
    border-radius: var(--lg-r-md) !important;
    transition: transform 0.32s var(--lg-spring), border-color 0.24s var(--lg-ease);
}

.leaderboard-item:hover {
    transform: translateX(5px);
    border-color: rgba(255, 180, 67, 0.5) !important;
}

/* ---------- 16. Scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(160, 107, 255, 0.45) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(160, 107, 255, 0.55), rgba(34, 211, 238, 0.45));
    border-radius: var(--lg-r-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(160, 107, 255, 0.85), rgba(34, 211, 238, 0.7));
    background-clip: padding-box;
}

/* ---------- 17. Selection & focus ---------- */
::selection { background: rgba(160, 107, 255, 0.42); color: #fff; }

:focus-visible {
    outline: 2px solid rgba(160, 107, 255, 0.85) !important;
    outline-offset: 2px;
    border-radius: var(--lg-r-sm);
}

/* ---------- 18. Tab transitions ---------- */
.tab-content.active { animation: lg-tab-in 0.46s var(--lg-ease) both; }

@keyframes lg-tab-in {
    from { opacity: 0; transform: translateY(11px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- 19. Graceful degradation ---------- */
/* Firefox and older browsers without backdrop-filter get solid panels
   instead of transparent ones, so text never sits on raw gradient. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sidebar, .top-bar, .chat-container, .welcome-card, .settings-card,
    .stat-card, .resource-card, .quick-tool-card, .ai-room-card, .meme-card,
    .resources-panel, .note-item, .game-card, .modal, .chat-input-container {
        background: rgba(14, 17, 38, 0.94) !important;
    }
}

/* ---------- 20. Motion & responsive ---------- */
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 768px) {
    .sidebar { border-radius: 0 !important; }
    .gaming-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important; }
    .game-icon { font-size: 28px; }
    /* Heavy blur is expensive on phones — dial it back */
    :root { --lg-blur: blur(18px) saturate(160%); --lg-blur-deep: blur(28px) saturate(175%); }
}

/* ---------- 21. Game player: loader + new-tab fallback ---------- */
.game-players {
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(233, 237, 255, 0.42);
}

.game-newtab-btn {
    margin-left: auto;
    padding: 8px 16px;
    border: 1px solid var(--lg-rim) !important;
    border-radius: var(--lg-r-pill);
    background: var(--lg-glass-2);
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
    color: rgba(244, 246, 255, 0.9);
    font-size: 12.5px;
    font-weight: 620;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--lg-specular);
    transition: transform 0.3s var(--lg-spring), background 0.22s var(--lg-ease);
}

.game-newtab-btn:hover {
    background: var(--lg-glass-4);
    transform: translateY(-2px);
    color: #fff;
}

.game-iframe-wrap { position: relative; }

.game-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 30px;
    text-align: center;
    border-radius: var(--lg-r-lg);
    background: rgba(8, 10, 24, 0.86);
    -webkit-backdrop-filter: var(--lg-blur-deep);
    backdrop-filter: var(--lg-blur-deep);
    z-index: 2;
}

.game-loader[hidden] { display: none; }

.game-loader-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.12);
    border-top-color: var(--lg-violet);
    border-right-color: var(--lg-cyan);
    animation: lg-spin 0.85s linear infinite;
    box-shadow: var(--lg-glow-violet);
}

@keyframes lg-spin { to { transform: rotate(360deg); } }

.game-loader-text {
    font-size: 14.5px;
    font-weight: 620;
    color: rgba(244, 246, 255, 0.92);
    margin: 0;
}

.game-loader-hint {
    max-width: 380px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
}

.game-loader-hint[hidden] { display: none; }
.game-loader-hint strong { color: var(--lg-cyan); font-weight: 650; }

/* ---------- 22. Games that open externally ---------- */
.game-card.external { border-color: rgba(255, 180, 67, 0.28) !important; }

.game-card.external::before {
    content: '\2197';
    position: absolute;
    top: 9px;
    right: 11px;
    font-size: 12px;
    font-weight: 700;
    color: var(--lg-amber);
    opacity: 0.75;
}

.game-card.external:hover {
    border-color: rgba(255, 180, 67, 0.6) !important;
    box-shadow: var(--lg-specular), var(--lg-lift-3),
                0 0 28px rgba(255, 180, 67, 0.35) !important;
}

.game-card.external .game-players { color: rgba(255, 180, 67, 0.7); }

/* ---------- Email sign-in modal ---------- */

.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 99995;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(4, 5, 14, 0.75);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.auth-modal.hidden { display: none; }

.auth-box {
    position: relative;
    width: min(100%, 380px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px 24px 22px;
    border-radius: var(--lg-r-lg);
    background: rgba(13, 16, 38, 0.94);
    border: 1px solid var(--lg-rim);
    box-shadow: var(--lg-specular), var(--lg-lift-3);
    animation: lg-sheet-in 0.4s var(--lg-spring) both;
}

.auth-box h2 { margin: 0 0 6px; font-size: 22px; color: #fff; }

.auth-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    color: rgba(233, 237, 255, 0.5);
    font-size: 16px;
    cursor: pointer;
}

.auth-input {
    padding: 12px 14px;
    border-radius: var(--lg-r-sm);
    border: 1px solid var(--lg-rim-soft);
    background: var(--lg-glass-2);
    color: #fff;
    font: inherit;
    font-size: 15px;
    outline: none;
}

.auth-input:focus { border-color: var(--lg-violet); }
.auth-input.hidden { display: none; }

.auth-error { min-height: 18px; font-size: 13px; color: #f87171; }

.auth-submit {
    padding: 12px;
    border: none;
    border-radius: var(--lg-r-pill);
    background: linear-gradient(120deg, var(--lg-violet), var(--lg-indigo));
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}

.auth-submit:disabled { opacity: 0.6; cursor: default; }

.auth-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--lg-cyan);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.auth-switch {
    display: flex;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(233, 237, 255, 0.6);
}

/* Signed out = sign-in is required: solid backdrop (no peeking at the site), no ✕ */
.auth-brand, .auth-need { display: none; }
.auth-modal.auth-required {
    background: radial-gradient(circle at 50% 30%, #1a1440 0%, #05060f 70%);
}
.auth-modal.auth-required .auth-close { display: none; }
.auth-modal.auth-required .auth-brand {
    display: block;
    font-size: 28px;
    font-weight: 800;
    text-align: center;
    background: linear-gradient(120deg, var(--lg-violet), var(--lg-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.auth-modal.auth-required .auth-need {
    display: block;
    margin: -6px 0 4px;
    font-size: 14px;
    color: rgba(233, 237, 255, 0.65);
}

/* ---- Google-only sign-in (Oct 8 2026) ---- */
.auth-google {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    margin-top: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    background: #fff;
    color: #1f1f1f;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.auth-google:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); }
.auth-google:disabled { opacity: 0.6; cursor: default; transform: none; }
.auth-google svg { flex: none; }
.auth-fine {
    margin: 10px 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    text-align: center;
    opacity: 0.7;
}
.auth-gis { display: flex; justify-content: center; margin-top: 6px; }
.auth-gis:empty { display: none; }
/* .auth-google sets display:flex, which beat the shared .hidden rule */
.auth-google.hidden, .auth-link.hidden, .auth-switch.hidden { display: none !important; }

/* ==== future.css ==== */
/* ============================================================
   Tots — 2040
   Floating panel layout, switchable living backgrounds,
   welcome screen, command palette.
   Loads after liquid-glass.css.
   ============================================================ */

/* ---------- 1. Floating panel layout ---------- */
/* The old shell was edge-to-edge. Now every region is a
   detached slab hovering over the background. */
.app-container {
    padding: 14px;
    gap: 14px;
    background: transparent !important;
    box-sizing: border-box;
}

.sidebar {
    width: 254px !important;
    height: calc(100vh - 28px) !important;
    flex-shrink: 0;
    border-radius: var(--lg-r-xl) !important;
    padding: 18px 11px 12px !important;
    border: 1px solid var(--lg-rim) !important;
    box-shadow: var(--lg-specular), var(--lg-lift-3) !important;
}

.main-content {
    flex: 1;
    height: calc(100vh - 28px);
    border-radius: var(--lg-r-xl) !important;
    padding: 86px 32px 28px !important;
    background: rgba(255, 255, 255, 0.028) !important;
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
    border: 1px solid var(--lg-rim-soft) !important;
    box-shadow: var(--lg-specular), var(--lg-lift-2);
    position: relative;
    overflow-y: auto;
}

/* Top bar becomes a floating pill docked inside the content slab */
.top-bar {
    position: fixed !important;
    top: 26px !important;
    left: 296px !important;
    right: 26px !important;
    height: 56px !important;
    border-radius: var(--lg-r-pill) !important;
    padding: 0 10px 0 20px !important;
    border: 1px solid var(--lg-rim) !important;
    box-shadow: var(--lg-specular), var(--lg-lift-2) !important;
    z-index: 120;
}

@media (max-width: 900px) {
    .app-container { padding: 0; gap: 0; }
    .sidebar { height: 100vh !important; border-radius: 0 !important; }
    .main-content { height: 100vh; border-radius: 0 !important; padding: 78px 16px 20px !important; }
    .top-bar { top: 10px !important; left: 10px !important; right: 10px !important; }
}

/* ---------- 2. Background engine ---------- */
/* Each theme repaints body::before. #bgFx adds extra layers
   (stars, grid, scanlines) that gradients alone can't do. */
#bgFx {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s var(--lg-ease);
}

/* — Aurora (default) — */
:root[data-bg="aurora"] body::before,
body::before {
    background:
        radial-gradient(38% 44% at 18% 16%, rgba(160, 107, 255, 0.32), transparent 62%),
        radial-gradient(34% 40% at 84% 22%, rgba(34, 211, 238, 0.24), transparent 60%),
        radial-gradient(44% 46% at 72% 84%, rgba(255, 95, 162, 0.20), transparent 64%),
        radial-gradient(40% 40% at 26% 88%, rgba(52, 232, 176, 0.16), transparent 62%);
}

/* — Nebula — */
:root[data-bg="nebula"] body::before {
    background:
        radial-gradient(50% 55% at 26% 24%, rgba(88, 52, 200, 0.48), transparent 66%),
        radial-gradient(42% 48% at 78% 32%, rgba(190, 60, 220, 0.30), transparent 62%),
        radial-gradient(56% 52% at 60% 88%, rgba(28, 60, 180, 0.36), transparent 68%);
}

:root[data-bg="nebula"] #bgFx {
    opacity: 1;
    background-image:
        radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 38% 64%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.6px 1.6px at 63% 18%, #fff, transparent),
        radial-gradient(1.1px 1.1px at 82% 48%, rgba(255,255,255,0.75), transparent),
        radial-gradient(1.5px 1.5px at 27% 82%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 71% 76%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.3px 1.3px at 91% 88%, #fff, transparent),
        radial-gradient(1px 1px at 52% 40%, rgba(255,255,255,0.7), transparent);
    background-size: 100% 100%;
    animation: fx-twinkle 5.5s ease-in-out infinite alternate;
}

@keyframes fx-twinkle {
    from { opacity: 0.45; }
    to   { opacity: 1; }
}

/* — Synthwave — */
:root[data-bg="synthwave"] body::before {
    background:
        linear-gradient(180deg, #12002e 0%, #3d0a5c 46%, #ff2d95 66%, #ff8a3d 78%, #0a0018 79%);
    filter: blur(0) !important;
}

:root[data-bg="synthwave"] #bgFx {
    opacity: 1;
    background-image:
        repeating-linear-gradient(90deg, rgba(255,45,149,0.5) 0 1px, transparent 1px 76px),
        repeating-linear-gradient(0deg,  rgba(255,45,149,0.5) 0 1px, transparent 1px 76px);
    background-position: center bottom;
    background-size: 100% 100%;
    transform: perspective(320px) rotateX(72deg);
    transform-origin: center 100%;
    top: 62%;
    animation: fx-grid 5s linear infinite;
}

@keyframes fx-grid {
    from { background-position-y: 0; }
    to   { background-position-y: 76px; }
}

/* — Ocean — */
:root[data-bg="ocean"] body::before {
    background:
        radial-gradient(48% 52% at 22% 20%, rgba(14, 165, 233, 0.36), transparent 64%),
        radial-gradient(44% 48% at 80% 40%, rgba(20, 230, 200, 0.26), transparent 62%),
        radial-gradient(60% 56% at 50% 92%, rgba(8, 60, 130, 0.44), transparent 70%);
}

/* — Ember — */
:root[data-bg="ember"] body::before {
    background:
        radial-gradient(46% 50% at 20% 82%, rgba(255, 90, 30, 0.40), transparent 64%),
        radial-gradient(42% 46% at 78% 70%, rgba(255, 40, 110, 0.32), transparent 62%),
        radial-gradient(52% 48% at 50% 12%, rgba(120, 20, 60, 0.38), transparent 66%);
}

/* — Matrix — */
:root[data-bg="matrix"] body::before {
    background:
        radial-gradient(52% 56% at 50% 30%, rgba(0, 255, 140, 0.16), transparent 68%),
        radial-gradient(60% 60% at 50% 100%, rgba(0, 120, 70, 0.20), transparent 70%);
}

:root[data-bg="matrix"] #bgFx {
    opacity: 1;
    background-image: repeating-linear-gradient(
        0deg, rgba(0, 255, 140, 0.055) 0 1px, transparent 1px 3px);
    animation: fx-scan 7s linear infinite;
}

@keyframes fx-scan {
    from { background-position-y: 0; }
    to   { background-position-y: 60px; }
}

/* — Void — */
:root[data-bg="void"] body::before {
    background: radial-gradient(58% 58% at 50% 42%, rgba(60, 64, 110, 0.24), transparent 72%);
}

/* ---------- 3. Accent engine ---------- */
:root[data-accent="blue"]   { --lg-violet: #3b82f6; --lg-indigo: #0ea5e9; --lg-cyan: #67e8f9; }
:root[data-accent="green"]  { --lg-violet: #10b981; --lg-indigo: #059669; --lg-cyan: #6ee7b7; }
:root[data-accent="orange"] { --lg-violet: #f59e0b; --lg-indigo: #f97316; --lg-cyan: #fcd34d; }
:root[data-accent="pink"]   { --lg-violet: #ec4899; --lg-indigo: #db2777; --lg-cyan: #f9a8d4; }
:root[data-accent="cyan"]   { --lg-violet: #06b6d4; --lg-indigo: #0891b2; --lg-cyan: #a5f3fc; }

/* ---------- 4. Welcome screen ---------- */
#welcomeScreen {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    background: rgba(4, 5, 14, 0.86);
    -webkit-backdrop-filter: blur(46px) saturate(180%);
    backdrop-filter: blur(46px) saturate(180%);
    opacity: 0;
    animation: wc-in 0.75s var(--lg-ease) forwards;
    cursor: pointer;
}

#welcomeScreen.closing { animation: wc-out 0.7s var(--lg-ease) forwards; }

@keyframes wc-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes wc-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }

/* The glow that breathes behind the greeting */
.wc-orb {
    position: absolute;
    width: min(74vw, 720px);
    height: min(74vw, 720px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 34%, var(--lg-violet), transparent 58%),
        radial-gradient(circle at 68% 68%, var(--lg-cyan), transparent 56%),
        radial-gradient(circle at 50% 88%, var(--lg-pink), transparent 60%);
    filter: blur(76px);
    opacity: 0.62;
    animation: wc-breathe 6.5s var(--lg-ease) infinite alternate;
    pointer-events: none;
}

@keyframes wc-breathe {
    from { transform: scale(0.9) rotate(0deg);   opacity: 0.45; }
    to   { transform: scale(1.12) rotate(22deg); opacity: 0.72; }
}

.wc-avatar {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.32);
    box-shadow: 0 0 46px rgba(160, 107, 255, 0.7), var(--lg-lift-3);
    position: relative;
    animation: wc-rise 0.95s var(--lg-spring) 0.1s both;
}

.wc-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--lg-violet), var(--lg-cyan));
    letter-spacing: -0.02em;
}

.wc-greet {
    position: relative;
    margin: 0;
    text-align: center;
    font-size: clamp(34px, 7vw, 68px);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.06;
    background: linear-gradient(120deg, #fff 18%, var(--lg-violet) 54%, var(--lg-cyan) 92%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: wc-rise 0.95s var(--lg-spring) 0.22s both;
}

.wc-sub {
    position: relative;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(233, 237, 255, 0.6);
    animation: wc-rise 0.95s var(--lg-spring) 0.36s both;
}

.wc-hint {
    position: absolute;
    bottom: 46px;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(233, 237, 255, 0.34);
    animation: wc-rise 0.9s var(--lg-spring) 0.9s both;
}

@keyframes wc-rise {
    from { opacity: 0; transform: translateY(22px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

/* ---------- 5. Command palette ---------- */
#cmdPalette {
    position: fixed;
    inset: 0;
    z-index: 99995;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14vh;
    background: rgba(4, 5, 14, 0.62);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    animation: wc-in 0.24s var(--lg-ease) forwards;
}

#cmdPalette[hidden] { display: none; }

.cmd-box {
    width: min(92vw, 620px);
    max-height: 62vh;
    display: flex;
    flex-direction: column;
    border-radius: var(--lg-r-xl);
    background: rgba(14, 17, 40, 0.82);
    -webkit-backdrop-filter: var(--lg-blur-deep);
    backdrop-filter: var(--lg-blur-deep);
    border: 1px solid var(--lg-rim);
    box-shadow: var(--lg-specular), var(--lg-lift-3);
    overflow: hidden;
    animation: lg-sheet-in 0.36s var(--lg-spring) both;
}

.cmd-input {
    width: 100%;
    padding: 20px 24px !important;
    border: none !important;
    border-bottom: 1px solid var(--lg-rim-soft) !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 500;
    outline: none !important;
}

.cmd-list {
    list-style: none;
    margin: 0;
    padding: 8px;
    overflow-y: auto;
}

.cmd-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 15px;
    border-radius: var(--lg-r-md);
    cursor: pointer;
    color: rgba(233, 237, 255, 0.82);
    font-size: 14.5px;
    font-weight: 550;
    transition: background 0.15s var(--lg-ease);
}

.cmd-item .cmd-icon { font-size: 17px; width: 24px; text-align: center; }

.cmd-item .cmd-kind {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(233, 237, 255, 0.3);
}

.cmd-item.selected {
    background: linear-gradient(120deg,
        rgba(160, 107, 255, 0.32), rgba(34, 211, 238, 0.16));
    color: #fff;
    box-shadow: var(--lg-specular);
}

.cmd-empty {
    padding: 26px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

/* ---------- 6. Background picker (settings) ---------- */
.bg-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: flex-end;
    max-width: 320px;
}

.bg-swatch {
    width: 46px;
    height: 34px;
    border-radius: 10px;
    border: 2px solid var(--lg-rim);
    cursor: pointer;
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s var(--lg-spring), border-color 0.2s var(--lg-ease);
}

.bg-swatch:hover { transform: translateY(-3px) scale(1.07); }

.bg-swatch.active {
    border-color: #fff;
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.45);
}

.bg-swatch[data-bg="aurora"]    { background: linear-gradient(135deg, #a06bff, #22d3ee, #ff5fa2); }
.bg-swatch[data-bg="nebula"]    { background: linear-gradient(135deg, #5834c8, #be3cdc, #1c3cb4); }
.bg-swatch[data-bg="synthwave"] { background: linear-gradient(180deg, #3d0a5c, #ff2d95, #ff8a3d); }
.bg-swatch[data-bg="ocean"]     { background: linear-gradient(135deg, #0ea5e9, #14e6c8, #083c82); }
.bg-swatch[data-bg="ember"]     { background: linear-gradient(135deg, #ff5a1e, #ff286e, #78143c); }
.bg-swatch[data-bg="matrix"]    { background: linear-gradient(135deg, #001a0e, #00ff8c, #007846); }
.bg-swatch[data-bg="void"]      { background: linear-gradient(135deg, #0a0b16, #3c4070); }

/* ---------- 7. Keyboard hint pill in the top bar ---------- */
.cmd-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: var(--lg-r-pill);
    border: 1px solid var(--lg-rim-soft);
    background: var(--lg-glass-1);
    color: rgba(233, 237, 255, 0.55);
    font-size: 13px;
    font-weight: 550;
    cursor: pointer;
    transition: all 0.24s var(--lg-ease);
}

.cmd-trigger:hover {
    background: var(--lg-glass-3);
    color: #fff;
    border-color: var(--lg-rim);
}

.cmd-trigger kbd {
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--lg-rim-soft);
}

@media (max-width: 900px) { .cmd-trigger { display: none; } }

/* ---------- 8. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .wc-orb, #bgFx { animation: none !important; }
}

/* ==== beyond.css ==== */
/* ============================================================
   Tots — Beyond
   Beat-reactive backdrop, message effects, AI tools, Draw & Guess.
   ============================================================ */

:root { --beat: 0; --level: 0; }

/* ---------- 1. Beat-reactive background ---------- */
:root[data-audio="on"] body::before {
    opacity: calc(0.72 + var(--beat) * 0.55);
    filter: blur(calc(28px - var(--beat) * 12px)) saturate(calc(175% + var(--beat) * 90%));
    transition: opacity 90ms linear, filter 90ms linear;
}

:root[data-audio="on"] #bgFx {
    transform: scale(calc(1 + var(--beat) * 0.045));
    transition: transform 110ms var(--lg-ease);
}

/* Panels breathe very slightly on each hit — felt more than seen. */
:root[data-audio="on"] .sidebar,
:root[data-audio="on"] .main-content {
    box-shadow: var(--lg-specular), var(--lg-lift-2),
                0 0 calc(var(--beat) * 46px) rgba(160, 107, 255, calc(var(--beat) * 0.5)) !important;
}

.beat-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 18px;
    border-radius: var(--lg-r-lg);
    background: var(--lg-glass-2);
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
    border: 1px solid var(--lg-rim);
    box-shadow: var(--lg-specular);
}

.beat-toggle {
    padding: 10px 18px;
    border-radius: var(--lg-r-pill);
    border: 1px solid var(--lg-rim);
    background: var(--lg-glass-3);
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 620;
    cursor: pointer;
    transition: all 0.26s var(--lg-ease);
}

.beat-toggle:hover { background: var(--lg-glass-4); transform: translateY(-2px); }

.beat-toggle.active {
    background: linear-gradient(120deg, var(--lg-violet), var(--lg-cyan));
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: var(--lg-glow-violet);
}

.beat-readout {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 650;
    color: rgba(244, 246, 255, 0.9);
}

.beat-readout[hidden] { display: none; }

.beat-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--lg-mint);
    box-shadow: 0 0 calc(6px + var(--beat) * 22px) var(--lg-mint);
    transform: scale(calc(1 + var(--beat) * 0.85));
    transition: transform 90ms linear, box-shadow 90ms linear;
}

.beat-note {
    flex-basis: 100%;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* ---------- 2. Message effects ---------- */
.fx-wrap { position: relative; display: inline-flex; }

.fx-tray {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    display: flex;
    gap: 6px;
    padding: 8px;
    border-radius: var(--lg-r-md);
    background: rgba(14, 17, 40, 0.9);
    -webkit-backdrop-filter: var(--lg-blur-deep);
    backdrop-filter: var(--lg-blur-deep);
    border: 1px solid var(--lg-rim);
    box-shadow: var(--lg-specular), var(--lg-lift-3);
    z-index: 60;
    animation: lg-sheet-in 0.28s var(--lg-spring) both;
}

.fx-tray[hidden] { display: none; }

.fx-opt {
    width: 38px;
    height: 38px;
    font-size: 19px;
    border-radius: 50%;
    border: 1px solid var(--lg-rim-soft);
    background: var(--lg-glass-2);
    cursor: pointer;
    transition: transform 0.28s var(--lg-spring), background 0.2s var(--lg-ease);
}

.fx-opt:hover { transform: scale(1.18); background: var(--lg-glass-4); }

@keyframes fx-shake {
    0%, 100% { transform: translate3d(0, 0, 0); }
    12% { transform: translate3d(-9px, 4px, 0) rotate(-0.6deg); }
    28% { transform: translate3d(8px, -5px, 0) rotate(0.5deg); }
    44% { transform: translate3d(-7px, 3px, 0) rotate(-0.4deg); }
    62% { transform: translate3d(6px, -3px, 0) rotate(0.3deg); }
    80% { transform: translate3d(-3px, 2px, 0); }
}

body.fx-shake { animation: fx-shake 0.62s var(--lg-ease); }

/* ---------- 3. AI tools ---------- */
.catchup-btn {
    display: inline-flex;      /* .chat-container is block, not flex */
    align-items: center;
    margin: 0 0 12px;
    padding: 8px 17px;
    border-radius: var(--lg-r-pill);
    border: 1px solid rgba(160, 107, 255, 0.4);
    background: linear-gradient(120deg, rgba(160, 107, 255, 0.22), rgba(34, 211, 238, 0.12));
    color: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 620;
    cursor: pointer;
    transition: all 0.26s var(--lg-ease);
}

.catchup-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--lg-glow-violet);
    border-color: rgba(160, 107, 255, 0.75);
}

.ai-modal {
    position: fixed;
    inset: 0;
    z-index: 99993;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(4, 5, 14, 0.66);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    animation: wc-in 0.24s var(--lg-ease) forwards;
}

.ai-box {
    width: min(94vw, 560px);
    max-height: 76vh;
    display: flex;
    flex-direction: column;
    border-radius: var(--lg-r-xl);
    background: rgba(14, 17, 40, 0.9);
    -webkit-backdrop-filter: var(--lg-blur-deep);
    backdrop-filter: var(--lg-blur-deep);
    border: 1px solid var(--lg-rim);
    box-shadow: var(--lg-specular), var(--lg-lift-3);
    overflow: hidden;
    animation: lg-sheet-in 0.36s var(--lg-spring) both;
}

.ai-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 20px;
    border-bottom: 1px solid var(--lg-rim-soft);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.ai-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--lg-rim-soft);
    background: var(--lg-glass-2);
    color: #fff;
    cursor: pointer;
    font-size: 13px;
}

.ai-close:hover { background: var(--lg-glass-4); }

.ai-body { padding: 20px; overflow-y: auto; }

.ai-summary {
    font-size: 14.5px;
    line-height: 1.68;
    color: rgba(244, 246, 255, 0.92);
}

.ai-meta, .ai-empty {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.ai-empty { text-align: center; margin: 0; padding: 18px 0; }

.ai-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 26px 0;
    color: var(--text-secondary);
}

.ai-spin {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.12);
    border-top-color: var(--lg-violet);
    animation: lg-spin 0.85s linear infinite;
}

/* Inline translation */
.msg-translate-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    opacity: 0.55;
    padding: 2px 4px;
    transition: opacity 0.2s var(--lg-ease), transform 0.25s var(--lg-spring);
}

.msg-translate-btn:hover { opacity: 1; transform: scale(1.2); }
.msg-translate-btn.active { opacity: 1; filter: drop-shadow(0 0 6px var(--lg-cyan)); }

.msg-translation {
    margin-top: 7px;
    padding: 9px 12px;
    border-radius: var(--lg-r-sm);
    border-left: 2px solid var(--lg-cyan);
    background: rgba(34, 211, 238, 0.09);
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(244, 246, 255, 0.9);
}

.msg-translation-label {
    display: block;
    margin-bottom: 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lg-cyan);
}

.lang-select {
    padding: 9px 14px !important;
    border-radius: var(--lg-r-pill) !important;
    border: 1px solid var(--lg-rim) !important;
    background: var(--lg-glass-3) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 13px !important;
    cursor: pointer;
}

.lang-select option { background: #12142c; color: #fff; }

/* ---------- 4. Draw & Guess ---------- */
.dg-entry {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    margin-bottom: 4px;
    border-radius: var(--lg-r-lg);
    background: linear-gradient(120deg, rgba(160, 107, 255, 0.2), rgba(34, 211, 238, 0.1));
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
    border: 1px solid rgba(160, 107, 255, 0.4);
    box-shadow: var(--lg-specular), var(--lg-glow-violet);
}

.dg-entry-icon { font-size: 42px; filter: drop-shadow(0 0 16px rgba(160, 107, 255, 0.8)); }
.dg-entry-text { flex: 1; }
.dg-entry-text h3 { margin: 0 0 3px; font-size: 18px; font-weight: 750; letter-spacing: -0.025em; }
.dg-entry-text p { margin: 0; font-size: 13px; color: var(--text-secondary); }

.dg-entry-btn {
    padding: 11px 26px;
    border-radius: var(--lg-r-pill);
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: linear-gradient(120deg, var(--lg-violet), var(--lg-indigo));
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 680;
    cursor: pointer;
    box-shadow: var(--lg-specular), var(--lg-glow-violet);
    transition: transform 0.32s var(--lg-spring);
}

.dg-entry-btn:hover { transform: translateY(-3px) scale(1.04); }

.dg-modal {
    position: fixed;
    inset: 0;
    z-index: 99994;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(4, 5, 14, 0.78);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
}

.dg-modal[hidden] { display: none; }

.dg-box {
    width: min(96vw, 1180px);
    height: min(92vh, 820px);
    display: flex;
    flex-direction: column;
    border-radius: var(--lg-r-xl);
    background: rgba(12, 15, 34, 0.9);
    -webkit-backdrop-filter: var(--lg-blur-deep);
    backdrop-filter: var(--lg-blur-deep);
    border: 1px solid var(--lg-rim);
    box-shadow: var(--lg-specular), var(--lg-lift-3);
    overflow: hidden;
    animation: lg-sheet-in 0.4s var(--lg-spring) both;
}

.dg-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--lg-rim-soft);
}

.dg-title { font-size: 16px; font-weight: 750; letter-spacing: -0.02em; }
.dg-word { flex: 1; text-align: center; font-size: 15px; font-weight: 600; }
.dg-mask { letter-spacing: 0.34em; font-size: 19px; font-weight: 700; }
.dg-len { font-size: 11.5px; color: var(--text-secondary); margin-left: 8px; }

.dg-timer {
    min-width: 84px;
    text-align: right;
    font-size: 15px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--lg-cyan);
}

.dg-timer.urgent { color: #ff5a7a; animation: lg-pulse 0.8s ease-in-out infinite; }

.dg-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--lg-rim-soft);
    background: var(--lg-glass-2);
    color: #fff;
    cursor: pointer;
}

.dg-close:hover { background: var(--lg-glass-4); }

.dg-main { flex: 1; display: flex; min-height: 0; }

.dg-canvas-wrap {
    flex: 1;
    position: relative;
    margin: 14px;
    border-radius: var(--lg-r-lg);
    overflow: hidden;
    background: #0a0c1c;
    border: 1px solid var(--lg-rim-soft);
}

#dgCanvas { width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }

.dg-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 10, 26, 0.86);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.dg-overlay[hidden] { display: none; }
.dg-msg { text-align: center; padding: 26px; }
.dg-msg h3 { margin: 0 0 8px; font-size: 26px; font-weight: 780; letter-spacing: -0.03em; }
.dg-msg p { margin: 0; color: var(--text-secondary); font-size: 14px; }
.dg-msg strong { color: var(--lg-cyan); }

.dg-side {
    width: 272px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 14px 0;
    min-height: 0;
}

.dg-side-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(233, 237, 255, 0.34);
    margin-bottom: 8px;
}

.dg-players, .dg-guesses {
    border-radius: var(--lg-r-md);
    background: var(--lg-glass-1);
    border: 1px solid var(--lg-rim-soft);
    padding: 12px;
    overflow-y: auto;
}

.dg-players { max-height: 40%; }
.dg-guesses { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }

.dg-player {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 13px;
}

.dg-player.drawer { background: rgba(160, 107, 255, 0.18); }
.dg-player img, .dg-ava {
    width: 26px; height: 26px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--lg-violet), var(--lg-cyan));
    font-size: 12px; font-weight: 700; color: #fff;
}

.dg-pname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-score { font-weight: 750; color: var(--lg-mint); font-variant-numeric: tabular-nums; }

.dg-guess { padding: 4px 2px; color: rgba(244, 246, 255, 0.82); }
.dg-guess b { color: #fff; font-weight: 650; }
.dg-guess.correct { color: var(--lg-mint); font-weight: 620; }

.dg-guess-bar input {
    width: 100%;
    padding: 12px 16px !important;
    border-radius: var(--lg-r-pill) !important;
    border: 1px solid var(--lg-rim) !important;
    background: var(--lg-glass-2) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 14px !important;
    outline: none !important;
}

.dg-guess-bar input:disabled { opacity: 0.45; cursor: not-allowed; }

.dg-tools {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-top: 1px solid var(--lg-rim-soft);
    opacity: 0.35;
    pointer-events: none;
    transition: opacity 0.3s var(--lg-ease);
}

/* Tools only light up for whoever is drawing. */
.dg-tools.drawing { opacity: 1; pointer-events: auto; }
.dg-tools .dg-start { opacity: 1; pointer-events: auto; }

.dg-colors, .dg-brushes { display: flex; gap: 7px; }

.dg-color {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--lg-rim); cursor: pointer;
    transition: transform 0.28s var(--lg-spring);
}

.dg-color:hover { transform: scale(1.18); }
.dg-color.active { border-color: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, 0.6); }

.dg-brushes button {
    width: 32px; height: 32px; border-radius: 9px;
    border: 1px solid var(--lg-rim-soft);
    background: var(--lg-glass-2); color: #fff; cursor: pointer;
}

.dg-brushes button.active { background: var(--lg-glass-4); border-color: var(--lg-rim-hot); }

.dg-tool-btn {
    margin-left: auto;
    padding: 9px 18px;
    border-radius: var(--lg-r-pill);
    border: 1px solid var(--lg-rim);
    background: var(--lg-glass-2);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 620;
    cursor: pointer;
}

.dg-tool-btn:hover { background: var(--lg-glass-4); }

.dg-start {
    margin-left: 0;
    background: linear-gradient(120deg, var(--lg-mint), var(--lg-cyan));
    border-color: rgba(255, 255, 255, 0.26);
    color: #06231a;
    font-weight: 720;
}

.dg-start[hidden] { display: none; }

@media (max-width: 860px) {
    .dg-main { flex-direction: column; }
    .dg-side { width: auto; padding: 0 14px 14px; max-height: 42%; }
    .dg-canvas-wrap { margin-bottom: 0; }
    .dg-tools { flex-wrap: wrap; gap: 10px; }
}

/* ---------- 5. Safety: report, block, data ---------- */
.msg-report-btn, .msg-block-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12.5px;
    opacity: 0.45;
    padding: 2px 4px;
    transition: opacity 0.2s var(--lg-ease), transform 0.25s var(--lg-spring);
}

.msg-report-btn:hover, .msg-block-btn:hover { opacity: 1; transform: scale(1.2); }

/* Blocked messages collapse to a stub you can still click to reveal. */
.message.blocked-msg > .message-content > p,
.message.blocked-msg > .message-content > .msg-translation,
.message.blocked-msg > .message-content > img,
.message.blocked-msg > .message-content > .sticker-message,
.message.blocked-msg > .message-content > .poll-card,
.message.blocked-msg > .message-content > .reply-quote,
.message.blocked-msg > .message-content > .link-preview {
    display: none;
}

.message.blocked-msg > .message-content::after {
    content: 'Message hidden — you blocked this user';
    display: block;
    font-size: 12.5px;
    font-style: italic;
    color: rgba(233, 237, 255, 0.38);
    padding: 3px 0;
}

.message.blocked-msg { opacity: 0.6; }

.settings-link-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: var(--lg-r-pill);
    border: 1px solid var(--lg-rim);
    background: var(--lg-glass-2);
    color: rgba(244, 246, 255, 0.9);
    font-family: inherit;
    font-size: 13px;
    font-weight: 620;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.26s var(--lg-ease);
}

.settings-link-btn:hover { background: var(--lg-glass-4); color: #fff; transform: translateY(-2px); }

.settings-danger-btn {
    padding: 8px 18px;
    border-radius: var(--lg-r-pill);
    border: 1px solid rgba(255, 77, 109, 0.5);
    background: rgba(255, 77, 109, 0.14);
    color: #ff9db0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: all 0.26s var(--lg-ease);
}

.settings-danger-btn:hover {
    background: linear-gradient(135deg, #ff4d6d, #c9184a);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 0 26px rgba(255, 77, 109, 0.55);
}

.settings-row.danger { border-top: 1px solid rgba(255, 77, 109, 0.22); }

.block-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--lg-rim-soft);
    font-size: 14px;
}

.block-row:last-child { border-bottom: none; }

.legal-links {
    margin-top: auto;
    padding: 16px 14px 6px;
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 11.5px;
    color: rgba(233, 237, 255, 0.3);
}

.legal-links a {
    color: rgba(233, 237, 255, 0.45);
    text-decoration: none;
    transition: color 0.2s var(--lg-ease);
}

.legal-links a:hover { color: var(--lg-cyan); }

/* ==== consent.css ==== */
/* Tots — first-run consent gate */

#consentGate {
    position: fixed;
    inset: 0;
    z-index: 99997;               /* above the welcome screen (99990) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(4, 5, 14, 0.9);
    -webkit-backdrop-filter: blur(40px) saturate(170%);
    backdrop-filter: blur(40px) saturate(170%);
    animation: wc-in 0.5s var(--lg-ease) forwards;
}

#consentGate.closing { animation: wc-out 0.5s var(--lg-ease) forwards; }

.cg-box {
    width: min(96vw, 780px);
    height: min(92vh, 860px);
    display: flex;
    flex-direction: column;
    border-radius: var(--lg-r-xl);
    background: rgba(13, 16, 38, 0.94);
    -webkit-backdrop-filter: var(--lg-blur-deep);
    backdrop-filter: var(--lg-blur-deep);
    border: 1px solid var(--lg-rim);
    box-shadow: var(--lg-specular), var(--lg-lift-3);
    overflow: hidden;
    animation: lg-sheet-in 0.5s var(--lg-spring) both;
}

.cg-head {
    padding: 24px 28px 18px;
    border-bottom: 1px solid var(--lg-rim-soft);
    flex-shrink: 0;
}

.cg-steps { display: flex; gap: 10px; margin-bottom: 15px; }

.cg-step {
    padding: 5px 14px;
    border-radius: var(--lg-r-pill);
    border: 1px solid var(--lg-rim-soft);
    background: var(--lg-glass-1);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(233, 237, 255, 0.4);
    transition: all 0.3s var(--lg-ease);
}

.cg-step.active {
    background: linear-gradient(120deg, var(--lg-violet), var(--lg-indigo));
    border-color: rgba(255, 255, 255, 0.24);
    color: #fff;
    box-shadow: var(--lg-glow-violet);
}

.cg-step.done {
    background: rgba(52, 232, 176, 0.18);
    border-color: rgba(52, 232, 176, 0.45);
    color: var(--lg-mint);
}

.cg-title {
    margin: 0 0 5px;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.035em;
    background: linear-gradient(120deg, #fff 25%, var(--lg-violet) 75%, var(--lg-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cg-blurb { margin: 0; font-size: 13.5px; color: var(--text-secondary); }

/* The document itself — this is the pane that must be scrolled. */
.cg-doc {
    flex: 1;
    overflow-y: auto;
    padding: 22px 28px;
    font-size: 14.5px;
    line-height: 1.68;
    color: rgba(244, 246, 255, 0.88);
    scroll-behavior: smooth;
}

.cg-doc h1 { display: none; }          /* the gate has its own title */
.cg-doc .legal-date { margin-bottom: 20px; }

.cg-doc h2 {
    margin: 28px 0 10px;
    font-size: 18px;
    font-weight: 720;
    letter-spacing: -0.025em;
    color: #fff;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--lg-rim-soft);
}

.cg-doc h3 { margin: 18px 0 6px; font-size: 15px; font-weight: 660; color: #fff; }
.cg-doc p { margin: 0 0 12px; }
.cg-doc ul { margin: 0 0 14px; padding-left: 20px; }
.cg-doc li { margin-bottom: 6px; }
.cg-doc strong { color: #fff; font-weight: 650; }
.cg-doc a { color: var(--lg-cyan); }

.cg-doc .legal-lead,
.cg-doc .legal-callout {
    padding: 14px 18px;
    margin: 0 0 18px;
    border-radius: var(--lg-r-md);
    background: rgba(160, 107, 255, 0.1);
    border: 1px solid rgba(160, 107, 255, 0.28);
}

.cg-doc .legal-callout { border-left: 3px solid var(--lg-violet); margin: 16px 0; }

.cg-doc .legal-todo {
    padding: 12px 16px;
    border-radius: var(--lg-r-sm);
    background: rgba(255, 180, 67, 0.1);
    border: 1px dashed rgba(255, 180, 67, 0.5);
}

.cg-doc .legal-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 12px 0 18px; }
.cg-doc .legal-table th, .cg-doc .legal-table td {
    padding: 9px 12px; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--lg-rim-soft);
}
.cg-doc .legal-table th {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em;
    color: rgba(233, 237, 255, 0.45);
}

.cg-loading, .cg-fallback { padding: 30px 0; text-align: center; color: var(--text-secondary); }

.cg-scroll-hint {
    flex-shrink: 0;
    padding: 9px;
    text-align: center;
    font-size: 12px;
    font-weight: 620;
    letter-spacing: 0.03em;
    color: var(--lg-cyan);
    background: rgba(34, 211, 238, 0.09);
    border-top: 1px solid rgba(34, 211, 238, 0.22);
    animation: cg-bob 1.7s ease-in-out infinite;
}

.cg-scroll-hint[hidden] { display: none; }

@keyframes cg-bob {
    0%, 100% { transform: translateY(0); opacity: 0.75; }
    50%      { transform: translateY(3px); opacity: 1; }
}

.cg-foot {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 28px;
    border-top: 1px solid var(--lg-rim-soft);
    background: rgba(255, 255, 255, 0.03);
}

.cg-agree { display: flex; align-items: center; gap: 10px; cursor: pointer; }

.cg-agree input {
    width: 20px;
    height: 20px;
    accent-color: var(--lg-violet);
    cursor: pointer;
}

.cg-agree input:disabled { cursor: not-allowed; opacity: 0.4; }
.cg-agree input:disabled + .cg-agree-text { opacity: 0.4; }

.cg-agree-text { font-size: 14px; font-weight: 620; color: #fff; }

.cg-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.cg-decline {
    padding: 9px 16px;
    border-radius: var(--lg-r-pill);
    border: 1px solid var(--lg-rim-soft);
    background: transparent;
    color: rgba(233, 237, 255, 0.5);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.24s var(--lg-ease);
}

.cg-decline:hover { color: #ff9db0; border-color: rgba(255, 77, 109, 0.45); }

.cg-next {
    padding: 11px 26px;
    border-radius: var(--lg-r-pill);
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: linear-gradient(120deg, var(--lg-violet), var(--lg-indigo));
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 680;
    cursor: pointer;
    box-shadow: var(--lg-specular), var(--lg-glow-violet);
    transition: transform 0.3s var(--lg-spring), opacity 0.24s var(--lg-ease);
}

.cg-next:hover:not(:disabled) { transform: translateY(-2px) scale(1.03); }

.cg-next:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
    background: var(--lg-glass-3);
}

.cg-done {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 40px;
}

.cg-done-mark {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    color: #06231a;
    background: linear-gradient(135deg, var(--lg-mint), var(--lg-cyan));
    box-shadow: 0 0 44px rgba(52, 232, 176, 0.6);
    animation: wc-rise 0.7s var(--lg-spring) both;
}

.cg-done h2 { margin: 0; font-size: 25px; font-weight: 780; letter-spacing: -0.03em; color: #fff; }
.cg-done p { margin: 0; font-size: 14px; color: var(--text-secondary); max-width: 380px; }

@media (max-width: 600px) {
    #consentGate { padding: 0; }
    .cg-box { width: 100vw; height: 100vh; border-radius: 0; }
    .cg-head, .cg-doc, .cg-foot { padding-left: 18px; padding-right: 18px; }
    .cg-actions { width: 100%; }
    .cg-next { flex: 1; }
}

/* ==== rewards.css ==== */
/* ============================================================
   Tots — Rewards (rewards.js)
   Uses the liquid-glass tokens from liquid-glass.css.
   ============================================================ */

:root {
    --rw-gold: #ffd166;
    --rw-xp-a: #a06bff;
    --rw-xp-b: #22d3ee;
    --rw-legendary: #ffb443;
    --rw-epic: #c084fc;
    --rw-rare: #38bdf8;
    --rw-common: #94a3b8;
}

/* ---------- Sidebar chip ---------- */
.sidebar-rewards {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    color: var(--rw-gold);
    letter-spacing: 0.3px;
}
.sidebar-rewards.hidden { display: none; }

/* ---------- Cards / layout ---------- */
#rwRoot { display: flex; flex-direction: column; gap: 18px; padding-bottom: 40px; }

.rw-card {
    position: relative;
    background: var(--lg-glass-2, rgba(255,255,255,0.06));
    border: 1px solid var(--lg-rim, rgba(255,255,255,0.12));
    border-radius: var(--lg-r-lg, 22px);
    box-shadow: var(--lg-specular, none), var(--lg-lift-1, none);
    -webkit-backdrop-filter: var(--lg-blur, blur(20px));
    backdrop-filter: var(--lg-blur, blur(20px));
    padding: 20px;
    overflow: hidden;
    min-width: 0;
}

.rw-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }

.rw-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.rw-card-head h3 { margin: 0; font-size: 17px; font-weight: 800; }
.rw-muted { color: var(--text-secondary, #a0a0b0); font-size: 13px; }

/* ---------- Buttons ---------- */
.rw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--lg-r-pill, 999px);
    border: 1px solid var(--lg-rim, rgba(255,255,255,0.14));
    background: var(--lg-glass-3, rgba(255,255,255,0.1));
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s var(--lg-spring, ease), background 0.2s, opacity 0.2s;
}
.rw-btn:hover:not(:disabled) { transform: translateY(-1px); background: var(--lg-glass-4, rgba(255,255,255,0.16)); }
.rw-btn:active:not(:disabled) { transform: scale(0.97); }
.rw-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.rw-btn-primary {
    background: linear-gradient(135deg, var(--rw-xp-a), #6366f1);
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 6px 20px rgba(160,107,255,0.35);
}
.rw-btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, #b085ff, #7577ff); }
.rw-btn-friend { background: rgba(52,232,176,0.16); border-color: rgba(52,232,176,0.45); color: #34e8b0; }

/* ---------- XP bar ---------- */
.rw-bar {
    height: 8px;
    border-radius: 99px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}
.rw-bar.big { height: 12px; }
.rw-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--rw-xp-a), var(--rw-xp-b));
    box-shadow: 0 0 12px rgba(34,211,238,0.5);
    transition: width 0.6s var(--lg-ease, ease);
}

/* ---------- Hero ---------- */
.rw-hero { padding: 0; }
.rw-hero-banner {
    height: 86px;
    background: linear-gradient(120deg, rgba(160,107,255,0.55), rgba(34,211,238,0.35));
}
.rw-hero-main {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 0 22px 20px;
    margin-top: -40px;
    flex-wrap: wrap;
}
.rw-hero-info { flex: 1 1 220px; min-width: 0; padding-top: 48px; }
.rw-hero-stats { padding-top: 52px; }
.rw-hero-name { font-size: 22px; font-weight: 800; margin-bottom: 8px; overflow-wrap: anywhere; }
.rw-hero-stats { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.rw-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 99px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 13px;
    white-space: nowrap;
}
.rw-chip.coins { color: var(--rw-gold); border-color: rgba(255,209,102,0.35); background: rgba(255,209,102,0.08); }

.rw-empty { text-align: center; padding: 48px 20px; }
.rw-empty-icon { font-size: 48px; margin-bottom: 10px; }
.rw-empty h3 { margin: 0 0 6px; }
.rw-empty p { color: var(--text-secondary); margin: 0; }
#rwRoot.signed-out > :not(#rwHero) { display: none; }
#rwRoot.signed-out #rwHero { padding: 0; }

/* ---------- Avatars + frames ---------- */
.rw-prof-avatar {
    position: relative;
    width: 88px;
    height: 88px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--lg-deep, #0c0f22);
    border: 4px solid var(--lg-abyss, #080a18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
}
.rw-prof-avatar > img,
.rw-prof-avatar > span:first-child {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.rw-prof-avatar.small { width: 54px; height: 54px; font-size: 26px; border-width: 3px; }
.rw-prof-lvl {
    position: absolute;
    right: -4px;
    bottom: -4px;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border-radius: 99px;
    background: linear-gradient(135deg, var(--rw-xp-a), var(--rw-xp-b));
    border: 3px solid var(--lg-abyss, #080a18);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.frame-gold    { box-shadow: 0 0 0 3px #ffd166, 0 0 18px rgba(255,209,102,0.6); }
.frame-neon    { box-shadow: 0 0 0 3px #22d3ee, 0 0 10px #22d3ee, 0 0 26px #a06bff; }
.frame-fire    { box-shadow: 0 0 0 3px #f97316, 0 0 22px #ef4444; animation: rw-flicker 1.6s ease-in-out infinite; }
.frame-diamond { box-shadow: 0 0 0 3px #e0f2fe, 0 0 0 6px #7dd3fc, 0 0 28px rgba(186,230,253,0.85); animation: rw-shine 3s linear infinite; }
@keyframes rw-flicker { 50% { box-shadow: 0 0 0 3px #facc15, 0 0 30px #f97316; } }
@keyframes rw-shine { 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #a5f3fc, 0 0 36px rgba(255,255,255,0.9); } }

.rw-rainbow {
    background: linear-gradient(90deg, #ff5fa2, #ffb443, #34e8b0, #22d3ee, #a06bff, #ff5fa2);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: rw-rainbow 4s linear infinite;
}
@keyframes rw-rainbow { to { background-position: 200% center; } }

/* Click-to-change profile picture */
.rw-avatar-edit { cursor: pointer; }
.rw-avatar-edit::after {
    content: '📷';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.2s;
}
.rw-avatar-edit:hover::after { opacity: 1; }
#settingsAvatar.rw-avatar-edit { position: relative; overflow: hidden; }

/* ---------- Streak ---------- */
.rw-streak-big {
    font-size: 44px;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(180deg, #ffd166, #f97316);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 14px;
}
.rw-streak-big small {
    font-size: 14px;
    font-weight: 600;
    margin-left: 8px;
    -webkit-text-fill-color: var(--text-secondary, #a0a0b0);
}
.rw-dots { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 16px; }
.rw-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 2px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    min-width: 0;
}
.rw-dot-day { font-size: 10px; color: var(--text-secondary); white-space: nowrap; }
.rw-dot-icon { font-size: 18px; }
.rw-dot-amt { font-size: 11px; font-weight: 800; color: var(--rw-gold); }
.rw-dot.done { background: rgba(52,232,176,0.12); border-color: rgba(52,232,176,0.35); }
.rw-dot.done .rw-dot-icon { filter: grayscale(0.2); }
.rw-dot.today { background: rgba(255,180,67,0.16); border-color: var(--rw-legendary); box-shadow: 0 0 14px rgba(255,180,67,0.35); }
.rw-dot.big .rw-dot-amt { color: #ff5fa2; }
.rw-claimed { color: #34e8b0; font-size: 13px; font-weight: 700; }

/* ---------- Wheel ---------- */
.rw-wheel-card { display: flex; flex-direction: column; align-items: center; }
.rw-wheel-card .rw-card-head { align-self: stretch; }
.rw-wheel-wrap { position: relative; width: min(240px, 70vw); aspect-ratio: 1; margin: 6px 0 18px; }
.rw-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 6px solid rgba(255,255,255,0.85);
    box-shadow: 0 0 0 4px rgba(160,107,255,0.4), 0 14px 40px rgba(0,0,0,0.5), inset 0 0 30px rgba(0,0,0,0.35);
    position: relative;
    transition: transform 4.5s cubic-bezier(0.17, 0.85, 0.2, 1);
}
.rw-wheel-label {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.rw-wheel-label b {
    margin-top: 12%;
    font-size: 13px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}
.rw-wheel-label i { font-style: normal; font-size: 12px; }
.rw-wheel-pointer {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 24px solid #fff;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.5));
    z-index: 2;
}
.rw-wheel-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}
.rw-spin-btn { min-width: 200px; }
.rw-spin-btn.ready { animation: rw-pulse 1.8s ease-in-out infinite; }
@keyframes rw-pulse { 50% { box-shadow: 0 0 0 8px rgba(160,107,255,0.15), 0 6px 26px rgba(160,107,255,0.6); } }

/* ---------- Quests ---------- */
.rw-quests { display: flex; flex-direction: column; gap: 10px; }
.rw-quest {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
}
.rw-quest.done { opacity: 0.6; }
.rw-quest-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.rw-quest-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rw-quest-name { font-weight: 700; font-size: 14px; }
.rw-quest-reward { font-size: 12px; color: var(--rw-gold); }

/* ---------- Badges ---------- */
.rw-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.rw-badge {
    --tier: var(--rw-common);
    text-align: center;
    padding: 14px 10px 12px;
    border-radius: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--tier) 16%, transparent), rgba(255,255,255,0.02));
    border: 1px solid color-mix(in srgb, var(--tier) 45%, transparent);
}
.rw-badge.locked { --tier: rgba(255,255,255,0.15); opacity: 0.55; }
.rw-badge-icon { font-size: 30px; margin-bottom: 6px; }
.rw-badge-name { font-weight: 800; font-size: 13px; }
.rw-badge-desc { font-size: 11px; color: var(--text-secondary); margin-top: 2px; min-height: 28px; }
.rw-badge-tier { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tier); margin-top: 4px; }
.tier-legendary { --tier: var(--rw-legendary); }
.tier-epic      { --tier: var(--rw-epic); }
.tier-rare      { --tier: var(--rw-rare); }
.tier-common    { --tier: var(--rw-common); }
.rw-badge.tier-legendary:not(.locked) { box-shadow: 0 0 18px rgba(255,180,67,0.25); }

/* ---------- Shop ---------- */
.rw-shop-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.rw-shop-tab {
    padding: 7px 14px;
    border-radius: 99px;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.rw-shop-tab.active { background: rgba(160,107,255,0.2); border-color: rgba(160,107,255,0.55); color: #fff; }
.rw-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.rw-shop-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}
.rw-shop-item.on { border-color: rgba(52,232,176,0.5); }
.rw-shop-preview {
    height: 70px;
    border-radius: 12px;
    background: rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    overflow: hidden;
    padding: 0 8px;
    text-align: center;
}
.rw-shop-name { font-weight: 700; font-size: 13px; }

/* ---------- Top players ---------- */
.rw-top { display: flex; flex-direction: column; gap: 6px; }
.rw-top-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
    min-width: 0;
}
.rw-top-row:hover { background: rgba(255,255,255,0.06); }
.rw-top-row.me { background: rgba(160,107,255,0.12); }
.rw-top-rank { width: 28px; text-align: center; font-weight: 800; flex: 0 0 auto; }
.rw-top-avatar {
    position: relative;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
}
.rw-top-avatar > img, .rw-top-avatar > span { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rw-top-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-top-lvl {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 99px;
    background: linear-gradient(135deg, rgba(160,107,255,0.35), rgba(34,211,238,0.3));
}

/* ---------- How to earn ---------- */
.rw-earn { display: flex; flex-direction: column; gap: 10px; }
.rw-earn-row { display: flex; align-items: center; gap: 12px; }
.rw-earn-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rw-earn-row strong { font-size: 14px; }
.rw-earn-row small { color: var(--text-secondary); font-size: 12px; }
.rw-earn-amt { font-size: 12px; font-weight: 800; color: var(--rw-gold); text-align: right; }

/* ---------- Floating reward pops ---------- */
.rw-pops {
    position: fixed;
    right: 18px;
    bottom: 90px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}
.rw-pop {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 99px;
    background: rgba(12,15,34,0.88);
    border: 1px solid rgba(255,255,255,0.14);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    font-size: 13px;
    animation: rw-pop-in 0.4s var(--lg-spring, ease) both;
    transition: opacity 0.4s, transform 0.4s;
}
.rw-pop.out { opacity: 0; transform: translateY(-14px); }
.rw-pop-label { color: var(--text-secondary); }
.rw-pop-xp { font-weight: 800; color: #b9a1ff; }
.rw-pop-coins { font-weight: 800; color: var(--rw-gold); }
@keyframes rw-pop-in { from { opacity: 0; transform: translateY(16px) scale(0.9); } }

/* ---------- Modals ---------- */
.rw-modal {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(3,4,12,0.62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.2s;
}
.rw-modal.open { opacity: 1; }
.rw-modal-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(22,24,48,0.97), rgba(10,12,28,0.98));
    border: 1px solid var(--lg-rim, rgba(255,255,255,0.14));
    border-radius: var(--lg-r-xl, 28px);
    box-shadow: var(--lg-lift-3, 0 28px 70px rgba(0,0,0,0.6));
    padding: 28px 24px;
    text-align: center;
    transform: translateY(14px) scale(0.97);
    transition: transform 0.35s var(--lg-spring, ease);
}
.rw-modal.open .rw-modal-card { transform: none; }
.rw-modal-x {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.35);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
.rw-daily h2, .rw-levelup h2 { margin: 6px 0 6px; font-size: 24px; }
.rw-daily p, .rw-levelup p { color: var(--text-secondary); margin: 0 0 18px; }
.rw-daily-flame { font-size: 56px; animation: rw-bob 2s ease-in-out infinite; }
@keyframes rw-bob { 50% { transform: translateY(-6px) scale(1.05); } }
.rw-levelup-num {
    width: 96px;
    height: 96px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--rw-xp-a), var(--rw-xp-b));
    box-shadow: 0 0 40px rgba(160,107,255,0.6);
    animation: rw-bob 2s ease-in-out infinite;
}

/* ---------- Profile card ---------- */
.rw-modal-card.rw-prof { padding: 0; max-width: 460px; text-align: left; }
.rw-prof-loading { padding: 60px 20px; text-align: center; color: var(--text-secondary); }
.rw-prof-banner {
    height: 110px;
    background: linear-gradient(120deg, rgba(160,107,255,0.6), rgba(34,211,238,0.4));
}
.rw-prof-body { padding: 0 22px 22px; }
.rw-prof-body > .rw-prof-avatar { margin-top: -46px; }
.rw-prof-name { font-size: 24px; font-weight: 800; margin-top: 10px; overflow-wrap: anywhere; }
.rw-prof-pronouns { font-size: 13px; font-weight: 500; color: var(--text-secondary); vertical-align: middle; }
.rw-prof-fav { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.rw-prof-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rw-tag {
    --tier: var(--rw-common);
    font-size: 12px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 99px;
    color: var(--tier);
    background: color-mix(in srgb, var(--tier) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--tier) 50%, transparent);
}
.rw-prof-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 13px; color: var(--text-secondary); }
.rw-presence.on { color: #34e8b0; }
.rw-presence.away { color: #ffb443; }
.rw-prof-bio {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.rw-prof-bio.muted { color: var(--text-secondary); font-style: italic; }
.rw-prof-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rw-bio-input {
    width: 100%;
    min-height: 70px;
    resize: vertical;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.3);
    color: #fff;
    font: inherit;
    font-size: 14px;
    box-sizing: border-box;
}
.rw-detail-input {
    width: 100%;
    padding: 9px 12px;
    margin-top: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.3);
    color: #fff;
    font: inherit;
    font-size: 13px;
    box-sizing: border-box;
}
.rw-prof-xp { margin-top: 18px; }
.rw-prof-xp-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.rw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.rw-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 10px 4px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    text-align: center;
    min-width: 0;
}
.rw-stat-icon { font-size: 16px; }
.rw-stat strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
.rw-stat small { font-size: 10px; color: var(--text-secondary); }
.rw-prof-section {
    display: flex;
    justify-content: space-between;
    margin: 18px 0 10px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.rw-prof-section span { color: var(--text-secondary); }
.rw-prof-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.rw-pbadge {
    --tier: var(--rw-common);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 74px;
    padding: 8px 4px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--tier) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--tier) 40%, transparent);
    cursor: default;
}
.rw-pbadge span { font-size: 24px; }
.rw-pbadge small { font-size: 10px; font-weight: 700; text-align: center; line-height: 1.2; margin-top: 2px; }
.rw-admin { margin-top: 18px; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(255,180,67,0.45); font-size: 13px; }
.rw-admin summary { cursor: pointer; font-weight: 700; color: var(--rw-legendary); }
.rw-admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.rw-admin label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* ---------- Admin: give badges ---------- */
.rw-admin-badges { max-width: 900px; margin-bottom: 28px; }
.rw-admin-search { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
.rw-admin-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.rw-admin-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
}
.rw-admin-row .rw-fr-name { flex: 0 1 160px; }
.rw-admin-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.rw-admin-chip {
    --tier: var(--rw-common);
    padding: 4px 10px;
    border-radius: 99px;
    border: 1px dashed rgba(255,255,255,0.18);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    opacity: 0.6;
}
.rw-admin-chip:hover { opacity: 1; }
.rw-admin-chip.on {
    opacity: 1;
    border-style: solid;
    color: var(--tier);
    border-color: color-mix(in srgb, var(--tier) 55%, transparent);
    background: color-mix(in srgb, var(--tier) 16%, transparent);
}

/* ---------- Chat decorations ---------- */
.rw-name-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 800;
    vertical-align: middle;
    color: #fff;
    background: linear-gradient(135deg, rgba(160,107,255,0.55), rgba(34,211,238,0.45));
}
.rw-name-badge {
    --tier: var(--rw-common);
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 800;
    vertical-align: middle;
    color: var(--tier);
    background: color-mix(in srgb, var(--tier) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--tier) 45%, transparent);
}

/* ---------- Friends (Contacts tab) ---------- */
.rw-friends { margin-bottom: 24px; }
.rw-fr-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.rw-fr-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    cursor: pointer;
    min-width: 0;
}
.rw-fr-row:hover { background: rgba(255,255,255,0.07); }
.rw-fr-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 700; cursor: pointer; overflow: hidden; }
.rw-fr-name small { font-weight: 500; color: var(--text-secondary); font-size: 12px; }
.rw-fr-badges { display: flex; gap: 2px; font-size: 16px; }
.rw-online {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #64748b;
    border: 2px solid var(--lg-abyss, #080a18);
}
.rw-online.on { background: #34e8b0; }
.rw-count {
    display: inline-block;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 99px;
    background: rgba(160,107,255,0.3);
    font-size: 11px;
}

/* ---------- Phones ---------- */
@media (max-width: 760px) {
    .rw-grid2 { grid-template-columns: minmax(0, 1fr); }
    .rw-badges { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    .rw-shop { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .rw-card { padding: 16px; }
    .rw-hero { padding: 0; }
    .rw-hero-main { padding: 0 16px 16px; }
    .rw-hero-stats { padding-top: 0; }
    .rw-stats { grid-template-columns: repeat(2, 1fr); }
    .rw-dot-day { font-size: 9px; }
    .rw-dot-icon { font-size: 15px; }
    .rw-fr-badges { display: none; }
    .rw-pops { right: 12px; left: 12px; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
    .rw-wheel { transition-duration: 0.01s; }
    .rw-rainbow, .frame-fire, .frame-diamond, .rw-spin-btn.ready, .rw-daily-flame, .rw-levelup-num { animation: none; }
}

/* ---------- Shop: titles + chat bubbles ---------- */
.rw-title-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.14);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    vertical-align: middle;
    white-space: nowrap;
}
.rw-shop-preview .message { margin: 0; padding: 0 !important; animation: none !important; display: flex; justify-content: center; }
.rw-shop-preview .rw-bub-demo { padding: 6px 12px !important; }
.rw-shop-preview .rw-bub-demo p { margin: 0; font-size: 13px; }

/* Bubble skins (rw-bub-<value> is added to .message by rewards.js). "body" outranks neo.css, which loads after this file */
body .message.rw-bub-ocean .message-content  { background: linear-gradient(135deg, #0ea5e9, #6366f1) !important; border-color: transparent !important; }
body .message.rw-bub-sunset .message-content { background: linear-gradient(135deg, #ff7e5f, #feb47b) !important; border-color: transparent !important; color: #2a1206 !important; }
body .message.rw-bub-mint .message-content   { background: linear-gradient(135deg, #34e8b0, #22d3ee) !important; border-color: transparent !important; color: #04261b !important; }
body .message.rw-bub-candy .message-content  { background: linear-gradient(135deg, #ff5fa2, #b69cff) !important; border-color: transparent !important; }
body .message.rw-bub-glass .message-content  { background: rgba(255,255,255,0.14) !important; border: 1px solid rgba(255,255,255,0.35) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35) !important; }
body .message.rw-bub-neon .message-content   { background: #0b0b14 !important; border: 1px solid #22d3ee !important; box-shadow: 0 0 12px rgba(34,211,238,0.55), inset 0 0 10px rgba(34,211,238,0.2) !important; }
body .message.rw-bub-gold .message-content   { background: linear-gradient(135deg, #f7d774, #c9962b) !important; border-color: transparent !important; color: #2b1d00 !important; box-shadow: 0 4px 18px rgba(247,215,116,0.35) !important; }
body .message.rw-bub-galaxy .message-content { background: radial-gradient(circle at 25% 30%, #a06bff, transparent 55%), radial-gradient(circle at 80% 70%, #ff5fa2, transparent 50%), #0c0f22 !important; border-color: rgba(160,107,255,0.5) !important; }
body .message.rw-bub-sunset .message-content .message-time,
body .message.rw-bub-mint .message-content .message-time,
body .message.rw-bub-gold .message-content .message-time { color: rgba(0,0,0,0.5) !important; }
body .message.rw-bub-sunset .message-author,
body .message.rw-bub-mint .message-author,
body .message.rw-bub-gold .message-author { color: rgba(0,0,0,0.75) !important; }

/* ---------- Seasonal packs (PACKS in rewards.js, switched on in Admin → Coins & Shop) ---------- */
.rw-shop-tab-packs { border-color: rgba(250,204,21,0.5); color: #fde68a; }
.rw-shop-tab-packs.active { background: rgba(250,204,21,0.18); border-color: rgba(250,204,21,0.7); }
.rw-pack { margin-bottom: 18px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); }
.rw-pack-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.rw-pack-head > div { flex: 1; min-width: 160px; }
.rw-pack-head h4 { margin: 0; font-size: 16px; }
.rw-pack-head p { margin: 2px 0 0; font-size: 13px; }
.rw-pack-icon { font-size: 34px; line-height: 1; }
.rw-pack-head s { opacity: 0.6; margin-left: 4px; }
.rw-pack-halloween    { border-color: rgba(249,115,22,0.45); background: linear-gradient(135deg, rgba(76,29,149,0.18), rgba(249,115,22,0.08)); }
.rw-pack-thanksgiving { border-color: rgba(217,119,6,0.45);  background: linear-gradient(135deg, rgba(124,45,18,0.2), rgba(250,204,21,0.06)); }
.rw-pack-christmas    { border-color: rgba(239,68,68,0.45);  background: linear-gradient(135deg, rgba(21,128,61,0.18), rgba(185,28,28,0.12)); }
.rw-pack-snowday      { border-color: rgba(125,211,252,0.5); background: linear-gradient(135deg, rgba(125,211,252,0.14), rgba(30,58,138,0.14)); }
.rw-pack-newyear      { border-color: rgba(253,230,138,0.5); background: linear-gradient(135deg, rgba(244,114,182,0.1), rgba(250,204,21,0.1)); }
.rw-pack-valentines   { border-color: rgba(251,113,133,0.5); background: linear-gradient(135deg, rgba(251,113,133,0.14), rgba(190,18,60,0.1)); }
.rw-pack-stpatricks   { border-color: rgba(34,197,94,0.5);   background: linear-gradient(135deg, rgba(20,83,45,0.2), rgba(250,204,21,0.06)); }
.rw-pack-easter       { border-color: rgba(196,181,253,0.5); background: linear-gradient(135deg, rgba(251,207,232,0.1), rgba(165,243,252,0.1)); }
.rw-pack-lastweek     { border-color: rgba(56,189,248,0.5);  background: linear-gradient(180deg, rgba(56,189,248,0.14), rgba(251,191,36,0.1)); }
.rw-pack-backtoschool { border-color: rgba(250,204,21,0.5);  background: linear-gradient(135deg, rgba(31,59,44,0.3), rgba(250,204,21,0.06)); }

/* Pack avatar frames */
.frame-pk-halloween    { box-shadow: 0 0 0 3px #f97316, 0 0 0 6px #4c1d95, 0 0 22px rgba(249,115,22,0.7); animation: rw-pk-glow 2.2s ease-in-out infinite; }
.frame-pk-thanksgiving { box-shadow: 0 0 0 3px #d97706, 0 0 0 6px #7c2d12, 0 0 18px rgba(217,119,6,0.6); }
.frame-pk-christmas    { box-shadow: 0 0 0 3px #dc2626, 0 0 0 6px #16a34a, 0 0 20px rgba(250,204,21,0.6); animation: rw-pk-twinkle 1.4s steps(2) infinite; }
.frame-pk-snowday      { box-shadow: 0 0 0 3px #e0f2fe, 0 0 0 6px #7dd3fc, 0 0 24px rgba(224,242,254,0.8); }
.frame-pk-newyear      { box-shadow: 0 0 0 3px #fde68a, 0 0 14px #f472b6, 0 0 28px #38bdf8; animation: rw-pk-glow 1.2s ease-in-out infinite; }
.frame-pk-valentines   { box-shadow: 0 0 0 3px #fb7185, 0 0 0 6px #fecdd3, 0 0 22px rgba(251,113,133,0.7); animation: rw-pk-beat 1.1s ease-in-out infinite; }
.frame-pk-stpatricks   { box-shadow: 0 0 0 3px #22c55e, 0 0 0 6px #facc15, 0 0 20px rgba(34,197,94,0.6); }
.frame-pk-easter       { box-shadow: 0 0 0 3px #fbcfe8, 0 0 0 6px #c4b5fd, 0 0 0 9px #a5f3fc; }
.frame-pk-lastweek     { box-shadow: 0 0 0 3px #111827, 0 0 0 6px #fbbf24, 0 0 22px rgba(56,189,248,0.6); }
.frame-pk-backtoschool { box-shadow: 0 0 0 3px #facc15, 0 0 0 6px #f472b6, 0 0 0 8px #1f2937; }
@keyframes rw-pk-glow { 50% { filter: brightness(1.25); } }
@keyframes rw-pk-twinkle { 50% { box-shadow: 0 0 0 3px #16a34a, 0 0 0 6px #dc2626, 0 0 26px rgba(250,204,21,0.9); } }
@keyframes rw-pk-beat { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .frame-pk-halloween, .frame-pk-christmas, .frame-pk-newyear, .frame-pk-valentines { animation: none; } }

/* Pack chat bubbles */
body .message.rw-bub-pk-halloween .message-content    { background: linear-gradient(135deg, #1a0b2e, #3b0764) !important; border: 1px solid #f97316 !important; box-shadow: 0 0 12px rgba(249,115,22,0.4) !important; }
body .message.rw-bub-pk-thanksgiving .message-content { background: linear-gradient(135deg, #92400e, #d97706) !important; border-color: transparent !important; }
body .message.rw-bub-pk-christmas .message-content    { background: repeating-linear-gradient(135deg, #b91c1c 0 12px, #dc2626 12px 24px) !important; border: 1px solid #fff !important; }
body .message.rw-bub-pk-snowday .message-content      { background: linear-gradient(135deg, #e0f2fe, #bae6fd) !important; border-color: transparent !important; color: #0c2a4a !important; }
body .message.rw-bub-pk-newyear .message-content      { background: radial-gradient(circle at 15% 25%, #f472b6 0 2px, transparent 3px), radial-gradient(circle at 60% 70%, #facc15 0 2px, transparent 3px), radial-gradient(circle at 85% 30%, #38bdf8 0 2px, transparent 3px), #111327 !important; background-size: 40px 30px !important; border: 1px solid #fde68a !important; }
body .message.rw-bub-pk-valentines .message-content   { background: linear-gradient(135deg, #fb7185, #e11d48) !important; border-color: transparent !important; }
body .message.rw-bub-pk-stpatricks .message-content   { background: linear-gradient(135deg, #15803d, #22c55e) !important; border: 1px solid #facc15 !important; }
body .message.rw-bub-pk-easter .message-content       { background: linear-gradient(135deg, #fbcfe8, #ddd6fe, #bae6fd) !important; border-color: transparent !important; color: #3b2a5a !important; }
body .message.rw-bub-pk-lastweek .message-content     { background: #fffbeb !important; border: 2px dashed #38bdf8 !important; color: #1f2937 !important; }
body .message.rw-bub-pk-backtoschool .message-content { background: repeating-linear-gradient(180deg, #fefce8 0 17px, #93c5fd 17px 18px) !important; border-left: 3px solid #f87171 !important; color: #1f2937 !important; }
body .message.rw-bub-pk-snowday .message-content .message-time,
body .message.rw-bub-pk-easter .message-content .message-time,
body .message.rw-bub-pk-lastweek .message-content .message-time,
body .message.rw-bub-pk-backtoschool .message-content .message-time { color: rgba(0,0,0,0.5) !important; }
body .message.rw-bub-pk-snowday .message-author,
body .message.rw-bub-pk-easter .message-author,
body .message.rw-bub-pk-lastweek .message-author,
body .message.rw-bub-pk-backtoschool .message-author { color: rgba(0,0,0,0.75) !important; }

/* ---------- 🎲 Mystery packs + Buddies (BUDDY_SET in rewards.js) ---------- */
.rw-buddy { --rc: #9ca3af; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; font-size: 26px; line-height: 1;
    border-radius: 12px; background: rgba(0,0,0,0.25); box-shadow: inset 0 0 0 2px var(--rc); }
.rw-buddy.r-common    { --rc: #9ca3af; }
.rw-buddy.r-uncommon  { --rc: #34d399; }
.rw-buddy.r-rare      { --rc: #38bdf8; box-shadow: inset 0 0 0 2px var(--rc), 0 0 10px rgba(56,189,248,0.45); }
.rw-buddy.r-epic      { --rc: #a855f7; box-shadow: inset 0 0 0 2px var(--rc), 0 0 14px rgba(168,85,247,0.6); }
.rw-buddy.r-legendary { --rc: #f59e0b; box-shadow: inset 0 0 0 2px var(--rc), 0 0 18px rgba(245,158,11,0.7); }
.rw-buddy.r-chroma    { box-shadow: inset 0 0 0 2px #fff, 0 0 20px rgba(255,255,255,0.6); background: linear-gradient(120deg,#f472b6,#facc15,#34d399,#38bdf8,#a855f7,#f472b6); background-size: 300% 300%; animation: rw-chroma 3s linear infinite; }
.rw-buddy.locked { filter: grayscale(1); opacity: 0.45; font-size: 18px; }
.rw-buddy.big { width: 110px; height: 110px; font-size: 70px; border-radius: 28px; }
.rw-buddy.chip { width: 22px; height: 22px; font-size: 14px; border-radius: 7px; margin-right: 4px; vertical-align: middle; }
.rw-buddy-n { margin-left: 8px; font-weight: 800; font-size: 14px; color: #fde68a; }
@keyframes rw-chroma { to { background-position: 300% 0; } }
.rw-rar { font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 99px; background: rgba(255,255,255,0.08); }
.rw-rar.r-uncommon { color: #34d399; } .rw-rar.r-rare { color: #38bdf8; } .rw-rar.r-epic { color: #c084fc; }
.rw-rar.r-legendary { color: #fbbf24; } .rw-rar.r-chroma { color: #f9a8d4; }
.rw-prof-avatar.has-buddy > span:first-child { font-size: 52px; }
.rw-prof-avatar.has-buddy.r-legendary { box-shadow: 0 0 0 3px #f59e0b, 0 0 22px rgba(245,158,11,0.6); }
.rw-prof-avatar.has-buddy.r-chroma { box-shadow: 0 0 0 3px #f472b6, 0 0 0 6px #38bdf8, 0 0 26px rgba(250,204,21,0.7); }

.rw-mystery { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; padding: 12px; border-radius: 14px; background: rgba(0,0,0,0.22); border: 1px dashed rgba(255,255,255,0.18); }
.rw-mystery-box { position: relative; width: 64px; height: 76px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 34px;
    background: linear-gradient(160deg, rgba(160,107,255,0.5), rgba(34,211,238,0.35)); box-shadow: 0 6px 18px rgba(0,0,0,0.35); animation: rw-bob 2.6s ease-in-out infinite; }
.rw-mystery-box b { position: absolute; right: -6px; top: -8px; width: 24px; height: 24px; border-radius: 50%; background: #facc15; color: #1f1300; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.rw-mystery-main { flex: 1; min-width: 200px; display: grid; gap: 6px; }
.rw-mystery-main h5 { margin: 0; font-size: 14px; }
.rw-collection { display: flex; gap: 6px; flex-wrap: wrap; }
.rw-collection .rw-buddy { width: 34px; height: 34px; font-size: 20px; border-radius: 10px; }

.rw-open-card { text-align: center; padding: 34px 24px 26px !important; min-height: 300px; display: flex; align-items: center; justify-content: center; }
.rw-open-pack { font-size: 90px; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: rw-shake 0.5s ease-in-out infinite; }
.rw-open-pack small { font-size: 14px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; opacity: 0.8; }
@keyframes rw-shake { 0%,100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-8deg) scale(1.05); } 75% { transform: rotate(8deg) scale(1.05); } }
.rw-open-result { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: rw-pop-in 0.45s cubic-bezier(.2,1.6,.4,1); }
.rw-open-result h3 { margin: 0; font-size: 24px; }
.rw-open-rarity { font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; font-size: 13px; }
.rw-open-result.r-uncommon .rw-open-rarity { color: #34d399; } .rw-open-result.r-rare .rw-open-rarity { color: #38bdf8; }
.rw-open-result.r-epic .rw-open-rarity { color: #c084fc; } .rw-open-result.r-legendary .rw-open-rarity { color: #fbbf24; }
.rw-open-result.r-chroma .rw-open-rarity { background: linear-gradient(90deg,#f472b6,#facc15,#34d399,#38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rw-open-burst { position: absolute; top: -30px; width: 220px; height: 220px; border-radius: 50%; z-index: -1; opacity: 0.55;
    background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.25) 0 10deg, transparent 10deg 30deg); animation: rw-spin-burst 6s linear infinite; }
.rw-open-result.r-epic .rw-open-burst { background: repeating-conic-gradient(rgba(168,85,247,0.45) 0 10deg, transparent 10deg 30deg); }
.rw-open-result.r-legendary .rw-open-burst { background: repeating-conic-gradient(rgba(245,158,11,0.55) 0 10deg, transparent 10deg 30deg); opacity: 0.8; }
.rw-open-result.r-chroma .rw-open-burst { background: repeating-conic-gradient(#f472b6 0 8deg, #facc15 8deg 16deg, #34d399 16deg 24deg, #38bdf8 24deg 32deg, transparent 32deg 45deg); opacity: 0.6; }
@keyframes rw-spin-burst { to { transform: rotate(360deg); } }
.rw-open-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .rw-buddy.r-chroma, .rw-mystery-box, .rw-open-pack, .rw-open-burst { animation: none; } }

/* 🥒 Pickle Pack */
.rw-pack-pickle { border-color: rgba(132,204,22,0.55); background: linear-gradient(135deg, rgba(63,98,18,0.3), rgba(190,242,100,0.08)); }
.frame-pk-pickle { box-shadow: 0 0 0 3px #65a30d, 0 0 0 6px #3f6212, 0 0 0 8px #bef264, 0 0 18px rgba(132,204,22,0.6); animation: rw-pk-beat 1.6s ease-in-out infinite; }
body .message.rw-bub-pk-pickle .message-content { background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18) 0 3px, transparent 4px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.14) 0 2px, transparent 3px), linear-gradient(135deg, #4d7c0f, #84cc16) !important; background-size: 34px 26px, 28px 22px, auto !important; border: 1px solid #bef264 !important; }
@media (prefers-reduced-motion: reduce) { .frame-pk-pickle { animation: none; } }

/* 🎉 New pack splash (announcePacks in rewards.js) */
.rw-packnews { position: fixed; inset: 0; z-index: 99970; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(5,7,15,0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; }
.rw-packnews.open { opacity: 1; }
.rw-packnews-card { width: min(420px, 100%); text-align: center; padding: 26px 22px 22px; border-radius: 24px; background: #121527;
    border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 20px 60px rgba(0,0,0,0.55); transform: scale(0.8); transition: transform .45s cubic-bezier(.2,1.6,.4,1); }
.rw-packnews.open .rw-packnews-card { transform: scale(1); }
.rw-packnews-tag { display: inline-block; padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 900; letter-spacing: 2px; color: #1f1300; background: linear-gradient(90deg,#facc15,#fb923c); }
.rw-packnews-icon { font-size: 84px; line-height: 1.2; margin-top: 8px; animation: rw-shake 0.9s ease-in-out 3; }
.rw-packnews-card h2 { margin: 4px 0 2px; font-size: 26px; }
.rw-packnews-card p { margin: 4px 0; }
.rw-packnews-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 12px 0 6px; }
.rw-packnews-row .rw-buddy { width: 36px; height: 36px; font-size: 21px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .rw-packnews-icon { animation: none; } }

/* Price-rise debts (things bought at the old price, locked until the difference is paid) */
.rw-owe-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; font-size: 13px; background: rgba(255, 196, 0, 0.12); border: 1px solid rgba(255, 196, 0, 0.35); }
.rw-btn.rw-owe { background: linear-gradient(135deg, #f59e0b, #ef4444); }

/* ── One-of-a-kind buddies (rewards.js EXCLUSIVE) ───────────────────────────
   Rarer-looking than Chroma on purpose: gold ring + slow sheen, so the one
   person who has it is obvious. Only ever granted by an owner. */
.rw-buddy.r-oneofakind {
    box-shadow: inset 0 0 0 2px #ffd84d, 0 0 22px rgba(255, 216, 77, 0.75);
    background: linear-gradient(120deg, #3a2d00, #ffd84d, #fff6c2, #ffd84d, #3a2d00);
    background-size: 300% 300%;
    animation: rw-ooak 4.5s ease-in-out infinite;
}
@keyframes rw-ooak {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.rw-rar.r-oneofakind { color: #ffd84d; font-weight: 800; letter-spacing: .03em; }
.rw-prof-avatar.has-buddy.r-oneofakind {
    box-shadow: 0 0 0 3px #ffd84d, 0 0 0 6px #fff6c2, 0 0 30px rgba(255, 216, 77, 0.85);
}
.rw-open-result.r-oneofakind .rw-open-rarity {
    background: linear-gradient(90deg, #ffd84d, #fff6c2, #ffd84d);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rw-open-result.r-oneofakind .rw-open-burst {
    background: repeating-conic-gradient(#ffd84d 0 8deg, #fff6c2 8deg 16deg, transparent 16deg 45deg);
    opacity: 0.65;
}

/* AM = admin. The only admin mark on the site (Oct 14 2026): a small pill next to the name on the profile card. */
.rw-am { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 800;
    letter-spacing: .04em; line-height: 16px; vertical-align: middle; color: var(--neo-accent, #8ab4ff);
    border: 1px solid currentColor; background: transparent; }

/* 🏔️ South Park pack (manual — an owner turns it on). Orange parka frame + cut-out construction paper bubble. */
.frame-pk-southpark { box-shadow: 0 0 0 3px #f97316, 0 0 0 6px #c2410c, 0 0 0 8px #fed7aa, 0 0 16px rgba(249,115,22,0.55); }
body .message.rw-bub-pk-southpark .message-content { background: radial-gradient(circle at 18% 22%, rgba(0,0,0,0.05) 0 2px, transparent 3px), radial-gradient(circle at 72% 64%, rgba(0,0,0,0.04) 0 2px, transparent 3px), linear-gradient(135deg, #fde68a, #fcd34d) !important; background-size: 22px 18px, 26px 20px, auto !important; color: #1f2937 !important; border: 2px solid #92400e !important; border-radius: 6px 14px 8px 16px !important; box-shadow: 2px 3px 0 rgba(0,0,0,0.25) !important; }

/* Drawn buddy pictures (buddyart.js) — fill the tile instead of an emoji */
.rw-buddy.has-img { padding: 2px; background: #e0f2fe; overflow: hidden; }
.rw-buddy-img { width: 100%; height: 100%; display: block; object-fit: contain; }
.rw-prof-avatar.has-buddy > span:first-child .rw-buddy-img { width: 86%; height: 86%; margin: auto; }

/* 🏆 World Cup pack (manual — an owner turns it on). Gold trophy frame + striped pitch bubble. */
.frame-pk-worldcup { box-shadow: 0 0 0 3px #facc15, 0 0 0 6px #a16207, 0 0 0 8px #fef08a, 0 0 18px rgba(250,204,21,0.65); }
body .message.rw-bub-pk-worldcup .message-content { background: repeating-linear-gradient(90deg, #15803d 0 18px, #16a34a 18px 36px) !important; color: #fff !important; border: 2px solid #f8fafc !important; text-shadow: 0 1px 1px rgba(0,0,0,0.35); }

/* ==== neo.css ==== */
/* ============================================================
   Tots — Neo (space-age)
   Calm, Apple-like layer: true black, hairline glass, one cool
   accent, soft light. Loads LAST and only restyles — delete the
   <link> (and neo.js) in index.html to go back to the old look.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
    --neo-black:   #000;
    --neo-ink:     #0a0a0d;
    --neo-surface: rgba(22, 22, 28, 0.55);
    --neo-raised:  rgba(36, 36, 44, 0.55);
    --neo-line:    rgba(255, 255, 255, 0.08);
    --neo-line-hi: rgba(255, 255, 255, 0.16);
    --neo-text:    #f5f5f7;
    --neo-dim:     rgba(235, 235, 245, 0.6);
    --neo-faint:   rgba(235, 235, 245, 0.32);
    --neo-accent:  #8ab4ff;
    --neo-accent2: #b69cff;
    --neo-glow:    rgba(138, 180, 255, 0.35);
    --neo-ease:    cubic-bezier(0.22, 1, 0.36, 1);
    --neo-spring:  cubic-bezier(0.34, 1.4, 0.64, 1);

    /* Re-point the older layers so everything inherits the new palette */
    --lg-violet: var(--neo-accent2);
    --lg-indigo: #7c8cff;
    --lg-cyan:   var(--neo-accent);
    --lg-void:   var(--neo-black);
    --lg-abyss:  var(--neo-black);
    --lg-deep:   var(--neo-ink);
    --lg-glass-1: rgba(255, 255, 255, 0.03);
    --lg-glass-2: rgba(255, 255, 255, 0.05);
    --lg-glass-3: rgba(255, 255, 255, 0.08);
    --lg-glass-4: rgba(255, 255, 255, 0.12);
    --lg-rim:      var(--neo-line-hi);
    --lg-rim-soft: var(--neo-line);
    --lg-specular: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --lg-lift-1: 0 2px 8px rgba(0, 0, 0, 0.4);
    --lg-lift-2: 0 10px 30px rgba(0, 0, 0, 0.5);
    --lg-lift-3: 0 24px 60px rgba(0, 0, 0, 0.6);
    --lg-glow-violet: 0 0 24px var(--neo-glow);
    --lg-glow-cyan:   0 0 24px var(--neo-glow);
    --lg-blur:      blur(30px) saturate(160%);
    --lg-blur-deep: blur(50px) saturate(170%);
    --lg-r-md: 14px;
    --lg-r-lg: 22px;
    --lg-r-xl: 28px;

    --text-primary:   var(--neo-text);
    --text-secondary: var(--neo-dim);
    --gradient-purple: linear-gradient(135deg, #5b7cff, #9f7bff);
}

/* Accent picker (Settings) still works — it just tints the one accent */
:root[data-accent="blue"]   { --neo-accent: #64a8ff; --neo-accent2: #5ac8fa; --neo-glow: rgba(100, 168, 255, 0.35); --gradient-purple: linear-gradient(135deg, #2f7bff, #5ac8fa); }
:root[data-accent="green"]  { --neo-accent: #4ade80; --neo-accent2: #5eead4; --neo-glow: rgba(74, 222, 128, 0.3);  --gradient-purple: linear-gradient(135deg, #16a34a, #2dd4bf); }
:root[data-accent="orange"] { --neo-accent: #ffb454; --neo-accent2: #ff8a5c; --neo-glow: rgba(255, 180, 84, 0.3);  --gradient-purple: linear-gradient(135deg, #f97316, #f59e0b); }
:root[data-accent="pink"]   { --neo-accent: #ff7ab6; --neo-accent2: #c58cff; --neo-glow: rgba(255, 122, 182, 0.3); --gradient-purple: linear-gradient(135deg, #ec4899, #a855f7); }
:root[data-accent="cyan"]   { --neo-accent: #5eead4; --neo-accent2: #67e8f9; --neo-glow: rgba(94, 234, 212, 0.3);  --gradient-purple: linear-gradient(135deg, #0891b2, #14b8a6); }

/* ---------- 2. Base ---------- */
body {
    background: var(--neo-black) !important;
    font-family: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
    letter-spacing: -0.014em;
    color: var(--neo-text);
}

::selection { background: var(--neo-glow); color: #fff; }

/* Cosmos: canvas (neo.js) does the work, the gradient layer stays quiet */
:root[data-bg="cosmos"] body::before {
    background:
        radial-gradient(40% 40% at 78% 12%, rgba(120, 140, 255, 0.12), transparent 70%),
        radial-gradient(50% 50% at 15% 95%, rgba(150, 110, 255, 0.08), transparent 70%) !important;
    animation: none;
}
:root[data-bg="cosmos"] #bgFx { opacity: 0; }

#neoSpace {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s var(--neo-ease);
}
:root[data-bg="cosmos"] #neoSpace.ready { opacity: 1; }

/* Cursor light */
#neoGlow {
    position: fixed;
    left: 0;
    top: 0;
    width: 560px;
    height: 560px;
    margin: -280px 0 0 -280px;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(circle, var(--neo-glow) 0%, transparent 62%);
    opacity: 0;
    mix-blend-mode: screen;
    filter: blur(20px);
    transition: opacity 0.6s var(--neo-ease);
    will-change: transform;
}
#neoGlow.on { opacity: 0.6; }

/* ---------- 3. Shell ---------- */
.sidebar,
.main-content {
    background: var(--neo-surface) !important;
    border: 1px solid var(--neo-line) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 80px rgba(0, 0, 0, 0.55) !important;
    -webkit-backdrop-filter: blur(40px) saturate(160%);
    backdrop-filter: blur(40px) saturate(160%);
}

.main-content { background: rgba(14, 14, 18, 0.42) !important; }

.top-bar {
    background: rgba(20, 20, 26, 0.55) !important;
    border: 1px solid var(--neo-line) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 40px rgba(0, 0, 0, 0.45) !important;
    -webkit-backdrop-filter: blur(30px) saturate(170%);
    backdrop-filter: blur(30px) saturate(170%);
}

/* Logo */
.logo { padding: 8px 14px 22px !important; }
.logo-icon { filter: drop-shadow(0 0 16px var(--neo-glow)) !important; }
.logo-text {
    font-weight: 650 !important;
    font-size: 19px !important;
    letter-spacing: -0.03em !important;
    background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0.55)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* Nav */
.nav-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    color: var(--neo-faint) !important;
    margin-top: 6px;
}

.nav-btn {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--neo-dim) !important;
    border-radius: 12px !important;
    transition: background 0.3s var(--neo-ease), color 0.3s var(--neo-ease), transform 0.4s var(--neo-spring) !important;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: transparent !important;
    color: var(--neo-text) !important;
    transform: translateX(2px);
}

.nav-btn.active {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: var(--neo-line) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Glowing dot instead of the old bar */
.nav-btn.active::before {
    left: 4px !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: var(--neo-accent) !important;
    box-shadow: 0 0 10px 2px var(--neo-glow) !important;
}

.nav-icon { filter: saturate(0.85); transition: transform 0.4s var(--neo-spring); }
.nav-btn:hover .nav-icon { transform: scale(1.12); }

/* ---------- 4. Type ---------- */
.content-header {
    border-bottom: none !important;
    margin-bottom: 34px !important;
    padding-bottom: 0 !important;
}

.content-header h1,
.content-header h2,
.section-heading {
    font-weight: 650 !important;
    letter-spacing: -0.028em !important;
    background: linear-gradient(180deg, #ffffff 35%, rgba(255, 255, 255, 0.5) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.content-header h1 {
    font-size: clamp(30px, 4vw, 46px) !important;
    line-height: 1.05 !important;
    margin-bottom: 10px !important;
}

.content-header p { font-size: 16px !important; color: var(--neo-dim) !important; }

.section-heading { font-size: 22px !important; }

/* ---------- 5. Cards ---------- */
.welcome-card,
.stat-card,
.resource-card,
.quick-tool-card,
.ai-room-card,
.meme-card,
.note-item,
.settings-card,
.rw-card {
    position: relative;
    background: var(--neo-surface) !important;
    border: 1px solid var(--neo-line) !important;
    border-radius: 22px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 30px rgba(0, 0, 0, 0.35) !important;
    color: var(--neo-text);
    transition: transform 0.5s var(--neo-spring), border-color 0.4s var(--neo-ease), box-shadow 0.4s var(--neo-ease) !important;
    transform-style: preserve-3d;
}

/* Colourful home cards become dark glass with a soft tinted glow */
.welcome-card.gradient-purple { --tint: rgba(159, 123, 255, 0.22); }
.welcome-card.gradient-blue   { --tint: rgba(90, 160, 255, 0.22); }
.welcome-card.gradient-green  { --tint: rgba(74, 222, 160, 0.2); }
.welcome-card.gradient-orange { --tint: rgba(255, 170, 80, 0.2); }
.welcome-card {
    background:
        radial-gradient(120% 90% at 0% 0%, var(--tint, transparent), transparent 60%),
        var(--neo-surface) !important;
}
.welcome-card h3 { font-weight: 600 !important; letter-spacing: -0.02em; }
.welcome-card p { color: var(--neo-dim); opacity: 1 !important; }

/* Spotlight that follows the mouse (neo.js sets --mx / --my) */
.neo-tile::after,
.neo-hero::after,
.welcome-card::after,
.stat-card::after,
.resource-card::after,
.quick-tool-card::after,
.ai-room-card::after,
.meme-card::after,
.rw-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.07), transparent 45%);
    transition: opacity 0.4s var(--neo-ease);
}
.welcome-card::before { display: none !important; }

.neo-tile:hover::after,
.neo-hero:hover::after,
.welcome-card:hover::after,
.stat-card:hover::after,
.resource-card:hover::after,
.quick-tool-card:hover::after,
.ai-room-card:hover::after,
.meme-card:hover::after,
.rw-card:hover::after { opacity: 1; }

.welcome-card:hover,
.stat-card:hover,
.resource-card:hover,
.quick-tool-card:hover,
.ai-room-card:hover,
.meme-card:hover,
.note-item:hover {
    border-color: var(--neo-line-hi) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
    transform: translateY(-4px);
}

/* neo.js drives the transform while tilting */
.neo-tilt, .neo-tilt:hover {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px) !important;
    transition: transform 0.12s linear, border-color 0.4s var(--neo-ease), box-shadow 0.4s var(--neo-ease) !important;
}

.stat-number {
    font-weight: 650 !important;
    letter-spacing: -0.05em !important;
    background: linear-gradient(180deg, #fff 30%, var(--neo-accent)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

.card-icon, .quick-tool-icon, .resource-icon, .settings-card-icon, .ai-room-icon {
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.6)) !important;
}

/* ---------- 6. Chat ---------- */
.chat-container {
    background: rgba(10, 10, 14, 0.4) !important;
    border: 1px solid var(--neo-line) !important;
    border-radius: 24px !important;
}

.message {
    animation: neo-msg-in 0.5s var(--neo-spring) both !important;
}
.message:hover { background: transparent !important; transform: none !important; }

@keyframes neo-msg-in {
    from { opacity: 0; transform: translateY(10px) scale(0.97); filter: blur(4px); }
    to   { opacity: 1; transform: none; filter: none; }
}

.message .message-content {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid var(--neo-line);
    border-radius: 20px !important;
    border-top-left-radius: 6px !important;
}

.message.self .message-content {
    background: var(--gradient-purple) !important;
    border-color: transparent;
    border-radius: 20px !important;
    border-top-right-radius: 6px !important;
    box-shadow: 0 6px 24px var(--neo-glow);
}

.message.gif-message .message-content { box-shadow: none; }

.message-author { color: var(--neo-accent) !important; font-weight: 600 !important; }

.chat-input-container {
    background: rgba(28, 28, 34, 0.7) !important;
    border: 1px solid var(--neo-line-hi) !important;
    border-radius: 999px !important;
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    backdrop-filter: blur(30px) saturate(160%);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.chat-input-container:focus-within {
    border-color: rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(255, 255, 255, 0.04), 0 0 40px var(--neo-glow) !important;
}

.send-btn {
    width: auto !important;
    height: 40px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    white-space: nowrap;
    background: #fff !important;
    color: #000 !important;
    border: none !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.18) !important;
}
.send-btn:hover { transform: scale(1.08) !important; box-shadow: 0 0 30px rgba(255, 255, 255, 0.35) !important; }
.send-btn:active { transform: scale(0.9) !important; }

.chat-tool-btn,
.gif-tool-btn,
.poll-tool-btn,
.sticker-tool-btn {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--neo-dim) !important;
}
.chat-tool-btn:hover,
.gif-tool-btn:hover,
.poll-tool-btn:hover,
.sticker-tool-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

/* ---------- 7. Buttons & pills ---------- */
.channel-pill,
.game-filter-btn,
.music-src-btn,
.sign-in-btn,
.user-pill {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--neo-line) !important;
    color: var(--neo-dim) !important;
    transition: background 0.3s var(--neo-ease), color 0.3s var(--neo-ease), transform 0.4s var(--neo-spring) !important;
}

.channel-pill:hover,
.game-filter-btn:hover,
.music-src-btn:hover,
.sign-in-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.channel-pill.active,
.game-filter-btn.active,
.music-src-btn.active {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.2) !important;
}

.sign-in-btn { color: #fff !important; }
.user-pill { color: var(--neo-text) !important; }

/* ---------- 8. Sign-in sheet ---------- */
.auth-modal { background: rgba(0, 0, 0, 0.6) !important; -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }
.auth-box {
    background: rgba(24, 24, 30, 0.82) !important;
    border: 1px solid var(--neo-line-hi) !important;
    border-radius: 28px !important;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7), 0 0 80px rgba(138, 180, 255, 0.08) !important;
    -webkit-backdrop-filter: blur(40px) saturate(170%);
    backdrop-filter: blur(40px) saturate(170%);
    animation: neo-sheet-in 0.6s var(--neo-spring) both !important;
}
.auth-box h2 { font-weight: 650; letter-spacing: -0.03em; }
.auth-box .auth-input {
    padding: 12px 14px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--neo-line) !important;
    border-radius: 14px !important;
    transition: border-color 0.3s var(--neo-ease), box-shadow 0.3s var(--neo-ease);
}
.auth-box .auth-input:focus {
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
}

@keyframes neo-sheet-in {
    from { opacity: 0; transform: translateY(20px) scale(0.96); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
}

/* ---------- 9. Tab switch ---------- */
.tab-content.active { animation: neo-tab-in 0.6s var(--neo-ease) both !important; }

@keyframes neo-tab-in {
    from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
}

/* ---------- 10. Scrollbars ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.22); }

/* ---------- 11. Boot intro (neo.js) ---------- */
#neoBoot {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    background: #000;
    transition: opacity 0.8s var(--neo-ease), filter 0.8s var(--neo-ease);
}
#neoBoot.done { opacity: 0; filter: blur(10px); pointer-events: none; }

#neoBoot .nb-orb {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, var(--neo-accent) 40%, var(--neo-accent2) 70%, transparent 72%);
    box-shadow: 0 0 60px var(--neo-glow), 0 0 140px rgba(138, 180, 255, 0.2);
    animation: nb-orb 1.4s var(--neo-spring) both;
}

#neoBoot .nb-name {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: #fff;
    animation: nb-rise 1s 0.25s var(--neo-ease) both;
}

#neoBoot .nb-line {
    width: 140px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    animation: nb-rise 1s 0.4s var(--neo-ease) both;
}
#neoBoot .nb-line i {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--neo-accent), #fff);
    transform-origin: left;
    animation: nb-load 1.1s 0.45s var(--neo-ease) both;
}

@keyframes nb-orb  { from { transform: scale(0.3); opacity: 0; filter: blur(12px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes nb-rise { from { transform: translateY(12px); opacity: 0; filter: blur(6px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes nb-load { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 12. Phones ---------- */
@media (max-width: 768px) {
    .content-header h1 { font-size: 30px !important; }
    #neoGlow { display: none; }
}

/* ---------- 13. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    #neoSpace, #neoGlow { display: none !important; }
    .message, .tab-content.active, .auth-box, #neoBoot * { animation: none !important; }
    .neo-tilt, .neo-tilt:hover { transform: none !important; }
}

/* ---------- 14. Background picker swatch ---------- */
.bg-swatch[data-bg="cosmos"] {
    background:
        radial-gradient(1px 1px at 20% 30%, #fff, transparent),
        radial-gradient(1px 1px at 70% 20%, #fff, transparent),
        radial-gradient(1px 1px at 45% 60%, #fff, transparent),
        radial-gradient(120% 80% at 90% 120%, #8ab4ff 0 40%, #000 41%),
        #000;
}

/* ============================================================
   LAYOUT — rail sidebar, floating top bar, bento home, phone tab bar
   ============================================================ */

/* ---------- 15. Rail sidebar (desktop) ---------- */
@media (min-width: 901px) {
    .app-container { padding: 14px !important; gap: 0 !important; }

    .sidebar {
        position: fixed !important;
        left: 14px;
        top: 14px;
        bottom: 14px;
        height: auto !important;
        width: 76px !important;
        z-index: 300;
        padding: 16px 10px 12px !important;
        overflow-x: hidden !important;
        overflow-y: auto;
        scrollbar-width: none;
        border-radius: 26px !important;
        transition: width 0.45s var(--neo-ease), background 0.45s var(--neo-ease), box-shadow 0.45s var(--neo-ease) !important;
    }
    .sidebar::-webkit-scrollbar { display: none; }

    .sidebar:hover,
    .sidebar:focus-within {
        width: 256px !important;
        background: rgba(18, 18, 24, 0.86) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 30px 0 90px rgba(0, 0, 0, 0.7) !important;
    }
    .sidebar:hover { transition-delay: 0.08s !important; }

    .main-content { margin-left: 90px; }
    .top-bar { left: 118px !important; right: 28px !important; }

    /* Things that only make sense when the rail is open */
    .sidebar .logo-text,
    .sidebar .nav-btn > span:not(.nav-icon):not(.unread-badge),
    .sidebar .user-info,
    .sidebar .user-settings-icon,
    .sidebar .legal-links {
        opacity: 0;
        white-space: nowrap;
        transition: opacity 0.25s var(--neo-ease);
    }
    .sidebar:hover .logo-text,
    .sidebar:hover .nav-btn > span:not(.nav-icon):not(.unread-badge),
    .sidebar:hover .user-info,
    .sidebar:hover .user-settings-icon,
    .sidebar:hover .legal-links,
    .sidebar:focus-within .logo-text,
    .sidebar:focus-within .nav-btn > span:not(.nav-icon):not(.unread-badge),
    .sidebar:focus-within .user-info,
    .sidebar:focus-within .user-settings-icon,
    .sidebar:focus-within .legal-links {
        opacity: 1;
        transition-delay: 0.12s;
    }

    .sidebar .logo { padding: 6px 0 18px 11px !important; white-space: nowrap; }

    .sidebar .nav-section { margin-bottom: 10px; }
    .sidebar .nav-label {
        height: 18px;
        overflow: hidden;
        white-space: nowrap;
        padding-left: 14px !important;
        position: relative;
        color: transparent !important;
        transition: color 0.25s var(--neo-ease);
    }
    /* Collapsed: the section label becomes a short hairline */
    .sidebar .nav-label::after {
        content: '';
        position: absolute;
        left: 18px;
        top: 50%;
        width: 20px;
        height: 1px;
        background: var(--neo-line-hi);
        transition: opacity 0.25s var(--neo-ease);
    }
    .sidebar:hover .nav-label,
    .sidebar:focus-within .nav-label { color: var(--neo-faint) !important; }
    .sidebar:hover .nav-label::after,
    .sidebar:focus-within .nav-label::after { opacity: 0; }

    .sidebar .nav-btn {
        width: 100% !important;
        margin: 2px 0 !important;
        padding: 10px 16px !important;
        white-space: nowrap;
    }

    /* Unread badge sits on the icon while collapsed */
    .sidebar:not(:hover):not(:focus-within) .unread-badge {
        position: absolute;
        top: 4px;
        left: 32px;
        transform: scale(0.8);
    }

    .sidebar .user-section {
        padding: 8px !important;
        margin: 8px 0 4px !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        white-space: nowrap;
    }
    .sidebar:hover .user-section { background: rgba(255, 255, 255, 0.05) !important; border-color: var(--neo-line) !important; }
    .sidebar .user-avatar { flex-shrink: 0; }
    .sidebar .legal-links { padding-left: 14px !important; }

    /* Tooltip-free hint: the active icon gets a soft halo */
    .sidebar:not(:hover) .nav-btn.active .nav-icon { filter: drop-shadow(0 0 10px var(--neo-glow)); }
}

/* ---------- 16. Content width ---------- */
.main-content { scroll-behavior: smooth; }
.tab-content { max-width: 1240px; margin-left: auto; margin-right: auto; }

/* ---------- 17. Bento home ---------- */
#home .neo-home {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 16px;
    padding-bottom: 30px;
}

.neo-tile,
.neo-hero {
    position: relative;
    border-radius: 26px;
    background: var(--neo-surface);
    border: 1px solid var(--neo-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 40px rgba(0, 0, 0, 0.35);
    padding: 24px;
    overflow: hidden;
    min-width: 0;
    margin: 0 !important;
}

.neo-tile-head { margin-bottom: 16px; }
.neo-tile-head .section-heading { font-size: 19px !important; margin: 0 0 4px !important; }
.neo-tile-head .section-sub { font-size: 13.5px; margin: 0 !important; }

.neo-tile-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neo-faint);
}

/* Hero */
.neo-hero {
    grid-column: span 4;
    grid-row: span 2;
    padding: 34px 36px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 360px;
    background:
        radial-gradient(70% 90% at 100% 0%, rgba(138, 180, 255, 0.18), transparent 60%),
        radial-gradient(60% 80% at 0% 100%, rgba(182, 156, 255, 0.14), transparent 60%),
        rgba(16, 16, 22, 0.6);
}
/* Slowly turning light ring behind the clock */
.neo-hero::before {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    right: -170px;
    top: -210px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, var(--neo-accent), transparent 30%, var(--neo-accent2), transparent 60%);
    opacity: 0.22;
    filter: blur(50px);
    animation: neo-spin 18s linear infinite;
    pointer-events: none;
}
@keyframes neo-spin { to { transform: rotate(360deg); } }

.neo-chip {
    position: relative;
    align-self: flex-start;
    margin-bottom: auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--neo-line);
    font-size: 12.5px;
    color: var(--neo-dim);
}
.neo-chip + .neo-time { margin-top: 28px; }
.neo-chip i,
.neo-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
    animation: neo-pulse 2.2s ease-out infinite;
    display: inline-block;
}
.neo-chip i { background: var(--neo-accent); box-shadow: 0 0 0 0 var(--neo-glow); }
@keyframes neo-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
    100% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
}

.neo-time {
    position: relative;
    font-size: clamp(64px, 9vw, 124px);
    font-weight: 200;
    letter-spacing: -0.06em;
    line-height: 0.95;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, #fff 40%, rgba(255, 255, 255, 0.35));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 14px;
}

.neo-greet {
    position: relative;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 600;
    letter-spacing: -0.03em;
    margin: 0 0 6px;
    color: #fff;
}
.neo-greet #neoName { color: var(--neo-accent); }

.neo-date { position: relative; color: var(--neo-dim); font-size: 15px; margin: 0 0 24px; }

.neo-hero-actions { position: relative; display: flex; gap: 10px; flex-wrap: wrap; }

.neo-btn {
    height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid var(--neo-line-hi);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font: inherit;
    font-size: 14.5px;
    font-weight: 550;
    cursor: pointer;
    transition: transform 0.4s var(--neo-spring), background 0.3s var(--neo-ease), box-shadow 0.3s var(--neo-ease);
}
.neo-btn:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); }
.neo-btn:active { transform: scale(0.96); }
.neo-btn-primary {
    background: #fff;
    color: #000;
    border-color: #fff;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.18);
}
.neo-btn-primary:hover { background: #fff; box-shadow: 0 0 44px rgba(255, 255, 255, 0.35); }

/* Online tile */
.neo-online {
    grid-column: span 2;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start !important;
    min-height: 172px;
    padding: 24px !important;
    text-align: left !important;
}
.neo-online .stat-number {
    font-size: 64px !important;
    font-weight: 250 !important;
    line-height: 1 !important;
    letter-spacing: -0.05em !important;
    margin-top: auto;
}
.neo-online .stat-label { font-size: 14px !important; color: var(--neo-dim) !important; margin-top: 6px; }
.neo-online:hover { transform: none !important; }

/* Tip tile */
.neo-tip {
    grid-column: span 2;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px !important;
    background: var(--neo-surface) !important;
    border: 1px solid var(--neo-line) !important;
    border-radius: 26px !important;
}
.neo-tip .study-tip-text {
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--neo-text);
    letter-spacing: -0.01em;
}

/* Rooms */
.neo-rooms { grid-column: span 4; }
.neo-rooms .ai-room-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 10px !important; }
.neo-rooms .ai-room-card {
    padding: 18px 8px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: none !important;
    text-align: center;
    cursor: pointer;
}
.neo-rooms .ai-room-icon { font-size: 30px !important; margin-bottom: 8px; }
.neo-rooms .ai-room-name { font-weight: 600 !important; font-size: 14px !important; }
.neo-rooms .ai-room-badge {
    margin-top: 8px;
    display: inline-block;
    font-size: 10.5px !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    background: rgba(138, 180, 255, 0.12) !important;
    color: var(--neo-accent) !important;
    border: none !important;
}

/* Jump in */
.neo-jump { grid-column: span 2; }
.neo-jump .channel-pills { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
.neo-jump .channel-pill {
    display: flex !important;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    font-weight: 550 !important;
    color: var(--neo-text) !important;
}
.neo-jump .channel-pill span { font-size: 17px; }

/* Leaderboard + tools */
.neo-board { grid-column: span 3; }
.neo-tools { grid-column: span 3; }
.neo-friends { grid-column: span 3; }
.neo-shorts { grid-column: span 3; }
.neo-friends-list { display: flex; flex-wrap: wrap; gap: 10px; }
.neo-friends-empty { color: var(--neo-faint); font-size: 14px; padding: 10px 0; }
.neo-friend-avatar {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: 64px; cursor: pointer; background: none; border: 0; color: inherit; font: inherit;
}
.neo-friend-avatar .neo-friend-pic {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--neo-accent); background: var(--neo-raised);
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    position: relative;
}
.neo-friend-avatar .neo-friend-pic::after {
    content: ''; position: absolute; bottom: -1px; right: -1px;
    width: 11px; height: 11px; border-radius: 50%;
    background: #34e8b0; border: 2px solid var(--neo-black);
}
.neo-friend-avatar .neo-friend-name {
    font-size: 11px; color: var(--neo-dim); max-width: 64px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.neo-board .leaderboard-list { display: flex; flex-direction: column; gap: 6px; }
.neo-board .leaderboard-item {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
}
.neo-board .leaderboard-empty { color: var(--neo-faint); font-size: 14px; padding: 18px 0; }

.neo-tools .quick-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-top: 0 !important; }
.neo-tools .quick-tool-card {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 3px;
    padding: 16px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: none !important;
    cursor: pointer;
    text-align: left !important;
}
.neo-tools .quick-tool-icon { font-size: 24px !important; margin-bottom: 6px; }
.neo-tools .quick-tool-name { font-weight: 600 !important; }
.neo-tools .quick-tool-desc { font-size: 12.5px !important; }

/* Staggered entrance */
#home.active .neo-home > * { animation: neo-tile-in 0.8s var(--neo-ease) both; }
#home.active .neo-home > *:nth-child(2) { animation-delay: 0.06s; }
#home.active .neo-home > *:nth-child(3) { animation-delay: 0.12s; }
#home.active .neo-home > *:nth-child(4) { animation-delay: 0.18s; }
#home.active .neo-home > *:nth-child(5) { animation-delay: 0.24s; }
#home.active .neo-home > *:nth-child(6) { animation-delay: 0.30s; }
#home.active .neo-home > *:nth-child(7) { animation-delay: 0.36s; }
@keyframes neo-tile-in {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
#home.active { animation: none !important; }

@media (max-width: 1180px) {
    .neo-hero { grid-column: span 6; grid-row: auto; min-height: 320px; }
    .neo-online, .neo-tip, .neo-jump { grid-column: span 3; }
    .neo-rooms { grid-column: span 6; }
}

/* ---------- 18. Phones & tablets: bottom tab bar ---------- */
@media (max-width: 900px) {
    body { overflow: hidden; }
    .app-container { display: block !important; padding: 0 !important; height: 100vh; height: 100dvh; }

    .main-content {
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        padding: 82px 14px 110px !important;
    }

    .top-bar { top: 10px !important; left: 10px !important; right: 10px !important; height: 54px !important; }

    .sidebar {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        top: auto !important;
        width: auto !important;
        height: 68px !important;
        z-index: 300;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: flex-start !important;
        gap: 2px;
        padding: 0 8px !important;
        border-radius: 26px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        background: rgba(20, 20, 26, 0.78) !important;
    }
    .sidebar::-webkit-scrollbar { display: none; }

    .sidebar .logo,
    .sidebar .nav-label,
    .sidebar .legal-links,
    .sidebar .user-info,
    .sidebar .user-settings-icon,
    .sidebar .nav-btn > span:not(.nav-icon):not(.unread-badge) { display: none !important; }

    .sidebar .nav-section {
        display: flex !important;
        flex-shrink: 0;
        gap: 2px;
        margin: 0 !important;
        padding-right: 8px;
        margin-right: 6px !important;
        border-right: 1px solid var(--neo-line);
    }

    .sidebar .nav-btn {
        width: 50px !important;
        height: 50px !important;
        flex-shrink: 0;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: center;
        border-radius: 16px !important;
        scroll-snap-align: start;
    }
    .sidebar .nav-btn:hover { transform: none; }
    .sidebar .nav-btn .nav-icon { font-size: 22px; width: auto; }
    .sidebar .nav-btn.active::before { left: 50% !important; top: auto !important; bottom: 3px; transform: translateX(-50%) !important; }
    .sidebar .unread-badge { position: absolute; top: 4px; right: 4px; transform: scale(0.8); margin: 0 !important; }

    .sidebar .user-section {
        flex-shrink: 0;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }
    .sidebar .user-avatar { width: 40px !important; height: 40px !important; }

    .tab-content { max-width: none; }

    #home .neo-home { grid-template-columns: 1fr 1fr; gap: 12px; }
    .neo-hero, .neo-rooms, .neo-board, .neo-tools, .neo-jump, .neo-friends, .neo-shorts { grid-column: span 2 !important; }
    .neo-online, .neo-tip { grid-column: span 1 !important; }
    .neo-hero { min-height: 300px; padding: 26px 22px; }
    .neo-chip { font-size: 11.5px; }
    .neo-rooms .ai-room-grid { grid-template-columns: repeat(5, 92px) !important; overflow-x: auto; scrollbar-width: none; }
    .neo-tile { padding: 20px; }
    .neo-online .stat-number { font-size: 48px !important; }
    .neo-tip .study-tip-text { font-size: 14px; }

    .chat-container.large,
    .chat-container { max-height: none; }
}

@media (max-width: 480px) {
    .neo-online, .neo-tip { grid-column: span 2 !important; }
    .neo-online { min-height: 140px; }
}

@media (max-width: 900px) {
    .top-bar-left::before {
        content: 'Tots';
        font-weight: 650;
        font-size: 18px;
        letter-spacing: -0.03em;
        color: #fff;
        padding-left: 4px;
    }
}

@media (max-width: 900px) {
    .chat-container { padding: 12px !important; }
    .chat-input-container { min-width: 0; gap: 4px !important; }
    .chat-input { min-width: 0 !important; width: auto !important; flex: 1 1 auto !important; }
    .send-btn { flex-shrink: 0; padding: 0 14px !important; }
    .chat-tool-btn, .gif-tool-btn, .poll-tool-btn, .sticker-tool-btn { width: 34px !important; height: 34px !important; flex-shrink: 0; }
    .chat-container.large { height: calc(100dvh - 300px) !important; }
    .message-content { max-width: 78% !important; }
}

/* ============================================================
   PERSONALIZATION, SETTINGS, HERO INFO, BIRTHDAY
   ============================================================ */
[hidden] { display: none !important; }

/* ---------- 19. Hero info chips (weather, battery, birthday) ---------- */
.neo-time small {
    font-size: 0.42em;
    font-weight: 300;
    letter-spacing: -0.02em;
    margin-left: 4px;
    opacity: 0.55;
}

.neo-hero-info {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -10px 0 24px;
}
.neo-hero-info:empty { display: none; }

.neo-info {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--neo-line);
    font-size: 13.5px;
    color: var(--neo-dim);
    white-space: nowrap;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    animation: neo-tile-in 0.6s var(--neo-ease) both;
}
.neo-info b { color: #fff; font-weight: 600; }
.neo-info span { color: var(--neo-faint); }
.neo-info-link { cursor: pointer; color: var(--neo-accent); }
.neo-info-link:hover { background: rgba(255, 255, 255, 0.12); }
.neo-info-low b { color: #ff6b6b; }
.neo-info-charging b { color: #4ade80; }
.neo-info-party {
    color: #fff;
    background: linear-gradient(120deg, rgba(255, 122, 182, 0.35), rgba(138, 180, 255, 0.35));
    border-color: rgba(255, 255, 255, 0.25);
}

.neo-batt {
    position: relative;
    width: 22px;
    height: 11px;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 3px;
    padding: 1px;
    display: inline-block;
}
.neo-batt::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 3px;
    width: 2px;
    height: 4px;
    border-radius: 0 1px 1px 0;
    background: rgba(255, 255, 255, 0.55);
}
.neo-batt i { display: block; height: 100%; border-radius: 1px; background: #fff; }
.neo-info-low .neo-batt i { background: #ff6b6b; }
.neo-info-charging .neo-batt i { background: #4ade80; }

/* Hero tint follows the time of day */
:root[data-daypart="morning"] .neo-hero { background: radial-gradient(70% 90% at 100% 0%, rgba(255, 190, 120, 0.2), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(255, 140, 170, 0.12), transparent 60%), rgba(16, 16, 22, 0.6); }
:root[data-daypart="evening"] .neo-hero { background: radial-gradient(70% 90% at 100% 0%, rgba(255, 120, 150, 0.2), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(140, 110, 255, 0.18), transparent 60%), rgba(16, 16, 22, 0.6); }
:root[data-daypart="night"] .neo-hero { background: radial-gradient(70% 90% at 100% 0%, rgba(90, 110, 255, 0.18), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(40, 60, 160, 0.16), transparent 60%), rgba(12, 12, 18, 0.65); }

/* ---------- 20. Settings: System-Settings layout ---------- */
#settings .neo-settings {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    max-width: 1060px;
    margin: 0 auto;
}

.neo-set-nav {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 10px;
    border-radius: 22px;
    background: var(--neo-surface);
    border: 1px solid var(--neo-line);
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    scrollbar-width: none;
}
.neo-set-nav::-webkit-scrollbar { display: none; }
.neo-set-nav-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neo-faint);
    padding: 4px 10px 10px;
}
.neo-set-nav button {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 11px;
    background: transparent;
    color: var(--neo-dim);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background 0.25s var(--neo-ease), color 0.25s var(--neo-ease);
}
.neo-set-nav button:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.neo-set-nav button.active { background: rgba(255, 255, 255, 0.1); color: #fff; }

.neo-set-ico,
#settings .settings-card-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 15px;
    background: var(--tint, #0a84ff) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
    filter: none !important;
}

.neo-set-body { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
#settings .settings-title {
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 650;
    letter-spacing: -0.035em;
    margin: 4px 0 6px;
    color: #fff;
}

#settings .settings-card {
    scroll-margin-top: 100px;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}
#settings .settings-card:hover { transform: none !important; }
#settings .settings-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px 12px !important;
    margin: 0 !important;
    border: none !important;
}
#settings .settings-card-title {
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    color: #fff !important;
}
#settings .settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 20px !important;
    margin: 0 !important;
    border-top: 1px solid var(--neo-line) !important;
    border-bottom: none !important;
    background: transparent !important;
}
#settings .settings-row-info { min-width: 0; flex: 1 1 220px; }
#settings .settings-row-title { font-size: 15px !important; font-weight: 500 !important; color: var(--neo-text) !important; }
#settings .settings-row-desc { font-size: 12.5px !important; color: var(--neo-faint) !important; margin-top: 2px; line-height: 1.4; }

/* Profile card becomes a big header */
#settings .profile-card {
    padding: 22px !important;
    background:
        radial-gradient(80% 140% at 0% 0%, rgba(138, 180, 255, 0.16), transparent 60%),
        var(--neo-surface) !important;
}
#settings .profile-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
#settings .profile-avatar {
    width: 72px !important;
    height: 72px !important;
    font-size: 34px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.04), 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
#settings .profile-name { font-size: 22px !important; font-weight: 650 !important; letter-spacing: -0.03em; }
#settings .profile-email { color: var(--neo-dim) !important; }
#settings .profile-info { flex: 1; min-width: 160px; }
#settings .btn-signout {
    height: 38px;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: rgba(255, 69, 58, 0.12) !important;
    border: 1px solid rgba(255, 69, 58, 0.3) !important;
    color: #ff6961 !important;
    font-weight: 600 !important;
}

/* Controls */
.neo-seg {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 3px;
    gap: 2px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--neo-line);
}
.neo-seg button {
    min-width: 44px;
    height: 32px;
    padding: 0 14px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--neo-dim);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.25s var(--neo-ease), color 0.25s var(--neo-ease), box-shadow 0.25s var(--neo-ease);
}
.neo-seg button:hover { color: #fff; }
.neo-seg button.active {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

#settings .neo-input,
#settings .settings-dropdown,
#settings select {
    height: 36px;
    padding: 0 12px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid var(--neo-line) !important;
    color: #fff !important;
    font: inherit !important;
    font-size: 14px !important;
    outline: none;
    transition: border-color 0.25s var(--neo-ease), box-shadow 0.25s var(--neo-ease);
}
#settings .neo-input:focus,
#settings select:focus {
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
}
#settings select option { background: #1c1c22; color: #fff; }
#settings input.neo-input[type="text"] { width: 200px; max-width: 100%; }

.neo-bday, .neo-place, .neo-accent-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.neo-place .neo-input { width: 180px !important; }

.neo-pill-btn {
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--neo-line-hi);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 550;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.25s var(--neo-ease), transform 0.35s var(--neo-spring);
}
.neo-pill-btn:hover { background: rgba(255, 255, 255, 0.15); }
.neo-pill-btn:active { transform: scale(0.95); }
.neo-danger { color: #ff6961; border-color: rgba(255, 69, 58, 0.35); background: rgba(255, 69, 58, 0.1); }

#neoAccentPick {
    width: 44px;
    height: 36px;
    padding: 3px;
    border-radius: 10px;
    border: 1px solid var(--neo-line-hi);
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
}
#neoAccentPick::-webkit-color-swatch-wrapper { padding: 0; }
#neoAccentPick::-webkit-color-swatch { border: none; border-radius: 7px; }

.neo-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.neo-chipbox { cursor: pointer; }
.neo-chipbox input { position: absolute; opacity: 0; pointer-events: none; }
.neo-chipbox span {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid var(--neo-line);
    color: var(--neo-faint);
    font-size: 13px;
    transition: all 0.25s var(--neo-ease);
}
.neo-chipbox input:checked + span {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.neo-chipbox input:focus-visible + span { outline: 2px solid var(--neo-accent); outline-offset: 2px; }

/* iOS toggles */
#settings .toggle { flex-shrink: 0; }
#settings .toggle-track {
    width: 51px !important;
    height: 31px !important;
    border-radius: 999px !important;
    background: rgba(120, 120, 128, 0.32) !important;
    border: none !important;
}
#settings .toggle input:checked + .toggle-track { background: #30d158 !important; box-shadow: none !important; }

/* Save button: floating pill */
#settings .settings-save-btn {
    position: sticky;
    bottom: 16px;
    align-self: flex-end;
    height: 46px;
    padding: 0 26px !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #000 !important;
    border: none !important;
    font-weight: 650 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 255, 255, 0.15) !important;
    z-index: 5;
    width: auto !important;
    margin: 0 !important;
}

@media (max-width: 900px) {
    #settings .neo-settings { grid-template-columns: 1fr; gap: 14px; }
    .neo-set-nav {
        position: sticky;
        top: -2px;
        z-index: 20;
        flex-direction: row;
        overflow-x: auto;
        padding: 8px;
        border-radius: 18px;
        background: rgba(20, 20, 26, 0.85);
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
    }
    .neo-set-nav-title { display: none; }
    .neo-set-nav button { width: auto; flex-shrink: 0; padding: 6px 12px 6px 6px; }
    #settings .settings-row { flex-wrap: wrap; }
    #settings .settings-save-btn { bottom: 96px; }
    .neo-chips { justify-content: flex-start; }
}

/* ---------- 21. Birthday party ---------- */
#neoParty {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    animation: np-fade 0.5s var(--neo-ease) both;
}
#neoParty.closing { animation: np-fade 0.5s var(--neo-ease) reverse both; }
.np-card {
    width: min(100%, 420px);
    padding: 40px 32px 30px;
    text-align: center;
    border-radius: 32px;
    background:
        radial-gradient(90% 70% at 50% 0%, rgba(255, 122, 182, 0.25), transparent 70%),
        rgba(24, 24, 30, 0.9);
    border: 1px solid var(--neo-line-hi);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7), 0 0 100px rgba(255, 122, 182, 0.15);
    animation: neo-sheet-in 0.8s var(--neo-spring) both;
}
.np-cake {
    font-size: 84px;
    line-height: 1;
    margin-bottom: 14px;
    filter: drop-shadow(0 10px 30px rgba(255, 122, 182, 0.5));
    animation: np-bounce 1.6s var(--neo-spring) infinite;
}
.np-card h2 {
    font-size: 32px;
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1.1;
    margin: 0 0 12px;
    color: #fff;
}
.np-card h2 span {
    background: linear-gradient(90deg, #ff7ab6, #ffd60a, #8ab4ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.np-card p { color: var(--neo-dim); font-size: 15px; margin: 0 0 24px; }
@keyframes np-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes np-bounce { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }

/* ---------- 22. Personalization switches ---------- */
/* Font */
:root[data-font="rounded"] body { font-family: 'Nunito', 'Inter Tight', system-ui, sans-serif !important; letter-spacing: 0; }
:root[data-font="mono"] body { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace !important; letter-spacing: -0.02em; }
:root[data-font="serif"] .content-header h1,
:root[data-font="serif"] .section-heading,
:root[data-font="serif"] .neo-greet,
:root[data-font="serif"] .neo-time,
:root[data-font="serif"] .logo-text,
:root[data-font="serif"] #settings .settings-title,
:root[data-font="serif"] .np-card h2 { font-family: 'Fraunces', Georgia, serif !important; letter-spacing: -0.02em !important; }
:root[data-font="rounded"] input, :root[data-font="rounded"] button, :root[data-font="rounded"] textarea,
:root[data-font="mono"] input, :root[data-font="mono"] button, :root[data-font="mono"] textarea { font-family: inherit !important; }

/* Corners */
:root[data-corners="soft"] :is(.sidebar, .main-content, .top-bar, .neo-tile, .neo-hero, .settings-card, .neo-set-nav, .chat-container, .welcome-card, .stat-card, .resource-card, .quick-tool-card, .ai-room-card, .meme-card, .rw-card, .auth-box, .np-card) { border-radius: 14px !important; }
:root[data-corners="sharp"] :is(.sidebar, .main-content, .top-bar, .neo-tile, .neo-hero, .settings-card, .neo-set-nav, .chat-container, .welcome-card, .stat-card, .resource-card, .quick-tool-card, .ai-room-card, .meme-card, .rw-card, .auth-box, .np-card) { border-radius: 4px !important; }
:root[data-corners="sharp"] :is(.nav-btn, .channel-pill, .neo-btn, .neo-pill-btn, .neo-info, .chat-input-container, .send-btn, .message-content, .neo-seg, .neo-seg button) { border-radius: 4px !important; }

/* Glass */
:root[data-glass="clear"] { --neo-surface: rgba(22, 22, 28, 0.22); }
:root[data-glass="clear"] .main-content { background: rgba(14, 14, 18, 0.12) !important; }
:root[data-glass="solid"] { --neo-surface: rgb(22, 22, 27); }
:root[data-glass="solid"] .main-content { background: rgb(12, 12, 15) !important; }
:root[data-glass="solid"] .sidebar { background: rgb(18, 18, 22) !important; }

/* Text size (content only, so the rail keeps its size) */
:root[data-size="sm"] .main-content > * { zoom: 0.9; }
:root[data-size="lg"] .main-content > * { zoom: 1.1; }
:root[data-size="xl"] .main-content > * { zoom: 1.2; }

/* Sidebar always open (desktop) */
@media (min-width: 901px) {
    :root[data-sidebar="pinned"] .sidebar { width: 248px !important; }
    :root[data-sidebar="pinned"] .main-content { margin-left: 262px; }
    :root[data-sidebar="pinned"] .top-bar { left: 290px !important; }
    :root[data-sidebar="pinned"] .sidebar :is(.logo-text, .nav-btn > span:not(.nav-icon):not(.unread-badge), .user-info, .user-settings-icon, .legal-links) { opacity: 1; }
    :root[data-sidebar="pinned"] .sidebar .nav-label { color: var(--neo-faint) !important; }
    :root[data-sidebar="pinned"] .sidebar .nav-label::after { opacity: 0; }
    :root[data-sidebar="pinned"] .sidebar .unread-badge { position: static !important; transform: none !important; margin-left: auto; }
    :root[data-sidebar="pinned"] .sidebar .user-section { background: rgba(255, 255, 255, 0.05) !important; border-color: var(--neo-line) !important; }
    :root[data-sidebar="pinned"] .sidebar:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 80px rgba(0, 0, 0, 0.55) !important; }
}

:root[data-no-glow] #neoGlow { display: none; }

/* Settings fixes: full width, no wrapping segments, auto-save replaces the button */
#settings.tab-content { max-width: 1100px !important; }
@media (min-width: 901px) { .neo-seg { flex-wrap: nowrap; } }
#settings .settings-save-btn { display: none !important; }

/* Sitewide nickname (nickname.js) */
.nick-row { display: flex; gap: 8px; align-items: center; }
.nick-row .neo-input { width: 190px; }
.nick-save { padding: 9px 16px; border-radius: 999px; border: 0; background: var(--gradient-purple); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.nick-save[disabled] { opacity: .5; cursor: default; }

/* Signed out: sign-in is required, so hide the site completely behind it */
.auth-modal.auth-required { background: radial-gradient(circle at 50% 30%, #1a1440 0%, #05060f 70%) !important; }

/* ── Group call layout (Oct 7 2026: tiles were sized by each camera's own video, so they piled up unevenly) ── */
#groupCallGrid {
    align-items: stretch !important; justify-items: stretch !important;
    gap: 10px !important; padding: 12px 16px !important; min-height: 0;
}
#groupCallGrid .gc-participant {
    width: 100%; height: 100%; min-width: 0; min-height: 0 !important;
    border-radius: 16px !important; overflow: hidden;
}
#groupCallGrid .gc-participant video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0;
}
#groupCallGrid .gc-participant[data-uid="local"] video { transform: scaleX(-1); }
/* 2 people on a wide screen: side by side, not huge */
#groupCallGrid[data-count="1"] .gc-participant { max-width: min(100%, calc((100vh - 200px) * 16 / 9)); justify-self: center; }
.gc-participant-avatar {
    display: none; width: 88px; height: 88px; border-radius: 50%;
    align-items: center; justify-content: center; font-size: 40px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--neo-accent, #7c5cff), #ff5c8a);
    box-shadow: 0 8px 30px rgba(0,0,0,.45);
}
.gc-novideo .gc-participant-avatar { display: flex; position: relative; z-index: 1; }
.gc-novideo video { opacity: 0; }
.gc-participant-label { z-index: 2; }
#groupCallModal.gc-pip .gc-participant-avatar { width: 46px; height: 46px; font-size: 22px; }
#groupCallModal.gc-pip #groupCallGrid { padding: 4px !important; gap: 4px !important; }
/* Leave: a pill, so "📵 Leave" fits */
#gcLeaveBtn.vc-btn-end { width: auto; padding: 0 18px; border-radius: 999px !important; gap: 6px; font-size: 15px; font-weight: 700; }
#groupCallModal.gc-pip #gcLeaveBtn.vc-btn-end { padding: 0 12px; font-size: 13px; }
@media (max-width: 700px) {
    #groupCallGrid[data-count="2"] { grid-template-columns: minmax(0,1fr) !important; grid-template-rows: repeat(2, minmax(0,1fr)) !important; }
}

/* ==== memes.css ==== */
/* ============================================================
   Tots — Memes feed (memes.js). Loads after neo.css.
   ============================================================ */

#memes .mm-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 20px;
}
#memes .mm-head h1 {
    margin: 0; font-size: clamp(28px, 4vw, 40px); font-weight: 700;
    letter-spacing: -0.03em; color: var(--neo-text);
}
#memes .mm-head p { margin: 4px 0 0; color: var(--neo-dim); font-size: 14px; }

/* Segmented controls */
.mm-views, .mm-sorts {
    display: inline-flex; gap: 2px; padding: 3px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--neo-line);
    border-radius: 10px;
}
.mm-view, .mm-sort {
    appearance: none; border: 0; background: transparent;
    color: var(--neo-dim); font: inherit; font-size: 13px; font-weight: 600;
    padding: 7px 14px; border-radius: 7px; cursor: pointer;
    white-space: nowrap;
    transition: background 150ms, color 150ms;
}
.mm-view:hover, .mm-sort:hover { color: var(--neo-text); }
.mm-view.active, .mm-sort.active { background: rgba(255, 255, 255, 0.12); color: var(--neo-text); }

.mm-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.mm-post-btn, .mm-submit {
    appearance: none; border: 0; cursor: pointer; font: inherit;
    font-size: 13px; font-weight: 700;
    padding: 9px 16px; border-radius: 10px;
    background: var(--neo-text); color: #000;
}
.mm-post-btn:hover, .mm-submit:hover:not(:disabled) { background: #fff; }
.mm-submit:disabled { opacity: 0.35; cursor: default; }
.mm-cancel, .mm-act {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--neo-faint);
    padding: 6px 8px; border-radius: 6px;
}
.mm-cancel:hover, .mm-act:hover { color: var(--neo-text); background: rgba(255, 255, 255, 0.06); }
.mm-cancel { font-size: 13px; color: var(--neo-dim); }

/* Composer */
.mm-composer {
    display: grid; gap: 10px;
    padding: 14px; margin-bottom: 18px;
    background: var(--neo-ink);
    border: 1px solid var(--neo-line-hi);
    border-radius: 14px;
}
.mm-composer[hidden], .mm-feed-wrap[hidden], #memes .mm-chat[hidden], .mm-post-btn[hidden] { display: none !important; }
/* !important: an older layer strips every text input's background + border */
#memes .mm-caption, #memes .mm-search {
    width: 100%; box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--neo-line-hi) !important;
    border-radius: 10px !important; padding: 10px 12px !important;
    color: var(--neo-text); font: inherit; font-size: 14px;
    outline: none;
}
#memes .mm-caption { font-weight: 700 !important; font-size: 15px !important; }
#memes .mm-caption:focus, #memes .mm-search:focus { border-color: var(--neo-accent) !important; }
.mm-results {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 6px; max-height: 260px; overflow-y: auto;
}
.mm-result {
    appearance: none; padding: 0; border: 2px solid transparent; cursor: pointer;
    border-radius: 8px; overflow: hidden; aspect-ratio: 1; background: rgba(255, 255, 255, 0.04);
}
.mm-result img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-result.on { border-color: var(--neo-accent); }
.mm-compose-foot { display: flex; align-items: center; gap: 8px; }
.mm-pick-note { margin-right: auto; color: var(--neo-faint); font-size: 12px; }

/* Feed: masonry via columns */
.mm-feed { columns: 3 260px; column-gap: 14px; }
.mm-card {
    break-inside: avoid; margin: 0 0 14px;
    background: var(--neo-ink);
    border: 1px solid var(--neo-line);
    border-radius: 14px; overflow: hidden;
}
.mm-cap {
    margin: 0; padding: 12px 14px 10px;
    font-size: 15px; font-weight: 700; line-height: 1.3;
    letter-spacing: -0.01em; color: var(--neo-text);
    overflow-wrap: anywhere;
}
.mm-img { display: block; width: 100%; height: auto; background: rgba(255, 255, 255, 0.03); }
.mm-foot { display: flex; align-items: center; gap: 6px; padding: 8px 10px; }
.mm-by {
    margin-right: auto; min-width: 0;
    font-size: 12px; color: var(--neo-faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mm-vote {
    appearance: none; cursor: pointer; font: inherit;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--neo-line);
    color: var(--neo-dim); font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mm-vote:hover { color: var(--neo-text); border-color: var(--neo-line-hi); }
.mm-vote.on { color: #000; background: var(--neo-accent); border-color: var(--neo-accent); }
.mm-empty {
    column-span: all; grid-column: 1 / -1;
    padding: 40px 12px; text-align: center;
    color: var(--neo-faint); font-size: 14px;
}

@media (max-width: 600px) {
    .mm-feed { columns: 1; }
    .mm-bar { flex-direction: column; align-items: stretch; }
    .mm-sorts { justify-content: space-between; }
    .mm-sort { flex: 1; padding: 7px 8px; }
}

/* Swipe view: one GIF at a time, TikTok-style vertical scroll-snap */
.mm-swipe-wrap[hidden] { display: none !important; }
.mm-swipe-wrap {
    position: relative;
    height: calc(100vh - 230px);
    height: calc(100dvh - 230px);
    border-radius: 18px;
    overflow: hidden;
    background: var(--neo-black);
    border: 1px solid var(--neo-line);
}
.mm-swipe {
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.mm-swipe::-webkit-scrollbar { display: none; }
.mm-slide {
    position: relative;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    background: var(--neo-black);
}
.mm-slide-img {
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.mm-slide-scrim {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 22px 84px 22px 18px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
    color: #fff;
    pointer-events: none;
}
.mm-slide-by { margin: 0; font-size: 12.5px; opacity: 0.8; }
.mm-slide-rail {
    position: absolute; right: 14px; bottom: 28px;
}
.mm-slide-post {
    appearance: none; border: 0; cursor: pointer; font: inherit;
    background: var(--neo-accent); color: #000; font-weight: 700; font-size: 12.5px;
    padding: 10px 16px; border-radius: 20px;
}
.mm-slide-post:disabled { opacity: 0.6; cursor: default; }
.mm-swipe-empty, .mm-swipe-loading {
    color: var(--neo-faint); font-size: 14px; text-align: center; padding: 20px;
}
.mm-swipe-empty {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
@media (max-width: 600px) {
    .mm-swipe-wrap { height: calc(100dvh - 250px); border-radius: 14px; }
}

/* ==== dms.css ==== */
/* ============================================================
   Tots — Messages tab (DMs)
   Full-screen two-pane layout. Uses liquid-glass.css tokens.
   ============================================================ */

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

.dm-layout {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    height: calc(100dvh - 150px);
    min-height: 460px;
    border-radius: var(--lg-r-lg, 22px);
    border: 1px solid var(--lg-rim, rgba(255,255,255,0.12));
    background: var(--lg-glass-1, rgba(255,255,255,0.04));
    box-shadow: var(--lg-specular, none), var(--lg-lift-2, 0 12px 36px rgba(0,0,0,0.45));
    -webkit-backdrop-filter: var(--lg-blur, blur(24px));
    backdrop-filter: var(--lg-blur, blur(24px));
    overflow: hidden;
}

/* ---------- Left: conversation list ---------- */
.dm-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--lg-rim-soft, rgba(255,255,255,0.08));
    background: rgba(0,0,0,0.12);
}
.dm-side-head { padding: 20px 20px 12px; }
.dm-side-head h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.dm-search {
    margin: 0 14px 10px;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font: inherit;
    font-size: 14px;
    outline: none;
}
.dm-search:focus { border-color: rgba(160,107,255,0.6); background: rgba(255,255,255,0.09); }
.dm-search::placeholder { color: var(--text-secondary, #a0a0b0); }

.dm-list { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
.dm-list-label {
    padding: 14px 12px 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary, #a0a0b0);
}
.dm-list-empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--text-secondary, #a0a0b0);
    font-size: 14px;
    line-height: 1.6;
}

.dm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}
.dm-item:hover { background: rgba(255,255,255,0.06); }
.dm-item.active { background: rgba(160,107,255,0.18); }
.dm-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-item-top { display: flex; align-items: baseline; gap: 8px; }
.dm-item-name {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dm-item-time { font-size: 11px; color: var(--text-secondary, #a0a0b0); flex: 0 0 auto; }
.dm-item-preview {
    font-size: 13px;
    color: var(--text-secondary, #a0a0b0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dm-item.unread .dm-item-name { color: #fff; }
.dm-item.unread .dm-item-preview { color: #e6e6f0; font-weight: 600; }
.dm-unread-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #a06bff;
    box-shadow: 0 0 10px rgba(160,107,255,0.8);
}

/* ---------- Avatars ---------- */
.dm-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.dm-avatar > img,
.dm-avatar > span {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.dm-avatar.small { width: 30px; height: 30px; font-size: 15px; background: none; }
.dm-avatar.small:empty { visibility: hidden; }
.dm-dot {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--lg-abyss, #080a18);
    background: #64748b;
}
.dm-dot.online { background: #34e8b0; }
.dm-dot.inactive { background: #ffb443; }

/* ---------- Right: open chat ---------- */
.dm-pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.dm-empty {
    margin: auto;
    padding: 24px;
    text-align: center;
    color: var(--text-secondary, #a0a0b0);
}
.dm-empty-icon { font-size: 56px; margin-bottom: 8px; }
.dm-empty h2 { margin: 0 0 6px; color: #fff; font-size: 22px; }
.dm-empty p { margin: 0; }

.dm-convo { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dm-convo[hidden], .dm-empty[hidden] { display: none; }

.dm-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--lg-rim-soft, rgba(255,255,255,0.08));
    background: rgba(0,0,0,0.1);
}
.dm-back {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}
.dm-head-person {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 4px 4px;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.dm-head-person:hover { background: rgba(255,255,255,0.05); }
.dm-head-text { display: flex; flex-direction: column; min-width: 0; }
.dm-head-name { font-weight: 800; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-head-status { font-size: 12px; color: var(--text-secondary, #a0a0b0); }
.dm-head-btn {
    flex: 0 0 auto;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid rgba(52,232,176,0.4);
    background: rgba(52,232,176,0.12);
    color: #34e8b0;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.dm-head-btn:hover { background: rgba(52,232,176,0.2); }

.dm-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 20px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dm-hello {
    align-self: center;
    margin: 10px 0 14px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    font-size: 12px;
    color: var(--text-secondary, #a0a0b0);
}
.dm-day {
    align-self: center;
    margin: 14px 0 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary, #a0a0b0);
}

.dm-row { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; max-width: 100%; }
.dm-row.grouped { margin-top: 2px; }
.dm-row.self { justify-content: flex-end; }

.dm-bubble {
    max-width: min(560px, 75%);
    padding: 9px 14px 6px;
    border-radius: 20px;
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.06);
}
.dm-row.other .dm-bubble { border-bottom-left-radius: 6px; }
.dm-row.self .dm-bubble {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border-color: rgba(255,255,255,0.15);
    border-bottom-right-radius: 6px;
}
.dm-row.grouped.other .dm-bubble { border-top-left-radius: 6px; }
.dm-row.grouped.self .dm-bubble { border-top-right-radius: 6px; }
.dm-bubble p {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.dm-time {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    text-align: right;
    color: rgba(255,255,255,0.55);
}

.dm-compose {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--lg-rim-soft, rgba(255,255,255,0.08));
}
.dm-compose .dm-input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font: inherit;
    font-size: 15px;
    box-sizing: border-box;
}
.dm-compose .dm-input:focus { outline: none; border-color: rgba(160,107,255,0.6); }
.dm-compose .dm-send {
    flex: 0 0 auto;
    width: auto;
    height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
}

/* ---------- Phones: one pane at a time ---------- */
@media (max-width: 760px) {
    .dm-layout {
        grid-template-columns: minmax(0, 1fr);
        height: calc(100dvh - 120px);
        border-radius: 18px;
    }
    .dm-pane { display: none; }
    .dm-layout.show-convo .dm-side { display: none; }
    .dm-layout.show-convo .dm-pane { display: flex; }
    .dm-back { display: inline-flex; align-items: center; justify-content: center; }
    .dm-bubble { max-width: 82%; }
    .dm-head-btn { padding: 8px 12px; }
    .dm-messages { padding: 14px 12px 8px; }
}

/* ---------- Group chats (groupdms.js) ---------- */
.dm-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gd-new-btn {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(160,107,255,0.45);
    background: rgba(160,107,255,0.14);
    color: #e2d4ff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.gd-new-btn:hover { background: rgba(160,107,255,0.24); }
.gd-avatar > span { background: linear-gradient(135deg, rgba(160,107,255,0.4), rgba(34,211,238,0.3)); }
.gd-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #a06bff;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0;
}
.gd-head { cursor: default; }
.gd-head:hover { background: transparent; }
.gd-menu-btn { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #fff; padding: 9px 14px; }
.gd-sender { display: block; font-size: 11.5px; font-weight: 700; color: #b69cff; margin-bottom: 2px; }
.gd-box { max-width: 420px; width: calc(100vw - 32px); }
.gd-pick { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 4px 0; }
.gd-person {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 7px 10px;
    border: 0; border-radius: 10px;
    background: transparent; color: inherit; font: inherit; font-size: 14px; text-align: left;
    cursor: pointer;
}
.gd-person:hover { background: rgba(255,255,255,0.06); }
.gd-person span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-person i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); font-size: 13px; }
.gd-person.on i { background: #a06bff; }
.gd-person.fixed { opacity: 0.55; cursor: default; }
.gd-pick-count { font-size: 12px; color: var(--text-secondary, #a0a0b0); }
.gd-cancel { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; color: #fff; cursor: pointer; font-family: inherit; }

/* ==== calendar.css ==== */
/* ============================================================
   Tots — Calendar (calendar.js). Small additions on top of the
   existing .calendar-container/.cal-day/.event-item rules in styles.css.
   ============================================================ */

.cal-day-empty {
    cursor: default !important;
    pointer-events: none;
}
.cal-day-empty:hover { background: transparent !important; }

.cal-add-btn {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: var(--bg-hover);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.cal-add-btn:hover { transform: scale(1.02); }

/* ==== flashdecks.css ==== */
/* ============================================================
   Tots — Flashcard decks UI (flashdecks.js)
   ============================================================ */

.fc-decks-panel {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 18px;
}
.fc-decks-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.fc-decks-head h4 { font-size: 15px; margin: 0; }

.fc-decks-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.fc-deck-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-hover);
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.fc-deck-item:hover { transform: scale(1.02); }
.fc-deck-item.active { outline: 2px solid var(--accent-purple); }
.fc-deck-item-name { font-size: 13px; font-weight: 600; }
.fc-deck-item-count { font-size: 11px; color: var(--text-secondary); }
.fc-deck-item-del {
    background: none;
    border: none;
    color: #ff6b6b;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
}

.fc-deck-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.fc-deck-name { font-size: 13px; color: var(--text-secondary); }

.fc-card-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
}

/* ==== kudos.css ==== */
/* ============================================================
   Tots — Kudos board (kudos.js). Loads after neo.css.
   ============================================================ */

#kudos .kd-composer {
    display: grid;
    gap: 10px;
    padding: 16px;
    margin-bottom: 20px;
    background: var(--neo-ink);
    border: 1px solid var(--neo-line-hi);
    border-radius: 14px;
}
/* !important: an older layer strips every text input's background + border */
#kudos .kd-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--neo-line-hi) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    color: var(--neo-text);
    font: inherit;
    font-size: 14px;
    outline: none;
}
#kudos .kd-input:focus { border-color: var(--neo-accent) !important; }

#kudos .kd-feed {
    display: grid;
    gap: 12px;
}
.kd-card {
    background: var(--neo-ink);
    border: 1px solid var(--neo-line);
    border-radius: 14px;
    padding: 14px 16px;
}
.kd-to {
    font-size: 12px;
    color: var(--neo-faint);
    margin-bottom: 4px;
}
.kd-to b { color: var(--neo-text); }
.kd-text {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--neo-text);
    overflow-wrap: anywhere;
}
.kd-foot {
    display: flex;
    align-items: center;
    gap: 8px;
}
.kd-by {
    margin-right: auto;
    font-size: 12px;
    color: var(--neo-faint);
}
.kd-cheer {
    appearance: none;
    cursor: pointer;
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--neo-line);
    color: var(--neo-dim);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.kd-cheer:hover { color: var(--neo-text); border-color: var(--neo-line-hi); }
.kd-cheer.on { color: #000; background: var(--neo-accent); border-color: var(--neo-accent); }
.kd-act {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--neo-faint);
    padding: 4px 6px;
    border-radius: 6px;
}
.kd-act:hover { color: var(--neo-text); background: rgba(255, 255, 255, 0.06); }
.kd-empty {
    padding: 40px 12px;
    text-align: center;
    color: var(--neo-faint);
    font-size: 14px;
}

/* ==== triviagame.css ==== */
/* ============================================================
   Tots — Trivia Showdown (triviagame.js)
   Builds on the .dg-* shell from Draw & Guess (beyond.css) —
   only the question/answer area (which replaces the canvas) is new.
   ============================================================ */

.tg-main { flex: 1; display: flex; min-height: 0; }

.tg-question-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px;
    text-align: center;
}

.tg-subject {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--lg-cyan);
}

.tg-question {
    font-size: 24px;
    font-weight: 750;
    letter-spacing: -0.015em;
    max-width: 640px;
    line-height: 1.3;
}

.tg-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 640px;
}

.tg-opt {
    padding: 16px 18px;
    border-radius: var(--lg-r-md);
    border: 1px solid var(--lg-rim);
    background: var(--lg-glass-2);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 620;
    cursor: pointer;
    transition: transform 0.18s var(--lg-spring), background 0.2s var(--lg-ease), border-color 0.2s var(--lg-ease);
}

.tg-opt:hover:not(:disabled) { background: var(--lg-glass-4); transform: translateY(-2px); }
.tg-opt:disabled { cursor: default; opacity: 0.7; }
.tg-opt.correct {
    background: rgba(52, 232, 176, 0.18);
    border-color: var(--lg-mint);
    color: var(--lg-mint);
    opacity: 1;
}

.tg-start { margin-top: 4px; }

@media (max-width: 860px) {
    .tg-question { font-size: 19px; }
    .tg-options { grid-template-columns: 1fr; }
}

/* ==== mytube.css ==== */
/* MyTube — YouTube-style layout for the #mytube tab */

/* neo.css caps every .tab-content at max-width: 1240px (centered) — MyTube wants
   real YouTube's full-bleed layout instead, same override pattern #settings uses. */
#mytube.tab-content {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    background: #0f0f0f;
}

.yt-shell {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    color: #f1f1f1;
    font-family: Roboto, Arial, Inter, sans-serif;
}

/* Top bar */
.yt-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 10px 24px;
    background: #0f0f0f;
    border-bottom: 1px solid #272727;
}

.yt-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.5px;
    cursor: pointer;
    white-space: nowrap;
}

.yt-logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 18px;
    background: #ff0000;
    border-radius: 6px;
    color: #fff;
    font-size: 10px;
}

.yt-searchwrap {
    flex: 1;
    max-width: 600px;
    display: flex;
}

.yt-search-input {
    flex: 1;
    background: #121212;
    border: 1px solid #303030;
    border-right: none;
    border-radius: 20px 0 0 20px;
    padding: 8px 16px;
    color: #fff;
    font-size: 14px;
    outline: none;
}

.yt-search-input:focus {
    border-color: #1c62b9;
}

.yt-search-btn {
    background: #222222;
    border: 1px solid #303030;
    border-radius: 0 20px 20px 0;
    padding: 0 18px;
    cursor: pointer;
    color: #f1f1f1;
}

.yt-search-btn:hover {
    background: #2d2d2d;
}

/* Category chips */
.yt-chips {
    display: flex;
    gap: 10px;
    padding: 14px 24px;
    overflow-x: auto;
}

.yt-chips.hidden { display: none; }

.yt-chip {
    flex-shrink: 0;
    background: #272727;
    border: none;
    color: #f1f1f1;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.yt-chip:hover { background: #3f3f3f; }

.yt-chip.active {
    background: #f1f1f1;
    color: #0f0f0f;
}

/* Grid */
.yt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px 16px;
    padding: 8px 24px 24px;
}

.yt-card {
    cursor: pointer;
}

.yt-card-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #272727;
}

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

.yt-card-info {
    padding-top: 10px;
}

.yt-card-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.yt-card-channel {
    font-size: 13px;
    color: #aaaaaa;
    margin-top: 4px;
    display: inline-block;
    cursor: pointer;
}

.yt-card-channel:hover {
    color: #fff;
    text-decoration: underline;
}

.yt-card-meta {
    font-size: 13px;
    color: #aaaaaa;
}

.yt-grid-foot {
    display: flex;
    justify-content: center;
    padding-bottom: 32px;
}

.yt-loadmore {
    background: #272727;
    color: #fff;
    border: none;
    border-radius: 18px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.yt-loadmore.hidden,
.yt-watch.hidden,
.yt-browse.hidden,
.yt-shorts-view.hidden,
.yt-channel-view.hidden {
    display: none !important;
}

.yt-loadmore:hover { background: #3f3f3f; }

.yt-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #aaaaaa;
    padding: 60px 20px;
    font-size: 14px;
}

/* Body: sidebar + main content */
.yt-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.yt-sidebar {
    flex-shrink: 0;
    width: 88px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px 6px;
    border-right: 1px solid #272727;
}

.yt-side-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: #f1f1f1;
    padding: 12px 4px 10px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
}

.yt-side-btn:hover { background: #272727; }

.yt-side-btn.active {
    background: #272727;
    font-weight: 700;
}

.yt-side-icon {
    font-size: 20px;
}

.yt-side-disabled {
    opacity: 0.4;
}

.yt-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
}

/* Shorts row on Home */
.yt-shorts-row-wrap {
    padding: 14px 24px 4px;
}

.yt-shorts-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.yt-shorts-row-icon {
    color: #ff0000;
    font-size: 18px;
}

.yt-shorts-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.yt-short-thumb {
    flex-shrink: 0;
    width: 150px;
    aspect-ratio: 9 / 16;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: #272727;
}

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

.yt-short-thumb-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 10px 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Dedicated Shorts view */
.yt-shorts-view {
    padding: 20px 24px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.yt-shorts-back {
    align-self: flex-start;
}

.yt-shorts-stage {
    position: relative;
    width: min(100%, 380px);
    aspect-ratio: 9 / 16;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
}

.yt-short-player, .yt-short-player iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.yt-short-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    pointer-events: none;
}

.yt-short-title {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.yt-short-channel {
    pointer-events: auto;
    background: #272727;
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.yt-shorts-nav {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.yt-shorts-navbtn {
    background: #272727;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 16px;
    cursor: pointer;
}

.yt-shorts-navbtn:hover { background: #3f3f3f; }

/* Watch view */
.yt-watch {
    padding: 20px 24px 40px;
}

.yt-back {
    background: #272727;
    color: #fff;
    border: none;
    border-radius: 18px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 16px;
}

.yt-back:hover { background: #3f3f3f; }

.yt-watch-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: start;
}

.yt-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.yt-player iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.yt-watch-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 16px 0 8px;
}

.yt-watch-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #272727;
}

.yt-watch-channel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: 0;
}

.yt-watch-channel:hover .yt-watch-channel-name {
    text-decoration: underline;
}

.yt-watch-channel-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.yt-watch-stats {
    display: block;
    font-size: 13px;
    color: #aaaaaa;
    margin-top: 2px;
}

.yt-watch-desc {
    margin-top: 14px;
    background: #272727;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #e0e0e0;
    white-space: pre-wrap;
    max-height: 220px;
    overflow-y: auto;
}

.yt-watch-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.yt-watch-side-label {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

/* Comments */
.yt-comments {
    margin-top: 24px;
}

.yt-comments-head {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
}

.yt-comments-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.yt-comment {
    display: flex;
    gap: 12px;
}

.yt-comment-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #272727;
    object-fit: cover;
}

.yt-comment-body { min-width: 0; flex: 1; }

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

.yt-comment-author {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.yt-comment-time {
    font-size: 12px;
    color: #aaaaaa;
}

.yt-comment-text {
    font-size: 14px;
    color: #e0e0e0;
    line-height: 1.5;
    margin-top: 2px;
    white-space: pre-wrap;
}

.yt-comment-likes {
    font-size: 12px;
    color: #aaaaaa;
    margin-top: 6px;
}

/* Channel view */
.yt-channel-view {
    padding: 0 0 40px;
}

.yt-channel-view .yt-back {
    margin: 16px 0 0 24px;
}

.yt-channel-banner {
    width: 100%;
    aspect-ratio: 6 / 1;
    background: linear-gradient(135deg, #272727, #181818);
    background-size: cover;
    background-position: center;
}

.yt-channel-head {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 20px 24px;
}

.yt-channel-avatar {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: #272727;
}

.yt-channel-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yt-channel-head-info h2 {
    font-size: 22px;
    color: #fff;
    margin: 0 0 6px;
}

.yt-channel-meta {
    font-size: 13px;
    color: #aaaaaa;
    margin-bottom: 8px;
}

.yt-channel-desc {
    font-size: 13px;
    color: #e0e0e0;
    line-height: 1.5;
    max-width: 640px;
}

.yt-upnext-item {
    display: flex;
    gap: 8px;
    cursor: pointer;
}

.yt-upnext-thumb {
    flex-shrink: 0;
    width: 168px;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #272727;
}

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

.yt-upnext-info { min-width: 0; }

.yt-upnext-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.yt-upnext-channel {
    font-size: 12px;
    color: #aaaaaa;
    margin-top: 4px;
}

/* Shorts preview tile on Tots's own Home tab (neo-home bento grid) */
.neo-shorts .yt-shorts-row {
    padding: 0;
}

.neo-shorts .yt-short-thumb {
    width: 108px;
}

.neo-shorts .yt-empty {
    padding: 16px 0;
    text-align: left;
}

/* Responsive */
@media (max-width: 900px) {
    .yt-watch-grid {
        grid-template-columns: 1fr;
    }
    .yt-topbar {
        gap: 12px;
        padding: 10px 14px;
    }
    .yt-sidebar {
        width: 60px;
        padding: 10px 2px;
    }
    .yt-side-btn span:not(.yt-side-icon) {
        display: none;
    }
    .yt-grid {
        padding: 8px 14px 24px;
    }
    .yt-chips {
        padding: 12px 14px;
    }
    .yt-watch {
        padding: 16px 14px 32px;
    }
    .yt-shorts-row-wrap {
        padding: 12px 14px 4px;
    }
    .yt-channel-head {
        padding: 16px 14px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ==== music.css ==== */
/* Music tab (music.js) — chart chips, song list, now-playing panel, mini player */

.mu-app { color: var(--neo-text, #f5f5f7); }

.mu-top { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }

.mu-search {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 6px 6px 14px;
    background: var(--neo-surface, rgba(22,22,28,.55));
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    border-radius: 999px;
}
.mu-search input {
    flex: 1; min-width: 0; background: none; border: 0; outline: 0;
    color: inherit; font: inherit; font-size: 15px; padding: 6px 0;
}

.mu-btn {
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.06); color: inherit;
    padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; white-space: nowrap; transition: background .15s;
}
.mu-btn:hover { background: rgba(255,255,255,.12); }
.mu-btn-primary { background: var(--neo-accent, #8ab4ff); border-color: transparent; color: #0a0a0d; }
.mu-btn-primary:hover { background: #a9c7ff; }

.mu-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.mu-chips::-webkit-scrollbar { display: none; }
.mu-chip {
    flex: none; border: 1px solid var(--neo-line, rgba(255,255,255,.08));
    background: rgba(255,255,255,.05); color: inherit;
    padding: 7px 13px; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer;
    transition: background .15s, color .15s;
}
.mu-chip:hover { background: rgba(255,255,255,.1); }
.mu-chip.active { background: #f5f5f7; color: #0a0a0d; border-color: transparent; font-weight: 600; }

.mu-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }

.mu-listwrap, .mu-now {
    background: var(--neo-surface, rgba(22,22,28,.55));
    border: 1px solid var(--neo-line, rgba(255,255,255,.08));
    border-radius: 20px;
}
.mu-listwrap { padding: 14px; min-width: 0; }
.mu-listhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 4px 10px; }
.mu-listhead h2 { margin: 0; font-size: 18px; }

.mu-list { max-height: 62vh; overflow-y: auto; }
.mu-row {
    display: grid; grid-template-columns: 28px 48px minmax(0,1fr) 34px; gap: 12px; align-items: center;
    padding: 7px 8px; border-radius: 12px; cursor: pointer;
}
.mu-row:hover { background: rgba(255,255,255,.06); }
.mu-row.playing { background: rgba(138,180,255,.12); }
.mu-row.playing .mu-row-title, .mu-row.playing .mu-num { color: var(--neo-accent, #8ab4ff); }
.mu-num { text-align: center; font-size: 13px; color: var(--neo-faint, rgba(235,235,245,.32)); font-variant-numeric: tabular-nums; }
.mu-row img, .mu-up img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; background: #222; }
.mu-row-text { min-width: 0; }
.mu-row-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-row-artist { font-size: 12px; color: var(--neo-dim, rgba(235,235,245,.6)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-row-like { background: none; border: 0; font-size: 16px; cursor: pointer; opacity: .7; }
.mu-row-like:hover { opacity: 1; }
.mu-status { padding: 30px 10px; text-align: center; color: var(--neo-dim, rgba(235,235,245,.6)); }
.mu-status.small { padding: 10px; font-size: 13px; }

.mu-now { padding: 14px; position: sticky; top: 12px; }
.mu-video { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.mu-video iframe, .mu-video > div:first-child { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mu-video-empty {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    font-size: 38px; background: linear-gradient(135deg, #1b1b2a, #0d0d14);
}
.mu-video-empty span { font-size: 13px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.mu-meta { margin: 12px 2px 8px; }
.mu-title { font-size: 17px; font-weight: 700; line-height: 1.25; }
.mu-artist { font-size: 13px; color: var(--neo-dim, rgba(235,235,245,.6)); margin-top: 2px; }

.mu-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.12); cursor: pointer; overflow: hidden; }
.mu-bar-fill { height: 100%; width: 0; background: var(--neo-accent, #8ab4ff); border-radius: 99px; }
.mu-times { display: flex; justify-content: space-between; font-size: 11px; color: var(--neo-faint, rgba(235,235,245,.32)); margin-top: 4px; font-variant-numeric: tabular-nums; }

.mu-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0; }
.mu-ctl {
    width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.06); color: inherit; font-size: 16px; transition: background .15s, transform .1s;
}
.mu-ctl:hover { background: rgba(255,255,255,.14); }
.mu-ctl:active { transform: scale(.92); }
.mu-ctl.on { background: rgba(138,180,255,.25); }
.mu-ctl-big { width: 54px; height: 54px; font-size: 20px; background: #f5f5f7; color: #0a0a0d; }
.mu-ctl-big:hover { background: #fff; }
.mu-extra { display: flex; align-items: center; gap: 10px; }
.mu-extra input[type=range] { flex: 1; accent-color: var(--neo-accent, #8ab4ff); }

.mu-upnext-h { margin: 14px 2px 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--neo-faint, rgba(235,235,245,.32)); }
.mu-upnext { max-height: 230px; overflow-y: auto; }
.mu-up { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 10px; align-items: center; padding: 5px; border-radius: 10px; cursor: pointer; }
.mu-up:hover { background: rgba(255,255,255,.06); }
.mu-up img { width: 40px; height: 40px; }

/* Mini player on other tabs */
#muMini {
    position: fixed; right: 18px; bottom: 18px; z-index: 9000;
    display: none; align-items: center; gap: 10px;
    width: 320px; max-width: calc(100vw - 32px); padding: 8px 10px 12px 8px;
    background: rgba(20,20,28,.92); backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5); color: #f5f5f7; cursor: pointer;
}
#muMini.show { display: flex; }
#muMini img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex: none; }
.mu-mini-text { flex: 1; min-width: 0; }
#muMini button {
    flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.08); color: inherit; font-size: 14px;
}
#muMini button:hover { background: rgba(255,255,255,.18); }
.mu-mini-bar { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; border-radius: 9px; background: rgba(255,255,255,.12); overflow: hidden; }
#muMiniFill { height: 100%; width: 0; background: var(--neo-accent, #8ab4ff); }

@media (max-width: 1000px) {
    .mu-main { grid-template-columns: 1fr; }
    .mu-now { position: static; order: -1; }
    .mu-list { max-height: none; }
}
@media (max-width: 900px) {
    #muMini { bottom: 84px; right: 16px; } /* above the bottom tab bar */
}

/* ==== movies.css ==== */
/* Movies tab (movies.js) — genre chips, poster grid, theater view */

#mvBrowse.hidden, #mvWatch.hidden { display: none; }

.mv-app { color: var(--neo-text, #f5f5f7); }
.mv-top { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.mv-search {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px;
    background: var(--neo-surface, rgba(22,22,28,.55));
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16)); border-radius: 999px;
}
.mv-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: inherit; font: inherit; font-size: 15px; }

.mv-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.mv-chips::-webkit-scrollbar { display: none; }
.mv-chip {
    flex: none; border: 1px solid var(--neo-line, rgba(255,255,255,.08)); background: rgba(255,255,255,.05);
    color: inherit; padding: 7px 13px; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer;
}
.mv-chip:hover { background: rgba(255,255,255,.1); }
.mv-chip.active { background: #f5f5f7; color: #0a0a0d; border-color: transparent; font-weight: 600; }

.mv-section { margin-bottom: 26px; }
.mv-section h2 { font-size: 19px; margin: 0 0 12px; }
.mv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#mvCount { font-size: 13px; color: var(--neo-dim, rgba(235,235,245,.6)); }

.mv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px 14px; }
.mv-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 260px); gap: 14px; overflow-x: auto; padding-bottom: 6px; }

.mv-card { background: none; border: 0; padding: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; min-width: 0; }
.mv-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #15151c; }
.mv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--neo-ease, ease); }
.mv-card:hover .mv-thumb img { transform: scale(1.05); }
.mv-dur {
    position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px;
    background: rgba(0,0,0,.78); font-size: 12px; font-weight: 600;
}
.mv-play {
    position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    background: rgba(255,255,255,.9); color: #0a0a0d; opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s;
}
.mv-card:hover .mv-play { opacity: 1; transform: scale(1); }
.mv-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.25); }
.mv-prog div { height: 100%; background: #e50914; }
.mv-name { margin-top: 8px; font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mv-src { font-size: 12px; color: var(--neo-dim, rgba(235,235,245,.6)); margin-top: 2px; }
.mv-status { grid-column: 1 / -1; padding: 40px 10px; text-align: center; color: var(--neo-dim, rgba(235,235,245,.6)); }

.mv-more-wrap { display: flex; justify-content: center; margin-top: 20px; }
.mv-more, .mv-back {
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16)); background: rgba(255,255,255,.06); color: inherit;
    padding: 10px 20px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.mv-more:hover, .mv-back:hover { background: rgba(255,255,255,.12); }

.mv-back { margin-bottom: 14px; }
.mv-player { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.mv-player iframe, .mv-player > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mv-info { margin-top: 16px; }
.mv-info h2 { margin: 0 0 4px; font-size: 22px; }
.mv-sub { font-size: 13px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.mv-info p { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--neo-dim, rgba(235,235,245,.6)); white-space: pre-line; }

@media (max-width: 600px) {
    .mv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
    .mv-row { grid-auto-columns: 70%; }
}

/* ==== anime.css ==== */
/* Anime tab (anime.js) — cards/grid/player reuse movies.css's .mv-* styles; this adds the extras */

#anBrowse.hidden, #anWatch.hidden { display: none; }

.an-app { color: var(--neo-text, #f5f5f7); }

.an-views { display: flex; gap: 6px; flex-wrap: wrap; }
.an-view {
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16)); background: rgba(255,255,255,.05);
    color: inherit; padding: 9px 16px; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.an-view:hover { background: rgba(255,255,255,.1); }
.an-view.active { background: linear-gradient(135deg, #ff5fa2, #8b5cf6); border-color: transparent; color: #fff; }

.an-count { font-size: 13px; color: var(--neo-dim, rgba(235,235,245,.6)); }

.an-lang {
    position: absolute; left: 8px; top: 8px; padding: 2px 7px; border-radius: 6px;
    background: rgba(244,117,33,.92); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em;
}

.an-next { margin-top: 26px; }

/* ==== browser.css ==== */
/* Browser tab (browser.js) — full-width like MyTube */
#browser.tab-content {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

.br-shell {
    --br-a: #7c83ff;
    --br-b: #c56bff;
    --br-c: #3ee0ff;
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 120px);
    min-height: 420px;
    background: #080a16;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 80px -30px rgba(124, 131, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.br-shell:fullscreen { height: 100vh; border-radius: 0; }

/* ---------- toolbar ---------- */
.br-bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(26, 30, 58, 0.95), rgba(16, 19, 40, 0.95));
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(14px);
}
.br-nav {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.br-btn {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #d9dcff;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.br-btn svg, .br-lock svg, .br-hero svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.br-btn:hover:not(:disabled) { background: rgba(124, 131, 255, 0.18); color: #fff; }
.br-btn:active:not(:disabled) { transform: scale(0.9); }
.br-btn:focus { outline: none; }
.br-btn:focus-visible { box-shadow: 0 0 0 2px var(--br-a); }
.br-btn:disabled { opacity: 0.28; cursor: default; }
.br-shell.is-loading #brReload svg { animation: br-spin 0.9s linear infinite; }

.br-form {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}
.br-lock {
    position: absolute;
    left: 14px;
    display: flex;
    color: #6ef2b1;
    pointer-events: none;
}
.br-lock svg { width: 14px; height: 14px; }
.br-url {
    width: 100%;
    box-sizing: border-box;
    height: 38px;
    padding: 0 16px 0 36px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(5, 7, 18, 0.7);
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.br-url::placeholder { color: rgba(220, 224, 255, 0.4); }
.br-url:focus {
    border-color: rgba(124, 131, 255, 0.7);
    background: rgba(5, 7, 18, 0.95);
    box-shadow: 0 0 0 4px rgba(124, 131, 255, 0.15), 0 0 24px rgba(124, 131, 255, 0.25);
}
.br-progress {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.br-progress::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, var(--br-c), var(--br-b), transparent);
    animation: br-bar 1.1s ease-in-out infinite;
}
.br-shell.is-loading .br-progress { opacity: 1; }
@keyframes br-bar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ---------- viewport ---------- */
.br-view { position: relative; flex: 1; min-height: 0; }
.br-frame {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
    display: block;
}

/* ---------- home / new tab page ---------- */
.br-home {
    position: relative;
    height: 100%;
    overflow: auto;
    isolation: isolate;
}
.br-aurora {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    filter: blur(70px) saturate(140%);
    opacity: 0.55;
    pointer-events: none;
}
.br-aurora span {
    position: absolute;
    width: 46vmax;
    height: 46vmax;
    border-radius: 50%;
}
.br-aurora span:nth-child(1) { background: var(--br-a); top: -20%; left: -10%; animation: br-drift1 18s ease-in-out infinite alternate; }
.br-aurora span:nth-child(2) { background: var(--br-b); bottom: -30%; right: -10%; animation: br-drift2 22s ease-in-out infinite alternate; }
.br-aurora span:nth-child(3) { background: var(--br-c); top: 30%; left: 40%; width: 28vmax; height: 28vmax; opacity: 0.6; animation: br-drift3 16s ease-in-out infinite alternate; }
@keyframes br-drift1 { to { transform: translate(18%, 22%) scale(1.15); } }
@keyframes br-drift2 { to { transform: translate(-22%, -15%) scale(0.9); } }
@keyframes br-drift3 { to { transform: translate(-40%, -30%) scale(1.3); } }

.br-gridfx {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
    pointer-events: none;
}

.br-home-inner {
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 40px 16px;
    animation: br-rise 0.6s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes br-rise { from { opacity: 0; transform: translateY(14px); } }

.br-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #c9ffe4;
    background: rgba(110, 242, 177, 0.08);
    border: 1px solid rgba(110, 242, 177, 0.25);
}
.br-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6ef2b1;
    box-shadow: 0 0 0 0 rgba(110, 242, 177, 0.7);
    animation: br-ping 2s infinite;
}
@keyframes br-ping { 70% { box-shadow: 0 0 0 8px rgba(110, 242, 177, 0); } 100% { box-shadow: 0 0 0 0 rgba(110, 242, 177, 0); } }

.br-time {
    margin-bottom: -14px;
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(220, 224, 255, 0.55);
    font-variant-numeric: tabular-nums;
}
.br-logo {
    font-size: clamp(34px, 6vw, 64px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 40px rgba(124, 131, 255, 0.35);
}
.br-logo span {
    background: linear-gradient(90deg, var(--br-c), var(--br-a), var(--br-b), var(--br-c));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: br-shine 6s linear infinite;
}
@keyframes br-shine { to { background-position: 300% 0; } }

.br-hero {
    position: relative;
    display: flex;
    align-items: center;
    width: min(620px, 100%);
    height: 58px;
    padding: 0 8px 0 20px;
    box-sizing: border-box;
    border-radius: 20px;
    background: rgba(10, 12, 28, 0.75);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8);
    transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s;
}
.br-hero::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: 21px;
    padding: 1px;
    background: linear-gradient(120deg, var(--br-c), var(--br-a), var(--br-b));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.35;
    transition: opacity 0.25s;
}
.br-hero:focus-within {
    transform: translateY(-2px);
    border-color: transparent;
    box-shadow: 0 0 0 6px rgba(124, 131, 255, 0.12), 0 0 60px -10px rgba(124, 131, 255, 0.6);
}
.br-hero:focus-within::before { opacity: 1; }
.br-hero-icon { flex: none; color: rgba(220, 224, 255, 0.55); width: 20px !important; height: 20px !important; }
.br-hero input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 14px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 17px;
    outline: none;
}
.br-hero input::placeholder { color: rgba(220, 224, 255, 0.4); }
.br-hero-go {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 14px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--br-a), var(--br-b));
    box-shadow: 0 6px 20px -6px var(--br-b);
    transition: transform 0.15s, filter 0.15s;
}
.br-hero-go:hover { transform: scale(1.06); filter: brightness(1.15); }
.br-hero-go:active { transform: scale(0.95); }

.br-setup {
    max-width: 440px;
    text-align: center;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(255, 180, 60, 0.12);
    color: #ffd59a;
    font-size: 14px;
}

.br-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 112px);
    gap: 14px;
    margin-top: 6px;
}
.br-quick {
    --c: #7c83ff;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    background:
        radial-gradient(120px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c) 28%, transparent), transparent 70%),
        rgba(255, 255, 255, 0.035);
    color: #e4e6ff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    animation: br-rise 0.5s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(var(--i, 0) * 45ms + 150ms);
    transition: transform 0.2s cubic-bezier(.2, .8, .2, 1), border-color 0.2s, box-shadow 0.2s;
}
.br-quick:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--c) 60%, transparent);
    box-shadow: 0 14px 34px -12px var(--c), inset 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent);
}
.br-quick:active { transform: translateY(-2px) scale(0.97); }
.br-quick-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    font-size: 26px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--c) 40%, transparent), color-mix(in srgb, var(--c) 10%, transparent));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 16px -6px var(--c);
    transition: transform 0.25s cubic-bezier(.2, .8, .2, 1);
}
.br-quick:hover .br-quick-icon { transform: scale(1.12) rotate(-6deg); }
.br-quick-icon { overflow: hidden; }
.br-quick-icon img { width: 70%; height: 70%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); }
.br-quick-icon.fill { background: none; }
.br-quick-icon.fill img { width: 100%; height: 100%; object-fit: cover; filter: none; }

.br-recent { width: min(620px, 100%); }
.br-recent-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(220, 224, 255, 0.5);
}
.br-recent-head button {
    border: none;
    background: none;
    color: rgba(220, 224, 255, 0.5);
    font-size: 12px;
    cursor: pointer;
}
.br-recent-head button:hover { color: #fff; }
.br-recent-list { display: flex; flex-wrap: wrap; gap: 8px; }
.br-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 200px;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: #dfe2ff;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.br-pill:hover { background: rgba(124, 131, 255, 0.16); border-color: rgba(124, 131, 255, 0.4); }
.br-pill b {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    color: #fff;
}
.br-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- loading ---------- */
.br-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 16px;
    text-align: center;
    background: radial-gradient(circle at 50% 45%, rgba(40, 30, 90, 0.95), rgba(8, 10, 22, 0.97));
    color: #cfd3ff;
    font-size: 14px;
}
.br-orbit { position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
.br-orbit b { font-size: 30px; animation: br-bob 2s ease-in-out infinite; }
.br-orbit span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--br-c);
    animation: br-spin 1.2s linear infinite;
}
.br-orbit span:nth-child(2) { inset: 9px; border-top-color: var(--br-a); animation-duration: 1.6s; animation-direction: reverse; }
.br-orbit span:nth-child(3) { inset: 18px; border-top-color: var(--br-b); animation-duration: 0.9s; }
@keyframes br-spin { to { transform: rotate(360deg); } }
@keyframes br-bob { 50% { transform: translateY(-4px) scale(1.06); } }

.br-shell .hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .br-aurora span, .br-logo span, .br-dot { animation: none; }
}

@media (max-width: 900px) {
    .br-shell { height: calc(100dvh - 170px); border-radius: 0; }
    .br-bar { gap: 6px; padding: 8px; }
    .br-nav { padding: 2px; }
    .br-btn { width: 30px; height: 30px; }
    #brFull { display: none; }
    .br-quick-grid { grid-template-columns: repeat(3, minmax(0, 88px)); gap: 10px; }
    .br-quick { padding: 12px 4px 10px; font-size: 11px; }
    .br-quick-icon { width: 40px; height: 40px; font-size: 21px; }
    .br-hero { height: 52px; }
    .br-hero input { font-size: 16px; }
}

/* ==== features.css ==== */
/* ============================================================
   Tots — styles for notify.js (bell), chattools.js (search, pins,
   mentions, maintenance), qotd.js (Home tile), quiz.js (quiz modal)
   and the new Home tiles. Uses neo.css tokens.
   ============================================================ */

/* ---------- Home tiles ---------- */
.neo-homework, .neo-qotd { grid-column: span 3; }
@media (max-width: 900px) {
    .neo-homework, .neo-qotd { grid-column: span 2 !important; }
}

/* ---------- 🔔 Bell ---------- */
.cb-bell-wrap { position: relative; }
.cb-bell {
    position: relative;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.07);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .2s var(--neo-spring, ease);
}
.cb-bell:hover { background: rgba(255,255,255,.13); transform: rotate(-12deg); }
.cb-bell-count {
    position: absolute; top: -3px; right: -3px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    background: #ff4d6d; color: #fff;
    font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px var(--neo-black, #000);
}
.cb-bell-count[hidden] { display: none; }
.cb-bell-panel {
    position: absolute; top: calc(100% + 10px); right: 0;
    width: min(360px, calc(100vw - 32px));
    max-height: min(70vh, 520px);
    display: flex; flex-direction: column;
    border-radius: 18px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(18, 18, 24, .96);
    -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
    z-index: 1000;
    overflow: hidden;
}
.cb-bell-panel[hidden] { display: none; }
.cb-bell-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--neo-line, rgba(255,255,255,.08));
    font-size: 15px;
}
.cb-bell-clear { background: none; border: 0; color: var(--neo-accent, #8ab4ff); font: inherit; font-size: 12px; cursor: pointer; }
.cb-bell-list { overflow-y: auto; padding: 6px; }
.cb-n {
    display: flex; flex-direction: column; gap: 3px;
    width: 100%;
    padding: 10px 12px;
    border: 0; border-radius: 12px;
    background: transparent; color: var(--neo-text, #f5f5f7);
    font: inherit; font-size: 13.5px; text-align: left; line-height: 1.4;
    cursor: pointer;
}
.cb-n:hover { background: rgba(255,255,255,.06); }
.cb-n.unread { background: rgba(138,180,255,.1); }
.cb-n.warn { background: rgba(255,180,67,.12); }
.cb-n-req { background: rgba(52,232,176,.1); }
.cb-n-quote {
    display: block; margin-top: 3px; padding-left: 8px;
    border-left: 2px solid var(--neo-line-hi, rgba(255,255,255,.16));
    color: var(--neo-dim, rgba(235,235,245,.6));
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.cb-n-time { font-size: 11px; color: var(--neo-faint, rgba(235,235,245,.32)); }
.cb-n-empty { padding: 30px 16px; text-align: center; color: var(--neo-dim, rgba(235,235,245,.6)); font-size: 14px; line-height: 1.6; }

/* ---------- @mentions ---------- */
.message.cb-mention-me .message-content {
    box-shadow: inset 3px 0 0 #ffd166, 0 0 0 1px rgba(255,209,102,.35) !important;
    background: rgba(255,209,102,.1) !important;
}

/* ---------- 📌 Pinned bar ---------- */
.cb-pin-bar {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 8px;
    padding: 9px 14px;
    border-radius: 14px;
    background: rgba(255,209,102,.1);
    border: 1px solid rgba(255,209,102,.3);
    font-size: 13.5px;
}
.cb-pin-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* ---------- 🔍 Room search ---------- */
.chat-container.cb-has-search { position: relative; }
.cb-search-btn {
    position: absolute; top: 10px; right: 12px; z-index: 5;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(20,20,26,.75);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    color: #fff; font-size: 14px; cursor: pointer;
    opacity: .7; transition: opacity .2s;
}
.cb-search-btn:hover { opacity: 1; }
.cb-search {
    position: absolute; top: 52px; right: 12px; left: 12px; z-index: 6;
    max-width: 460px; margin-left: auto;
    max-height: 60%;
    display: flex; flex-direction: column;
    border-radius: 16px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(16,16,22,.97);
    box-shadow: 0 16px 50px rgba(0,0,0,.6);
    overflow: hidden;
}
.cb-search-row { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid var(--neo-line, rgba(255,255,255,.08)); }
.cb-search-input {
    flex: 1; min-width: 0;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.06);
    color: #fff; font: inherit; font-size: 14px; outline: none;
}
.cb-search-input:focus { border-color: var(--neo-accent, #8ab4ff); }
.cb-search-close { width: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
.cb-search-results { overflow-y: auto; padding: 6px; }
.cb-search-hint { padding: 16px; text-align: center; font-size: 13px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.cb-search-hit {
    display: flex; flex-direction: column; gap: 2px;
    width: 100%; padding: 9px 12px;
    border: 0; border-radius: 10px;
    background: transparent; color: inherit;
    font: inherit; text-align: left; cursor: pointer;
}
.cb-search-hit:hover { background: rgba(255,255,255,.06); }
.cb-search-meta { font-size: 11.5px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.cb-search-text { font-size: 13.5px; overflow-wrap: anywhere; }
.cb-search-text mark { background: rgba(255,209,102,.35); color: #fff; border-radius: 3px; padding: 0 2px; }
.message.cb-flash .message-content { animation: cb-flash 1.6s ease; }
@keyframes cb-flash { 0%, 40% { box-shadow: 0 0 0 3px #ffd166; } 100% { box-shadow: none; } }

/* ---------- Sitewide switches ---------- */
.nav-btn.cb-tab-off { display: none !important; }
.cb-maint {
    position: fixed; inset: 0; z-index: 99990;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(4,5,12,.94);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.cb-maint[hidden] { display: none; }
.cb-maint-box { max-width: 420px; text-align: center; }
.cb-maint-ic { font-size: 64px; margin-bottom: 8px; }
.cb-maint-box h2 { margin: 0 0 8px; font-size: 28px; }
.cb-maint-box p { margin: 0; color: var(--neo-dim, rgba(235,235,245,.6)); font-size: 15px; line-height: 1.6; }

/* ---------- Fake "This site can't be reached" screen (chattools.js downPageHtml) ----------
   A copy of Chrome's own network-error page, down to the fonts and greys, so a glance at the
   screen reads as "the site is down" rather than "Tots turned itself off". Everything is
   !important / unset because this sits on top of the whole themed app. */
.cb-maint.cb-dead {
    display: block; padding: 0;
    background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
    overflow: auto;
    font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.cb-dead .cbd {
    box-sizing: border-box;
    max-width: 600px; margin: 0 auto; padding: 14vh 24px 40px;
    text-align: left; color: #202124;
}
.cb-dead .cbd-ic { width: 72px; height: 72px; display: block; margin: 0 0 24px; fill: #dadce0; }
.cb-dead .cbd-fold { fill: #bdc1c6; }
.cb-dead h1 {
    margin: 0 0 16px; padding: 0;
    font-size: 1.6rem; font-weight: 400; line-height: 1.3; color: #202124;
}
.cb-dead p, .cb-dead li { font-size: .875rem; line-height: 1.6; color: #5f6368; }
.cb-dead .cbd-lead { margin: 0 0 24px; }
.cb-dead .cbd-lead b { font-weight: 500; color: #5f6368; }
.cb-dead .cbd-try { margin: 0 0 4px; }
.cb-dead .cbd-list { margin: 0; padding-left: 20px; }
.cb-dead .cbd-list li { margin: 2px 0; }
.cb-dead .cbd-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-top: 36px;
}
.cb-dead .cbd-code { font-size: .8125rem; color: #5f6368; letter-spacing: .01em; }
.cb-dead .cbd-btn {
    flex: none; cursor: pointer;
    padding: 8px 16px; border: 0; border-radius: 4px;
    background: #1a73e8; color: #fff;
    font-family: inherit; font-size: .875rem; font-weight: 500;
}
.cb-dead .cbd-btn:hover { background: #1b66c9; }
/* Chrome's error page follows the OS theme, so this has to as well */
@media (prefers-color-scheme: dark) {
    .cb-maint.cb-dead { background: #202124; }
    .cb-dead .cbd { color: #e8eaed; }
    .cb-dead h1 { color: #e8eaed; }
    .cb-dead p, .cb-dead li, .cb-dead .cbd-code, .cb-dead .cbd-lead b { color: #9aa0a6; }
    .cb-dead .cbd-ic { fill: #3c4043; }
    .cb-dead .cbd-fold { fill: #5f6368; }
    .cb-dead .cbd-btn { background: #8ab4f8; color: #202124; }
    .cb-dead .cbd-btn:hover { background: #aecbfa; }
}

/* ---------- ❓ Question of the Day ---------- */
.qd-q { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 12px; }
.qd-opts { display: flex; flex-direction: column; gap: 8px; }
.qd-opt {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.04);
    color: inherit; font: inherit; font-size: 14px; text-align: left;
    cursor: pointer;
    transition: border-color .2s, transform .2s var(--neo-spring, ease);
}
.qd-opt:hover { border-color: var(--neo-accent, #8ab4ff); transform: translateY(-1px); }
.qd-opt.mine { border-color: var(--neo-accent, #8ab4ff); }
.qd-fill {
    position: absolute; inset: 0 auto 0 0;
    background: linear-gradient(90deg, rgba(138,180,255,.28), rgba(182,156,255,.18));
    transition: width .6s var(--neo-ease, ease);
}
.qd-opt.mine .qd-fill { background: linear-gradient(90deg, rgba(138,180,255,.45), rgba(182,156,255,.3)); }
.qd-label, .qd-pct { position: relative; }
.qd-pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.qd-foot { margin-top: 10px; font-size: 12px; color: var(--neo-faint, rgba(235,235,245,.32)); }

/* ---------- 🧠 Quiz modal ---------- */
.qz-launch { background: var(--gradient-purple) !important; color: #fff !important; border-color: transparent !important; }
.qz-modal {
    position: fixed; inset: 0; z-index: 99993;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(4,5,14,.8);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.qz-modal[hidden] { display: none; }
.qz-box {
    position: relative;
    width: min(560px, 100%);
    max-height: 92vh; overflow-y: auto;
    padding: 28px 24px 22px;
    border-radius: 24px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(16,16,24,.96);
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.qz-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
.qz-title { margin: 0 0 4px; font-size: 22px; }
.qz-sub { margin: 0 0 16px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.qz-modes { display: grid; gap: 10px; }
.qz-mode {
    display: flex; flex-direction: column; gap: 3px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.04);
    color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.qz-mode:hover:not(:disabled) { border-color: var(--neo-accent, #8ab4ff); }
.qz-mode:disabled { opacity: .45; cursor: not-allowed; }
.qz-mode small { color: var(--neo-dim, rgba(235,235,245,.6)); }
.qz-reward { margin: 14px 0 0; font-size: 12.5px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.qz-progress { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.qz-progress span { display: block; height: 100%; background: var(--gradient-purple); transition: width .4s var(--neo-ease, ease); }
.qz-count { margin: 10px 0 12px; font-size: 12.5px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.qz-q { font-size: 20px; font-weight: 700; line-height: 1.35; margin-bottom: 16px; overflow-wrap: anywhere; }
.qz-opts { display: grid; gap: 8px; }
.qz-opt {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.04);
    color: inherit; font: inherit; font-size: 14.5px; text-align: left; cursor: pointer;
}
.qz-opt:hover:not(:disabled) { border-color: var(--neo-accent, #8ab4ff); }
.qz-opt.right { border-color: #34e8b0; background: rgba(52,232,176,.15); }
.qz-opt.wrong { border-color: #ff5a7a; background: rgba(255,90,122,.15); }
.qz-key { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; background: rgba(255,255,255,.08); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.qz-type { display: flex; gap: 8px; }
.qz-input {
    flex: 1; min-width: 0;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.06);
    color: #fff; font: inherit; font-size: 15px; outline: none;
}
.qz-input:focus { border-color: var(--neo-accent, #8ab4ff); }
.qz-link { margin-top: 10px; background: none; border: 0; padding: 0; color: var(--neo-accent, #8ab4ff); font: inherit; font-size: 13px; cursor: pointer; }
.qz-fb { margin: 16px 0 12px; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; }
.qz-fb.ok { background: rgba(52,232,176,.14); }
.qz-fb.bad { background: rgba(255,90,122,.14); }
.qz-next { width: 100%; }
.qz-result { text-align: center; margin: 4px 0 16px; }
.qz-score { font-size: 64px; font-weight: 800; letter-spacing: -0.04em; }
.qz-score span { font-size: 28px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.qz-msg { font-size: 18px; font-weight: 700; }
.qz-missed { margin: 0 0 14px; display: grid; gap: 6px; font-size: 13.5px; }
.qz-miss { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.04); }
.qz-miss span { color: var(--neo-dim, rgba(235,235,245,.6)); }
.qz-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.qz-actions .send-btn { flex: 1 1 100%; }

@media (prefers-reduced-motion: reduce) {
    .cb-bell:hover, .qd-opt:hover { transform: none; }
    .message.cb-flash .message-content { animation: none; }
}

/* ==== studyroom.css ==== */
/* ============================================================
   Tots — 🍅 Study Room (studyroom.js)
   ============================================================ */
.sr-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 16px; max-width: 1000px; }
.sr-timer-card, .sr-side {
    padding: 24px;
    border-radius: 24px;
    border: 1px solid var(--neo-line, rgba(255,255,255,.08));
    background: var(--neo-surface, rgba(22,22,28,.55));
    -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
}
.sr-timer-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.sr-phase { font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--neo-dim, rgba(235,235,245,.6)); }
.sr-ring { position: relative; width: min(280px, 70vw); aspect-ratio: 1; }
.sr-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sr-ring circle { fill: none; stroke-width: 7; }
.sr-ring-bg { stroke: rgba(255,255,255,.08); }
.sr-ring-fg { stroke: var(--neo-accent, #8ab4ff); stroke-linecap: round; transition: stroke-dashoffset .5s linear, stroke .4s; }
#studyroom[data-phase="break"] .sr-ring-fg { stroke: #34e8b0; }
#studyroom[data-phase="paused"] .sr-ring-fg { stroke: #ffb443; }
.sr-clock {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(48px, 12vw, 72px); font-weight: 750; letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}
.sr-round { font-size: 13px; color: var(--neo-faint, rgba(235,235,245,.32)); min-height: 18px; }
.sr-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 44px; }
.sr-btn {
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.07);
    color: #fff; font: inherit; font-size: 14px; font-weight: 650;
    cursor: pointer;
    transition: background .2s, transform .2s var(--neo-spring, ease);
}
.sr-btn:hover { background: rgba(255,255,255,.13); transform: translateY(-1px); }
.sr-primary { background: var(--gradient-purple); border-color: transparent; box-shadow: 0 6px 24px var(--neo-glow, rgba(138,180,255,.35)); }
.sr-ghost { background: transparent; margin-top: 10px; }
.sr-lengths { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font-size: 12px; color: var(--neo-faint, rgba(235,235,245,.32)); }
.sr-lengths span { margin: 0 4px 0 10px; }
.sr-lengths button {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--neo-line, rgba(255,255,255,.08));
    background: transparent; color: var(--neo-dim, rgba(235,235,245,.6));
    font: inherit; font-size: 12px; cursor: pointer;
}
.sr-lengths button.on { border-color: var(--neo-accent, #8ab4ff); color: #fff; }
.sr-side { display: flex; flex-direction: column; gap: 12px; }
.sr-muted { margin: 0; font-size: 13px; color: var(--neo-dim, rgba(235,235,245,.6)); line-height: 1.5; }
.sr-join .sr-btn { width: 100%; margin-top: 10px; }
.sr-task-row { display: flex; gap: 8px; margin-top: 6px; }
.sr-input {
    flex: 1; min-width: 0;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.06);
    color: #fff; font: inherit; font-size: 14px; outline: none;
}
.sr-input:focus { border-color: var(--neo-accent, #8ab4ff); }
.sr-members-head { font-size: 14px; padding-top: 8px; border-top: 1px solid var(--neo-line, rgba(255,255,255,.08)); }
.sr-members-head span { color: var(--neo-faint, rgba(235,235,245,.32)); }
.sr-members { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.sr-member { display: flex; align-items: center; gap: 10px; }
.sr-av { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; }
.sr-av img { width: 100%; height: 100%; object-fit: cover; }
.sr-mtext { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.sr-mtext small { color: var(--neo-dim, rgba(235,235,245,.6)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-today { font-size: 13px; color: var(--neo-dim, rgba(235,235,245,.6)); padding-top: 8px; border-top: 1px solid var(--neo-line, rgba(255,255,255,.08)); }

@media (max-width: 860px) {
    .sr-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .sr-ring-fg { transition: none; }
    .sr-btn:hover { transform: none; }
}

/* ==== homework.css ==== */
/* ============================================================
   Tots — 📋 Homework tab + Home tile (homework.js)
   ============================================================ */
#hwRoot { max-width: 860px; }
.hw-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px 150px auto;
    gap: 8px;
    padding: 12px;
    border-radius: 20px;
    border: 1px solid var(--neo-line, rgba(255,255,255,.08));
    background: var(--neo-surface, rgba(22,22,28,.55));
    -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
}
.hw-input {
    min-width: 0;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.06);
    color: #fff; font: inherit; font-size: 14px; outline: none;
    color-scheme: dark;
}
.hw-input:focus { border-color: var(--neo-accent, #8ab4ff); }
.hw-add-btn { padding: 0 20px !important; }
.hw-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 6px; flex-wrap: wrap; }
.hw-filters { display: flex; gap: 6px; }
.hw-filters button {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: transparent; color: var(--neo-dim, rgba(235,235,245,.6));
    font: inherit; font-size: 13px; cursor: pointer;
}
.hw-filters button.on { background: rgba(255,255,255,.1); color: #fff; }
.hw-summary { font-size: 13px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.hw-group { margin-top: 14px; }
.hw-group-label {
    font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--neo-dim, rgba(235,235,245,.6));
    margin: 0 4px 6px;
}
.hw-group-label span { opacity: .6; margin-left: 4px; }
.hw-group-label.late { color: #ff7a90; }
.hw-list, .hw-tile-list { display: flex; flex-direction: column; gap: 6px; }
.hw-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid var(--neo-line, rgba(255,255,255,.08));
    background: rgba(255,255,255,.035);
    transition: opacity .25s, background .2s;
}
.hw-item:hover { background: rgba(255,255,255,.06); }
.hw-check {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    border-radius: 8px;
    border: 2px solid var(--neo-line-hi, rgba(255,255,255,.3));
    background: transparent; color: #08110d;
    font-size: 14px; font-weight: 900; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, border-color .2s, transform .2s var(--neo-spring, ease);
}
.hw-check:hover { border-color: #34e8b0; transform: scale(1.08); }
.hw-item.done .hw-check { background: #34e8b0; border-color: #34e8b0; }
.hw-item.done { opacity: .55; }
.hw-item.done .hw-title { text-decoration: line-through; }
.hw-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hw-title { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.hw-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.hw-due.late { color: #ff7a90; font-weight: 700; }
.hw-due.today { color: #ffd166; font-weight: 700; }
.hw-due.soon { color: var(--neo-accent, #8ab4ff); }
.hw-del { background: none; border: 0; cursor: pointer; font-size: 15px; opacity: .5; padding: 4px; }
.hw-del:hover { opacity: 1; }
.hw-empty { padding: 30px 12px; text-align: center; color: var(--neo-dim, rgba(235,235,245,.6)); font-size: 14px; }
.hw-empty.small { padding: 12px 0; text-align: left; }
.hw-more { background: none; border: 0; padding: 4px 0; color: var(--neo-accent, #8ab4ff); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.hw-tile-list .hw-item { padding: 9px 12px; }

@media (max-width: 700px) {
    .hw-add { grid-template-columns: 1fr 1fr; }
    .hw-add #hwTitle { grid-column: 1 / -1; }
    .hw-add-btn { grid-column: 1 / -1; padding: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .hw-check:hover { transform: none; }
}

/* ==== wordgame.css ==== */
/* ============================================================
   Tots — 🟩 Daily Word (wordgame.js). Modal shell is beyond.css's .dg-*
   ============================================================ */
.wg-entry { background: linear-gradient(120deg, rgba(52,232,176,.2), rgba(255,209,102,.12)); border-color: rgba(52,232,176,.4); }
.wg-box { width: min(96vw, 860px); height: min(94vh, 760px); }
.wg-streak { flex: 1; text-align: right; font-size: 13px; font-weight: 700; color: #ffb443; }
.wg-main { flex: 1; display: flex; min-height: 0; }
.wg-play { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; min-width: 0; overflow-y: auto; }
.wg-grid { display: grid; grid-template-rows: repeat(6, 1fr); gap: 6px; }
.wg-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wg-row.shake { animation: wg-shake .4s; }
@keyframes wg-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.wg-cell {
    width: clamp(44px, 11vw, 58px); aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,.12);
    font-size: clamp(22px, 5vw, 28px); font-weight: 800; text-transform: uppercase;
}
.wg-cell.filled { border-color: rgba(255,255,255,.35); animation: wg-pop .12s; }
@keyframes wg-pop { 50% { transform: scale(1.08); } }
.wg-cell.correct, .wg-cell.present, .wg-cell.absent { border-color: transparent; animation: wg-flip .5s both; }
.wg-cell.correct { background: #22a06b; }
.wg-cell.present { background: #c9a227; }
.wg-cell.absent { background: #3a3a44; }
@keyframes wg-flip { 0% { transform: rotateX(90deg); } 100% { transform: none; } }
.wg-msg { min-height: 24px; text-align: center; font-size: 15px; }
.wg-msg small { display: block; margin-top: 4px; color: var(--text-secondary, #a0a0b0); font-size: 12px; }
.wg-share { margin-left: 8px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.wg-kb { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 500px; }
.wg-kb-row { display: flex; justify-content: center; gap: 5px; }
.wg-key {
    flex: 1; max-width: 44px; height: 52px;
    border: 0; border-radius: 8px;
    background: rgba(255,255,255,.14); color: #fff;
    font: inherit; font-size: 15px; font-weight: 700; text-transform: uppercase;
    cursor: pointer;
}
.wg-key.wide { max-width: 70px; flex: 1.5; font-size: 12px; }
.wg-key.correct { background: #22a06b; }
.wg-key.present { background: #c9a227; }
.wg-key.absent { background: #2a2a32; color: rgba(255,255,255,.4); }
.wg-board { width: 240px; flex: 0 0 auto; padding: 16px; border-left: 1px solid var(--lg-rim-soft, rgba(255,255,255,.08)); overflow-y: auto; }
.wg-board h4 { margin: 0 0 10px; font-size: 14px; }
.wg-brow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 13px; }
.wg-brow.me { background: rgba(52,232,176,.12); }
.wg-bname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-btries { font-weight: 700; font-variant-numeric: tabular-nums; }
.wg-muted { font-size: 12.5px; color: var(--text-secondary, #a0a0b0); }

@media (max-width: 760px) {
    .wg-main { flex-direction: column; }
    .wg-board { width: auto; border-left: 0; border-top: 1px solid var(--lg-rim-soft, rgba(255,255,255,.08)); max-height: 160px; }
    .wg-key { height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
    .wg-row.shake, .wg-cell.filled, .wg-cell.correct, .wg-cell.present, .wg-cell.absent { animation: none; }
}

/* ==== admin.css ==== */
/* ============================================================
   Tots — Admin power tools (admin.js)
   ============================================================ */
.ad-power { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; max-width: 1100px; }
.ad-jump {
    position: sticky; top: 8px; z-index: 20;
    display: flex; gap: 6px; flex-wrap: wrap;
    padding: 8px;
    border-radius: 18px;
    border: 1px solid var(--neo-line, rgba(255,255,255,.08));
    background: rgba(14,14,20,.85);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.ad-jump button {
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: rgba(255,255,255,.05);
    color: var(--neo-text, #f5f5f7); font: inherit; font-size: 12.5px; font-weight: 600;
    cursor: pointer;
}
.ad-jump button:hover { border-color: var(--neo-line-hi, rgba(255,255,255,.16)); background: rgba(255,255,255,.1); }
.ad-card {
    scroll-margin-top: 80px;
    padding: 20px;
    border-radius: 22px;
    border: 1px solid var(--neo-line, rgba(255,255,255,.08));
    background: var(--neo-surface, rgba(22,22,28,.55));
    -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
}
.ad-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ad-head h2 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.ad-sub { margin: 18px 0 8px; font-size: 13px; font-weight: 700; color: var(--neo-dim, rgba(235,235,245,.6)); }
.ad-muted { font-size: 12.5px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.ad-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ad-row .ad-input { flex: 1; min-width: 180px; }
.ad-input {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.06);
    color: #fff; font: inherit; font-size: 14px; outline: none;
    box-sizing: border-box;
    width: 100%;
    color-scheme: dark;
}
.ad-input:focus { border-color: var(--neo-accent, #8ab4ff); }
.ad-area { min-height: 110px; resize: vertical; font-family: inherit; }
.ad-slim { padding: 6px 10px; width: auto; }
.ad-btn {
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.07);
    color: #fff; font: inherit; font-size: 13px; font-weight: 650;
    cursor: pointer; white-space: nowrap;
}
.ad-btn:hover { background: rgba(255,255,255,.14); }
.ad-primary { background: var(--gradient-purple); border-color: transparent; }
.ad-btn.amber { border-color: rgba(255,180,67,.45); color: #ffc46b; }
.ad-btn.red { border-color: rgba(255,90,122,.45); color: #ff8aa0; }
.ad-btn.green { border-color: rgba(52,232,176,.45); color: #5ef0c0; }
.ad-link { background: none; border: 0; padding: 0; color: var(--neo-accent, #8ab4ff); font: inherit; font-size: 12.5px; cursor: pointer; }
.ad-link.red { color: #ff8aa0; }
.ad-tag { font-style: normal; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 999px; background: rgba(138,180,255,.18); color: var(--neo-accent, #8ab4ff); }
.ad-tag.red { background: rgba(255,90,122,.18); color: #ff8aa0; }
.ad-tag.amber { background: rgba(255,180,67,.18); color: #ffc46b; }

/* Dashboard */
.ad-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.ad-kpi {
    display: flex; flex-direction: column; gap: 2px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--neo-line, rgba(255,255,255,.08));
}
.ad-kpi-ic { font-size: 18px; }
.ad-kpi b { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ad-kpi span:not(.ad-kpi-ic) { font-size: 12px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.ad-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.ad-chart { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--neo-line, rgba(255,255,255,.08)); min-width: 0; }
.ad-chart h3 { margin: 0 0 12px; font-size: 13.5px; }
.ad-chart h3 small { font-weight: 400; color: var(--neo-faint, rgba(235,235,245,.32)); }
.ad-bars { display: flex; flex-direction: column; gap: 6px; }
.ad-bar { display: grid; grid-template-columns: 88px minmax(0, 1fr) 44px; align-items: center; gap: 8px; font-size: 12.5px; }
.ad-bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--neo-dim, rgba(235,235,245,.6)); }
.ad-bar-t { height: 10px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.ad-bar-t i { display: block; height: 100%; border-radius: 999px; background: var(--neo-accent, #8ab4ff); }
.ad-bar-v { text-align: right; font-variant-numeric: tabular-nums; }
.ad-cols-in { display: flex; align-items: flex-end; gap: 3px; height: 130px; }
.ad-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.ad-col i { display: block; width: 100%; max-width: 22px; border-radius: 4px 4px 0 0; background: var(--neo-accent, #8ab4ff); }
.ad-col span { font-size: 9px; color: var(--neo-faint, rgba(235,235,245,.32)); white-space: nowrap; }
.ad-col:nth-child(even) span { visibility: hidden; }
.ad-top { display: flex; flex-direction: column; gap: 4px; }
.ad-top-row {
    display: grid; grid-template-columns: 18px 28px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px;
    align-items: center;
    padding: 6px 8px; border: 0; border-radius: 10px;
    background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ad-top-row:hover { background: rgba(255,255,255,.05); }
.ad-top-row > span:first-child { grid-row: span 2; font-size: 12px; color: var(--neo-faint, rgba(235,235,245,.32)); }
.ad-top-row .ad-av { grid-row: span 2; }
.ad-top-row b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-top-row small { font-size: 11.5px; color: var(--neo-dim, rgba(235,235,245,.6)); }

.ad-av { position: relative; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.ad-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ad-av.big { width: 56px; height: 56px; font-size: 26px; }
.ad-dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: #64748b; border: 2px solid #111; }
.ad-dot.on { background: #34e8b0; }
.ad-dot.away { background: #ffb443; }

/* User lookup */
.ad-user-results { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ad-user-hit {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.04);
    color: inherit; font: inherit; font-size: 13px; cursor: pointer;
}
.ad-user-hit:hover { border-color: var(--neo-accent, #8ab4ff); }
.ad-user-detail:empty { display: none; }
.ad-user-detail { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--neo-line, rgba(255,255,255,.08)); }
.ad-ud-top { display: flex; gap: 14px; align-items: flex-start; }
.ad-ud-top h3 { margin: 0 0 4px; font-size: 18px; }
.ad-warn { margin-top: 6px; font-size: 12.5px; color: #ff8aa0; }
.ad-warn.amber { color: #ffc46b; }
.ad-ud-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin: 14px 0; }
.ad-ud-stats div { display: flex; flex-direction: column; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.04); }
.ad-ud-stats b { font-size: 16px; }
.ad-ud-stats span { font-size: 11.5px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.ad-bio { margin: 0 0 12px; font-style: italic; color: var(--neo-dim, rgba(235,235,245,.6)); }
.ad-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-msgs { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; }
.ad-msg { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.03); font-size: 13px; }
.ad-msg-room { flex: 0 0 auto; font-size: 11.5px; color: var(--neo-accent, #8ab4ff); }
.ad-msg-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Rooms */
.ad-rooms { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; }
.ad-room { display: grid; grid-template-columns: 110px 60px 90px minmax(160px, 1fr) 80px; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; font-size: 13px; min-width: 560px; }
.ad-room:nth-child(even) { background: rgba(255,255,255,.025); }
.ad-room-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--neo-faint, rgba(235,235,245,.32)); }
.ad-pin { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.ad-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.ad-switch i { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.14); transition: background .2s; }
.ad-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.ad-switch input:checked + i { background: #ff5a7a; }
.ad-switch input:checked + i::after { transform: translateX(18px); }
.ad-switch input:focus-visible + i { outline: 2px solid var(--neo-accent, #8ab4ff); outline-offset: 2px; }

/* Site */
.ad-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    font-size: 12.5px; cursor: pointer; user-select: none;
}
.ad-chip input { accent-color: #ff5a7a; margin: 0; }
.ad-chip.off { border-color: rgba(255,90,122,.5); background: rgba(255,90,122,.1); text-decoration: line-through; }
.ad-qotd-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
#adQotdQ { margin-top: 8px; }

@media (max-width: 760px) {
    .ad-charts { grid-template-columns: 1fr; }
    .ad-qotd-opts { grid-template-columns: 1fr; }
    .ad-jump { position: static; }
}

/* ============================================================
   Pages (admin.js) + usage & insights cards (adminplus.js)
   ============================================================ */
.ad-hidden { display: none !important; }
.ad-jump button { display: inline-flex; align-items: center; gap: 6px; }
.ad-jump button.active { background: var(--gradient-purple, #7c5cff); border-color: transparent; color: #fff; }
.ad-nav-badge { font-style: normal; font-size: 10.5px; font-weight: 800; min-width: 16px; padding: 1px 5px; border-radius: 999px; background: #ff5a7a; color: #fff; text-align: center; }
.ad-nav-badge:empty { display: none; }
.ad-legacy .admin-quick-row { margin-bottom: 0; }
.ad-legacy #adminMeetingRow, .ad-legacy #adminAnnouncementRow { margin-top: 12px; }
.ad-link.green { color: #5ef0c0; }
.ad-kpi small { font-size: 11px; color: var(--neo-faint, rgba(235,235,245,.4)); }
.ad-kpi.ap-bad { border-color: rgba(255,90,122,.45); background: rgba(255,90,122,.08); }
.ad-kpi.ap-good { border-color: rgba(52,232,176,.3); }
.ad-chart .ad-kpis { margin: 0; }
.ap-subhead { margin: 18px 0 8px; }
.ap-subhead .ad-sub { margin: 0; }
.ap-nomt { margin-top: 0; }
.ap-wide.ad-bar { grid-template-columns: 130px minmax(0, 1fr) auto; }
.ad-col.ap-none i { background: rgba(255,255,255,.1); }

.ap-pulse { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #34e8b0; display: inline-flex; align-items: center; gap: 6px; }
.ap-pulse::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #34e8b0; animation: apPulse 1.6s ease-in-out infinite; }
@keyframes apPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52,232,176,.6); } 50% { opacity: .6; box-shadow: 0 0 0 6px rgba(52,232,176,0); } }
@media (prefers-reduced-motion: reduce) { .ap-pulse::before { animation: none; } }

/* Online now */
.ap-online { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.ap-person {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    padding: 8px 10px; border-radius: 14px;
    border: 1px solid var(--neo-line, rgba(255,255,255,.08)); background: rgba(255,255,255,.03);
    color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ap-person:hover { border-color: var(--neo-accent, #8ab4ff); }
.ap-person-t { display: flex; flex-direction: column; min-width: 0; }
.ap-person-t b, .ap-person-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-person-t b { font-size: 13px; }
.ap-person-t small { font-size: 11.5px; color: var(--neo-dim, rgba(235,235,245,.6)); }

/* Live feed */
.ap-feed { max-height: 420px; }
.ap-feed .ad-msg[data-uid] { cursor: pointer; }
.ap-feed .ad-msg[data-uid]:hover { background: rgba(255,255,255,.06); }
.ap-feed-name { flex: 0 0 auto; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }

/* Heatmap */
.ap-heat { display: flex; flex-direction: column; gap: 3px; overflow-x: auto; }
.ap-heat-row { display: grid; grid-template-columns: 38px repeat(24, minmax(12px, 1fr)); gap: 3px; min-width: 420px; align-items: center; }
.ap-heat-row > span { font-size: 11px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.ap-heat-row b { height: 18px; border-radius: 4px; background: var(--neo-accent, #8ab4ff); }
.ap-heat-row b.ap-none { background: rgba(255,255,255,.05); }
.ap-heat-h i { font-style: normal; font-size: 9px; color: var(--neo-faint, rgba(235,235,245,.32)); white-space: nowrap; }

/* Feature table */
.ap-table { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.ap-tr { display: grid; grid-template-columns: minmax(150px, 1.4fr) 80px 70px minmax(110px, 1fr); gap: 10px; align-items: center; padding: 7px 8px; border-radius: 10px; font-size: 13px; }
.ap-tr:nth-child(even) { background: rgba(255,255,255,.025); }
.ap-th { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--neo-faint, rgba(235,235,245,.32)); }
.ap-tr b { font-variant-numeric: tabular-nums; }
.ap-adopt { display: flex; align-items: center; gap: 8px; }
.ap-adopt .ad-bar-t { flex: 1; }
.ap-adopt small { width: 34px; text-align: right; color: var(--neo-dim, rgba(235,235,245,.6)); }

/* Leaderboard */
.ap-board { display: flex; flex-direction: column; gap: 4px; }
.ap-board-row {
    display: grid; grid-template-columns: 30px 28px minmax(90px, 180px) minmax(0, 1fr) 70px; gap: 10px; align-items: center;
    padding: 6px 8px; border: 0; border-radius: 10px; background: transparent;
    color: inherit; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.ap-board-row:hover { background: rgba(255,255,255,.05); }
.ap-board-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-rank { text-align: center; font-size: 15px; color: var(--neo-dim, rgba(235,235,245,.6)); }

/* Health */
.ap-gauge { height: 14px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; margin-bottom: 6px; }
.ap-gauge i { display: block; height: 100%; border-radius: 999px; background: #34e8b0; transition: width .6s; }
.ap-gauge i.warn { background: #ffb443; }
.ap-gauge i.bad { background: #ff5a7a; }
.ap-err { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 12px; margin-bottom: 6px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--neo-line, rgba(255,255,255,.08)); font-size: 13px; }
.ap-err span { color: var(--neo-dim, rgba(235,235,245,.6)); }
.ap-err.bad { border-color: rgba(255,90,122,.45); background: rgba(255,90,122,.07); }
.ap-err code { flex-basis: 100%; font-size: 12px; color: #ff8aa0; overflow-wrap: anywhere; }

@media (max-width: 760px) {
    .ad-jump { flex-wrap: nowrap; overflow-x: auto; }
    .ap-tr { grid-template-columns: minmax(120px, 1fr) 60px 50px; }
    .ap-tr > :nth-child(4) { display: none; }
    .ap-board-row { grid-template-columns: 26px 28px minmax(0, 1fr) 60px; }
    .ap-board-row .ad-bar-t { display: none; }
}

/* ---------- 🚚 Room moves & kicks (roommoves.js) ---------- */
.rm-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.rm-room { padding: 10px 12px; border-radius: 14px; border: 1px solid var(--neo-line, rgba(255,255,255,.08)); background: rgba(255,255,255,.03); }
.rm-room.empty { opacity: .55; }
.rm-room-h { display: flex; align-items: center; gap: 8px; }
.rm-room-h b { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: rgba(52,232,176,.15); color: #5ef0c0; font-size: 12px; font-weight: 800; text-align: center; }
.empty .rm-count { background: rgba(255,255,255,.06); color: var(--neo-dim, rgba(235,235,245,.6)); }
.rm-all { padding: 5px 10px; font-size: 12px; }
.rm-people { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.rm-person { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16)); background: transparent; color: #fff; font: inherit; font-size: 12.5px; cursor: pointer; }
.rm-person span { opacity: 0; transition: opacity .15s; }
.rm-person:hover { border-color: #ff8aa0; }
.rm-person:hover span { opacity: 1; }
.rm-box { width: min(520px, 100%); }
.rm-dests { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-dest, .rm-seg button { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16)); background: transparent; color: var(--neo-dim, rgba(235,235,245,.75)); font: inherit; font-size: 13px; cursor: pointer; }
.rm-dest.on, .rm-seg button.on { background: rgba(138,180,255,.16); border-color: var(--neo-accent, #8ab4ff); color: #fff; }
.rm-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; }
.rm-why { margin-top: 14px; }
.rm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.rm-notice {
    position: fixed; left: 50%; top: 20px; z-index: 99996; transform: translateX(-50%);
    display: flex; align-items: center; gap: 12px;
    width: min(460px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 18px;
    border: 1px solid rgba(255,180,67,.5); background: rgba(22,20,14,.97); color: #fff;
    box-shadow: 0 20px 50px rgba(0,0,0,.5); animation: rmIn .35s ease-out;
}
@keyframes rmIn { from { opacity: 0; transform: translate(-50%, -14px); } }
.rm-notice-ic { font-size: 28px; }
.rm-notice-t { flex: 1; font-size: 14px; line-height: 1.45; }
.rm-notice-t small { display: block; margin-top: 3px; font-size: 12.5px; color: #ffc46b; }
.rm-btn { padding: 7px 14px; border-radius: 999px; border: 0; background: #ffb443; color: #1a1406; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.rm-room-h { flex-wrap: wrap; }
.rm-room-h b { flex: 1 1 110px; }

/* ── Full admin by code (fulladmin.js) ───────────────────────────────────── */
.fa-card { display: flex; flex-direction: column; gap: 10px; }
.fa-title { font-size: 15px; font-weight: 800; }
.fa-desc, .fa-note { font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
.fa-row { display: flex; gap: 8px; flex-wrap: wrap; }
.fa-row .fa-input { flex: 1 1 160px; min-width: 0; }
.fa-btn {
    padding: 10px 14px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 700;
    border: 1px solid rgba(255, 255, 255, .18); color: #fff;
    background: linear-gradient(135deg, var(--accent-1, #6c8cff), var(--accent-2, #a66cff));
}
.fa-btn:disabled { opacity: .6; cursor: default; }
.fa-btn.fa-lock { background: rgba(255, 255, 255, .1); }
.fa-btn.fa-mini { padding: 5px 10px; font-size: 12px; background: rgba(255, 80, 80, .22); }
.fa-msg { font-size: 13px; min-height: 16px; }
.fa-msg.bad { color: #ff8f8f; }
.fa-msg.good { color: #8fffb0; }
.fa-sub { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); margin-top: 6px; }
.fa-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.fa-settings-row { gap: 14px; flex-wrap: wrap; }
.fa-settings-row .fa-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 1 auto; }
.fa-settings-row .fa-note { max-width: 260px; text-align: right; }
.fa-list:empty { display: none; }
.fa-list { padding: 4px 4px 12px; }
#faAdminBox { margin-top: 10px; }
#faAdminBox .fa-card { padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }

/* 🛡️ Owner Guard (ownerguard.js, Logan only) */
.og-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.og-filters .ad-btn.on { outline: 2px solid currentColor; }
.og-list { display: flex; flex-direction: column; gap: 6px; max-height: 520px; overflow-y: auto; }
.og-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.og-row.new { border-color: rgba(248,113,113,.6); background: rgba(248,113,113,.08); }
.og-row.og-isfrozen { border-color: rgba(96,165,250,.6); background: rgba(96,165,250,.08); }
.og-ic { font-size: 20px; flex: none; }
.og-main { flex: 1; min-width: 0; }
.og-text { word-break: break-word; }
.og-meta { font-size: 12px; margin-top: 2px; }
.og-acts { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.og-warn { color: #f87171; font-weight: 600; }
.og-shield { margin: 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 6px; line-height: 1.45; }
.og-frozen { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 99970; max-width: calc(100% - 32px);
    background: #1e3a8a; color: #fff; padding: 10px 16px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.4); font-size: 14px; text-align: center; }
@media (max-width: 600px) { .og-row { flex-wrap: wrap; } .og-acts { width: 100%; } }

/* 🗂️ Admin Home category grid (admin.js #adCats, Oct 15 2026) */
.ad-cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.ad-cat { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--tt-line, rgba(255,255,255,.12)); background: var(--tt-raised, rgba(255,255,255,.04)); color: inherit; cursor: pointer; text-align: left; font: inherit; }
.ad-cat:hover { border-color: var(--tt-accent, #f97316); }
.ad-cat b { font-size: 14px; }
.ad-cat small { font-size: 11px; opacity: .65; line-height: 1.3; }

/* ==== admincorp.css ==== */
/* ============================================================
   Tots — 🏢 HQ Command Center (admincorp.js + admindir.js)
   ============================================================ */
:root {
    --hq-ok: #34e8b0; --hq-warn: #ffb443; --hq-bad: #ff5a7a; --hq-info: #8ab4ff;
    --hq-line: var(--neo-line, rgba(255,255,255,.08));
    --hq-dim: var(--neo-dim, rgba(235,235,245,.6));
}

/* Command bar */
.hq-bar {
    position: relative; z-index: 25;   /* above the sticky page tabs (z 20) so search results show on top */
    display: grid; grid-template-columns: auto minmax(200px, 1fr) auto; gap: 14px; align-items: center;
    padding: 12px 16px;
    border-radius: 20px;
    border: 1px solid var(--hq-line);
    background: linear-gradient(120deg, rgba(20,24,40,.92), rgba(14,14,22,.92));
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.hq-brand { display: flex; align-items: center; gap: 10px; }
.hq-logo { font-size: 26px; }
.hq-brand b { display: block; font-size: 15px; letter-spacing: -0.01em; }
.hq-brand small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--hq-dim); }
.hq-env { padding: 3px 9px; border-radius: 6px; background: rgba(52,232,176,.12); color: var(--hq-ok); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; }
.hq-search { position: relative; }
.hq-search input {
    width: 100%; box-sizing: border-box;
    padding: 10px 14px; border-radius: 12px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.05); color: #fff; font: inherit; font-size: 13.5px; outline: none;
}
.hq-search input:focus { border-color: var(--neo-accent, #8ab4ff); background: rgba(255,255,255,.08); }
.hq-results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
    max-height: 360px; overflow-y: auto;
    padding: 6px; border-radius: 14px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(16,16,24,.98); box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.hq-results[hidden] { display: none; }
.hq-results h4 { margin: 8px 8px 4px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--hq-dim); }
.hq-results button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: #fff; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.hq-results button:hover { background: rgba(255,255,255,.07); }
.hq-results small { margin-left: auto; color: var(--hq-dim); }
.hq-dot { width: 8px; height: 8px; border-radius: 50%; background: #64748b; flex: 0 0 auto; }
.hq-dot.on { background: var(--hq-ok); }
.hq-tag { font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; text-transform: uppercase; }
.hq-tag.red { background: rgba(255,90,122,.18); color: #ff8aa0; }
.hq-muted { margin: 8px; font-size: 13px; color: var(--hq-dim); }
.hq-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--hq-dim); white-space: nowrap; }
.hq-conn { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.hq-conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--hq-ok); box-shadow: 0 0 0 3px rgba(52,232,176,.2); }
.hq-conn.ok { color: var(--hq-ok); }
.hq-conn.bad { color: var(--hq-bad); }
.hq-conn.bad i { background: var(--hq-bad); box-shadow: 0 0 0 3px rgba(255,90,122,.2); }
.hq-clock { font-variant-numeric: tabular-nums; font-weight: 700; color: #fff; }
.hq-btn {
    padding: 8px 12px; border-radius: 10px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.06); color: #fff;
    font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.hq-btn:hover { background: rgba(255,255,255,.12); }

/* Executive scorecards */
.hq-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.hq-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 14px 0;
    border-radius: 16px;
    border: 1px solid var(--hq-line);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.hq-card.warn { border-color: rgba(255,180,67,.45); }
.hq-card-top { font-size: 12px; font-weight: 650; color: var(--hq-dim); }
.hq-card-v { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hq-card-d { display: flex; gap: 10px; font-size: 11.5px; padding-bottom: 10px; }
.hq-card-d > span { display: flex; flex-direction: column; }
.hq-card-d small { font-size: 10px; color: var(--neo-faint, rgba(235,235,245,.4)); }
.hq-delta { font-weight: 800; font-variant-numeric: tabular-nums; }
.hq-delta.up { color: var(--hq-ok); }
.hq-delta.down { color: var(--hq-bad); }
.hq-delta.flat { color: var(--hq-dim); }
.hq-spark { display: block; width: calc(100% + 28px); height: 34px; margin: 0 -14px; }
.hq-spark-line { fill: none; stroke: var(--neo-accent, #8ab4ff); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.hq-spark-area { fill: var(--neo-accent, #8ab4ff); opacity: .14; }
.hq-spark-base { stroke: rgba(255,255,255,.1); stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }

/* Panels */
.hq-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.hq-panel { padding: 14px; border-radius: 16px; border: 1px solid var(--hq-line); background: rgba(255,255,255,.025); min-width: 0; }
.hq-exec > .hq-panel { margin-top: 12px; }
.hq-panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hq-panel-h h3 { margin: 0; font-size: 14px; }

/* Alerts */
.hq-alerts { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.hq-alert { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border-left: 3px solid var(--hq-info); background: rgba(255,255,255,.03); }
.hq-alert.crit { border-left-color: var(--hq-bad); background: rgba(255,90,122,.07); }
.hq-alert.warn { border-left-color: var(--hq-warn); background: rgba(255,180,67,.06); }
.hq-alert.acked { opacity: .5; }
.hq-sev { font-size: 9.5px; font-weight: 900; letter-spacing: .1em; color: var(--hq-info); }
.crit .hq-sev { color: var(--hq-bad); }
.warn .hq-sev { color: var(--hq-warn); }
.hq-alert-t { display: flex; flex-direction: column; min-width: 0; }
.hq-alert-t b { font-size: 13.5px; }
.hq-alert-t small { font-size: 12px; color: var(--hq-dim); overflow-wrap: anywhere; }
.hq-acked { color: var(--hq-ok) !important; }
.hq-alert-a { display: flex; gap: 8px; align-items: center; }
.hq-allclear { padding: 18px; border-radius: 12px; background: rgba(52,232,176,.08); color: var(--hq-ok); font-weight: 700; text-align: center; }

/* Status board */
.hq-overall { padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; font-weight: 800; font-size: 13.5px; }
.hq-overall.ok { background: rgba(52,232,176,.1); color: var(--hq-ok); }
.hq-overall.degraded { background: rgba(255,180,67,.1); color: var(--hq-warn); }
.hq-overall.down { background: rgba(255,90,122,.12); color: var(--hq-bad); }
.hq-svc { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 92px; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--hq-line); }
.hq-svc:last-child { border-bottom: 0; }
.hq-svc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hq-ok); }
.hq-svc-dot.degraded { background: var(--hq-warn); }
.hq-svc-dot.down { background: var(--hq-bad); animation: hqBlink 1s steps(1) infinite; }
.hq-svc-dot.ext { background: #64748b; }
@keyframes hqBlink { 50% { opacity: .3; } }
.hq-svc-t { display: flex; flex-direction: column; min-width: 0; }
.hq-svc-t b { font-size: 13px; }
.hq-svc-t small { font-size: 11px; color: var(--hq-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq-uptime { display: flex; gap: 2px; }
.hq-uptime i { width: 4px; height: 18px; border-radius: 2px; background: var(--hq-ok); opacity: .8; }
.hq-uptime i.degraded { background: var(--hq-warn); }
.hq-uptime i.down { background: var(--hq-bad); }
.hq-svc-st { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; font-weight: 800; color: var(--hq-ok); }
.hq-svc-st.degraded { color: var(--hq-warn); }
.hq-svc-st.down { color: var(--hq-bad); }
.hq-svc-st.ext { color: var(--hq-dim); }
.hq-svc-st small { font-size: 10.5px; font-weight: 500; color: var(--hq-dim); }

/* Goals */
.hq-goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.hq-goal { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.03); }
.hq-goal-h { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 650; margin-bottom: 8px; }
.hq-goal-st { font-style: normal; font-size: 11px; font-weight: 800; }
.hq-goal-st.hit, .hq-goal-st.ok { color: var(--hq-ok); }
.hq-goal-st.risk { color: var(--hq-warn); }
.hq-goal-st.off { color: var(--hq-bad); }
.hq-goal-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; margin-bottom: 6px; }
.hq-goal-bar i { display: block; height: 100%; border-radius: 999px; background: var(--hq-ok); }
.hq-goal-bar i.risk { background: var(--hq-warn); }
.hq-goal-bar i.off { background: var(--hq-bad); }
.hq-goal small { font-size: 11.5px; color: var(--hq-dim); }
.hq-goal-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; align-items: end; }
.hq-goal-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--hq-dim); }
.hq-goal-form input { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16)); background: rgba(255,255,255,.06); color: #fff; font: inherit; }

/* Directory */
.hq-dir-tools { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.hq-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16)); background: transparent; color: var(--hq-dim); font: inherit; font-size: 12.5px; cursor: pointer; }
.hq-chip.on { background: rgba(255,255,255,.12); color: #fff; border-color: var(--neo-accent, #8ab4ff); }
.hq-bulk { position: sticky; top: 64px; z-index: 5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px; background: rgba(138,180,255,.14); border: 1px solid rgba(138,180,255,.4); }
.hq-bulk[hidden] { display: none; }
.hq-bulk b { margin-right: 4px; }
.hq-table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--hq-line); }
.hq-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13px; }
.hq-table th { position: sticky; top: 0; padding: 10px; text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hq-dim); background: rgba(20,20,30,.98); border-bottom: 1px solid var(--hq-line); cursor: pointer; white-space: nowrap; user-select: none; }
.hq-table th.on { color: #fff; }
.hq-table td { padding: 8px 10px; border-bottom: 1px solid var(--hq-line); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hq-table tbody tr { cursor: pointer; }
.hq-table tbody tr:hover { background: rgba(255,255,255,.04); }
.hq-table .hq-cb { width: 34px; cursor: default; }
.hq-user { display: flex; align-items: center; gap: 8px; }
.hq-user b { max-width: 180px; overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.hq-on { color: var(--hq-ok); font-weight: 700; }
.hq-empty { text-align: center; padding: 30px !important; color: var(--hq-dim); }
.hq-pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 12px; }
.hq-pager .ad-btn[disabled] { opacity: .4; cursor: default; }

/* Report document (white paper) */
.hq-doc { padding: 36px 40px; border-radius: 6px; background: #fff; color: #1a1d24; font-family: Georgia, 'Times New Roman', serif; line-height: 1.5; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.hq-doc-head { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 3px solid #1a1d24; }
.hq-doc-logo { font-family: -apple-system, system-ui, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #5b6170; }
.hq-doc h1 { margin: 4px 0; font-size: 30px; letter-spacing: -0.02em; }
.hq-doc h2 { margin: 26px 0 10px; font-size: 18px; border-bottom: 1px solid #d8dbe2; padding-bottom: 4px; }
.hq-doc h2 small { font-weight: 400; color: #6b7280; font-size: 13px; }
.hq-doc p { margin: 4px 0; }
.hq-doc-meta { font-family: -apple-system, system-ui, sans-serif; font-size: 12px; color: #5b6170; text-align: right; }
.hq-doc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; font-family: -apple-system, system-ui, sans-serif; }
.hq-doc-kpis div { padding: 12px; border: 1px solid #d8dbe2; border-radius: 8px; }
.hq-doc-kpis b { display: block; font-size: 24px; }
.hq-doc-kpis span { font-size: 12px; color: #5b6170; }
.hq-doc-table { width: 100%; border-collapse: collapse; font-family: -apple-system, system-ui, sans-serif; font-size: 13px; }
.hq-doc-table th, .hq-doc-table td { padding: 7px 8px; border-bottom: 1px solid #e5e7eb; text-align: left; }
.hq-doc-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #5b6170; border-bottom: 2px solid #1a1d24; }
.hq-doc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.hq-doc-table .muted { color: #6b7280; font-size: 12px; }
.hq-doc .hq-delta.up { color: #059669; }
.hq-doc .hq-delta.down { color: #dc2626; }
.hq-doc .hq-delta.flat { color: #6b7280; }
.hq-doc-list { margin: 6px 0; padding-left: 22px; }
.hq-doc-list li { margin: 3px 0; }
.hq-doc-foot { margin-top: 26px !important; font-size: 11.5px; color: #6b7280; font-style: italic; }

/* Content */
.hq-con-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--hq-line); font-size: 13px; }
.hq-con-row:last-child { border-bottom: 0; }
.hq-con-row > b { min-width: 40px; font-variant-numeric: tabular-nums; }
.hq-con-row.sus { background: rgba(255,180,67,.08); border-radius: 8px; }
.hq-votes { color: var(--hq-warn); }
.hq-con-t { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.hq-con-t small { font-size: 11.5px; color: var(--hq-dim); }
.hq-pixels { display: block; width: 100%; max-width: 256px; aspect-ratio: 1; image-rendering: pixelated; border-radius: 8px; background: #0d0f17; }

/* Team */
.hq-owners { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 12px; }
.hq-owner { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; border: 1px solid var(--hq-line); background: rgba(255,255,255,.03); }
.hq-owner.duty { border-color: rgba(52,232,176,.5); box-shadow: 0 0 0 1px rgba(52,232,176,.2) inset; }
.hq-owner > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hq-owner b { font-size: 15px; }
.hq-owner span { font-size: 12.5px; color: var(--hq-dim); }
.hq-owner small { font-size: 11.5px; color: var(--neo-faint, rgba(235,235,245,.45)); }
.hq-duty { color: var(--hq-ok) !important; font-weight: 700; }
.hq-note-form { display: flex; gap: 8px; margin-bottom: 10px; }
.hq-notes { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.hq-note { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: rgba(255,214,102,.06); border-left: 3px solid #ffd666; }
.hq-note.done { opacity: .5; }
.hq-note.done b { text-decoration: line-through; }
.hq-note > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hq-note b { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.hq-note small { font-size: 11px; color: var(--hq-dim); }
.hq-note-check { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 6px; border: 1.5px solid var(--neo-line-hi, rgba(255,255,255,.3)); background: transparent; color: var(--hq-ok); font-weight: 900; cursor: pointer; }

/* 📺 TV mode */
.hq-tv { position: fixed; inset: 0; z-index: 99999; overflow: auto; padding: 24px 28px; background: radial-gradient(circle at 10% 0%, #13213f, #05060b 60%); color: #fff; font-size: 16px; }
.hq-tv[hidden] { display: none; }
.hq-tv-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.hq-tv-top > div:first-child { display: flex; align-items: center; gap: 12px; font-size: 22px; }
.hq-tv-clock { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hq-tv-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 16px; }
.hq-tv-kpi { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 20px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); }
.hq-tv-kpi.warn { border-color: rgba(255,180,67,.6); background: rgba(255,180,67,.08); }
.hq-tv-kpi span { font-size: 15px; color: rgba(235,235,245,.7); }
.hq-tv-kpi b { font-size: clamp(36px, 4.5vw, 64px); font-weight: 900; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.hq-tv-kpi small { font-size: 14px; color: rgba(235,235,245,.6); }
.hq-tv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hq-tv-panel { padding: 18px; border-radius: 20px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); min-width: 0; }
.hq-tv-panel.wide { grid-column: span 2; }
.hq-tv-panel:first-child { grid-column: span 2; }
.hq-tv-panel h3 { margin: 0 0 12px; font-size: 16px; color: rgba(235,235,245,.75); }
.hq-spark.tv { width: 100%; height: 140px; margin: 0; }
.hq-tv-alert { padding: 10px 12px; margin-bottom: 6px; border-radius: 10px; border-left: 4px solid var(--hq-info); background: rgba(255,255,255,.04); font-weight: 650; }
.hq-tv-alert.crit { border-left-color: var(--hq-bad); background: rgba(255,90,122,.1); }
.hq-tv-alert.warn { border-left-color: var(--hq-warn); }
.hq-tv-alert.acked { opacity: .45; }
.hq-tv-online { display: flex; flex-wrap: wrap; gap: 6px; }
.hq-tv-online span { padding: 5px 10px; border-radius: 999px; background: rgba(52,232,176,.12); color: #c8fbe9; font-size: 14px; }
.hq-tv-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.hq-tv-row b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq-tv-row small { color: rgba(235,235,245,.55); white-space: nowrap; }

@media (max-width: 1100px) {
    .hq-tv-kpis { grid-template-columns: repeat(3, 1fr); }
    .hq-tv-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .hq-bar { grid-template-columns: 1fr; }
    .hq-meta { flex-wrap: wrap; }
    .hq-split { grid-template-columns: 1fr; }
    .hq-doc { padding: 20px; }
    .hq-doc-head { flex-direction: column; }
    .hq-doc-meta { text-align: left; }
    .hq-doc-kpis { grid-template-columns: repeat(2, 1fr); }
    .hq-tv-kpis, .hq-tv-grid { grid-template-columns: 1fr; }
    .hq-tv-panel.wide, .hq-tv-panel:first-child { grid-column: auto; }
    .hq-alert { grid-template-columns: 1fr; }
    .hq-svc { grid-template-columns: 12px minmax(0, 1fr) 84px; }
    .hq-uptime { display: none; }
}

/* Printing the executive report: hide everything except the document */
@media print {
    body.hq-printing * { visibility: hidden !important; }
    body.hq-printing #hqReportDoc, body.hq-printing #hqReportDoc * { visibility: visible !important; }
    body.hq-printing #hqReportDoc { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; padding: 0; }
    body.hq-printing { background: #fff !important; }
}

#hqTeamTop { margin-top: 16px; }

/* 🔍 Search-everything results */
.hq-results { max-height: min(70vh, 560px); }
.hq-results mark { background: rgba(250,204,21,.32); color: #fff; border-radius: 3px; padding: 0 1px; }
.hq-results button { flex-wrap: wrap; }
.hq-results .hq-snip { flex: 1 1 100%; order: 3; margin-left: 16px; font-style: normal; font-size: 12px; color: var(--hq-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hq-results h4 span { text-transform: none; letter-spacing: 0; opacity: .7; }
.hq-results .hq-sum { padding: 6px 10px 2px; font-size: 12px; color: var(--hq-dim); }
.hq-results .hq-sum b { color: #fff; }
.hq-flash { outline: 2px solid #facc15 !important; outline-offset: 3px; border-radius: 8px; animation: hqFlash 2.4s ease; }
@keyframes hqFlash { 0%, 40% { background-color: rgba(250,204,21,.22); } 100% { background-color: transparent; } }

/* Account email column (owners + full admins only) */
.hq-email { font-size: 12px; opacity: .8; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==== adminx.css ==== */
/* ============================================================
   Tots — Admin pages Safety / Live & Fun / Coins & Shop / Insights /
   Control / My Desk (adminx1.js, adminx2.js, adminx3.js)
   ============================================================ */
.ax-list { display: grid; gap: 8px; margin-top: 10px; }
.ax-empty { text-align: center; padding: 14px 0; }
.ax-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: 14px;
    border: 1px solid var(--neo-line, rgba(255,255,255,.08)); background: rgba(255,255,255,.035);
}
.ax-row-main { flex: 1 1 260px; min-width: 0; display: grid; gap: 4px; }
.ax-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.ax-acts .ad-btn { padding: 5px 10px; font-size: 12.5px; }
.ax-hot { border-color: rgba(255,90,122,.45); background: rgba(255,90,122,.07); }
.ax-live { border-color: rgba(52,232,176,.45); background: rgba(52,232,176,.07); }
.ax-dim { opacity: .55; }
.ax-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ax-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; background: rgba(255,255,255,.08); }
.ax-quote { font-size: 13.5px; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,.25); white-space: pre-wrap; overflow-wrap: anywhere; }
.ax-who { background: none; border: 0; padding: 0; color: var(--neo-accent, #8ab4ff); font: inherit; font-weight: 600; cursor: pointer; }
.ax-who:hover { text-decoration: underline; }
.ax-x { background: none; border: 0; color: var(--neo-dim, rgba(235,235,245,.6)); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 6px; }
.ax-x:hover { background: rgba(255,255,255,.1); color: #fff; }
.ax-btns { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.ax-strike { text-decoration: line-through; }

/* Forms */
.ax-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; }
.ax-form label { display: grid; gap: 4px; font-size: 12px; color: var(--neo-dim, rgba(235,235,245,.6)); flex: 1 1 150px; min-width: 0; }
.ax-form label.ax-wide { flex-basis: 100%; }
.ax-form textarea.ad-input { resize: vertical; font: inherit; }
.ax-form input[type=color] { height: 38px; padding: 3px; }
.ax-check { display: flex !important; align-items: center; gap: 8px; cursor: pointer; flex: 0 0 auto !important; }
#axShop.ax-no-b .ax-col-b, #axShop.ax-no-a .ax-col-a { display: none; }
.ax-sw { display: inline-block; width: 18px; height: 18px; border-radius: 6px; vertical-align: -4px; }

/* Strikes */
.ax-det { display: block; }
.ax-det summary { display: flex; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
.ax-det summary::-webkit-details-marker { display: none; }
.ax-hist { font-size: 13px; padding: 6px 0; border-top: 1px solid var(--neo-line, rgba(255,255,255,.08)); }
.ax-det[open] .ad-btn { margin-top: 8px; }

/* Live map */
.ax-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ax-map-room { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--neo-line, rgba(255,255,255,.08)); display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.ax-map-head { width: 100%; display: flex; justify-content: space-between; margin-bottom: 4px; }
.ax-map-head span { font-weight: 800; color: var(--neo-accent, #8ab4ff); }
.ax-map-person { font-size: 12.5px; padding: 2px 8px; border-radius: 999px; background: rgba(52,232,176,.12); }
.ax-map-person.idle { background: rgba(255,180,67,.12); }

/* Room watch */
.ax-feed { max-height: 420px; overflow-y: auto; display: grid; gap: 2px; padding: 8px; border-radius: 14px; background: rgba(0,0,0,.25); }
.ax-feed-row { position: relative; font-size: 13.5px; padding: 4px 30px 4px 6px; border-radius: 8px; overflow-wrap: anywhere; }
.ax-feed-row:hover { background: rgba(255,255,255,.05); }
.ax-feed-row .ax-x { position: absolute; right: 4px; top: 2px; opacity: 0; }
.ax-feed-row:hover .ax-x { opacity: 1; }

/* Tables (Insights) */
.ax-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
.ax-table th { text-align: left; font-weight: 600; color: var(--neo-dim, rgba(235,235,245,.6)); padding: 6px 8px; border-bottom: 1px solid var(--neo-line, rgba(255,255,255,.08)); }
.ax-table td { padding: 6px 8px; border-bottom: 1px solid var(--neo-line, rgba(255,255,255,.05)); }
.ax-bar-cell { width: 30%; }
.ax-bar-cell i { display: block; height: 8px; border-radius: 4px; background: var(--neo-accent, #8ab4ff); }
.ax-up { color: #5ef0c0; }
.ax-down { color: #ff8aa0; }

/* Heatmap */
.ax-heat { display: grid; grid-template-columns: 110px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; margin-top: 10px; }
.ax-heat i { display: block; height: 20px; border-radius: 4px; background: var(--neo-accent, #8ab4ff); }
.ax-heat-h { font-size: 10px; color: var(--neo-faint, rgba(235,235,245,.4)); }
.ax-heat-r { font-size: 12px; color: var(--neo-dim, rgba(235,235,245,.6)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Feature flags */
.ax-flag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-top: 10px; }
.ax-flag { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid var(--neo-line, rgba(255,255,255,.08)); font-size: 13px; }
.ax-flag-on { border-color: rgba(255,180,67,.45); }

/* What's New editor */
.ax-wn { display: grid; gap: 10px; margin-top: 10px; }
.ax-wn > label { display: grid; gap: 4px; font-size: 12px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.ax-wn-item { display: grid; grid-template-columns: 56px 1fr 2fr auto auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.ax-wn-ic { text-align: center; }

/* Panic */
.ax-panic { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.ax-panic-btn {
    padding: 16px 28px; border-radius: 16px; border: 0; cursor: pointer;
    font: inherit; font-size: 17px; font-weight: 800; letter-spacing: .02em; color: #fff;
    background: linear-gradient(135deg, #ff3b5c, #c2185b); box-shadow: 0 8px 30px rgba(255,59,92,.35);
}
.ax-panic-btn:hover { filter: brightness(1.1); }

@media (max-width: 700px) {
    .ax-wn-item { grid-template-columns: 48px 1fr; }
    .ax-heat { grid-template-columns: 70px repeat(24, minmax(0, 1fr)); gap: 1px; }
    .ax-heat i { height: 14px; }
}

/* 🕵️ Alt finder groups */
.ax-altgrp { display: grid; gap: 8px; align-items: stretch; }
.ax-althead { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ax-althead .ad-btn { padding: 5px 10px; font-size: 12.5px; }
.ax-altlist { display: grid; gap: 4px; }
.ax-altp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; text-align: left; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,.18); }
.ax-altp .ax-who { text-align: left; }
.ax-altmeta { margin-left: auto; font-size: 12px; }
.ax-tag-red { background: rgba(255,90,122,.2); }

/* 🚨 Very critical (adminx1.js buildCritical, Logan only) */
.ad-card.ax-crit { border: 2px solid #ef4444 !important; box-shadow: 0 0 0 0 rgba(239,68,68,.6); animation: axCritGlow 1.6s ease-in-out infinite; }
.ax-crit .ad-head h2 { color: #f87171; letter-spacing: .5px; display: flex; align-items: center; gap: 10px; }
.ax-crit-tag { font-size: 12px; font-weight: 800; color: #fff; background: #b91c1c; padding: 3px 10px; border-radius: 99px; }
.ax-crit-dots { display: inline-flex; gap: 4px; }
.ax-crit-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: axCritBlink 1s steps(1, end) infinite; }
.ax-crit-dots i:nth-child(2) { animation-delay: .33s; }
.ax-crit-dots i:nth-child(3) { animation-delay: .66s; }
.ax-crit-item { border: 1px solid rgba(239,68,68,.45); background: rgba(239,68,68,.08); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.ax-crit-item.done { opacity: .6; border-color: rgba(255,255,255,.15); background: transparent; }
.ax-crit-item.done .ax-crit-dots i { animation: none; background: #22c55e; box-shadow: none; }
.ax-crit-kind { display: flex; align-items: center; gap: 8px; font-weight: 900; text-transform: uppercase; color: #fca5a5; font-size: 13px; letter-spacing: 1px; }
.ax-crit-quote { margin: 10px 0; padding: 10px 12px; border-left: 4px solid #ef4444; background: rgba(0,0,0,.35); border-radius: 8px; font-size: 16px; font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.ax-crit-quote small { display: block; margin-top: 6px; font-size: 12px; font-weight: 500; opacity: .75; }
.ax-crit-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 8px 0 12px; font-size: 13px; }
.ax-crit-dl dt { opacity: .6; } .ax-crit-dl dd { margin: 0; overflow-wrap: anywhere; }
@keyframes axCritBlink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes axCritGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); } 50% { box-shadow: 0 0 22px 2px rgba(239,68,68,.45); } }
@media (prefers-reduced-motion: reduce) { .ad-card.ax-crit, .ax-crit-dots i { animation: none; } }

/* 📅 Weekly pack drops (adminx2.js drawDrops) */
.ax-drops { margin-top: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--neo-line, rgba(255,255,255,.08)); background: rgba(255,255,255,.035); }
.ax-drops-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ax-drops-head b { font-size: 15px; }
.ax-drop-on { font-size: 11.5px; font-weight: 800; color: #0b1220; background: #34e8b0; padding: 2px 8px; border-radius: 99px; }
.ax-drops .ax-acts { margin-left: 0; }
.ax-drop-rows { display: grid; gap: 4px; margin-top: 12px; }
.ax-drop-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,.22); font-size: 13.5px; }
.ax-drop-row > span:last-child { margin-left: auto; font-size: 12px; }

/* ==== adminpack1.css ==== */
/* Tots — Admin pack 1 (adminpack1.js) */
.ap1-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.ap1-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--tt-raised, rgba(255,255,255,.04)); }
.ap1-day { margin: 10px 0 4px; font-size: 13px; opacity: .8; }
.ap1-acts { flex-wrap: wrap; gap: 6px; }
.ap1-bar { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr auto; align-items: center; gap: 8px; font-size: 13px; margin: 3px 0; }
.ap1-bar i { display: block; height: 10px; border-radius: 6px; background: var(--tt-accent, #f97316); }
.ap1-flag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(239,68,68,.15); color: #ef4444; }
.ap1-ctx { position: fixed; z-index: 99995; min-width: 200px; padding: 6px; border-radius: 12px; background: var(--tt-surface, #151a2e); color: var(--tt-text, #fff); border: 1px solid var(--tt-line, rgba(255,255,255,.12)); box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.ap1-ctx-h { font-size: 12px; font-weight: 700; padding: 4px 8px 6px; opacity: .8; }
.ap1-ctx button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.ap1-ctx button:hover { background: var(--tt-hover, rgba(255,255,255,.08)); }
/* adminpack2.js */
.ap2-scroll { max-height: 320px; overflow: auto; }
.ap2-memes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.ap2-meme { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 10px; background: var(--tt-raised, rgba(255,255,255,.04)); }
.ap2-meme img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; }
.ap2-meme span { display: flex; gap: 4px; }
.ap2-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ap2-day { display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: 10px; background: var(--tt-raised, rgba(255,255,255,.04)); min-height: 70px; }
.ap2-day small { font-size: 11px; opacity: .8; }
.ap2-eotd { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ap2-eotd label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
@media (max-width: 700px) { .ap2-week, .ap2-eotd { grid-template-columns: repeat(2, 1fr); } }
.ap3-diff s { opacity: .55; font-size: 12px; word-break: break-all; }
.ap3-diff span { font-size: 12px; word-break: break-all; }

/* ==== pack2live.css ==== */
/* Tots — batch 2 visitor side (pack2live.js) */
.rr-rules { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; font-size: 13px; background: color-mix(in srgb, var(--tt-accent, #f97316) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tt-accent, #f97316) 35%, transparent); color: var(--tt-text, inherit); }
.message.rr-held { display: none !important; }
.rr-gifgone { display: inline-block; font-size: 12px; opacity: .6; padding: 6px 0; }
.rr-modal { position: fixed; inset: 0; z-index: 99970; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.rr-box { position: relative; width: min(520px, 100%); max-height: 86vh; overflow: auto; background: var(--tt-surface, #151a2e); color: var(--tt-text, #fff); border-radius: 16px; padding: 18px; border: 1px solid var(--tt-line, rgba(255,255,255,.12)); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.rr-box h2 { margin: 0 0 10px; font-size: 20px; }
.rr-x { position: absolute; top: 10px; right: 10px; border: 0; background: transparent; color: inherit; font-size: 18px; cursor: pointer; }
.rr-muted { opacity: .7; font-size: 13px; }
.rr-q { margin: 10px 0; display: flex; flex-direction: column; gap: 4px; }
.rr-q textarea { min-height: 60px; border-radius: 8px; padding: 8px; background: var(--tt-raised, rgba(255,255,255,.05)); color: inherit; border: 1px solid var(--tt-line, rgba(255,255,255,.15)); font: inherit; }
.rr-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.rr-btn { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--tt-line, rgba(255,255,255,.15)); background: var(--tt-raised, rgba(255,255,255,.06)); color: inherit; font: inherit; cursor: pointer; }
.rr-primary { background: var(--tt-accent, #f97316); border-color: transparent; color: #fff; }
.rr-dock { position: fixed; right: 16px; bottom: 90px; z-index: 9990; display: flex; flex-direction: column; gap: 8px; }
.rr-dockbtn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--tt-line, rgba(255,255,255,.15)); background: var(--tt-surface, #151a2e); font-size: 22px; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.rr-team { display: grid; grid-template-columns: minmax(110px, 1fr) 2fr auto auto; align-items: center; gap: 8px; padding: 8px; margin: 6px 0; border-radius: 10px; background: var(--tt-raised, rgba(255,255,255,.04)); }
.rr-team.mine { outline: 2px solid var(--tt-accent, #f97316); }
.rr-team i { display: block; height: 10px; border-radius: 6px; background: var(--tt-accent, #f97316); }
.rr-bingo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 10px; }
.rr-sq { aspect-ratio: 1; padding: 4px; font-size: 10px; line-height: 1.15; border-radius: 8px; border: 1px solid var(--tt-line, rgba(255,255,255,.15)); background: var(--tt-raised, rgba(255,255,255,.05)); color: inherit; cursor: pointer; }
.rr-sq.on { background: var(--tt-accent, #f97316); color: #fff; }
.rr-wheel { position: relative; width: 240px; height: 240px; margin: 10px auto; }
.rr-wheel-disc { width: 100%; height: 100%; border-radius: 50%; position: relative; background: conic-gradient(#f97316 0 12.5%, #facc15 0 25%, #22c55e 0 37.5%, #38bdf8 0 50%, #a855f7 0 62.5%, #ec4899 0 75%, #ef4444 0 87.5%, #14b8a6 0); transition: transform 3s cubic-bezier(.15,.8,.2,1); }
.rr-wheel-disc span { position: absolute; left: 50%; top: 50%; width: 0; height: 0; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.rr-wheel-disc span::after { content: attr(data-x); }
.rr-wheel-disc span { transform-origin: 0 0; }
.rr-wheel-pin { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 22px; color: var(--tt-text, #fff); }
.rr-egg { position: absolute; z-index: 50; border: 0; background: transparent; font-size: 22px; cursor: pointer; opacity: .85; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.rr-egg:hover { transform: scale(1.3); }
.rr-hint { padding: 6px 0; font-size: 14px; }
.rr-big { font-size: 20px; font-weight: 800; margin: 10px 0; }
.rr-in { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--tt-line, rgba(255,255,255,.15)); background: var(--tt-raised, rgba(255,255,255,.05)); color: inherit; font: inherit; width: 140px; }

/* ==== sitewide.css ==== */
/* ============================================================
   Tots — sitewide owner controls, visitor side (sitewide.js)
   ============================================================ */
.sw-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 99990; }

/* Shadow mute: hidden for everyone but the sender; owners see it dimmed */
.message.sw-shadow-hide { display: none !important; }
.message.sw-shadow-owner { opacity: .45; }
.message.sw-shadow-owner .message-content::before { content: '👻 shadow-muted'; display: block; font-size: 11px; color: #ff8aa0; }

/* Feature flags */
.nav-btn.sw-flag-off { display: none !important; }

/* Event + scheduled maintenance bars */
#swBars {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    z-index: 9000; display: grid; gap: 6px; max-width: calc(100vw - 32px); pointer-events: none;
}
.sw-bar {
    padding: 8px 16px; border-radius: 999px; font-size: 13px; color: #fff; text-align: center;
    border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.sw-bar-event { background: linear-gradient(120deg, rgba(160,107,255,.55), rgba(255,95,162,.5)); }
.sw-bar-maint { background: rgba(255,180,67,.35); }
/* desktop: sit in the empty middle of the top bar, not over Save buttons / chat boxes at the bottom */
@media (min-width: 901px) { #swBars { bottom: auto; top: 32px; } }
@media (max-width: 900px) { #swBars { bottom: 84px; } }
.cb-maint-eta { margin-top: 8px; font-size: 13px; opacity: .75; }

/* Home poll tile */
.sw-poll { display: grid; gap: 8px; align-content: start; }
.sw-poll-q { margin: 2px 0 4px; font-size: 17px; line-height: 1.3; }
.sw-poll-opt {
    position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px; border-radius: 12px; cursor: pointer; text-align: left;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16)); background: rgba(255,255,255,.04);
    color: var(--neo-text, #f5f5f7); font: inherit; font-size: 14px;
}
.sw-poll-opt i { position: absolute; inset: 0 auto 0 0; background: rgba(138,180,255,.18); transition: width .5s var(--neo-ease, ease); }
.sw-poll-opt span, .sw-poll-opt em { position: relative; }
.sw-poll-opt em { font-style: normal; font-size: 12.5px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.sw-poll-opt.on { border-color: var(--neo-accent, #8ab4ff); }
.sw-poll-n { font-size: 12px; color: var(--neo-faint, rgba(235,235,245,.4)); }

/* Welcome pop-up */
.sw-modal {
    position: fixed; inset: 0; z-index: 99970; display: grid; place-items: center; padding: 16px;
    background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sw-modal-box {
    width: min(460px, 100%); padding: 28px 24px 22px; border-radius: 24px; text-align: center;
    background: var(--neo-ink, #0a0a0d); border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16)); color: var(--neo-text, #f5f5f7);
}
.sw-modal-ic { font-size: 44px; }
.sw-modal-box h2 { margin: 8px 0 10px; }
.sw-modal-box p { margin: 0 0 18px; line-height: 1.5; color: var(--neo-dim, rgba(235,235,245,.7)); }

/* Limited-time shop items (rewards.js) */
.rw-limited { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #ffc46b; background: rgba(255,180,67,.15); }

/* 🚨 Panic lock — above everything */
#swPanic.sw-panic { z-index: 2147483000 !important; }
#swPanic .cb-maint-ic { filter: drop-shadow(0 0 18px rgba(255,59,92,.6)); }

.sw-panic-text{font-size:17px;margin:6px 0 12px;color:#ffd166}

/* 🛂 Sign-up approval gate (admin pack 1, #15) */
.sw-gate { position: fixed; inset: 0; z-index: 99985; background: var(--tt-bg, #0b0f19); display: flex; align-items: center; justify-content: center; padding: 20px; }
.sw-gate-box { max-width: 420px; text-align: center; color: var(--tt-text, #fff); }
.sw-gate-box h2 { margin: 8px 0; }
.sw-gate-box p { opacity: .75; line-height: 1.5; }

/* ==== whatsnew.css ==== */
/* Tots — "What's New" popup (whatsnew.js). Sits below sign-in/consent/welcome (99990+). */
#wnModal, #anModal {
    position: fixed;
    inset: 0;
    z-index: 99980;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.25s var(--neo-ease, ease);
}
#wnModal[hidden], #anModal[hidden] { display: none; }
#wnModal, #wnModal *, #anModal, #anModal * { box-sizing: border-box; }
#wnModal.wn-in, #anModal.wn-in { opacity: 1; }

.wn-box {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 28px 24px 22px;
    border-radius: 24px;
    background: var(--neo-ink, #0a0a0d);
    border: 1px solid var(--neo-line-hi, rgba(255, 255, 255, 0.16));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px var(--neo-glow, rgba(138, 180, 255, 0.35));
    color: var(--neo-text, #f5f5f7);
    transform: translateY(16px) scale(0.97);
    transition: transform 0.4s var(--neo-spring, ease);
}
#wnModal.wn-in .wn-box, #anModal.wn-in .wn-box { transform: none; }

.wn-x {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--neo-line, rgba(255, 255, 255, 0.08));
    background: var(--neo-raised, rgba(36, 36, 44, 0.55));
    color: var(--neo-dim, rgba(235, 235, 245, 0.6));
    cursor: pointer;
    font-size: 14px;
}
.wn-x:hover { color: var(--neo-text, #fff); }

.wn-head { text-align: center; margin-bottom: 20px; }
.wn-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #fff;
    background: var(--gradient-purple, linear-gradient(135deg, #6366f1, #a855f7));
}
.wn-head h2 {
    margin: 12px 0 6px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(90deg, var(--neo-text, #fff), var(--neo-accent, #8ab4ff));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.wn-head p { margin: 0; color: var(--neo-dim, rgba(235, 235, 245, 0.6)); font-size: 14px; }

.wn-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.wn-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    text-align: left;
    border-radius: 16px;
    border: 1px solid var(--neo-line, rgba(255, 255, 255, 0.08));
    background: var(--neo-surface, rgba(22, 22, 28, 0.55));
    color: inherit;
    font: inherit;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
#wnModal.wn-in .wn-item, #anModal.wn-in .wn-item {
    animation: wn-pop 0.45s var(--neo-ease, ease) forwards;
    animation-delay: calc(var(--i) * 40ms + 120ms);
}
.wn-item:hover,
.wn-item:focus-visible {
    border-color: var(--neo-accent, #8ab4ff);
    background: var(--neo-raised, rgba(36, 36, 44, 0.55));
}
.wn-icon { font-size: 24px; line-height: 1; flex-shrink: 0; }
.wn-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wn-txt b { font-size: 14px; font-weight: 700; }
.wn-txt span { font-size: 12.5px; line-height: 1.35; color: var(--neo-dim, rgba(235, 235, 245, 0.6)); }

.wn-go {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 14px;
    border: 0;
    border-radius: 14px;
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    background: var(--gradient-purple, linear-gradient(135deg, #6366f1, #a855f7));
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s;
}
.wn-go:hover { filter: brightness(1.1); transform: translateY(-1px); }

@keyframes wn-pop { to { opacity: 1; transform: none; } }

@media (max-width: 560px) {
    .wn-grid { grid-template-columns: 1fr; }
    .wn-head h2 { font-size: 23px; }
    .wn-box { padding: 24px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    #wnModal, .wn-box, .wn-item, #anModal { transition: none; }
#wnModal.wn-in .wn-item, #anModal.wn-in .wn-item { animation: none; opacity: 1; transform: none; }
}

/* Admin What's New (adminnew.js) — same look, bigger + grouped by admin page */
#anModal .wn-box { max-width: 860px; max-height: 88vh; overflow-y: auto; }
#anModal .wn-badge { background: linear-gradient(135deg, #ff9f43, #ff5e7e); }
.an-sec { margin: 18px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: var(--neo-dim, rgba(235, 235, 245, 0.6)); display: flex; align-items: center; gap: 8px; }
.an-sec button { margin-left: auto; font: inherit; font-size: 11px; text-transform: none; letter-spacing: 0; padding: 4px 10px;
    border-radius: 999px; border: 1px solid rgba(255,255,255,.15); background: transparent; color: inherit; cursor: pointer; }
.an-sec button:hover { color: var(--neo-text, #fff); border-color: rgba(255,255,255,.35); }
#anModal .wn-go { position: sticky; bottom: 0; margin-top: 16px; }

/* ==== pixelwall.css ==== */
/* ============================================================
   Tots — 🎨 Pixel Wall (pixelwall.js)
   ============================================================ */
#pwRoot { max-width: 1060px; }
.pw-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.pw-stage-wrap {
    padding: 14px;
    border-radius: 22px;
    border: 1px solid var(--neo-line, rgba(255,255,255,.08));
    background: var(--neo-surface, rgba(22,22,28,.55));
    -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
    min-width: 0;
}
.pw-stage { position: relative; overflow: auto; max-height: 70vh; border-radius: 12px; --pw-zoom: 1; }
.pw-stage canvas {
    display: block;
    width: 100%; max-width: 640px; height: auto; aspect-ratio: 1;
    margin: 0 auto;
    image-rendering: pixelated; image-rendering: crisp-edges;
    border-radius: 10px;
    cursor: crosshair;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.pw-stage.zoomed canvas { width: calc(640px * var(--pw-zoom)); max-width: none; }
.pw-hover {
    position: absolute; pointer-events: none; z-index: 2;
    padding: 5px 9px; border-radius: 8px;
    background: rgba(10,10,16,.92); color: #fff; font-size: 12px; white-space: nowrap;
    border: 1px solid rgba(255,255,255,.12);
}
.pw-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.pw-palette { display: flex; flex-wrap: wrap; gap: 5px; }
.pw-palette button {
    width: 28px; height: 28px; padding: 0;
    border-radius: 8px; border: 2px solid rgba(255,255,255,.15);
    cursor: pointer; transition: transform .15s;
}
.pw-palette button:hover { transform: scale(1.12); }
.pw-palette button.on { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 0 2px var(--neo-accent, #8ab4ff); }
.pw-status { font-size: 13px; font-weight: 650; color: #5ef0c0; font-variant-numeric: tabular-nums; }
.pw-status.wait { color: #ffc46b; }

.pw-side { display: flex; flex-direction: column; gap: 12px; }
.pw-card {
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--neo-line, rgba(255,255,255,.08));
    background: var(--neo-surface, rgba(22,22,28,.55));
    -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
}
.pw-card h3 { margin: 0 0 8px; font-size: 14px; }
.pw-card p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--neo-dim, rgba(235,235,245,.65)); }
.pw-zoom { display: flex; gap: 6px; }
.pw-btn {
    padding: 7px 12px; border-radius: 999px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.07); color: #fff;
    font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
}
.pw-btn:hover { background: rgba(255,255,255,.14); }
.pw-btn.danger { border-color: rgba(255,90,122,.45); color: #ff8aa0; }
.pw-owner { display: flex; flex-direction: column; gap: 8px; }
.pw-owner[hidden] { display: none; }
.pw-owner h3 { margin-bottom: 0; }
.pw-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pw-stats div { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.04); }
.pw-stats b { font-size: 18px; font-variant-numeric: tabular-nums; }
.pw-stats span { font-size: 11.5px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.pw-top { display: flex; flex-direction: column; gap: 3px; }
.pw-top-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 8px; font-size: 13px; }
.pw-top-row.me { background: rgba(138,180,255,.12); }
.pw-top-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pw-top-row small { color: var(--neo-dim, rgba(235,235,245,.6)); font-variant-numeric: tabular-nums; }
.pw-muted { font-size: 12.5px; color: var(--neo-dim, rgba(235,235,245,.6)); margin: 0; }

@media (max-width: 900px) {
    .pw-layout { grid-template-columns: 1fr; }
    .pw-stage-wrap { padding: 10px; }
}

/* ==== duels.css ==== */
/* ============================================================
   Tots — ⚔️ Duels (duels.js)
   Entry card reuses Draw & Guess's .dg-entry look (beyond.css).
   ============================================================ */
.du-entry { background: linear-gradient(120deg, rgba(255,90,122,.18), rgba(255,180,67,.1)); border-color: rgba(255,90,122,.4); }
.du-count { display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 6px; border-radius: 999px; background: #ff5a7a; color: #fff; font-size: 12px; text-align: center; vertical-align: middle; }
.du-count[hidden] { display: none; }

.du-modal {
    position: fixed; inset: 0; z-index: 99994;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(4,4,10,.66);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.du-modal[hidden] { display: none; }
.du-box {
    position: relative;
    width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(18,18,26,.96);
    color: #fff;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.du-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; font-size: 14px; }
.du-title { margin: 0 0 12px; font-size: 21px; letter-spacing: -0.02em; }
.du-turn { text-align: center; font-size: 18px; color: var(--neo-dim, rgba(235,235,245,.7)); }
.du-turn.go { color: #5ef0c0; }
.du-sub { margin: 18px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--neo-dim, rgba(235,235,245,.6)); }
.du-muted { font-size: 12.5px; color: var(--neo-dim, rgba(235,235,245,.6)); font-weight: 400; text-transform: none; letter-spacing: 0; }
.du-btn {
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.07); color: #fff;
    font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; white-space: nowrap;
}
.du-btn:hover { background: rgba(255,255,255,.14); }
.du-btn.primary { background: var(--gradient-purple, linear-gradient(120deg,#7c5cff,#5b8cff)); border-color: transparent; }
.du-btn.danger { border-color: rgba(255,90,122,.45); color: #ff8aa0; }
.du-games { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.du-game {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: 16px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.04); color: #fff;
    font: inherit; font-size: 14px; font-weight: 650; cursor: pointer;
}
.du-game span { font-size: 22px; }
.du-game.on { border-color: var(--neo-accent, #8ab4ff); background: rgba(138,180,255,.12); }
.du-people { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; max-height: 240px; overflow-y: auto; }
.du-person, .du-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; }
.du-person:hover, .du-row:hover { background: rgba(255,255,255,.04); }
.du-person b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.du-av { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.du-av img { width: 100%; height: 100%; object-fit: cover; }
.du-row-ic { font-size: 20px; }
.du-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.du-row-t b { font-size: 14px; }
.du-row-t small { font-size: 12px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.du-row .du-btn + .du-btn { margin-left: -4px; }

.du-game-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 40px 14px 0; flex-wrap: wrap; }
.du-board { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 6px; margin: 0 auto; }
.du-board.du-ttt { width: min(300px, 100%); }
.du-board.du-c4 { width: min(420px, 100%); padding: 10px; border-radius: 18px; background: #1d3ea8; gap: 6px; }
.du-cell {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 14px;
    background: rgba(255,255,255,.06); color: #fff;
    font: inherit; font-size: clamp(28px, 9vw, 56px); font-weight: 800; line-height: 1;
    cursor: pointer; transition: background .15s, transform .15s;
}
.du-cell:not([disabled]):hover { background: rgba(255,255,255,.14); }
.du-cell[disabled] { cursor: default; }
.du-ttt .du-cell.m1 { color: #ff8aa0; }
.du-ttt .du-cell.m2 { color: #8ab4ff; }
.du-c4 .du-cell { border-radius: 50%; background: #0b1530; }
.du-c4 .du-cell:not([disabled]):hover { background: #16264d; }
.du-c4 .du-cell.m1 { background: #ff4757; }
.du-c4 .du-cell.m2 { background: #ffd43b; }
.du-cell.last { box-shadow: inset 0 0 0 3px rgba(255,255,255,.45); }
.du-cell.hot { animation: duHot 0.9s ease-in-out infinite alternate; box-shadow: 0 0 0 3px #5ef0c0; }
@keyframes duHot { to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .du-cell.hot { animation: none; } }
.du-actions { display: flex; justify-content: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

.du-pop {
    position: fixed; right: 16px; bottom: 16px; z-index: 99993;
    width: min(320px, calc(100vw - 32px));
    padding: 14px 16px; border-radius: 18px;
    border: 1px solid rgba(255,90,122,.45);
    background: rgba(18,18,26,.97); color: #fff;
    font-size: 14px; line-height: 1.45;
    box-shadow: 0 20px 50px rgba(0,0,0,.5);
    animation: duIn .35s ease-out;
}
.du-pop div { display: flex; gap: 8px; margin-top: 10px; }
@keyframes duIn { from { transform: translateY(20px); opacity: 0; } }
@media (max-width: 900px) { .du-pop { bottom: 84px; } }

/* ---------- ⌨️ Type Race (typerace.js) — shares the Duels pop-up shell ---------- */
.tr-entry { background: linear-gradient(120deg, rgba(52,232,176,.16), rgba(34,211,238,.1)); border-color: rgba(52,232,176,.4); }
.tr-box { width: min(720px, 100%); }
.tr-modes { display: flex; gap: 6px; margin-bottom: 12px; }
.tr-modes button {
    padding: 6px 14px; border-radius: 999px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: transparent; color: var(--neo-dim, rgba(235,235,245,.7));
    font: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
}
.tr-modes button.on { background: rgba(255,255,255,.12); color: #fff; }
.tr-live { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.tr-live span { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; border-radius: 14px; background: rgba(255,255,255,.04); }
.tr-live b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tr-live small { font-size: 11px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.tr-text {
    position: relative;
    max-height: 150px; overflow: hidden;
    padding: 14px 16px; border-radius: 16px;
    background: rgba(255,255,255,.03); border: 1px solid var(--neo-line, rgba(255,255,255,.08));
    font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 19px; line-height: 1.7;
    color: rgba(235,235,245,.38); user-select: none; overflow-wrap: break-word;
}
.tr-text .ok { color: #fff; }
.tr-text .bad { color: #ff5a7a; background: rgba(255,90,122,.15); border-radius: 3px; }
.tr-text .cur { box-shadow: inset 2px 0 0 #8ab4ff; animation: trBlink 1s steps(1) infinite; }
@keyframes trBlink { 50% { box-shadow: none; } }
.tr-input {
    width: 100%; box-sizing: border-box; margin-top: 10px;
    padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.06); color: #fff;
    font: inherit; font-size: 15px; outline: none;
}
.tr-input:focus { border-color: var(--neo-accent, #8ab4ff); }
.tr-result { margin-top: 12px; padding: 14px; border-radius: 14px; background: rgba(94,240,192,.1); border: 1px solid rgba(94,240,192,.35); text-align: center; }
.tr-result[hidden] { display: none; }
.tr-result b { display: block; font-size: 28px; }
.tr-result span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--neo-dim, rgba(235,235,245,.75)); }
.tr-row { display: flex; justify-content: center; margin-top: 10px; }
.tr-board { display: flex; flex-direction: column; gap: 3px; }
.tr-board-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 72px; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; font-size: 13.5px; }
.tr-board-row.me { background: rgba(138,180,255,.12); }
.tr-board-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tr-board-row small { color: var(--neo-dim, rgba(235,235,245,.6)); }
.tr-board-row em { font-style: normal; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .tr-live { grid-template-columns: repeat(2, 1fr); } .tr-text { font-size: 16px; } }

/* ==== ideas.css ==== */
/* ============================================================
   Tots — 💡 Idea Board (ideas.js)
   ============================================================ */
#ideasRoot { max-width: 820px; }
.id-form {
    padding: 14px;
    border-radius: 20px;
    border: 1px solid var(--neo-line, rgba(255,255,255,.08));
    background: var(--neo-surface, rgba(22,22,28,.55));
    -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
}
.id-form textarea {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 56px;
    padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.06); color: #fff;
    font: inherit; font-size: 14.5px; outline: none;
}
.id-form textarea:focus { border-color: var(--neo-accent, #8ab4ff); }
.id-form-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.id-form-row .send-btn { padding: 10px 18px !important; }
.id-muted { font-size: 12.5px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.id-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 16px 0 10px; }
.id-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.id-tabs button {
    padding: 7px 13px; border-radius: 999px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: transparent; color: var(--neo-dim, rgba(235,235,245,.7));
    font: inherit; font-size: 13px; cursor: pointer;
}
.id-tabs button.on { background: rgba(255,255,255,.12); color: #fff; }
.id-list { display: flex; flex-direction: column; gap: 8px; }
.id-card {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--neo-line, rgba(255,255,255,.08));
    background: var(--neo-surface, rgba(22,22,28,.55));
}
.id-card.st-done { border-color: rgba(52,232,176,.35); }
.id-card.st-planned, .id-card.st-doing { border-color: rgba(138,180,255,.35); }
.id-card.st-nope { opacity: .6; }
.id-vote {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    width: 52px; padding: 8px 0;
    border-radius: 14px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.04); color: var(--neo-dim, rgba(235,235,245,.7));
    font: inherit; cursor: pointer;
    transition: transform .15s;
}
.id-vote:hover { transform: translateY(-2px); }
.id-vote span { font-size: 12px; }
.id-vote b { font-size: 17px; color: #fff; font-variant-numeric: tabular-nums; }
.id-vote.on { border-color: #ffb443; background: rgba(255,180,67,.14); color: #ffc46b; }
.id-body { flex: 1; min-width: 0; }
.id-body p { margin: 2px 0 8px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.id-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.id-chip { padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-weight: 650; }
.st-done .id-chip { background: rgba(52,232,176,.18); color: #5ef0c0; }
.st-planned .id-chip, .st-doing .id-chip { background: rgba(138,180,255,.18); color: #8ab4ff; }
.id-sel {
    padding: 3px 8px; border-radius: 8px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 12px;
    color-scheme: dark;
}
.id-link { background: none; border: 0; padding: 0; color: var(--neo-accent, #8ab4ff); font: inherit; font-size: 12.5px; cursor: pointer; }
.id-link.red { color: #ff8aa0; }
.id-reply { margin-top: 10px; padding: 9px 12px; border-radius: 12px; background: rgba(138,180,255,.08); border-left: 3px solid var(--neo-accent, #8ab4ff); font-size: 13.5px; }
.id-empty { padding: 30px; text-align: center; color: var(--neo-dim, rgba(235,235,245,.6)); }

/* ==== bugreport.css ==== */
/* ============================================================
   Tots — 🐞 Bug report form (bugreport.js)
   ============================================================ */
.br-form {
    display: grid; gap: 12px;
    max-width: 980px; margin: 0 0 18px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid var(--neo-line, rgba(255,255,255,.08));
    background: var(--neo-surface, rgba(22,22,28,.55));
    -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
}
.br-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.br-field { display: grid; gap: 6px; }
.br-field > span { font-size: 13px; font-weight: 600; color: var(--neo-text, #f5f5f7); }
.br-field em { font-style: normal; font-weight: 400; color: var(--neo-faint, rgba(235,235,245,.4)); }
.br-input {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px; border-radius: 12px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.06); color: #fff;
    font: inherit; font-size: 14px; outline: none;
}
textarea.br-input { resize: vertical; min-height: 48px; }
select.br-input option { background: #16161c; color: #fff; }
.br-input:focus { border-color: var(--neo-accent, #8ab4ff); }
.br-sev { display: flex; gap: 6px; flex-wrap: wrap; }
.br-sev button {
    flex: 1 1 auto;
    padding: 9px 12px; border-radius: 999px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: transparent; color: var(--neo-dim, rgba(235,235,245,.7));
    font: inherit; font-size: 13px; cursor: pointer;
}
.br-sev button.on { color: #fff; border-color: var(--neo-accent, #8ab4ff); background: rgba(138,180,255,.16); }
.br-sev button[data-sev="broken"].on { border-color: #ff6b6b; background: rgba(255,107,107,.16); }
.br-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.br-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--neo-dim, rgba(235,235,245,.6)); cursor: pointer; }
.br-check small { color: var(--neo-faint, rgba(235,235,245,.35)); }
.br-foot .send-btn { padding: 10px 18px !important; }
.br-foot .send-btn:disabled { opacity: .5; cursor: wait; }
.br-list-title { margin: 0 0 8px; font-size: 15px; color: var(--neo-dim, rgba(235,235,245,.6)); }

/* Report cards inside the message list */
.br-card {
    display: grid; gap: 6px;
    margin-top: 4px; padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    border-left: 4px solid #8ab4ff;
    background: rgba(255,255,255,.04);
    max-width: 640px;
}
.br-msg .br-card { background: rgba(0,0,0,.28); }
.br-card.br-annoying { border-left-color: #f5b041; }
.br-card.br-broken { border-left-color: #ff6b6b; }
.br-c-head { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 600; }
.br-c-area { color: var(--neo-dim, rgba(235,235,245,.6)); font-weight: 500; }
.br-c-row { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: 14px; line-height: 1.4; }
.br-c-row b { font-weight: 600; color: var(--neo-dim, rgba(235,235,245,.6)); font-size: 12.5px; padding-top: 1px; }
.br-c-row span { white-space: pre-wrap; overflow-wrap: anywhere; }
.br-c-dev { font-size: 12px; color: var(--neo-faint, rgba(235,235,245,.4)); }
/* Editing would change the summary text but not the card, so reports can only be unsent */
.br-msg .msg-edit-btn { display: none !important; }

@media (max-width: 700px) {
    .br-row { grid-template-columns: 1fr; }
    .br-c-row { grid-template-columns: 1fr; gap: 2px; }
}
.br-c-st { margin-left: auto; font-weight: 600; }
.br-st-fixed { color: #5ef0c0; }
.br-st-doing { color: #ffc46b; }
.br-st-nope { color: var(--neo-dim, rgba(235,235,245,.6)); }
.br-c-note { font-size: 13px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.06); }

/* ---------- Admin → 🐞 Bugs (adminbugs.js) ---------- */
.ab-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 12px; }
.ab-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-right: auto; }
.ab-pills button {
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: transparent; color: var(--neo-dim, rgba(235,235,245,.7));
    font: inherit; font-size: 12.5px; cursor: pointer;
}
.ab-pills button.on { color: #fff; border-color: var(--neo-accent, #8ab4ff); background: rgba(138,180,255,.16); }
.ab-list { display: grid; gap: 10px; }
.ab-empty { padding: 18px 0; text-align: center; }
.ab-item {
    display: grid; gap: 6px; padding: 12px 14px;
    border-radius: 14px; border: 1px solid var(--neo-line, rgba(255,255,255,.08));
    border-left: 4px solid #8ab4ff; background: rgba(255,255,255,.035);
}
.ab-item.ab-annoying { border-left-color: #f5b041; }
.ab-item.ab-broken { border-left-color: #ff6b6b; }
.ab-item.ab-st-fixed, .ab-item.ab-st-nope { opacity: .65; }
.ab-item header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; }
.ab-sev { font-weight: 700; }
.ab-area { color: var(--neo-dim, rgba(235,235,245,.6)); }
.ab-st { padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 12px; }
.ab-when { margin-left: auto; font-size: 12px; color: var(--neo-faint, rgba(235,235,245,.4)); }
.ab-line { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: 14px; line-height: 1.4; }
.ab-line b { font-size: 12.5px; font-weight: 600; color: var(--neo-dim, rgba(235,235,245,.6)); padding-top: 1px; }
.ab-line span { white-space: pre-wrap; overflow-wrap: anywhere; }
.ab-note { font-size: 13px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.06); }
.ab-item footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.ab-who { background: none; border: 0; padding: 0; color: var(--neo-accent, #8ab4ff); font: inherit; font-size: 13px; cursor: pointer; }
.ab-dev { font-size: 12px; color: var(--neo-faint, rgba(235,235,245,.4)); }
.ab-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.ab-acts .ad-btn { padding: 5px 10px; font-size: 12.5px; }
@media (max-width: 700px) { .ab-line { grid-template-columns: 1fr; gap: 2px; } .ab-acts { margin-left: 0; } }

/* ✅ Recently fixed (changelog) */
.br-log { max-width: 980px; margin: 0 0 18px; display: grid; gap: 6px; }
.br-log-item {
    display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline;
    padding: 8px 12px; border-radius: 12px; background: rgba(52,232,176,.06); border: 1px solid rgba(52,232,176,.18); font-size: 13.5px;
}
.br-log-item span { color: var(--neo-dim, rgba(235,235,245,.6)); }
.br-log-item small { color: var(--neo-faint, rgba(235,235,245,.4)); }
@media (max-width: 700px) { .br-log-item { grid-template-columns: 1fr; gap: 2px; } }

/* ==== toolkit.css ==== */
/* ============================================================
   Tots — 🧰 Toolkit (toolkit.js)
   ============================================================ */
#tkRoot { max-width: 1000px; }
.tk-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tk-nav button, .tk-seg button {
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: transparent; color: var(--neo-dim, rgba(235,235,245,.7));
    font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.tk-nav button.on, .tk-seg button.on { background: rgba(255,255,255,.12); color: #fff; border-color: var(--neo-accent, #8ab4ff); }
.tk-panel {
    padding: 20px;
    border-radius: 22px;
    border: 1px solid var(--neo-line, rgba(255,255,255,.08));
    background: var(--neo-surface, rgba(22,22,28,.55));
    -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
}
.tk-panel h2 { margin: 0 0 14px; font-size: 19px; }
.tk-sub { margin: 20px 0 8px; font-size: 13px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.tk-muted { font-size: 13px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.tk-panel label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--neo-dim, rgba(235,235,245,.7)); }
.tk-panel label[hidden] { display: none; }
.tk-in {
    width: 100%; box-sizing: border-box; min-width: 0;
    padding: 10px 13px; border-radius: 12px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.06); color: #fff;
    font: inherit; font-size: 14.5px; outline: none;
    color-scheme: dark;
}
.tk-in:focus { border-color: var(--neo-accent, #8ab4ff); }
.tk-area { min-height: 170px; resize: vertical; line-height: 1.5; }
.tk-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tk-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.tk-span2 { grid-column: span 2; }
.tk-out { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.05); font-size: 15px; line-height: 1.5; }
.tk-out.good { background: rgba(52,232,176,.12); }
.tk-out.bad { background: rgba(255,90,122,.12); }
.tk-out.big { font-size: 18px; }
.tk-out b { font-size: 1.15em; }
.tk-letters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tk-letters div { display: flex; flex-direction: column; align-items: center; padding: 12px 6px; border-radius: 14px; background: rgba(255,255,255,.04); }
.tk-letters b { font-size: 24px; }
.tk-letters span { font-size: 12px; color: var(--neo-dim, rgba(235,235,245,.65)); text-align: center; }
.tk-btn {
    padding: 9px 16px; border-radius: 999px;
    border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16));
    background: rgba(255,255,255,.07); color: #fff;
    font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; white-space: nowrap;
}
.tk-btn:hover { background: rgba(255,255,255,.14); }
.tk-btn.primary { background: var(--gradient-purple, linear-gradient(120deg,#7c5cff,#5b8cff)); border-color: transparent; }
.tk-panel > .tk-btn { margin-top: 12px; }

/* GPA */
.tk-gpa-head, .tk-gpa-row { display: grid; grid-template-columns: minmax(0, 2fr) 90px 80px 120px 34px; gap: 8px; align-items: center; }
.tk-gpa-head { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--neo-faint, rgba(235,235,245,.4)); margin-bottom: 6px; }
.tk-gpa-row { margin-bottom: 6px; }
.tk-x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.06); color: #ff8aa0; cursor: pointer; }
.tk-gpa-out, .tk-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 14px; }
.tk-gpa-out div, .tk-stats div { display: flex; flex-direction: column; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.04); }
.tk-gpa-out b { font-size: 30px; font-weight: 800; }
.tk-stats b { font-size: 21px; font-weight: 800; }
.tk-gpa-out span, .tk-stats span { font-size: 12px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.tk-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; color: var(--neo-dim, rgba(235,235,245,.7)); }

/* Citation / units */
.tk-seg { display: inline-flex; gap: 6px; margin: 0 8px 8px 0; }
.tk-seg.tk-wrap { flex-wrap: wrap; display: flex; }
.tk-cite { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: #fff; color: #111; font-family: 'Times New Roman', Times, serif; font-size: 16px; line-height: 1.6; padding-left: 2.6em; text-indent: -1.6em; overflow-wrap: anywhere; }
.tk-cite .tk-muted { color: #666; font-family: inherit; }
.tk-conv { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.tk-conv .tk-in { flex: 1; min-width: 110px; }
.tk-inline { flex-direction: row !important; align-items: center; gap: 6px !important; white-space: nowrap; }
.tk-inline .tk-in { width: 70px; flex: none; }

/* Periodic table */
.tk-search { margin-bottom: 12px; max-width: 360px; }
.tk-pt-wrap { overflow-x: auto; padding-bottom: 6px; }
.tk-pt { display: grid; grid-template-columns: repeat(18, minmax(34px, 1fr)); grid-template-rows: repeat(7, auto) 10px auto auto; gap: 3px; min-width: 660px; }
.tk-el {
    position: relative; aspect-ratio: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 6px;
    color: #fff; font: inherit; cursor: pointer;
    transition: transform .12s, opacity .2s;
}
.tk-el small { position: absolute; top: 2px; left: 4px; font-size: 8.5px; opacity: .75; }
.tk-el b { font-size: 14px; }
.tk-el:hover, .tk-el.on { transform: scale(1.18); z-index: 2; border-color: #fff; }
.tk-el.dim { opacity: .15; }
.c-alkali { background: #b8394f; } .c-alkaline { background: #c2702b; } .c-transition { background: #3b5ba8; }
.c-post { background: #3f7f78; } .c-metalloid { background: #6e8a2e; } .c-nonmetal { background: #2f8f5b; }
.c-halogen { background: #8a5cc4; } .c-noble { background: #7b3fa0; } .c-lanthanide { background: #a8478a; }
.c-actinide { background: #9a3d6a; } .c-unknown { background: #4a4f5c; }
.tk-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.tk-legend span { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; color: #fff; }
.tk-el-info { display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.04); min-height: 70px; }
.tk-el-info h3 { margin: 0 0 4px; font-size: 20px; }
.tk-el-info p { margin: 0 0 3px; font-size: 13.5px; color: var(--neo-dim, rgba(235,235,245,.75)); }
.tk-el-big { position: relative; flex: 0 0 auto; width: 76px; height: 76px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.tk-el-big b { font-size: 32px; }
.tk-el-big small { position: absolute; top: 5px; left: 8px; font-size: 12px; }

/* Picker */
.tk-pick-out { margin-top: 14px; }
.tk-winner { padding: 22px; border-radius: 18px; background: rgba(255,180,67,.12); border: 1px solid rgba(255,180,67,.4); text-align: center; font-size: 28px; font-weight: 800; }
.tk-winner.rolling { opacity: .6; }
.tk-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.tk-teams div { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.05); }
.tk-teams b { margin-bottom: 4px; color: var(--neo-accent, #8ab4ff); }
.tk-teams span { font-size: 14px; }

@media (max-width: 700px) {
    .tk-grid3, .tk-grid2 { grid-template-columns: 1fr; }
    .tk-span2 { grid-column: auto; }
    .tk-letters { grid-template-columns: repeat(2, 1fr); }
    .tk-gpa-head { display: none; }
    .tk-gpa-row { grid-template-columns: 1fr 1fr; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.03); }
    .tk-gpa-row .tk-x { justify-self: end; }
}

/* ==== countdown.css ==== */
/* ============================================================
   Tots — ⏳ Countdowns Home tile (countdown.js)
   ============================================================ */
.neo-countdown { grid-column: span 3; }
.cd-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.cd-emoji { font-size: 44px; line-height: 1; }
.cd-hero > div { display: flex; flex-direction: column; min-width: 0; }
.cd-big { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.cd-unit { font-size: 12px; color: var(--neo-dim, rgba(235,235,245,.6)); margin-top: 2px; }
.cd-title { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-date { font-size: 12px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.cd-empty { margin: 4px 0 10px; font-size: 13.5px; color: var(--neo-dim, rgba(235,235,245,.65)); }
.cd-list { display: flex; flex-direction: column; gap: 2px; }
.cd-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; font-size: 13.5px; }
.cd-row:hover { background: rgba(255,255,255,.04); }
.cd-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cd-row em { font-style: normal; font-size: 12px; }
.cd-row small { color: var(--neo-dim, rgba(235,235,245,.6)); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cd-row-top small { flex: 1; }
.cd-del { width: 24px; height: 24px; flex: 0 0 auto; border: 0; border-radius: 50%; background: transparent; color: var(--neo-faint, rgba(235,235,245,.4)); cursor: pointer; font-size: 11px; }
.cd-del:hover { background: rgba(255,90,122,.15); color: #ff8aa0; }
.cd-add { margin-top: 8px; padding: 7px 14px; border-radius: 999px; border: 1px dashed var(--neo-line-hi, rgba(255,255,255,.2)); background: transparent; color: var(--neo-dim, rgba(235,235,245,.75)); font: inherit; font-size: 13px; cursor: pointer; }
.cd-add:hover { color: #fff; border-style: solid; }
.cd-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cd-emojis { display: flex; flex-wrap: wrap; gap: 4px; }
.cd-emojis button { width: 32px; height: 32px; border-radius: 10px; border: 1px solid transparent; background: rgba(255,255,255,.05); font-size: 17px; cursor: pointer; }
.cd-emojis button.on { border-color: var(--neo-accent, #8ab4ff); background: rgba(138,180,255,.15); }
.cd-in { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16)); background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 14px; outline: none; color-scheme: dark; }
.cd-in:focus { border-color: var(--neo-accent, #8ab4ff); }
.cd-check { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.cd-form-row { display: flex; gap: 6px; }
.cd-save, .cd-cancel { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--neo-line-hi, rgba(255,255,255,.16)); background: rgba(255,255,255,.07); color: #fff; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.cd-save { background: var(--gradient-purple, linear-gradient(120deg,#7c5cff,#5b8cff)); border-color: transparent; }
@media (max-width: 1100px) { .neo-countdown { grid-column: span 3; } }
@media (max-width: 900px) { .neo-countdown { grid-column: span 2 !important; } }

/* ==== wrapped.css ==== */
/* ============================================================
   Tots — 📊 My Wrapped (wrapped.js) + ⌨️ shortcuts list (shortcuts.js)
   ============================================================ */
.wr-open {
    margin-top: 10px;
    padding: 9px 16px; border-radius: 999px; border: 0;
    background: linear-gradient(120deg, #ff5fa2, #a06bff, #22d3ee); color: #fff;
    font: inherit; font-size: 14px; font-weight: 750; cursor: pointer;
    box-shadow: 0 8px 24px rgba(160,107,255,.35);
}
.wr-open:hover { transform: translateY(-1px); }
.wr-modal { position: fixed; inset: 0; z-index: 99995; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.75); }
.wr-modal[hidden] { display: none; }
.wr-story {
    position: relative; overflow: hidden;
    width: min(400px, 100%); height: min(700px, calc(100vh - 32px));
    border-radius: 28px; color: #fff;
    box-shadow: 0 30px 90px rgba(0,0,0,.6);
    transition: background .6s;
}
.wr-story.g1 { background: radial-gradient(circle at 20% 10%, #ff5fa2, transparent 55%), radial-gradient(circle at 90% 90%, #22d3ee, transparent 50%), #2a1250; }
.wr-story.g2 { background: linear-gradient(160deg, #0ea5e9, #6366f1 60%, #312e81); }
.wr-story.g3 { background: linear-gradient(160deg, #f59e0b, #ef4444 65%, #7f1d1d); }
.wr-story.g4 { background: linear-gradient(160deg, #f97316, #db2777 60%, #4c0519); }
.wr-story.g5 { background: linear-gradient(160deg, #10b981, #0d9488 55%, #134e4a); }
.wr-story.g6 { background: linear-gradient(160deg, #8b5cf6, #4f46e5 60%, #1e1b4b); }
.wr-story.g7 { background: radial-gradient(circle at 50% 30%, #facc15, transparent 50%), linear-gradient(160deg, #ec4899, #7c3aed); }
.wr-bars { position: absolute; top: 12px; left: 14px; right: 54px; z-index: 3; display: flex; gap: 4px; }
.wr-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; position: relative; }
.wr-bars i.done { background: #fff; }
.wr-bars i.now::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: wrFill linear forwards; animation-duration: inherit; }
@keyframes wrFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.wr-x { position: absolute; top: 6px; right: 10px; z-index: 4; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(0,0,0,.25); color: #fff; font-size: 15px; cursor: pointer; }
.wr-tap { position: absolute; top: 40px; bottom: 120px; z-index: 1; border: 0; background: transparent; cursor: pointer; }
.wr-tap.prev { left: 0; width: 30%; }
.wr-tap.next { right: 0; width: 70%; }
.wr-slide { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; }
.wr-slide button { pointer-events: auto; }
.wr-center { margin: auto; padding: 50px 28px; text-align: center; animation: wrIn .5s ease-out; }
@keyframes wrIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.wr-center h1 { margin: 6px 0 12px; font-size: 32px; line-height: 1.1; letter-spacing: -0.03em; }
.wr-center p { margin: 8px 0; font-size: 16px; line-height: 1.45; opacity: .95; }
.wr-kicker { font-size: 13px !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .85 !important; }
.wr-num { font-size: 88px; font-weight: 900; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 6px 30px rgba(0,0,0,.25); }
.wr-num small { font-size: 26px; letter-spacing: 0; }
.wr-big { font-size: 34px !important; font-weight: 900; }
.wr-big small { font-size: 15px; font-weight: 500; opacity: .8; }
.wr-emoji { font-size: 64px; line-height: 1.1; }
.wr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.wr-grid div { display: flex; flex-direction: column; align-items: center; padding: 12px 8px; border-radius: 16px; background: rgba(0,0,0,.18); }
.wr-grid span { font-size: 22px; }
.wr-grid b { font-size: 26px; font-weight: 900; }
.wr-grid small { font-size: 11.5px; opacity: .85; }
.wr-summary { padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,.22); font-size: 14px !important; }
.wr-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.wr-btn { padding: 11px 18px; border-radius: 999px; border: 0; background: #fff; color: #2a1250; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.wr-btn.ghost { background: rgba(255,255,255,.18); color: #fff; }
.wr-spin { width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 50%; border: 4px solid rgba(255,255,255,.25); border-top-color: #fff; animation: wrSpin 0.8s linear infinite; }
@keyframes wrSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wr-center { animation: none; } .wr-bars i.now::after { animation: none; transform: none; } }

/* Shortcuts list */
.kb-box { width: min(480px, 100%); }
.kb-list { display: flex; flex-direction: column; gap: 2px; }
.kb-list div { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 10px; font-size: 14px; }
.kb-list div:nth-child(odd) { background: rgba(255,255,255,.03); }
.kb-list span { width: 110px; flex: 0 0 auto; }
.kb-list kbd, .kb-settings kbd {
    display: inline-block; min-width: 20px; padding: 2px 7px;
    border-radius: 6px; border: 1px solid rgba(255,255,255,.2); border-bottom-width: 2px;
    background: rgba(255,255,255,.08); color: #fff;
    font: 600 12.5px/1.4 ui-monospace, Menlo, Consolas, monospace; text-align: center;
}
.kb-muted { margin: 12px 0 0; font-size: 12.5px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.kb-settings { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }

/* ==== turbo.css ==== */
/* ============================================================
   Tots — ⚡ Turbo (turbo.js)
   ============================================================ */
.tb-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 6px; vertical-align: -3px;
    font-size: 11px; line-height: 1; font-style: normal;
    background: linear-gradient(135deg, #5b8cff, #8b5cf6);
    box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset;
}
.tb-badge.tb-turbo { background: linear-gradient(135deg, #ff73fa, #c14bff 50%, #5b8cff); box-shadow: 0 0 10px rgba(193,75,255,.55); }

/* Full Turbo: animated rainbow name + glowing avatar ring wherever messages show */
.tb-msg-turbo .message-author, .tb-mem-turbo .dc-mem-t b {
    background: linear-gradient(90deg, #ff73fa, #c14bff, #5b8cff, #34e8b0, #ff73fa) 0 0 / 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent !important;
    animation: tbRainbow 6s linear infinite;
}
.tb-msg-turbo .message-author .tb-badge, .tb-mem-turbo .dc-mem-t b .tb-badge, .tb-msg-turbo .message-author .dc-crown, .tb-mem-turbo .dc-mem-t b .dc-crown { -webkit-text-fill-color: #fff; color: #fff !important; }
@keyframes tbRainbow { to { background-position: 300% 0; } }
.tb-msg-turbo .message-avatar, .tb-mem-turbo .dc-mem-av img, .tb-mem-turbo .dc-mem-av .dc-initial {
    box-shadow: 0 0 0 2px #1a1a1e, 0 0 0 4px #c14bff, 0 0 14px rgba(193,75,255,.6) !important;
    animation: tbRing 2.6s ease-in-out infinite;
}
@keyframes tbRing { 50% { box-shadow: 0 0 0 2px #1a1a1e, 0 0 0 4px #5b8cff, 0 0 18px rgba(91,140,255,.7) !important; } }
@media (prefers-reduced-motion: reduce) {
    .tb-msg-turbo .message-author, .tb-mem-turbo .dc-mem-t b, .tb-msg-turbo .message-avatar, .tb-mem-turbo .dc-mem-av img { animation: none; }
}

/* Profile card */
.tb-prof .rw-modal-card, .rw-modal-card.tb-prof { box-shadow: 0 0 0 1px rgba(193,75,255,.45), 0 0 50px rgba(193,75,255,.35) !important; }
.tb-prof-turbo .rw-prof-banner { position: relative; overflow: hidden; }
.tb-prof-turbo .rw-prof-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); background-size: 250% 100%; animation: tbShine 3.5s ease-in-out infinite; }
@keyframes tbShine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.tb-prof-line { display: inline-block; margin-right: 10px; padding: 2px 9px; border-radius: 999px; background: rgba(193,75,255,.16); color: #e2b4ff; font-size: 12px; font-weight: 700; }
.tb-gift-btn { background: linear-gradient(120deg, #ff73fa33, #5b8cff33) !important; }

/* Rewards header button */
.tb-open {
    margin: 10px 0 0 8px;
    padding: 9px 16px; border-radius: 999px; border: 0;
    background: linear-gradient(120deg, #c14bff, #5b8cff); color: #fff;
    font: inherit; font-size: 14px; font-weight: 750; cursor: pointer;
    box-shadow: 0 8px 24px rgba(193,75,255,.35);
}

/* Store pop-up */
.tb-modal .tb-box {
    position: relative;
    width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
    border-radius: 24px; background: #121216; color: #fff;
    border: 1px solid rgba(193,75,255,.35);
    box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 60px rgba(193,75,255,.18);
}
.tb-modal .du-x { z-index: 3; }
.tb-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 28px 24px 22px; background: linear-gradient(120deg, #3b1263, #1d2a6b); }
.tb-hero-glow { position: absolute; inset: -40%; background: radial-gradient(circle at 30% 40%, rgba(255,115,250,.35), transparent 40%), radial-gradient(circle at 75% 60%, rgba(91,140,255,.35), transparent 40%); animation: tbFloat 8s ease-in-out infinite alternate; }
@keyframes tbFloat { to { transform: translate(6%, 4%) rotate(8deg); } }
.tb-logo { position: relative; font-size: 46px; filter: drop-shadow(0 0 16px rgba(255,115,250,.8)); }
.tb-hero > div { position: relative; flex: 1; }
.tb-hero h2 { margin: 0; font-size: 26px; letter-spacing: -0.02em; }
.tb-hero p { margin: 4px 0 0; font-size: 14px; color: rgba(255,255,255,.8); }
.tb-wallet { position: relative; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.35); font-weight: 800; font-size: 14px; margin-right: 34px; white-space: nowrap; }
.tb-tabs { display: flex; gap: 6px; padding: 14px 20px 0; }
.tb-tabs button { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: rgba(235,235,245,.75); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.tb-tabs button.on { background: rgba(193,75,255,.18); border-color: #c14bff; color: #fff; }
.tb-active { margin: 14px 20px 0; padding: 10px 14px; border-radius: 12px; background: rgba(52,232,176,.1); border: 1px solid rgba(52,232,176,.35); font-size: 14px; }
.tb-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 20px 6px; }
.tb-plan { display: flex; flex-direction: column; padding: 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.tb-plan-turbo { border-color: rgba(193,75,255,.55); background: linear-gradient(180deg, rgba(193,75,255,.14), rgba(91,140,255,.06)); }
.tb-plan-h { display: flex; align-items: center; justify-content: space-between; font-size: 17px; }
.tb-plan-h em { font-style: normal; font-size: 10.5px; font-weight: 900; letter-spacing: .1em; padding: 3px 8px; border-radius: 999px; background: linear-gradient(120deg, #ff73fa, #c14bff); }
.tb-price { margin: 10px 0 8px; font-size: 30px; font-weight: 900; letter-spacing: -0.03em; }
.tb-price span { font-size: 13px; font-weight: 600; color: rgba(235,235,245,.6); letter-spacing: 0; }
.tb-plan ul { flex: 1; margin: 0 0 14px; padding: 0; list-style: none; }
.tb-plan li { padding: 5px 0; font-size: 13.5px; color: rgba(235,235,245,.85); border-bottom: 1px solid rgba(255,255,255,.05); }
.tb-buy {
    width: 100%; padding: 12px 16px; border-radius: 12px; border: 0;
    background: linear-gradient(120deg, #c14bff, #5b8cff); color: #fff;
    font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
    box-shadow: 0 8px 24px rgba(193,75,255,.3);
}
.tb-plan-basic .tb-buy { background: #5b8cff; box-shadow: none; }
.tb-buy[disabled] { opacity: .45; cursor: default; box-shadow: none; }
.tb-gift-link { margin-top: 8px; padding: 6px; border: 0; background: transparent; color: #e2b4ff; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.tb-fine { margin: 8px 20px 20px; font-size: 12px; color: rgba(235,235,245,.5); text-align: center; }
.tb-gift { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 20px; }
.tb-gift-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tb-gift-tiers button { padding: 11px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.tb-gift-tiers button.on { border-color: #c14bff; background: rgba(193,75,255,.16); }
.tb-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; }
.tb-person { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); color: #fff; font: inherit; text-align: left; cursor: pointer; flex-wrap: wrap; }
.tb-person.on { border-color: #c14bff; background: rgba(193,75,255,.14); }
.tb-person b { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-person small { width: 100%; padding-left: 38px; margin-top: -4px; font-size: 11px; color: rgba(235,235,245,.55); }
.tb-person small.tb-has { color: #e2b4ff; }
.tb-av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.tb-av img { width: 100%; height: 100%; object-fit: cover; }
.tb-celebrate { padding: 34px 26px 26px; text-align: center; }
.tb-celebrate h2 { margin: 10px 0 8px; font-size: 24px; }
.tb-celebrate p { color: rgba(235,235,245,.8); }
.tb-gift-box { font-size: 80px; animation: tbBounce 1.2s ease-in-out infinite; }
@keyframes tbBounce { 50% { transform: translateY(-10px) rotate(-6deg); } }
.tb-gift-note { font-style: italic; font-size: 16px !important; color: #fff !important; }

@media (max-width: 600px) { .tb-plans, .tb-gift-tiers { grid-template-columns: 1fr; } .tb-wallet { display: none; } }

/* ==== ranks.css ==== */
/* Tots — Ranks (ranks.js). Badge next to names, profile line, ladder pop-up. */

/* ---- badge next to a name in chat / profile ---- */
.rk-badge {
    display: inline-block;
    font-size: .85em;
    line-height: 1;
    vertical-align: baseline;
    cursor: help;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

/* ---- profile card ---- */
.rk-prof-line {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 10px;
    font-weight: 700;
    color: var(--rk, #9aa4c7);
}
.rk-prof-line small { font-weight: 500; opacity: .75; color: inherit; }

.rk-admin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
}
.rk-admin-l { font-size: 12px; opacity: .7; font-weight: 700; }
.rk-admin .rw-btn { padding: 3px 9px; font-size: 13px; line-height: 1.1; }

/* ---- Ranks button in the Rewards header ---- */
.rk-open {
    padding: 8px 15px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffb347, #ffd84d);
    color: #2a1d00;
    font: inherit;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(255, 184, 71, .3);
}
.rk-open:hover { filter: brightness(1.07); }

/* ---- pop-up ---- */
.rk-modal { display: grid; place-items: center; }
.rk-box {
    position: relative;
    width: min(560px, 94vw);
    max-height: 88vh;
    overflow: auto;
    padding: 24px;
    border-radius: 20px;
    background: #141829;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
    color: #e8ebff;
}
.rk-x {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #e8ebff; font-size: 15px; cursor: pointer;
}
.rk-box h2 { margin: 0 0 4px; font-size: 22px; }
.rk-box h3 { margin: 22px 0 10px; font-size: 15px; opacity: .85; }
.rk-sub { margin: 0 0 16px; font-size: 13.5px; opacity: .7; }

.rk-me {
    display: flex; align-items: center; gap: 12px;
    padding: 14px; margin-bottom: 18px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--rk) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--rk) 45%, transparent);
}
.rk-me-i { font-size: 30px; }
.rk-me-t { display: flex; flex-direction: column; }
.rk-me-t b { font-size: 17px; color: var(--rk); }
.rk-me-t small { opacity: .75; font-size: 12.5px; }

.rk-ladder { display: flex; flex-direction: column; gap: 6px; }
.rk-step {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid transparent;
}
.rk-step.on {
    background: color-mix(in srgb, var(--rk) 14%, transparent);
    border-color: color-mix(in srgb, var(--rk) 50%, transparent);
}
.rk-step-i { font-size: 20px; width: 26px; text-align: center; }
.rk-step-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rk-step-t b { font-size: 14px; color: var(--rk); }
.rk-step-t small { font-size: 11.5px; opacity: .6; }
.rk-step-n {
    font-size: 12px; font-weight: 700; opacity: .65;
    padding: 2px 9px; border-radius: 999px;
    background: rgba(255, 255, 255, .07);
}
.rk-step-you {
    font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: var(--rk);
}

.rk-list { display: flex; flex-direction: column; gap: 3px; }
.rk-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 10px; cursor: pointer;
}
.rk-row:hover { background: rgba(255, 255, 255, .06); }
.rk-row.me { background: rgba(91, 140, 255, .14); }
.rk-row-n { width: 22px; font-size: 12px; opacity: .5; font-weight: 700; }
.rk-row-b { font-size: 17px; }
.rk-row-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-row-r { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; font-weight: 700; color: var(--rk, #9aa4c7); }
.rk-row-r small { font-weight: 500; opacity: .55; font-size: 11px; color: #e8ebff; }

@media (max-width: 560px) {
    .rk-box { padding: 18px 15px; border-radius: 16px; }
    .rk-step-n { display: none; }
}

/* ==== avatars.css ==== */
/* Tots — Avatar maker (avatars.js) */

.av-modal { display: grid; place-items: center; }
.av-box {
    position: relative;
    width: min(540px, 94vw);
    max-height: 90vh;
    overflow: auto;
    padding: 22px;
    border-radius: 20px;
    background: #141829;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
    color: #e8ebff;
}
.av-x {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #e8ebff; font-size: 15px; cursor: pointer;
}
.av-box h2 { margin: 0 0 4px; font-size: 21px; }
.av-sub { margin: 0 0 14px; font-size: 13px; opacity: .7; }

.av-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.av-tab {
    flex: 1;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    color: #e8ebff; font: inherit; font-size: 13.5px; font-weight: 700;
    cursor: pointer;
}
.av-tab.on { background: var(--gradient-purple, linear-gradient(135deg, #5b8cff, #c14bff)); border-color: transparent; }

.av-styles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.av-chip {
    padding: 5px 11px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: #e8ebff; font: inherit; font-size: 12px; cursor: pointer;
}
.av-chip.on { background: rgba(193, 75, 255, .28); border-color: rgba(193, 75, 255, .6); font-weight: 700; }

.av-seedrow { display: flex; gap: 8px; margin-bottom: 12px; }
.av-seed {
    flex: 1; min-width: 0;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: rgba(0, 0, 0, .25);
    color: #e8ebff; font: inherit; font-size: 13.5px;
}
.av-dice {
    width: 42px; border: 0; border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #e8ebff; font-size: 16px; cursor: pointer;
}

.av-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    margin-bottom: 14px;
}
.av-cell {
    padding: 0; border: 2px solid transparent; border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    cursor: pointer; overflow: hidden; aspect-ratio: 1;
}
.av-cell img { width: 100%; height: 100%; display: block; object-fit: cover; }
.av-cell:hover { background: rgba(255, 255, 255, .1); }
.av-cell.on { border-color: #c14bff; box-shadow: 0 0 0 3px rgba(193, 75, 255, .25); }

.av-foot { display: flex; gap: 9px; }
.av-shuffle {
    padding: 11px 15px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 11px;
    background: rgba(255, 255, 255, .05); color: #e8ebff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.av-save {
    flex: 1; padding: 11px 15px; border: 0; border-radius: 11px;
    background: var(--gradient-purple, linear-gradient(135deg, #5b8cff, #c14bff));
    color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
}
.av-save[disabled] { opacity: .45; cursor: default; }

@media (max-width: 520px) {
    .av-grid { grid-template-columns: repeat(3, 1fr); }
    .av-box { padding: 18px 14px; }
}

/* ==== chatimages.css ==== */
/* Tots — pictures in chat (chatimages.js) */

.cb-img-btn {
    background: none;
    border: 0;
    font-size: 18px;
    line-height: 1;
    padding: 6px 8px;
    cursor: pointer;
    opacity: .8;
    border-radius: 8px;
}
.cb-img-btn:hover { opacity: 1; background: rgba(255, 255, 255, .08); }

/* the picture inside a message bubble */
img.cb-img {
    display: block;
    max-width: min(320px, 70vw);
    max-height: 320px;
    width: auto;
    height: auto;
    margin: 6px 0 4px;
    border-radius: 12px;
    cursor: zoom-in;
    background: rgba(255, 255, 255, .05);
    object-fit: contain;
}
.dm-bubble img.cb-img { max-width: min(260px, 62vw); }

/* tap to enlarge */
.cb-img-view {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, .88);
    cursor: zoom-out;
    animation: cbImgIn .14s ease;
}
.cb-img-view img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
@keyframes cbImgIn { from { opacity: 0; } to { opacity: 1; } }

/* AI tutor: the picture you attached, before you send it */
.cb-ai-attach {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(91, 140, 255, .14);
    border: 1px solid rgba(91, 140, 255, .35);
    font-size: 12.5px;
}
.cb-ai-attach img { width: 40px; height: 40px; border-radius: 7px; object-fit: cover; }
.cb-ai-attach button {
    margin-left: auto;
    border: 0;
    background: rgba(255, 255, 255, .12);
    color: inherit;
    border-radius: 7px;
    padding: 4px 9px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
}

/* ==== customize.css ==== */
/* Tots — custom mouse, nav bar editor (customize.js), connection check (netcheck.js) */

.cb-cz-note { margin: 0 0 11px; font-size: 12.5px; opacity: .7; }

/* ---- hidden nav buttons ---- */
.nav-btn.cb-nav-hidden { display: none !important; }

/* ---- cursor picker ---- */
.cb-cur-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-bottom: 12px; }
.cb-cur {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 12px 6px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    color: inherit; font: inherit; font-size: 12px; cursor: pointer;
}
.cb-cur.on { border-color: #c14bff; background: rgba(193, 75, 255, .16); font-weight: 700; }
.cb-cur-prev { width: 26px; height: 26px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.cb-cur-default { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M4 2l13 12h-6l3 7-2.6 1.2-3-7-4.4 3.6z" fill="%23fff" stroke="%23000" stroke-width="1.2"/></svg>'); }
.cb-cur-dot { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="5" fill="%23fff" stroke="%23000" stroke-width="1.5"/></svg>'); }
.cb-cur-glow { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"><circle cx="14" cy="14" r="11" fill="rgba(193,75,255,.28)"/><circle cx="14" cy="14" r="5" fill="%23c14bff"/><circle cx="14" cy="14" r="2" fill="%23fff"/></svg>'); }
.cb-cur-neon { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"><path d="M3 2l17 8-7 2.5L10.5 20z" fill="%235b8cff" stroke="%23fff" stroke-width="1.6" stroke-linejoin="round"/></svg>'); }
.cb-cur-retro { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M3 1l14 13h-6l3 7-3 1.5-3-7-5 4z" fill="%23fff" stroke="%23000" stroke-width="1.4" stroke-linejoin="round"/></svg>'); }
.cb-cur-cross { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"><g stroke="%235fd38d" stroke-width="2" stroke-linecap="round"><path d="M13 2v7M13 17v7M2 13h7M17 13h7"/></g><circle cx="13" cy="13" r="2" fill="%235fd38d"/></svg>'); }
.cb-cur-heart { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M12 21s-8-5.2-8-10.3A4.7 4.7 0 0 1 12 7a4.7 4.7 0 0 1 8 3.7C20 15.8 12 21 12 21z" fill="%23ff73fa" stroke="%23fff" stroke-width="1.3"/></svg>'); }

.cb-cz-row { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }

/* sparkle trail */
.cb-trail-dot {
    position: fixed;
    width: 7px; height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff, #c14bff 60%, transparent);
    pointer-events: none;
    z-index: 99999;
    animation: cbTrail .6s ease-out forwards;
}
@keyframes cbTrail { to { opacity: 0; transform: scale(.3) translateY(6px); } }

/* ---- nav editor ---- */
.cb-nav-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; max-height: 340px; overflow: auto; }
.cb-nav-sec { font-size: 10.5px; letter-spacing: .08em; opacity: .5; font-weight: 800; margin: 9px 0 3px; }
.cb-nav-row { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 9px; background: rgba(255, 255, 255, .04); }
.cb-nav-row.off { opacity: .42; }
.cb-nav-ic { width: 20px; text-align: center; }
.cb-nav-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-nav-name small { opacity: .55; font-size: 11px; }
.cb-nav-b {
    border: 0; border-radius: 7px; background: rgba(255, 255, 255, .09);
    color: inherit; width: 26px; height: 24px; font-size: 11px; cursor: pointer;
}
.cb-nav-b[disabled] { opacity: .25; cursor: default; }
.cb-nav-eye { width: 30px; font-size: 13px; }
.cb-nav-reset, .nc-open {
    padding: 9px 15px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px;
    background: rgba(255, 255, 255, .06); color: inherit; font: inherit; font-size: 13px; cursor: pointer;
}

/* ---- connection check ---- */
.nc-modal { display: grid; place-items: center; }
.nc-box {
    position: relative; width: min(560px, 94vw); max-height: 88vh; overflow: auto;
    padding: 22px; border-radius: 20px; background: #141829;
    border: 1px solid rgba(255, 255, 255, .12); color: #e8ebff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.nc-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #e8ebff; cursor: pointer; }
.nc-box h2 { margin: 0 0 4px; font-size: 20px; }
.nc-sub { margin: 0 0 14px; font-size: 13px; opacity: .7; }
.nc-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); margin-bottom: 5px; }
.nc-row.ok { background: rgba(95, 211, 141, .12); }
.nc-row.bad { background: rgba(255, 95, 109, .14); }
.nc-dot { font-size: 14px; }
.nc-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.nc-name small { font-weight: 400; opacity: .62; font-size: 11.5px; }
.nc-res { font-size: 11.5px; opacity: .75; white-space: nowrap; }
.nc-verdict { margin-top: 14px; padding: 14px; border-radius: 12px; background: rgba(91, 140, 255, .12); border: 1px solid rgba(91, 140, 255, .3); }
.nc-verdict h3 { margin: 0 0 6px; font-size: 15px; }
.nc-verdict p { margin: 0; font-size: 13px; opacity: .85; line-height: 1.5; }

@media (max-width: 560px) { .nc-res { display: none; } .nc-box { padding: 18px 14px; } }

/* ==== turboperks.css ==== */
/* ============================================================
   Tots — ⚡ Turbo perks (turboperks.js)
   ============================================================ */

/* ---------- 🎭 Avatar decorations ---------- */
.tbd { position: relative; overflow: visible !important; }
#general.dc-on .message .message-avatar.tbd { overflow: visible !important; }
.tbd > img, .tbd > .dc-initial, .tbd > .dch-init, .tbd > span:not(.tbd-icon) { border-radius: 50%; }
.tbd-icon {
    position: absolute; z-index: 2; pointer-events: none;
    top: -9px; right: -9px; font-size: 18px; line-height: 1;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
    animation: tbdBob 2.4s ease-in-out infinite;
}
.dc-mem-av .tbd-icon, .dch-av .tbd-icon { top: -8px; right: -8px; font-size: 14px; }
.tbd-crown .tbd-icon, .tbd-headphones .tbd-icon, .tbd-halo .tbd-icon, .tbd-cat .tbd-icon, .tbd-rainbow .tbd-icon { right: auto; left: 50%; top: -14px; transform: translateX(-50%); animation-name: tbdBobC; }
.dc-mem-av.tbd-crown .tbd-icon, .dc-mem-av.tbd-headphones .tbd-icon, .dc-mem-av.tbd-halo .tbd-icon, .dc-mem-av.tbd-cat .tbd-icon, .dc-mem-av.tbd-rainbow .tbd-icon,
.dch-av.tbd-crown .tbd-icon, .dch-av.tbd-headphones .tbd-icon, .dch-av.tbd-halo .tbd-icon, .dch-av.tbd-cat .tbd-icon, .dch-av.tbd-rainbow .tbd-icon { top: -11px; }
.tbd-flames .tbd-icon { top: auto; bottom: -8px; right: -6px; }
@keyframes tbdBob { 50% { transform: translateY(-2px) rotate(-6deg); } }
@keyframes tbdBobC { 50% { transform: translateX(-50%) translateY(-2px); } }
/* Ring colour per decoration */
.tbd { --tbd-ring: transparent; }
.tbd-crown { --tbd-ring: #ffd166; } .tbd-flames { --tbd-ring: #ff7a2f; } .tbd-frost { --tbd-ring: #7fe3ff; } .tbd-sakura { --tbd-ring: #ff9ccf; }
.tbd-cat { --tbd-ring: #f5b971; } .tbd-halo { --tbd-ring: #fff6c2; } .tbd-devil { --tbd-ring: #ff3b5c; } .tbd-ghost { --tbd-ring: #d6dcff; }
.tbd-rocket { --tbd-ring: #5b8cff; } .tbd-bolt { --tbd-ring: #c14bff; } .tbd-stars { --tbd-ring: #fff; } .tbd-headphones { --tbd-ring: #34e8b0; }
.tbd > img, .tbd > .dc-initial, .tbd > .dch-init { box-shadow: 0 0 0 2px var(--tbd-ring), 0 0 12px var(--tbd-ring); }
.tbd-rainbow > img, .tbd-rainbow > .dc-initial, .tbd-rainbow > .dch-init { animation: tbdHue 3s linear infinite; box-shadow: 0 0 0 2px #ff73fa, 0 0 12px #5b8cff; }
@keyframes tbdHue { to { filter: hue-rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tbd-icon, .tbd-rainbow > img { animation: none !important; } }

/* ---------- 🌈 Name styles (beat turbo.css's default rainbow) ---------- */
.tbn { -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; background-size: 300% 100% !important; animation: tbRainbow 6s linear infinite !important; }
.tbn .tb-badge, .tbn .dc-crown { -webkit-text-fill-color: #fff !important; color: #fff !important; }
.tbn-ocean { background-image: linear-gradient(90deg, #22d3ee, #3b82f6, #22d3ee) !important; }
.tbn-gold { background-image: linear-gradient(90deg, #b8860b, #ffd166, #fff3b0, #ffd166, #b8860b) !important; }
.tbn-rainbow { background-image: linear-gradient(90deg, #ff73fa, #c14bff, #5b8cff, #34e8b0, #ffd166, #ff73fa) !important; }
.tbn-fire { background-image: linear-gradient(90deg, #ff3b30, #ff9500, #ffd60a, #ff9500, #ff3b30) !important; }
.tbn-galaxy { background-image: linear-gradient(90deg, #7c3aed, #ec4899, #3b82f6, #7c3aed) !important; }
.tbn-neon { background-image: linear-gradient(90deg, #39ff14, #b6ff00, #39ff14) !important; filter: drop-shadow(0 0 6px rgba(57,255,20,.6)); }
.tbn-candy { background-image: linear-gradient(90deg, #ff8fc7, #ffd1e8, #8fd3ff, #ff8fc7) !important; }
.tbn-toxic { background-image: linear-gradient(90deg, #a3e635, #22c55e, #facc15, #a3e635) !important; }
.tbn-custom { background-image: linear-gradient(90deg, var(--tbA), var(--tbB), var(--tbA)) !important; }

/* ---------- 🪪 Profile theme + effects ---------- */
.rw-modal-card.tb-themed { background: linear-gradient(180deg, var(--tbpA), var(--tbpB)) !important; }
.rw-modal-card.tb-themed .rw-prof-banner { background: linear-gradient(120deg, var(--tbpA), var(--tbpB)) !important; filter: brightness(1.3); }
.tb-prof-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; z-index: 0; }
.tb-prof-fx i { position: absolute; top: -30px; font-style: normal; opacity: .85; animation: tbFall linear infinite; }
.rw-modal-card.tb-fxed { position: relative; overflow-x: hidden; overflow-y: auto; }   /* was overflow:hidden — long profiles couldn't scroll */
.rw-modal-card.tb-fxed > *:not(.tb-prof-fx):not(.rw-modal-x) { position: relative; z-index: 1; }
.rw-modal-card.tb-fxed > .rw-modal-x { z-index: 2; }
@keyframes tbFall { to { transform: translateY(680px) rotate(200deg); } }

/* ---------- 🎨 App themes (just recolour the site's accent tokens) ---------- */
:root[data-tbtheme="ocean"]   { --neo-accent: #22d3ee !important; --neo-accent2: #3b82f6 !important; --neo-glow: rgba(34,211,238,.35) !important; --gradient-purple: linear-gradient(135deg, #0ea5e9, #3b82f6) !important; }
:root[data-tbtheme="sunset"]  { --neo-accent: #ff8a5b !important; --neo-accent2: #ff5fa2 !important; --neo-glow: rgba(255,138,91,.35) !important; --gradient-purple: linear-gradient(135deg, #ff7e5f, #ff5fa2) !important; }
:root[data-tbtheme="aurora"]  { --neo-accent: #34e8b0 !important; --neo-accent2: #22d3ee !important; --neo-glow: rgba(52,232,176,.35) !important; --gradient-purple: linear-gradient(135deg, #10b981, #22d3ee, #8b5cf6) !important; }
:root[data-tbtheme="sakura"]  { --neo-accent: #ff8fc7 !important; --neo-accent2: #ffc4e1 !important; --neo-glow: rgba(255,143,199,.35) !important; --gradient-purple: linear-gradient(135deg, #ec4899, #f9a8d4) !important; }
:root[data-tbtheme="matrix"]  { --neo-accent: #39ff6a !important; --neo-accent2: #16a34a !important; --neo-glow: rgba(57,255,106,.3) !important; --gradient-purple: linear-gradient(135deg, #15803d, #22c55e) !important; }
:root[data-tbtheme="royal"]   { --neo-accent: #c14bff !important; --neo-accent2: #ff73fa !important; --neo-glow: rgba(193,75,255,.35) !important; --gradient-purple: linear-gradient(135deg, #7c3aed, #c14bff, #ff73fa) !important; }
:root[data-tbtheme="gold"]    { --neo-accent: #ffd166 !important; --neo-accent2: #f59e0b !important; --neo-glow: rgba(255,209,102,.3) !important; --gradient-purple: linear-gradient(135deg, #b45309, #f59e0b, #fde68a) !important; }
:root[data-tbtheme="crimson"] { --neo-accent: #ff4d6d !important; --neo-accent2: #ff8fa3 !important; --neo-glow: rgba(255,77,109,.35) !important; --gradient-purple: linear-gradient(135deg, #be123c, #ff4d6d) !important; }

/* ---------- 🖼️ Wallpaper (fixed layer above the star canvas, below the app) ---------- */
#tbWall { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#tbWall .tbw-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
#tbWall .tbw-dim { position: absolute; inset: 0; background: #000; }
.tbw-midnight, #tbWall.tbw-midnight .tbw-img { background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 80%, #cfd8ff, transparent), radial-gradient(1px 1px at 85% 20%, #fff, transparent), radial-gradient(ellipse at 50% 0%, #1e2a5a, #070912 70%); background-size: 300px 300px, 400px 400px, 350px 350px, 250px 250px, cover; }
.tbw-ocean, #tbWall.tbw-ocean .tbw-img { background: radial-gradient(ellipse at 30% 110%, #0ea5e9 0%, transparent 55%), radial-gradient(ellipse at 80% -10%, #1e3a8a, transparent 60%), linear-gradient(180deg, #031525, #062a4a); }
.tbw-aurora, #tbWall.tbw-aurora .tbw-img { background: linear-gradient(120deg, #0b3d2e, #0f766e, #4c1d95, #0b3d2e); background-size: 400% 400%; animation: tbwShift 18s ease-in-out infinite; }
.tbw-sunset, #tbWall.tbw-sunset .tbw-img { background: linear-gradient(180deg, #2b1055 0%, #7b2869 40%, #e2557a 70%, #ffb26b 100%); }
.tbw-nebula, #tbWall.tbw-nebula .tbw-img { background: radial-gradient(circle at 25% 35%, rgba(193,75,255,.55), transparent 40%), radial-gradient(circle at 75% 65%, rgba(255,115,250,.4), transparent 40%), radial-gradient(circle at 60% 20%, rgba(91,140,255,.45), transparent 35%), #07040f; }
.tbw-synthwave, #tbWall.tbw-synthwave .tbw-img { background: linear-gradient(transparent 60%, rgba(255,0,180,.25) 60%), repeating-linear-gradient(90deg, rgba(255,0,200,.35) 0 2px, transparent 2px 80px), repeating-linear-gradient(0deg, rgba(255,0,200,.35) 0 2px, transparent 2px 40px), radial-gradient(circle at 50% 58%, #ffb347 0 12%, transparent 12.5%), linear-gradient(180deg, #12002b, #3a0a5c 58%, #12002b 58%); }
.tbw-lava, #tbWall.tbw-lava .tbw-img { background: radial-gradient(circle at 20% 80%, #ff3b30, transparent 40%), radial-gradient(circle at 80% 30%, #ff9500, transparent 40%), radial-gradient(circle at 50% 50%, #7f1d1d, #1a0505 70%); background-size: 200% 200%; animation: tbwShift 14s ease-in-out infinite; }
.tbw-sakura, #tbWall.tbw-sakura .tbw-img { background: radial-gradient(circle at 70% 20%, rgba(255,182,213,.55), transparent 45%), radial-gradient(circle at 20% 80%, rgba(255,143,199,.4), transparent 45%), linear-gradient(180deg, #2a0f1f, #4a1d35); }
.tbw-forest, #tbWall.tbw-forest .tbw-img { background: radial-gradient(ellipse at 50% 120%, #14532d, transparent 60%), linear-gradient(180deg, #04130b, #0b2a18 60%, #052012); }
.tbw-custom { background: repeating-conic-gradient(#333 0 25%, #222 0 50%) 0 0 / 16px 16px; }
.tbw-none { background: #111; }
@keyframes tbwShift { 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { #tbWall .tbw-img { animation: none !important; } }

/* ---------- 🔊 Soundboard + 🌟 stickers pop-over (General composer) ---------- */
#general.dc-on .chat-input-container .tb-tool { order: 2; }
.tb-pop {
    position: absolute; bottom: calc(100% + 10px); right: 0; z-index: 60;
    width: min(460px, calc(100vw - 32px)); max-height: 420px; overflow-y: auto;
    padding: 12px; border-radius: 14px;
    background: #17171b; border: 1px solid #2a2a31; box-shadow: 0 18px 50px rgba(0,0,0,.6);
    color: #dbdee1;
}
.tb-pop-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 2px 8px; }
.tb-pop-h b { font-size: 14px; }
.tb-pop-h small, .tb-pop-mute { font-size: 12px; color: #949ba4; }
.tb-pop-mute { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.tb-pop-lock { margin-bottom: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(193,75,255,.12); font-size: 13px; }
.tb-pop-lock button { border: 0; background: none; color: #e2b4ff; font: inherit; font-weight: 800; cursor: pointer; }
.tb-pop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; margin-bottom: 10px; }
.tb-pop-grid.stickers { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.tb-cell-wrap { position: relative; }
.tb-cell {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%;
    padding: 9px 4px; border: 1px solid #2a2a31; border-radius: 10px; background: #1f1f24; color: #dbdee1;
    font: inherit; cursor: pointer; transition: transform .12s, background .12s;
}
.tb-cell:hover { background: #2a2a31; transform: translateY(-1px); }
.tb-cell span { font-size: 22px; }
.tb-cell small { font-size: 11.5px; color: #b5bac1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tb-cell.locked { opacity: .45; }
.tb-cell em { position: absolute; top: 3px; right: 5px; font-style: normal; font-size: 10px; }
.stickers .tb-cell { font-size: 20px; padding: 12px 4px; }
.tb-prev { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #b5bac1; font-size: 8px; cursor: pointer; opacity: 0; }
.tb-cell-wrap:hover .tb-prev { opacity: 1; }

/* Feed of who played what */
#tbSbFeed { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 99991; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.tb-sb-pop { padding: 8px 14px; border-radius: 999px; background: rgba(20,18,30,.94); border: 1px solid rgba(193,75,255,.45); color: #fff; font-size: 13.5px; box-shadow: 0 8px 24px rgba(0,0,0,.45); animation: tbPopIn .3s ease-out; transition: opacity .4s, transform .4s; }
.tb-sb-pop.out { opacity: 0; transform: translateY(-8px); }
@keyframes tbPopIn { from { opacity: 0; transform: translateY(-10px) scale(.95); } }

/* Screen effects */
.tb-rain { position: fixed; inset: 0; z-index: 99990; pointer-events: none; overflow: hidden; }
.tb-rain i { position: absolute; top: -50px; font-style: normal; animation: tbRainFall linear forwards; }
@keyframes tbRainFall { to { transform: translateY(110vh) rotate(360deg); } }
body.tb-shake { animation: tbShake .6s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes tbShake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-8px, 3px); } 40%, 60% { transform: translate(8px, -3px); } }
@media (prefers-reduced-motion: reduce) { body.tb-shake { animation: none; } }

/* Entrance banner */
.tb-entrance {
    position: fixed; left: 50%; top: 70px; z-index: 99992; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px;
    padding: 12px 22px; border-radius: 999px;
    background: linear-gradient(120deg, #c14bff, #5b8cff); color: #fff; font-size: 16px;
    box-shadow: 0 12px 40px rgba(193,75,255,.5);
    animation: tbEnt 3.8s ease-in-out forwards;
}
.tb-ent-royal { background: linear-gradient(120deg, #b45309, #ffd166); color: #1a1205; }
.tb-ent-lightning { background: linear-gradient(120deg, #1e1b4b, #7c3aed); }
.tb-entrance span { font-size: 22px; }
@keyframes tbEnt { 0% { opacity: 0; transform: translate(-50%, -20px) scale(.8); } 12%, 85% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -12px) scale(.95); } }

/* ---------- 🎨 Perks panel in the Turbo pop-up ---------- */
.tb-perks { padding: 14px 20px 20px; }
.tb-perks h4 { margin: 18px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: #fff; }
.tb-perks h4 small { font-weight: 500; color: rgba(235,235,245,.5); margin-left: 6px; }
.tbp-locked { margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(193,75,255,.12); border: 1px solid rgba(193,75,255,.35); font-size: 13.5px; }
.tbp-preview { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.tbp-preview.themed { background: linear-gradient(135deg, var(--tbpA), var(--tbpB)); }
.tbp-preview > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tbp-preview small { width: 100%; font-size: 12px; color: rgba(235,235,245,.6); }
.tbp-name { font-size: 20px; font-weight: 800; color: #fff; }
.tbp-av { position: relative; width: 56px; height: 56px; flex: 0 0 auto; }
.tbp-av img, .tbp-av > b { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; background: #5b8cff; font-size: 24px; }
.tbp-av .tbd-icon { font-size: 24px; top: -12px; right: -12px; }
.tbp-av.tbd-crown .tbd-icon, .tbp-av.tbd-headphones .tbd-icon, .tbp-av.tbd-halo .tbd-icon, .tbp-av.tbd-cat .tbd-icon, .tbp-av.tbd-rainbow .tbd-icon { top: -20px; right: auto; }
.tbp-daily { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,209,102,.08); border: 1px solid rgba(255,209,102,.3); font-size: 14px; }
.tbp-daily .tb-buy { width: auto; padding: 9px 18px; }
.tbp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.tbp-grid.badges { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
.tbp-grid.walls { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.tbp-opt {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 4px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03);
    color: #fff; font: inherit; cursor: pointer;
}
.tbp-opt:hover { background: rgba(255,255,255,.07); }
.tbp-opt.on { border-color: #c14bff; background: rgba(193,75,255,.16); }
.tbp-opt.locked { opacity: .5; }
.tbp-opt span { font-size: 20px; line-height: 1.2; }
.tbp-opt small { font-size: 11.5px; color: rgba(235,235,245,.75); }
.tb-lock { position: absolute; top: 3px; right: 5px; font-style: normal; font-size: 10px; }
.tbp-swatch { display: block; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
.tbp-wallprev { display: block; width: 100%; height: 46px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); background-size: cover; }
.tbp-wall { padding: 5px 5px 7px; }
.tbp-colors, .tbp-wallctl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: rgba(235,235,245,.8); }
.tbp-colors label, .tbp-wallctl label { display: flex; align-items: center; gap: 6px; }
.tbp-colors input[type="color"] { width: 38px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.tbp-upload { width: auto !important; padding: 9px 14px !important; cursor: pointer; font-size: 13.5px !important; }
.tbp-upload.locked { opacity: .5; }

/* With a wallpaper on, the Discord-style panels turn see-through so it shows */
:root[data-tbwall] #general.dc-on .dc, :root[data-tbwall] .dm-layout.dch-on { background: rgba(26,26,30,.72) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
:root[data-tbwall] #general.dc-on .dc-side, :root[data-tbwall] #general.dc-on .dc-members, :root[data-tbwall] .dm-layout.dch-on .dm-side { background: rgba(14,14,18,.6) !important; }
:root[data-tbwall] .dm-layout.dch-on .dm-pane { background: transparent !important; }

/* ==== dchat.css ==== */
/* ============================================================
   Tots — Discord-style General chat (dchat.js)
   Everything is scoped to #general.dc-on so other rooms keep their look.
   Many rules need !important to beat neo.css's bubble styling.
   ============================================================ */
#general.dc-on {
    --dc-side: #121214; --dc-chat: #1a1a1e; --dc-raise: #232328; --dc-line: #26262c;
    --dc-text: #dbdee1; --dc-head: #f2f3f5; --dc-muted: #949ba4; --dc-hover: rgba(255,255,255,.04);
    --dc-sel: rgba(255,255,255,.09); --dc-blurple: #5865f2; --dc-green: #23a55a; --dc-idle: #f0b232; --dc-off: #80848e;
    padding-top: 12px !important;
}
#general.dc-on > .content-header { display: none !important; }

.dc {
    display: grid; grid-template-columns: 240px minmax(0, 1fr) 240px;
    /* Fit the room the tab actually has: .app-container's 14px top+bottom (28) +
       .main-content's 90/30 padding (120) + #general's 12px = 160px. The old
       "min-height: 520px" made the box taller than the screen on short laptops
       (a Chromebook is only ~600px tall), so the newest messages and the message
       box sat below the fold and #general looked empty. */
    height: calc(100vh - 160px);
    border-radius: 14px; overflow: hidden;
    border: 1px solid var(--dc-line);
    background: var(--dc-chat);
    color: var(--dc-text);
    font-size: 15px;
}
.dc.dc-nomembers { grid-template-columns: 240px minmax(0, 1fr); }
.dc.dc-nomembers .dc-members { display: none; }
.dc button { font: inherit; color: inherit; }
.dc-muted { color: var(--dc-muted); font-size: 13px; }

/* Left: server + channels + me */
.dc-side { display: flex; flex-direction: column; min-height: 0; background: var(--dc-side); border-right: 1px solid var(--dc-line); }
.dc-server {
    display: flex; align-items: center; justify-content: space-between;
    height: 48px; flex: 0 0 auto; padding: 0 16px;
    border: 0; border-bottom: 1px solid var(--dc-line); background: transparent;
    font-size: 15px !important; cursor: pointer; text-align: left;
}
.dc-server:hover { background: var(--dc-hover); }
.dc-server b { color: var(--dc-head); }
.dc-chans { flex: 1; overflow-y: auto; padding: 8px 8px 12px; }
.dc-cat { display: flex; align-items: center; gap: 4px; margin: 16px 0 4px 2px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--dc-muted); }
.dc-cat:first-child { margin-top: 6px; }
.dc-cat span { font-size: 10px; }
.dc-chan {
    position: relative; display: flex; align-items: center; gap: 6px; width: 100%;
    height: 34px; padding: 0 8px; margin: 1px 0;
    border: 0; border-radius: 6px; background: transparent;
    color: var(--dc-muted) !important; font-size: 15px !important; font-weight: 500; text-align: left; cursor: pointer;
}
.dc-chan i { font-style: normal; width: 20px; text-align: center; font-size: 19px; color: var(--dc-muted); opacity: .8; }
.dc-chan span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-chan:hover { background: var(--dc-hover); color: var(--dc-text) !important; }
.dc-chan.on { background: var(--dc-sel); color: #fff !important; }
.dc-chan.unread { color: #fff !important; font-weight: 600; }
.dc-chan.unread::before { content: ''; position: absolute; left: -8px; width: 8px; height: 8px; border-radius: 0 4px 4px 0; background: #fff; }
.dc-unread:empty { display: none; }
.dc-unread { font-style: normal; min-width: 16px; padding: 0 5px; border-radius: 999px; background: #f23f43; color: #fff; font-size: 11px; font-weight: 800; text-align: center; }
.dc-me { display: flex; align-items: center; gap: 8px; height: 56px; flex: 0 0 auto; padding: 0 8px; background: #0e0e10; }
.dc-me-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.dc-me-t b { font-size: 14px; color: var(--dc-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-me-t small { font-size: 12px; color: var(--dc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-icon { width: 32px; height: 32px; border: 0; border-radius: 6px; background: transparent; font-size: 17px !important; cursor: pointer; opacity: .75; }
.dc-icon:hover, .dc-icon.on { opacity: 1; background: var(--dc-hover); }

/* Avatars + status dots (members list, me panel, added message avatars) */
.dc-mem-av { position: relative; flex: 0 0 auto; width: 32px; height: 32px; }
.dc-mem-av img, .dc-mem-av .dc-initial { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; }
.dc-dot { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; border: 3px solid var(--dc-side); background: var(--dc-off); }
.dc-st-on .dc-dot, .dc-me .dc-dot { background: var(--dc-green); }
.dc-st-idle .dc-dot { background: var(--dc-idle); }
.dc-me .dc-dot { border-color: #0e0e10; }

/* Middle: header + chat */
.dc-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dc-top { position: relative; display: flex; align-items: center; gap: 8px; height: 48px; flex: 0 0 auto; padding: 0 12px 0 16px; border-bottom: 1px solid var(--dc-line); }
.dc-hash { font-size: 24px; color: var(--dc-muted); font-weight: 300; }
.dc-top b { color: var(--dc-head); font-size: 16px; }
.dc-topic { flex: 1; min-width: 0; padding-left: 12px; margin-left: 4px; border-left: 1px solid var(--dc-line); color: var(--dc-muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-top-tools { display: flex; gap: 2px; }
.dc-turbo-btn { color: #c14bff; }
.dc-pins { position: absolute; top: 52px; right: 12px; z-index: 30; width: 320px; padding: 14px; border-radius: 10px; background: var(--dc-raise); border: 1px solid var(--dc-line); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.dc-pins[hidden] { display: none; }
.dc-pins p { margin: 8px 0 0; font-size: 14px; }
.dc-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }

#general.dc-on .chat-container {
    flex: 1; min-height: 0; display: flex !important; flex-direction: column;
    margin: 0 !important; padding: 0 !important; height: auto !important; max-height: none !important;
    background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
#general.dc-on .cb-search-btn { display: none !important; }   /* the header 🔍 opens it */
#general.dc-on .chat-messages {
    flex: 1; min-height: 0; height: auto !important; max-height: none !important;
    overflow-y: auto; padding: 16px 0 12px !important; margin: 0 !important;
    display: flex !important; flex-direction: column; background: transparent !important;
}
/* Newest message sits at the bottom, right above the message box (like Discord) */
#general.dc-on .chat-messages > * { flex-shrink: 0; }
#general.dc-on .chat-messages > :first-child { margin-top: auto !important; }

/* Messages: everyone on the left, avatar + header + body */
#general.dc-on .chat-messages .message {
    position: relative;
    display: grid !important; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 0 !important;
    max-width: none !important; width: auto !important;
    margin: 17px 0 0 !important; padding: 2px 48px 2px 0 !important;
    flex-direction: row !important; justify-content: flex-start !important;
    background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    animation: none !important; transform: none !important; filter: none !important; opacity: 1 !important;
}
#general.dc-on .chat-messages .message:hover { background: rgba(0,0,0,.18) !important; }
#general.dc-on .chat-messages .message.dc-grouped { margin-top: 0 !important; }
#general.dc-on .message .message-avatar {
    grid-column: 1; grid-row: 1 / span 2; justify-self: center;
    width: 40px !important; height: 40px !important; min-width: 40px; margin: 2px 0 0 !important;
    border-radius: 50% !important; overflow: hidden; cursor: pointer;
    display: flex !important; align-items: center; justify-content: center; font-size: 20px;
}
#general.dc-on .message .message-avatar img, #general.dc-on .message .dc-initial { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
#general.dc-on .message.dc-grouped .message-avatar, #general.dc-on .message.dc-grouped .dc-head { display: none !important; }
#general.dc-on .message .dc-gutter { grid-column: 1; grid-row: 1; justify-self: end; padding: 4px 10px 0 0; font-size: 11px; color: var(--dc-muted); visibility: hidden; display: none; }
#general.dc-on .message.dc-grouped .dc-gutter { display: block; }
#general.dc-on .message.dc-grouped:hover .dc-gutter { visibility: visible; }
#general.dc-on .message .message-content {
    grid-column: 2; min-width: 0; max-width: none !important; width: auto !important;
    margin: 0 !important; padding: 0 !important;
    background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    color: var(--dc-text) !important; text-align: left !important;
}
#general.dc-on .message .dc-head { display: flex; align-items: baseline; gap: 8px; line-height: 1.375; }
#general.dc-on .message .message-author { font-size: 16px !important; font-weight: 600 !important; color: var(--dc-head); margin: 0 !important; cursor: pointer; display: inline !important; }
#general.dc-on .message .message-author:hover { text-decoration: underline; }
#general.dc-on .message .dc-time { font-size: 12px; color: var(--dc-muted); font-weight: 500; }
#general.dc-on .message .message-time { display: none !important; }
#general.dc-on .message .message-content p { margin: 0 !important; font-size: 15px !important; line-height: 1.375 !important; color: var(--dc-text) !important; white-space: pre-wrap; overflow-wrap: anywhere; }
#general.dc-on .message .edited-tag { font-size: 10px; color: var(--dc-muted); }
#general.dc-on .message .dc-crown { font-size: 13px; }
#general.dc-on .message.gif-message img { display: block; max-width: min(320px, 100%); border-radius: 8px; margin-top: 4px; }
#general.dc-on .message .sticker-message { font-size: 48px; line-height: 1.2; }
#general.dc-on .message .reply-quote {
    position: relative; margin: 0 0 2px !important; padding: 0 0 0 4px !important;
    background: transparent !important; border: 0 !important;
    font-size: 13px !important; color: var(--dc-muted) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#general.dc-on .message .reply-quote strong { color: var(--dc-text); margin-right: 6px; }
#general.dc-on .message .poll-card { max-width: 440px; margin-top: 4px; }

/* Date divider (data-day set by dchat.js on the first message of a day) */
#general.dc-on .message.dc-newday { margin-top: 24px !important; }
#general.dc-on .message.dc-newday::before {
    content: attr(data-day);
    position: absolute; top: -21px; left: 16px; right: 14px; height: 16px;
    display: flex; justify-content: center; align-items: center;
    font-size: 12px; font-weight: 600; color: var(--dc-muted); line-height: 16px;
    background: linear-gradient(to right, var(--dc-line) 0 calc(50% - 80px), transparent calc(50% - 80px) calc(50% + 80px), var(--dc-line) calc(50% + 80px)) center / 100% 1px no-repeat;
}

/* Hover toolbar: reply / edit / delete + react */
#general.dc-on .message .message-actions {
    position: absolute; top: -18px; right: 16px; z-index: 5;
    display: none !important; gap: 0; padding: 2px;
    border-radius: 8px; border: 1px solid var(--dc-line); background: var(--dc-raise);
    box-shadow: 0 4px 12px rgba(0,0,0,.35); opacity: 1 !important;
}
#general.dc-on .message:hover .message-actions { display: flex !important; }
#general.dc-on .message .message-actions button { width: 32px; height: 30px; border: 0; border-radius: 6px; background: transparent !important; font-size: 15px; cursor: pointer; }
#general.dc-on .message .message-actions button:hover { background: var(--dc-hover) !important; }
#general.dc-on .message .react-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; opacity: 1 !important; }
#general.dc-on .message .react-btn-add { opacity: 0; border: 0; background: transparent; cursor: pointer; }
#general.dc-on .message:hover .react-btn-add { opacity: .8; }
#general.dc-on .message .reaction-chip { padding: 2px 8px !important; border-radius: 8px !important; background: var(--dc-raise) !important; border: 1px solid transparent !important; font-size: 13px; }
#general.dc-on .message .reaction-chip.mine, #general.dc-on .message .reaction-chip.active { border-color: var(--dc-blurple) !important; background: rgba(88,101,242,.15) !important; }

/* Composer */
#general.dc-on .reply-bar { margin: 0 16px; border-radius: 8px 8px 0 0; background: var(--dc-raise) !important; }
#general.dc-on .chat-input-container {
    position: relative;
    display: flex !important; align-items: center; gap: 2px;
    margin: 0 16px 20px !important; padding: 0 8px !important; min-height: 46px;
    border-radius: 10px !important; border: 1px solid var(--dc-line) !important;
    background: var(--dc-raise) !important; box-shadow: none !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
#general.dc-on .chat-input-container .chat-input {
    order: 1; flex: 1; min-width: 0; height: 44px;
    padding: 0 8px !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
    color: var(--dc-text) !important; font-size: 15px !important; outline: none;
}
#general.dc-on .chat-input-container .chat-input::placeholder { color: #6d6f78; }
#general.dc-on .chat-input-container .poll-tool-btn { order: 0; }
#general.dc-on .chat-input-container .chat-tool-btn {
    order: 2; width: 34px; height: 34px; padding: 0 !important;
    border: 0 !important; border-radius: 6px !important; background: transparent !important; box-shadow: none !important;
    font-size: 19px !important; opacity: .75; cursor: pointer;
}
#general.dc-on .chat-input-container .chat-tool-btn:hover { opacity: 1; background: var(--dc-hover) !important; }
#general.dc-on .chat-input-container .send-btn {
    order: 3; width: 34px; height: 34px; min-width: 0; padding: 0 !important;
    border: 0 !important; border-radius: 6px !important; background: transparent !important; box-shadow: none !important;
    font-size: 0 !important; color: var(--dc-muted) !important; cursor: pointer;
}
#general.dc-on .chat-input-container .send-btn::after { content: '➤'; font-size: 18px; }
#general.dc-on .chat-input-container .send-btn:hover { color: #fff !important; }

/* Right: members */
.dc-members { overflow-y: auto; padding: 8px 8px 16px; background: var(--dc-side); border-left: 1px solid var(--dc-line); }
.dc-members h4 { margin: 18px 8px 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--dc-muted); }
.dc-mem { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; text-align: left; cursor: pointer; }
.dc-mem:hover { background: var(--dc-hover); }
.dc-mem-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.dc-mem-t b { font-size: 15px; font-weight: 500; color: var(--dc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-mem-t small { font-size: 12px; color: var(--dc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-mem.dc-st-off { opacity: .35; }
.dc-mem.dc-st-off:hover { opacity: 1; }
.dc-mem .dc-crown { font-size: 12px; }

@media (max-width: 1150px) {
    .dc { grid-template-columns: 220px minmax(0, 1fr); }
    .dc .dc-members { display: none; }
    .dc:not(.dc-nomembers) .dc-members { display: block; position: absolute; right: 0; top: 48px; bottom: 0; width: 240px; z-index: 20; box-shadow: -12px 0 30px rgba(0,0,0,.4); }
    .dc { position: relative; }
}
@media (max-width: 900px) {
    /* Phones: .main-content's padding is 82px top / 110px bottom (+ 12px on #general),
       and the bottom tab bar sits on top of that. */
    #general.dc-on .dc { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 204px); border-radius: 10px; }
    .dc .dc-side { display: none; }
    .dc-topic { display: none; }
    #general.dc-on .chat-messages .message { padding-right: 12px !important; grid-template-columns: 60px minmax(0, 1fr); }
}

/* ============================================================
   Discord-style Friends home + sidebar (dchome.js) — Messages tab
   ============================================================ */
.dm-layout.dch-on {
    --dc-side: #121214; --dc-chat: #1a1a1e; --dc-raise: #232328; --dc-line: #26262c;
    --dc-text: #dbdee1; --dc-muted: #949ba4; --dc-hover: rgba(255,255,255,.05); --dc-sel: rgba(255,255,255,.09);
    background: var(--dc-chat) !important; border-color: var(--dc-line) !important; border-radius: 14px !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.dm-layout.dch-on .dm-side { background: var(--dc-side) !important; border-right: 1px solid var(--dc-line) !important; display: flex; flex-direction: column; }
.dm-layout.dch-on .dm-side-head { padding: 10px 10px 4px; }
.dm-layout.dch-on .dm-side-head h1 { display: none; }
.dm-layout.dch-on .gd-new-btn { display: none; }
.dm-layout.dch-on .dm-search { margin: 0 !important; width: 100%; height: 30px; padding: 0 10px !important; border-radius: 6px !important; background: #0b0b0d !important; border: 0 !important; font-size: 13.5px !important; }
.dm-layout.dch-on .dm-side > .dm-search { margin: 10px 10px 8px !important; width: calc(100% - 20px); }
.dch-links { padding: 8px 8px 0; border-top: 1px solid var(--dc-line); }
.dch-link { display: flex; align-items: center; gap: 12px; width: 100%; height: 42px; padding: 0 10px; margin: 1px 0; border: 0; border-radius: 6px; background: transparent; color: var(--dc-muted); font: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.dch-link i { font-style: normal; width: 22px; text-align: center; font-size: 18px; }
.dch-link:hover { background: var(--dc-hover); color: var(--dc-text); }
.dch-link.on { background: var(--dc-sel); color: #fff; }
.dch-link em { margin-left: auto; font-style: normal; min-width: 16px; padding: 0 5px; border-radius: 999px; background: #f23f43; color: #fff; font-size: 11px; font-weight: 800; text-align: center; }
.dch-link em:empty { display: none; }
.dch-pill { margin-left: auto; padding: 2px 7px; border-radius: 999px; background: linear-gradient(120deg, #c14bff, #5b8cff); color: #fff; font-size: 9.5px; font-weight: 900; letter-spacing: .06em; }
.dch-dm-label { display: flex; align-items: center; justify-content: space-between; margin: 14px 2px 2px 10px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--dc-muted); }
.dch-dm-label button { width: 22px; height: 22px; border: 0; border-radius: 4px; background: transparent; color: var(--dc-muted); font-size: 16px; cursor: pointer; }
.dch-dm-label button:hover { color: #fff; }
.dch-me { display: flex; align-items: center; gap: 8px; height: 56px; flex: 0 0 auto; padding: 0 8px; background: #0e0e10; }
.dch-me-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.dch-me-t b { font-size: 14px; color: #f2f3f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dch-me-t small { font-size: 12px; color: var(--dc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dch-icon { width: 32px; height: 32px; border: 0; border-radius: 6px; background: transparent; font-size: 17px; cursor: pointer; opacity: .75; }
.dch-icon:hover { opacity: 1; background: var(--dc-hover); }

/* Avatars with status dots */
.dch-av { position: relative; flex: 0 0 auto; width: 32px; height: 32px; }
.dch-av img, .dch-av .dch-init { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; }
.dch-av i { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; border: 3px solid var(--dc-chat); background: #80848e; }
.dch-av.st-on i { background: #23a55a; }
.dch-av.st-idle i { background: #f0b232; }
.dch-me .dch-av i { border-color: #0e0e10; }

/* Pane: Friends home */
.dm-layout.dch-on .dm-pane { background: var(--dc-chat) !important; }
.dm-layout.dch-on .dm-empty { margin: 0 !important; width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0 !important; text-align: left; height: 100%; }
.dm-layout.dch-on .dm-empty[hidden] { display: none; }
.dch-home { display: flex; flex-direction: column; height: 100%; min-height: 0; color: var(--dc-text); }
.dch-top { display: flex; align-items: center; gap: 14px; height: 52px; flex: 0 0 auto; padding: 0 16px; border-bottom: 1px solid var(--dc-line); }
.dch-title { font-weight: 700; color: #f2f3f5; font-size: 16px; }
.dch-sep { width: 4px; height: 4px; border-radius: 50%; background: #4e5058; }
.dch-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.dch-tabs button { position: relative; padding: 4px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--dc-muted); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.dch-tabs button:hover { background: var(--dc-hover); color: var(--dc-text); }
.dch-tabs button.on { background: var(--dc-sel); color: #fff; }
.dch-tabs .dch-add-tab { background: #5865f2; color: #fff; }
.dch-tabs .dch-add-tab.on { background: transparent; color: #23a55a; }
.dch-tabs em { margin-left: 6px; font-style: normal; padding: 0 5px; border-radius: 999px; background: #f23f43; color: #fff; font-size: 11px; font-weight: 800; }
.dch-tabs em:empty { display: none; }
.dch-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.dch-list { min-width: 0; overflow-y: auto; padding: 16px 20px 16px 30px; }
.dch-search { position: relative; margin-bottom: 18px; }
.dch-search input { width: 100%; box-sizing: border-box; height: 38px; padding: 0 36px 0 12px; border-radius: 8px; border: 1px solid var(--dc-line); background: #0b0b0d; color: var(--dc-text); font: inherit; font-size: 15px; outline: none; }
.dch-search span { position: absolute; right: 12px; top: 9px; font-size: 14px; opacity: .6; }
.dch-count { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--dc-muted); }
.dch-row { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 10px; margin: 0 -10px; border-top: 1px solid var(--dc-line); border-radius: 8px; cursor: pointer; }
.dch-row:hover { background: var(--dc-hover); border-top-color: transparent; }
.dch-row:hover + .dch-row { border-top-color: transparent; }
.dch-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.dch-row-t b { font-size: 16px; font-weight: 600; color: #f2f3f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dch-row-t small { font-size: 13.5px; color: var(--dc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dch-acts { display: flex; gap: 10px; }
.dch-act { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--dc-raise); color: var(--dc-text); font: inherit; font-size: 16px; cursor: pointer; }
.dch-row:hover .dch-act { background: #0e0e10; }
.dch-act.ok:hover { color: #23a55a; }
.dch-act.no:hover { color: #f23f43; }
.dch-act.ok { width: auto; min-width: 36px; padding: 0 10px; border-radius: 999px; }
.dch-btn { padding: 8px 14px; border: 0; border-radius: 6px; background: #5865f2; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.dch-tag { font-size: 13px; color: #23a55a; font-weight: 700; }
.dch-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; text-align: center; color: var(--dc-muted); }
.dch-empty span { font-size: 64px; margin-bottom: 14px; opacity: .8; }
.dch-muted { color: var(--dc-muted); font-size: 14px; }
.dch-add h2 { margin: 6px 0 4px; font-size: 18px; color: #f2f3f5; }
.dch-add > p { margin: 0 0 14px; color: var(--dc-muted); font-size: 14px; }
.dch-add-form { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; margin-bottom: 8px; border-radius: 10px; background: #0b0b0d; border: 1px solid var(--dc-line); }
.dch-add-form:focus-within { border-color: #00a8fc; }
.dch-add-form input { flex: 1; min-width: 0; height: 38px; border: 0; background: transparent; color: var(--dc-text); font: inherit; font-size: 15px; outline: none; }
.dch-add-form button { padding: 0 16px; height: 34px; border: 0; border-radius: 6px; background: #5865f2; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.dch-add-msg { margin: 0 0 10px; font-size: 14px; }
.dch-add-msg.ok { color: #23a55a; }
.dch-add-msg.bad { color: #f23f43; }
.dch-now { overflow-y: auto; padding: 18px 16px; border-left: 1px solid var(--dc-line); }
.dch-now h3 { margin: 0 0 16px; font-size: 20px; font-weight: 800; color: #f2f3f5; }
.dch-quiet { text-align: center; padding: 10px 4px; }
.dch-quiet b { display: block; margin-bottom: 6px; font-size: 16px; color: #f2f3f5; }
.dch-quiet p { margin: 0; font-size: 14px; color: var(--dc-muted); line-height: 1.45; }
.dch-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; margin-bottom: 8px; border-radius: 10px; border: 1px solid var(--dc-line); background: var(--dc-raise); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dch-card:hover { background: #2a2a30; }
.dch-card span:last-child { display: flex; flex-direction: column; min-width: 0; }
.dch-card b { font-size: 14px; color: #f2f3f5; }
.dch-card small { font-size: 12.5px; color: var(--dc-muted); }
.dch-menu { position: fixed; z-index: 99990; display: flex; flex-direction: column; width: 180px; padding: 6px; border-radius: 8px; background: #111214; border: 1px solid var(--dc-line, #26262c); box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.dch-menu button { padding: 8px 10px; border: 0; border-radius: 4px; background: transparent; color: #dbdee1; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.dch-menu button:hover { background: #5865f2; color: #fff; }
.dch-menu button.red { color: #f23f43; }
.dch-menu button.red:hover { background: #f23f43; color: #fff; }
@media (max-width: 1150px) { .dch-body { grid-template-columns: minmax(0, 1fr); } .dch-now { display: none; } }
@media (max-width: 760px) { .dch-me { display: none; } }

/* Use the whole width of the screen, like Discord (neo.css caps tabs at 1240px) */
#general.tab-content.dc-on { max-width: none !important; }

/* ==== chaos.css ==== */
/* Tots — 🙃 Chaos mode (chaos.js). Timed sitewide pranks via html[data-chaos]. */

/* The floating countdown pill */
#chaosPill {
    position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%);
    z-index: 100000; background: rgba(20,12,40,.92); color: #fff; border: 1px solid rgba(255,255,255,.25);
    padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap;
    box-shadow: 0 8px 30px rgba(0,0,0,.4); backdrop-filter: blur(8px); pointer-events: auto;
}
#chaosPill b { color: #ffd166; }
#chaosPill button {
    margin-left: 8px; font: inherit; font-size: 11px; padding: 1px 8px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(255,120,140,.5); background: rgba(255,120,140,.15); color: #ff9db0;
}
/* The pill itself must never be flipped/mirrored/blurred with the page */
html[data-chaos] #chaosPill { transform: translateX(-50%) !important; filter: none !important; font-family: system-ui, sans-serif !important; }

/* Admin card */
.chaos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }

/* ---- The effects (applied to <body> so the pill, a child of body, is excluded via override above) ---- */
html[data-chaos="flip"] body { transform: rotate(180deg); transform-origin: center; }
html[data-chaos="mirror"] body { transform: scaleX(-1); transform-origin: center; }
html[data-chaos="comicsans"] body, html[data-chaos="comicsans"] body * { font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive !important; }
html[data-chaos="tiny"] body { font-size: 8px !important; }
html[data-chaos="huge"] .message, html[data-chaos="huge"] .chat-input, html[data-chaos="huge"] p { font-size: 26px !important; }
html[data-chaos="grayscale"] body { filter: grayscale(1); }
html[data-chaos="blur"] body { filter: blur(1.4px); }

/* Rainbow names in chat */
@keyframes chaosRainbow { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
html[data-chaos="rainbow"] .message-author,
html[data-chaos="rainbow"] .dc-author-added,
html[data-chaos="rainbow"] .message-username {
    background: linear-gradient(90deg,#ff5f6d,#ffc371,#47e5bc,#6a9cff,#c86dd7) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
    animation: chaosRainbow 3s linear infinite;
}

/* Slow spin */
@keyframes chaosSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
html[data-chaos="spin"] body { animation: chaosSpin 8s linear infinite; transform-origin: center; }

/* Disco background flashes */
@keyframes chaosDisco { 0% { background: #ff004d; } 20% { background: #ffa300; } 40% { background: #00e436; } 60% { background: #29adff; } 80% { background: #ff77a8; } 100% { background: #ff004d; } }
html[data-chaos="disco"] body { animation: chaosDisco 1.2s steps(1) infinite; }

/* Shake */
@keyframes chaosShake { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-6px,3px); } 50% { transform: translate(5px,-4px); } 75% { transform: translate(-4px,-3px); } }
html[data-chaos="shake"] body { animation: chaosShake .3s linear infinite; }

/* Drunk: gentle wobble + slight blur */
@keyframes chaosDrunk { 0%,100% { transform: rotate(-2deg) skewX(2deg); } 50% { transform: rotate(2deg) skewX(-2deg); } }
html[data-chaos="drunk"] body { animation: chaosDrunk 4s ease-in-out infinite; filter: blur(.5px); }

@media (prefers-reduced-motion: reduce) {
    html[data-chaos="spin"] body, html[data-chaos="shake"] body, html[data-chaos="drunk"] body, html[data-chaos="disco"] body { animation: none; }
}

/* ==== bossraid.css ==== */
/* Tots — ⚔️ Boss Raid (bossraid.js). Floating sitewide battle banner. */

#bossBanner {
    position: fixed; left: 50%; top: 64px; transform: translateX(-50%);
    z-index: 99990; display: flex; align-items: center; gap: 12px;
    width: min(480px, calc(100vw - 24px));
    background: linear-gradient(135deg, rgba(40,10,30,.96), rgba(20,8,45,.96));
    border: 1px solid rgba(255,90,122,.5); border-radius: 16px; padding: 10px 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5); backdrop-filter: blur(10px); color: #fff;
    animation: bossIn .3s ease;
}
@keyframes bossIn { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }
#bossBanner.boss-dead { border-color: rgba(52,232,176,.6); background: linear-gradient(135deg, rgba(10,40,30,.96), rgba(8,30,45,.96)); }

.boss-face { font-size: 40px; line-height: 1; filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); animation: bossBob 2.2s ease-in-out infinite; }
@keyframes bossBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
#bossBanner.boss-dead .boss-face { animation: none; filter: grayscale(.6) rotate(12deg); opacity: .6; }

.boss-mid { flex: 1; min-width: 0; }
.boss-name { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 5px; }
.boss-bar { position: relative; height: 16px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.boss-bar span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ff5f6d, #ffc371); border-radius: 999px; transition: width .4s ease; }
#bossBanner.boss-dead .boss-bar span { background: linear-gradient(90deg, #34e8b0, #6a9cff); }
.boss-bar em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; font-style: normal; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.boss-you { font-size: 11px; color: rgba(255,255,255,.7); margin-top: 4px; }

.boss-attack {
    flex: 0 0 auto; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
    padding: 10px 16px; border-radius: 12px; border: none; color: #fff;
    background: linear-gradient(135deg, #ff4d6d, #c9184a); box-shadow: 0 4px 14px rgba(201,24,74,.5);
    transition: transform .08s ease;
}
.boss-attack:active { transform: scale(.92); }
.boss-attack:disabled { background: rgba(255,255,255,.14); color: rgba(255,255,255,.6); cursor: default; box-shadow: none; min-width: 48px; }
.boss-win { font-size: 30px; }

.boss-dmg {
    position: absolute; right: 24px; top: 8px; font-weight: 900; font-size: 18px; color: #ffd166;
    text-shadow: 0 2px 4px rgba(0,0,0,.6); pointer-events: none; animation: bossDmg .9s ease-out forwards;
}
@keyframes bossDmg { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-34px); } }

@media (max-width: 560px) {
    #bossBanner { top: 56px; padding: 8px 10px; gap: 8px; }
    .boss-face { font-size: 30px; }
    .boss-attack { padding: 9px 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .boss-face { animation: none; } }

/* ==== liveevents.css ==== */
/* Tots — 🎁 Surprise Drops + 🎰 Lottery (liveevents.js) */

/* 🎁 floating gift */
#dropGift {
    position: fixed; right: 20px; bottom: 96px; z-index: 100000; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: linear-gradient(135deg, rgba(60,20,80,.96), rgba(20,30,70,.96));
    border: 1px solid rgba(255,209,102,.6); border-radius: 16px; padding: 12px 16px;
    box-shadow: 0 10px 34px rgba(0,0,0,.45); color: #fff; font: inherit;
    animation: dropIn .4s cubic-bezier(.2,1.3,.4,1), dropWobble 1.6s ease-in-out .4s infinite;
}
#dropGift:active { transform: scale(.9); }
#dropGift:disabled { opacity: .5; }
.drop-emoji { font-size: 34px; line-height: 1; }
.drop-lbl { font-size: 12px; font-weight: 700; color: #ffd166; white-space: nowrap; }
@keyframes dropIn { from { opacity: 0; transform: translateY(40px) scale(.5); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dropWobble { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* 🎰 lottery banner */
#lottoBanner {
    position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 99985;
    display: flex; align-items: center; gap: 10px; width: min(420px, calc(100vw - 24px));
    background: linear-gradient(135deg, rgba(50,30,10,.96), rgba(45,10,45,.96));
    border: 1px solid rgba(255,209,102,.5); border-radius: 14px; padding: 9px 13px;
    box-shadow: 0 10px 34px rgba(0,0,0,.45); color: #fff; animation: dropIn .35s ease;
}
#lottoBanner.lotto-done { border-color: rgba(52,232,176,.6); }
.lotto-ico { font-size: 28px; }
.lotto-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lotto-mid b { font-size: 13px; }
.lotto-mid small { font-size: 11px; color: rgba(255,255,255,.65); }
.lotto-enter {
    flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; color: #1a1026;
    padding: 9px 14px; border-radius: 11px; border: none; background: linear-gradient(135deg, #ffd166, #ffb347);
}
.lotto-enter:active { transform: scale(.93); }
.lotto-in { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #5ef0c0; }

@media (max-width: 560px) {
    #dropGift { right: 12px; bottom: 150px; padding: 10px 12px; }
    #lottoBanner { bottom: 150px; }
}
@media (prefers-reduced-motion: reduce) { #dropGift { animation: dropIn .3s ease; } }

/* ==== adminbrief.css ==== */
/* Tots — 🌅 Morning Briefing (adminbrief.js) */

#briefCard {
    position: relative; margin: 0 0 14px; max-width: 520px;   /* top of #adminContent, not floating (Oct 15 2026) */
    background: linear-gradient(135deg, rgba(30,20,50,.97), rgba(15,25,55,.97));
    border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 14px 16px;
    box-shadow: 0 14px 44px rgba(0,0,0,.5); backdrop-filter: blur(12px); color: #fff;
    animation: briefIn .35s cubic-bezier(.2,1.1,.4,1); transition: opacity .6s ease, transform .6s ease;
}
#briefCard.brief-fade { opacity: 0; transform: translateX(12px); }
@keyframes briefIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }

.brief-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.brief-head b { font-size: 14px; flex: 1; }
.brief-head span { font-size: 11px; color: rgba(255,255,255,.55); }
.brief-head button { background: none; border: none; color: rgba(255,255,255,.6); cursor: pointer; font-size: 14px; padding: 2px 4px; }
.brief-head button:hover { color: #fff; }

.brief-rows { display: flex; flex-direction: column; gap: 7px; }
.brief-row { display: flex; align-items: baseline; gap: 7px; font-size: 13px; padding: 4px 6px; border-radius: 8px; }
.brief-row b { font-size: 16px; font-weight: 800; }
.brief-ico { font-size: 15px; }
.brief-lbl { color: rgba(255,255,255,.75); }
.brief-row small { display: block; width: 100%; font-size: 11px; color: rgba(255,255,255,.5); margin-left: 23px; }
.brief-go { cursor: pointer; }
.brief-go:hover { background: rgba(255,255,255,.08); }

/* ==== spycenter.css ==== */
/* Tots — 🔍 Spy Center (spycenter.js) */

.spy-cloud { line-height: 1.9; }
.spy-cloud span { display: inline-block; margin: 2px 6px; color: var(--neo-accent, #8ab4ff); font-weight: 700; }
.spy-cloud span:nth-child(3n) { color: #c86dd7; }
.spy-cloud span:nth-child(3n+1) { color: #34e8b0; }

.spy-emojis { display: flex; flex-wrap: wrap; gap: 10px; font-size: 22px; }
.spy-emojis span { display: inline-flex; align-items: center; gap: 4px; }
.spy-emojis b { font-size: 13px; color: var(--neo-dim, rgba(235,235,245,.6)); }

.spy-list { margin: 6px 0 0; padding-left: 22px; font-size: 13.5px; }
.spy-list li { margin: 3px 0; }

.spy-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.spy-person { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 12.5px; }
.spy-person small { color: var(--neo-dim, rgba(235,235,245,.55)); font-size: 10.5px; }

.spy-peak { font-size: 14px; background: rgba(255,140,67,.1); border: 1px solid rgba(255,140,67,.25); border-radius: 10px; padding: 8px 12px; display: inline-block; }

/* ==== numbergame.css ==== */
/* Tots — 🔢 Guess the Number (numbergame.js) */
#numBanner {
    position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 99984;
    display: flex; align-items: center; gap: 10px; width: min(430px, calc(100vw - 24px));
    background: linear-gradient(135deg, rgba(20,35,55,.96), rgba(35,15,55,.96));
    border: 1px solid rgba(138,180,255,.5); border-radius: 14px; padding: 9px 13px;
    box-shadow: 0 10px 34px rgba(0,0,0,.45); color: #fff; animation: numIn .3s ease;
}
@keyframes numIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
#numBanner.num-done { border-color: rgba(52,232,176,.6); }
.num-ico { font-size: 26px; }
.num-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.num-mid b { font-size: 13px; }
.num-mid small { font-size: 11px; color: rgba(255,255,255,.65); }
.num-entry { display: flex; gap: 4px; align-items: center; }
.num-entry input { width: 64px; padding: 7px 8px; border-radius: 9px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.3); color: #fff; font: inherit; }
.num-entry button { font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; color: #10203a; padding: 8px 12px; border-radius: 9px; border: none; background: linear-gradient(135deg, #8ab4ff, #6a9cff); }
.num-entry button:active { transform: scale(.93); }
.num-in { font-size: 12px; font-weight: 700; color: #8ab4ff; white-space: nowrap; }
@media (max-width: 560px) { #numBanner { bottom: 150px; } }

/* ==== spirit.css ==== */
/* Tots — 🎯 Community Goal / Spirit Meter (spirit.js) */
#spiritBanner {
    position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 99983;
    width: min(440px, calc(100vw - 24px));
    background: linear-gradient(135deg, rgba(50,20,10,.96), rgba(45,10,35,.96));
    border: 1px solid rgba(255,140,67,.55); border-radius: 14px; padding: 10px 14px;
    box-shadow: 0 10px 34px rgba(0,0,0,.45); color: #fff; animation: numIn .3s ease;
}
#spiritBanner.spirit-done { border-color: rgba(52,232,176,.6); }
.spirit-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.spirit-top b { font-size: 13px; flex: 1; }
.spirit-you { font-size: 11px; color: rgba(255,255,255,.7); }
.spirit-bar { position: relative; height: 18px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.spirit-bar span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ff8c43, #ffd166); border-radius: 999px; transition: width .35s ease; }
#spiritBanner.spirit-done .spirit-bar span { background: linear-gradient(90deg, #34e8b0, #6a9cff); }
.spirit-bar em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; font-style: normal; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.spirit-tap {
    display: block; width: 100%; margin-top: 8px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
    padding: 10px; border-radius: 11px; border: none; color: #2a1405; background: linear-gradient(135deg, #ffd166, #ff8c43);
}
.spirit-tap:active { transform: scale(.97); }
.spirit-tap:disabled { background: rgba(255,255,255,.14); color: rgba(255,255,255,.6); cursor: default; }
.spirit-win { margin-top: 8px; text-align: center; font-weight: 800; color: #5ef0c0; }
@media (max-width: 560px) { #spiritBanner { bottom: 150px; } }

/* ==== aitools.css ==== */
/* Tots — 🤖 AI Tools (aitools.js) */
.ai-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ai-tool { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 10px 12px; }
.ai-tool .ad-sub { margin: 0 0 8px; }
.ai-tool .ad-row { margin: 0; }
.ai-out { margin-top: 16px; }
.ai-result {
    background: rgba(138,180,255,.08); border: 1px solid rgba(138,180,255,.2); border-radius: 12px;
    padding: 12px 14px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.ai-busy { font-size: 13.5px; color: var(--neo-dim, rgba(235,235,245,.7)); padding: 10px 0; }

/* ==== ownerflex.css ==== */
/* Tots — 👑 Owner Flex (ownerflex.js) */

/* ⭐ Member of the Day banner */
#spotBanner {
    position: fixed; left: 50%; top: 66px; transform: translateX(-50%); z-index: 99960;
    width: min(380px, calc(100vw - 24px)); animation: numIn .4s cubic-bezier(.2,1.1,.4,1);
}
.spot-inner {
    display: flex; align-items: center; gap: 12px; color: #2a2000;
    background: linear-gradient(135deg, #ffe08a, #ffd166 60%, #ffb347);
    border: 1px solid rgba(255,255,255,.5); border-radius: 16px; padding: 12px 14px;
    box-shadow: 0 12px 40px rgba(180,120,0,.4);
}
.spot-star { font-size: 32px; animation: spotSpin 3s linear infinite; }
@keyframes spotSpin { to { transform: rotate(360deg); } }
.spot-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.spot-text small { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.spot-text b { font-size: 17px; font-weight: 800; }
.spot-text span { font-size: 12px; opacity: .85; }
.spot-inner button { background: rgba(0,0,0,.12); border: none; color: #2a2000; border-radius: 8px; cursor: pointer; font-size: 13px; padding: 3px 7px; }

/* 📜 Royal Decree modal */
#decreeModal {
    position: fixed; inset: 0; z-index: 99975; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.6); backdrop-filter: blur(4px); padding: 20px; animation: decreeFade .3s ease;
}
@keyframes decreeFade { from { opacity: 0; } to { opacity: 1; } }
.decree-scroll {
    position: relative; max-width: 440px; width: 100%; text-align: center; color: #3a2a12;
    background: linear-gradient(#fff6e0, #f6e6c4); border: 2px solid #c9a24a; border-radius: 18px;
    padding: 28px 26px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: numIn .4s cubic-bezier(.2,1.2,.4,1);
}
.decree-seal { font-size: 44px; margin-bottom: 4px; }
.decree-scroll h2 { margin: 0 0 12px; font-size: 22px; letter-spacing: .02em; font-family: Georgia, "Times New Roman", serif; }
.decree-scroll p { margin: 0 0 16px; font-size: 16px; line-height: 1.5; font-family: Georgia, serif; }
.decree-by { font-style: italic; font-size: 13px; opacity: .7; margin-bottom: 16px; }
.decree-scroll button { font: inherit; font-weight: 800; cursor: pointer; padding: 10px 22px; border-radius: 999px; border: none; color: #fff; background: linear-gradient(135deg, #c9a24a, #a07820); }
.decree-scroll button:active { transform: scale(.95); }

/* 👑 a little sparkle on owner crowns */
.dc-crown { filter: drop-shadow(0 0 3px rgba(255,209,102,.7)); }

@media (prefers-reduced-motion: reduce) { .spot-star { animation: none; } }

/* ==== adminextras.css ==== */
/* Tots — 🧰 Extras (adminextras.js) */
.xt-health { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.xt-score { font-size: 30px; font-weight: 800; display: flex; align-items: baseline; gap: 6px; }
.xt-score b { font-size: 40px; }
.xt-score small { font-size: 15px; color: var(--neo-dim, rgba(235,235,245,.5)); }
.xt-score-why { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--neo-dim, rgba(235,235,245,.75)); }

.xt-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.xt-note { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 7px 10px; font-size: 13px; position: relative; }
.xt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.xt-watch { display: inline-flex; align-items: center; gap: 6px; }
.xt-x { cursor: pointer; opacity: .55; font-size: 11px; padding: 0 4px; }
.xt-x:hover { opacity: 1; color: #ff8aa0; }
.xt-note .xt-x { position: absolute; right: 8px; top: 7px; }

/* ==== partygames.css ==== */
/* Tots — Party games (partygames.js) */

/* shared banner shell (king, potato) */
.pg-banner {
    position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 99982;
    display: flex; align-items: center; gap: 10px; width: min(420px, calc(100vw - 24px));
    background: linear-gradient(135deg, rgba(40,20,55,.96), rgba(20,20,55,.96));
    border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 9px 13px;
    box-shadow: 0 10px 34px rgba(0,0,0,.45); color: #fff; animation: pgIn .3s ease;
}
@keyframes pgIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pg-ico { font-size: 28px; }
.pg-bomb { animation: pgShake .4s linear infinite; }
@keyframes pgShake { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.pg-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pg-mid b { font-size: 13px; }
.pg-mid small { font-size: 11px; color: rgba(255,255,255,.65); }
.pg-pass { flex: 0 0 auto; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; color: #2a1026; padding: 7px 10px; border-radius: 9px; border: none; background: linear-gradient(135deg, #ffd166, #ff8c43); margin-left: 4px; }
.pg-pass:active { transform: scale(.93); }

/* 🔴🟢 Red/Green light */
#rlglBanner {
    position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 99988;
    display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 999px;
    font-weight: 800; font-size: 15px; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: pgIn .3s ease;
}
#rlglBanner.rlgl-red { background: linear-gradient(135deg, #ff2d55, #c9184a); animation: rlglPulse 1s ease-in-out infinite; }
#rlglBanner.rlgl-green { background: linear-gradient(135deg, #34e8b0, #1aa179); }
@keyframes rlglPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,45,85,.5); } 50% { box-shadow: 0 0 0 10px rgba(255,45,85,0); } }
.rlgl-dot { font-size: 18px; }

/* 🎯 Live Trivia */
#triviaBanner {
    position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 99986;
    width: min(440px, calc(100vw - 24px));
    background: linear-gradient(135deg, rgba(25,20,60,.97), rgba(45,15,55,.97));
    border: 1px solid rgba(138,180,255,.5); border-radius: 16px; padding: 14px; color: #fff;
    box-shadow: 0 12px 40px rgba(0,0,0,.5); animation: pgIn .3s ease;
}
.tv-q { font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.tv-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tv-opt { font: inherit; font-size: 13px; text-align: left; cursor: pointer; padding: 9px 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; }
button.tv-opt:hover { background: rgba(255,255,255,.14); }
.tv-opt:disabled { cursor: default; opacity: .8; }
.tv-picked { border-color: #8ab4ff; background: rgba(138,180,255,.2); }
.tv-correct { border-color: #34e8b0; background: rgba(52,232,176,.22); }
.tv-win { margin-top: 10px; text-align: center; font-weight: 800; font-size: 14px; }

@media (max-width: 560px) {
    .pg-banner, #triviaBanner { bottom: 150px; }
    #rlglBanner { top: 56px; }
}
@media (prefers-reduced-motion: reduce) { .pg-bomb, #rlglBanner.rlgl-red { animation: none; } }

/* ==== ownercosmetics.css ==== */
/* Tots — 👑 Owner cosmetics (ownercosmetics.js) */

/* 🚪 Grand entrance */
#ocEntrance {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 99978;
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    background: linear-gradient(135deg, rgba(30,20,60,.95), rgba(60,20,50,.95)); color: #fff;
    border: 2px solid rgba(255,209,102,.6); border-radius: 20px; padding: 24px 34px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: ocEnterIn 2.6s ease forwards; pointer-events: none;
}
.oc-ent-emoji { font-size: 48px; }
#ocEntrance b { font-size: 20px; font-weight: 800; }
@keyframes ocEnterIn { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.6); } 12% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.05); } }

/* 👁️ Owner is watching */
#ocWatch {
    position: fixed; right: 14px; bottom: 14px; z-index: 99940;
    font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.85);
    background: rgba(20,10,30,.8); border: 1px solid rgba(255,90,122,.4); border-radius: 999px;
    padding: 5px 11px; box-shadow: 0 4px 14px rgba(0,0,0,.35); pointer-events: none; backdrop-filter: blur(6px);
}

/* 📛 Wanted poster */
#ocWanted { position: fixed; inset: 0; z-index: 99977; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); padding: 20px; animation: decreeFade .3s ease; }
.oc-poster { width: 280px; text-align: center; background: #e8d9b5; color: #3a2a12; border: 6px solid #6b4e1e; border-radius: 6px; padding: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.6); font-family: Georgia, "Times New Roman", serif; animation: pgIn .4s cubic-bezier(.2,1.2,.4,1); }
.oc-poster-top { font-size: 34px; font-weight: 900; letter-spacing: .12em; border-bottom: 3px solid #6b4e1e; padding-bottom: 6px; }
.oc-poster-face { font-size: 60px; margin: 10px 0; }
.oc-poster-name { font-size: 22px; font-weight: 800; }
.oc-poster-reason { font-size: 13px; font-style: italic; margin: 6px 0 10px; }
.oc-poster-reward { font-size: 13px; font-weight: 700; border-top: 2px solid #6b4e1e; padding-top: 8px; }
.oc-poster button { margin-top: 12px; font: inherit; font-weight: 800; cursor: pointer; padding: 8px 18px; border-radius: 8px; border: none; background: #6b4e1e; color: #fff; }

/* 🏷️ Title chip in chat */
.oc-title {
    display: inline-block; margin-left: 5px; font-size: 10px; font-weight: 800; vertical-align: middle;
    padding: 1px 7px; border-radius: 999px; background: linear-gradient(135deg, #b69cff, #8ab4ff); color: #10132a;
}

@media (prefers-reduced-motion: reduce) { #ocEntrance { animation-duration: 3s; } }

/* ==== modops.css ==== */
/* Tots — 📋 Ops (modops.js) */
.ops-xp { font-size: 15px; background: rgba(182,156,255,.12); border: 1px solid rgba(182,156,255,.25); border-radius: 12px; padding: 10px 14px; display: inline-block; }
.ops-xp b { font-size: 17px; }
#opsAwardsOut { margin-top: 10px; }

/* ==== adminhistory.css ==== */
/* Tots — 🕰️ History (adminhistory.js) */
.hist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 8px; }
.hist-tile { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; }
.hist-tile b { font-size: 22px; }
.hist-tile span { font-size: 11.5px; color: var(--neo-dim, rgba(235,235,245,.6)); }

/* ==== showcase.css ==== */
/* Tots — 🏛️ Hall of Fame + 📖 Yearbook (showcase.js) */
.sc-modal { position: fixed; inset: 0; z-index: 99970; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); backdrop-filter: blur(5px); padding: 18px; animation: decreeFade .25s ease; }
.sc-box { position: relative; width: min(620px, 100%); max-height: 86vh; overflow-y: auto; background: var(--neo-surface, #15151f); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 24px; color: var(--neo-text, #fff); box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.sc-box h2 { margin: 0 0 4px; font-size: 22px; }
.sc-sub { margin: 0 0 16px; color: var(--neo-dim, rgba(235,235,245,.6)); font-size: 13px; }
.sc-h3 { margin: 18px 0 10px; font-size: 14px; }
.sc-x { position: absolute; right: 16px; top: 16px; background: rgba(255,255,255,.1); border: none; color: inherit; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 14px; }
.sc-empty { color: var(--neo-dim, rgba(235,235,245,.55)); }

.sc-hof { display: flex; flex-direction: column; gap: 12px; }
.sc-fame { margin: 0; background: linear-gradient(135deg, rgba(255,209,102,.1), rgba(255,140,67,.08)); border: 1px solid rgba(255,209,102,.3); border-radius: 14px; padding: 14px 16px; }
.sc-fame blockquote { margin: 0 0 6px; font-size: 15px; font-style: italic; }
.sc-fame figcaption { font-size: 12.5px; color: var(--neo-dim, rgba(235,235,245,.7)); text-align: right; }

.sc-sups { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.sc-sup { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px; text-align: center; }
.sc-sup span { font-size: 26px; display: block; }
.sc-sup b { display: block; font-size: 14px; margin: 3px 0; }
.sc-sup small { font-size: 11px; color: var(--neo-dim, rgba(235,235,245,.6)); }

.sc-yb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.sc-yb-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 10px; text-align: center; }
.sc-yb-face { font-size: 30px; width: 44px; height: 44px; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.06); }
.sc-yb-face img { width: 100%; height: 100%; object-fit: cover; }
.sc-yb-card b { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-yb-card small { font-size: 10px; color: var(--neo-dim, rgba(235,235,245,.6)); }

/* ==== clans.css ==== */
/* Tots — 🏰 Clans (clans.js). Reuses .sc-modal/.sc-box from showcase.css. */
.clan-mine { background: linear-gradient(135deg, rgba(138,180,255,.1), rgba(182,156,255,.08)); border: 1px solid rgba(138,180,255,.3); border-radius: 14px; padding: 14px; margin-bottom: 8px; }
.clan-mine-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.clan-emoji { font-size: 28px; }
.clan-mine-top b { font-size: 17px; }
.clan-mine-top small { display: block; font-size: 12px; color: var(--neo-dim, rgba(235,235,245,.65)); }
.clan-members { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.clan-mem { background: rgba(255,255,255,.07); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; }
.clan-mem small { color: var(--neo-dim, rgba(235,235,245,.55)); }
.clan-create { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.clan-board { display: flex; flex-direction: column; gap: 6px; }
.clan-row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 8px 12px; }
.clan-rank { font-weight: 800; width: 20px; text-align: center; color: var(--neo-dim, rgba(235,235,245,.6)); }
.clan-row-mid { flex: 1; min-width: 0; }
.clan-row-mid b { font-size: 14px; }
.clan-row-mid small { display: block; font-size: 11px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.clan-xp { font-weight: 700; font-size: 13px; }
.clan-btn { font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 7px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: inherit; }
.clan-btn.primary { background: var(--gradient-purple, linear-gradient(135deg,#8ab4ff,#b69cff)); border: none; color: #10132a; }
.clan-btn.danger { border-color: rgba(255,120,140,.5); color: #ff9db0; }
.clan-btn:active { transform: scale(.95); }

/* ==== undo.css ==== */
/* Tots — ↩️ Undo (undo.js) */
.undo-chip { display: inline-flex; align-items: center; gap: 6px; }
.undo-chip button { font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(52,232,176,.4); background: rgba(52,232,176,.12); color: #5ef0c0; }
#undoToast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 100001; display: flex; align-items: center; gap: 12px; background: rgba(20,20,30,.95); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.4); font-size: 13px; }
#undoToast button { font: inherit; font-weight: 700; cursor: pointer; padding: 5px 12px; border-radius: 9px; border: none; background: #8ab4ff; color: #10132a; }

/* ==== badgemaker.css ==== */
/* Tots — 🎖️ Custom Badge Maker (badgemaker.js) */
.cbm-badge { display: inline-block; margin-left: 4px; font-size: 13px; vertical-align: middle; filter: drop-shadow(0 0 2px rgba(255,255,255,.3)); }

/* ==== seasonpass.css ==== */
/* Tots — 🎟️ Season Pass (seasonpass.js). Reuses .sc-modal/.sc-box + .clan-btn. */
.sp-track { height: 12px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; margin: 10px 0 16px; }
.sp-fill { height: 100%; background: linear-gradient(90deg, #8ab4ff, #b69cff, #ff5fa2); border-radius: 999px; transition: width .5s ease; }
.sp-tiers { display: flex; flex-direction: column; gap: 8px; }
.sp-tier { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 10px 14px; opacity: .6; }
.sp-tier.sp-reached { opacity: 1; border-color: rgba(138,180,255,.3); }
.sp-tier-xp { font-weight: 700; font-size: 13px; min-width: 80px; }
.sp-tier-reward { flex: 1; font-size: 14px; }
.sp-tier-reward small { display: block; font-size: 11px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.sp-claimed { font-size: 12px; font-weight: 700; color: #5ef0c0; }
.sp-locked { font-size: 16px; opacity: .5; }

/* ==== automod.css ==== */
/* Tots — 🤖 Auto-moderation (automod.js) */
.am-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.am-rules { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0; }
.am-rules label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }
#amState { color: var(--neo-dim, rgba(235,235,245,.6)); }
#amCard:has(#amOn:checked) #amState { color: #5ef0c0; }

/* ==== quarantine.css ==== */
/* Tots — 🔒 Quarantine (quarantine.js) */
#qOverlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(8,6,16,.97); backdrop-filter: blur(8px); padding: 18px; }
.q-box { width: min(440px, 100%); background: var(--neo-surface, #15151f); border: 1px solid rgba(255,140,67,.4); border-radius: 18px; padding: 20px; color: var(--neo-text, #fff); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.q-head { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.q-note { font-size: 13px; color: var(--neo-dim, rgba(235,235,245,.7)); margin: 0 0 12px; }
.q-msgs { height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: rgba(0,0,0,.25); border-radius: 12px; margin-bottom: 10px; }
.q-admin { height: 200px; }
.q-msg { max-width: 80%; padding: 7px 11px; border-radius: 12px; font-size: 13px; }
.q-msg b { display: block; font-size: 10.5px; opacity: .7; margin-bottom: 1px; }
.q-me { align-self: flex-end; background: linear-gradient(135deg, #8ab4ff, #6a9cff); color: #10132a; }
.q-staff { align-self: flex-start; background: rgba(255,255,255,.1); }
.q-input { display: flex; gap: 8px; }
.q-input input { flex: 1; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.3); color: #fff; font: inherit; }
.q-input button { font: inherit; font-weight: 700; cursor: pointer; padding: 9px 16px; border-radius: 10px; border: none; background: #ff8c43; color: #2a1405; }

/* ==== meetingplus.css ==== */
/* Tots — 📋 Meetings+ (meetingplus.js) */
#mplus { margin-top: 18px; }
.mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mp-col { display: flex; flex-direction: column; gap: 14px; }
.mp-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 14px; }
.mp-card h4 { margin: 0 0 10px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.mp-count { background: rgba(52,232,176,.18); color: #5ef0c0; border-radius: 999px; padding: 1px 9px; font-size: 12px; }
.mp-muted { color: var(--neo-dim, rgba(235,235,245,.55)); font-size: 12.5px; }
.mp-here { display: flex; flex-wrap: wrap; gap: 5px; }
.mp-pill { background: rgba(255,255,255,.08); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.mp-row { display: flex; gap: 6px; margin-top: 8px; }
.mp-row input, #mpPollForm input, #mpPollForm textarea { flex: 1; padding: 8px 10px; border-radius: 9px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.25); color: inherit; font: inherit; }
.mp-row button, #mpPollForm button, #mpAgendaForm button { font: inherit; font-weight: 700; cursor: pointer; padding: 8px 14px; border-radius: 9px; border: none; background: var(--gradient-purple, linear-gradient(135deg,#8ab4ff,#b69cff)); color: #10132a; }
.mp-ag { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 4px 0; }
.mp-ag.mp-done span { text-decoration: line-through; opacity: .6; }
.mp-ag span { flex: 1; }
.mp-prog { height: 6px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; margin-bottom: 8px; }
.mp-prog span { display: block; height: 100%; background: linear-gradient(90deg,#34e8b0,#8ab4ff); border-radius: 999px; transition: width .3s; }
.mp-x { background: none; border: none; color: rgba(255,255,255,.5); cursor: pointer; font-size: 12px; }
.mp-x:hover { color: #ff8aa0; }
.mp-newpoll { margin-top: 8px; font-size: 12.5px; }
.mp-newpoll summary { cursor: pointer; color: var(--neo-dim, rgba(235,235,245,.7)); }
#mpPollForm { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.mp-pollq { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.mp-opt { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; cursor: pointer; padding: 9px 11px; margin-bottom: 5px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); color: inherit; overflow: hidden; }
.mp-opt-bar { position: absolute; inset: 0 auto 0 0; background: rgba(138,180,255,.25); border-radius: 10px; transition: width .4s; }
.mp-opt-t { position: relative; flex: 1; font-size: 13px; }
.mp-opt-n { position: relative; font-size: 12px; font-weight: 700; }
.mp-mine { border-color: #8ab4ff; }
.mp-link { background: none; border: none; color: #8ab4ff; cursor: pointer; font: inherit; text-decoration: underline; }
.mp-qlist { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 240px; overflow-y: auto; }
.mp-q { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.03); border-radius: 10px; padding: 7px 10px; }
.mp-q-b { flex: 1; font-size: 13px; }
.mp-upv { font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px 9px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: inherit; white-space: nowrap; }
.mp-upv-on { border-color: #8ab4ff; color: #8ab4ff; }
.mp-react { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.mp-react-lbl { font-size: 12.5px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.mp-react-btn { font-size: 20px; cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 4px 9px; }
.mp-react-btn:active { transform: scale(.85); }
#mpReactLayer { position: fixed; inset: 0; pointer-events: none; z-index: 99950; overflow: hidden; }
.mp-float { position: absolute; bottom: 80px; font-size: 34px; animation: mpFloat 2.6s ease-out forwards; }
@keyframes mpFloat { 0% { opacity: 0; transform: translateY(0) scale(.5); } 15% { opacity: 1; transform: translateY(-20px) scale(1.1); } 100% { opacity: 0; transform: translateY(-320px) scale(1); } }
@media (max-width: 700px) { .mp-grid { grid-template-columns: 1fr; } }

/* ==== autoschedule.css ==== */
/* Tots — ⏰ Auto-Scheduler (autoschedule.js) */
.asch-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.asch-params { display: inline-flex; gap: 6px; align-items: center; }
.asch-params input, .asch-params select { padding: 7px 9px; }

/* ==== secretsanta.css ==== */
/* Tots — 🎅 Secret Santa (secretsanta.js). Reuses .sc-modal/.sc-box/.clan-btn. */
.ss-btn { background: linear-gradient(135deg, #e23b3b, #1aa179) !important; color: #fff !important; }
.ss-box { text-align: center; }
.ss-hero { font-size: 44px; }
.ss-form { display: flex; gap: 8px; margin: 12px 0; }
.ss-form input { flex: 1; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.25); color: inherit; font: inherit; }
.ss-form button { font: inherit; font-weight: 700; cursor: pointer; padding: 9px 16px; border-radius: 10px; border: none; background: var(--gradient-purple, linear-gradient(135deg,#8ab4ff,#b69cff)); color: #10132a; }
.ss-reveal { background: linear-gradient(135deg, rgba(226,59,59,.1), rgba(26,161,121,.1)); border: 1px solid rgba(226,59,59,.3); border-radius: 16px; padding: 18px; margin-top: 10px; }
.ss-target { font-size: 26px; font-weight: 800; margin: 8px 0; }
.ss-wish { font-size: 14px; font-style: italic; }

/* ==== arcade2.css ==== */
/* Tots — Arcade pack (arcade2.js). Reuses .dg-entry / .du-modal / .du-box. */
.a2-box { max-width: 420px; text-align: center; }
.a2-score { font-size: 14px; margin: 8px 0; }
.a2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; background: rgba(255,255,255,.06); padding: 8px; border-radius: 12px; margin: 10px 0; aspect-ratio: 1; }
.a2-cell { display: flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 800; font-size: clamp(16px, 5vw, 26px); background: rgba(255,255,255,.05); color: #fff; }
.a2-v2 { background: #3a3550; } .a2-v4 { background: #4a4066; } .a2-v8 { background: #6a5acd; } .a2-v16 { background: #8363e0; }
.a2-v32 { background: #a05ad6; } .a2-v64 { background: #c45ad0; } .a2-v128 { background: #e06bb0; color: #fff; } .a2-v256 { background: #ff7a8a; }
.a2-v512 { background: #ffa05b; } .a2-v1024 { background: #ffc46b; color: #2a1a00; } .a2-v2048 { background: #ffd166; color: #2a1a00; box-shadow: 0 0 16px #ffd166; }

.am-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.am-card { aspect-ratio: 1; border: none; border-radius: 10px; background: var(--gradient-purple, linear-gradient(135deg,#8ab4ff,#b69cff)); cursor: pointer; font-size: clamp(20px, 6vw, 30px); display: flex; align-items: center; justify-content: center; }
.am-card.am-open { background: rgba(255,255,255,.12); }
.am-card.am-done { background: rgba(52,232,176,.25); cursor: default; }
.am-face { pointer-events: none; }

.rx-box { height: 160px; display: flex; align-items: center; justify-content: center; border-radius: 14px; font-size: 20px; font-weight: 800; cursor: pointer; margin: 12px 0; color: #fff; user-select: none; }
.rx-wait { background: #c9184a; }
.rx-go { background: #1aa179; }
.rx-early { background: #ff8c43; }
.rx-result { background: #3a3550; }

/* ==== arcade3.css ==== */
/* Tots — Arcade pack 2 (arcade3.js). Reuses .dg-entry / .du-modal / .a2-box. */
.sn-cv { width: 100%; max-width: 300px; aspect-ratio: 1; border-radius: 12px; background: #15151f; touch-action: none; display: block; margin: 8px auto; }

.ms-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; margin: 10px 0; max-width: 340px; margin-inline: auto; }
.ms-cell { aspect-ratio: 1; border: none; border-radius: 4px; background: rgba(255,255,255,.12); cursor: pointer; font-weight: 800; font-size: clamp(11px, 3.2vw, 15px); display: flex; align-items: center; justify-content: center; padding: 0; }
.ms-cell.ms-open { background: rgba(255,255,255,.04); cursor: default; }
.ms-n1 { color: #8ab4ff; } .ms-n2 { color: #5ef0c0; } .ms-n3 { color: #ff8aa0; } .ms-n4 { color: #b69cff; } .ms-n5 { color: #ffc46b; } .ms-n6 { color: #ff8c43; } .ms-n7 { color: #ff5f6d; } .ms-n8 { color: #fff; }

.wk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px auto; max-width: 300px; }
.wk-hole { aspect-ratio: 1; border: none; border-radius: 50%; background: radial-gradient(circle at 50% 70%, #3a2a1a, #1a1208); cursor: pointer; overflow: hidden; position: relative; }
.wk-mole { position: absolute; left: 15%; right: 15%; bottom: -60%; top: 100%; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 50% 30%, #b07a4a, #7a4e28); transition: top .12s ease, bottom .12s ease; }
.wk-hole.wk-up .wk-mole { top: 18%; bottom: 8%; }
.wk-hole.wk-up .wk-mole::after { content: '🐹'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(22px, 7vw, 36px); }

/* ==== dailylogin.css ==== */
/* Tots — 📅 Daily Login (dailylogin.js). Reuses .sc-modal/.sc-box/.clan-btn. */
.dl-box { text-align: center; max-width: 460px; }
.dl-flame { font-size: 44px; }
.dl-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 16px 0; }
.dl-day { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.dl-day small { font-size: 9px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.dl-day b { font-size: 15px; }
.dl-day span { font-size: 11px; }
.dl-got { background: rgba(52,232,176,.15); border-color: rgba(52,232,176,.35); }
.dl-next { background: rgba(255,209,102,.18); border-color: rgba(255,209,102,.5); box-shadow: 0 0 12px rgba(255,209,102,.3); }
@media (max-width: 480px) { .dl-day b { font-size: 13px; } }

/* ==== casino.css ==== */
/* Tots — 🎰 Casino (casino.js). Reuses .dg-entry / .du-modal / .du-box. */
.cas-box { max-width: 440px; text-align: center; }
.cas-bal { font-size: 15px; margin: 6px 0 12px; }
.cas-bal b { color: #ffd166; }
.cas-bet { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; }
.cas-chip { font: inherit; font-weight: 800; cursor: pointer; padding: 7px 14px; border-radius: 999px; border: 2px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: inherit; }
.cas-chip.cas-on { border-color: #ffd166; color: #ffd166; }
.cas-games { display: flex; flex-direction: column; gap: 10px; }
.cas-game { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px; }
.cas-game h3 { margin: 0 0 6px; font-size: 15px; }
.cas-mini { margin: 0 0 8px; font-size: 11.5px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.cas-row { display: flex; gap: 8px; justify-content: center; }
.cas-play { font: inherit; font-weight: 700; cursor: pointer; padding: 9px 18px; border-radius: 10px; border: none; background: var(--gradient-purple, linear-gradient(135deg,#8ab4ff,#b69cff)); color: #10132a; }
.cas-play:active { transform: scale(.94); }
.cas-out { min-height: 28px; margin: 12px 0; font-size: 15px; font-weight: 700; }
.cas-reels { font-size: 40px; letter-spacing: 8px; margin-bottom: 4px; }
.cas-win { color: #5ef0c0; }
.cas-lose { color: #ff8aa0; }
.cas-note { font-size: 11px; color: var(--neo-dim, rgba(235,235,245,.5)); }

/* ==== arcade4.css ==== */
/* Tots — Arcade pack 3 (arcade4.js). Reuses .dg-entry / .du-modal / .a2-box / .cas-*. */
.gom-grid { display: grid; gap: 2px; margin: 10px auto; max-width: 340px; background: rgba(210,180,120,.15); padding: 4px; border-radius: 8px; }
.gom-c { aspect-ratio: 1; border: 1px solid rgba(255,255,255,.08); border-radius: 3px; background: rgba(210,180,120,.08); cursor: pointer; font-size: clamp(9px, 2.6vw, 14px); padding: 0; display: flex; align-items: center; justify-content: center; }
.gom-c:hover { background: rgba(255,255,255,.12); }
.hl-card { width: 100px; height: 140px; margin: 14px auto; border-radius: 12px; background: #fff; color: #111; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.hl-card .hl-red { color: #d1344b; } .hl-card .hl-blk { color: #111; }

/* ==== mememaker.css ==== */
/* Tots — 🎨 Meme Maker (mememaker.js). Reuses .sc-modal/.sc-box/.clan-btn. */
.mm-box { max-width: 460px; text-align: center; }
.mm-canvas { width: 100%; max-width: 320px; aspect-ratio: 1; border-radius: 12px; background: #20202c; margin: 8px auto; display: block; }
.mm-row { display: flex; gap: 8px; margin: 8px 0; }
.mm-row input { flex: 1; padding: 9px 11px; border-radius: 9px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.25); color: inherit; font: inherit; }
.mm-picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; min-height: 20px; }
.mm-pick { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
.mm-pick:hover { border-color: #8ab4ff; }
.mm-muted { color: var(--neo-dim, rgba(235,235,245,.55)); font-size: 12.5px; grid-column: 1/-1; }

/* ==== stories.css ==== */
/* Tots — 📸 Stories (stories.js). Reuses .sc-modal/.sc-box/.clan-btn/.mm-*. */
.st-rings { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.st-ring { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; color: inherit; width: 64px; }
.st-ring-av { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; background: var(--neo-surface, #222); border: 3px solid; border-image: linear-gradient(135deg, #ff5f6d, #ffc371, #8ab4ff) 1; }
.st-add .st-ring-av { border: 3px dashed rgba(255,255,255,.3); color: #8ab4ff; }
.st-ring small { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60px; }

.st-preview { width: 100%; aspect-ratio: 9/16; max-height: 300px; border-radius: 14px; margin: 10px auto; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.st-preview span { color: #fff; font-size: 22px; font-weight: 800; text-shadow: 0 2px 6px rgba(0,0,0,.6); text-align: center; padding: 10px; }
#stText, .st-compose input { width: 100%; padding: 9px 11px; border-radius: 9px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.25); color: inherit; font: inherit; box-sizing: border-box; margin: 6px 0; }
.st-colors { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
.st-color { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.st-color.on { border-color: #fff; transform: scale(1.15); }

#stViewer { position: fixed; inset: 0; z-index: 100000; background: #000; display: flex; flex-direction: column; }
.st-v-bars { display: flex; gap: 4px; padding: 10px 12px 4px; }
.st-v-bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); }
.st-v-bar.done { background: #fff; } .st-v-bar.cur { background: #fff; }
.st-v-head { display: flex; align-items: center; gap: 10px; padding: 4px 14px; color: #fff; }
.st-v-head b { flex: 1; }
.st-v-del, .st-v-x { background: rgba(255,255,255,.15); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 15px; }
.st-v-content { flex: 1; margin: 8px; border-radius: 14px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.st-v-text { color: #fff; font-size: 26px; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.7); text-align: center; padding: 20px; }

/* ==== watchparty.css ==== */
/* Tots — 📺 Watch Party (watchparty.js). Reuses .sc-modal/.sc-box/.clan-btn/.mm-row. */
.wp-box { max-width: 640px; }
.wp-player { width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #000; margin: 10px 0; }
.wp-player iframe { width: 100%; height: 100%; border: 0; }
.wp-empty { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--neo-dim, rgba(235,235,245,.6)); font-size: 14px; text-align: center; padding: 20px; }
.wp-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wp-host { font-size: 12.5px; color: var(--neo-dim, rgba(235,235,245,.65)); flex: 1; }
.wp-ctl { font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 7px 13px; border-radius: 9px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.07); color: inherit; }
.wp-ctl:active { transform: scale(.94); }

/* ==== adminmore.css ==== */
/* Tots — ⚡ Power Tools (adminmore.js) */
.pw-new { margin: 10px 0; }
.pw-new summary { cursor: pointer; color: var(--neo-accent, #8ab4ff); font-weight: 600; }
.pw-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 8px 0; }
.pw-acts label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.pw-prev { background: rgba(138,180,255,.08); border: 1px solid rgba(138,180,255,.2); border-radius: 12px; padding: 12px 14px; margin-top: 8px; }
.pw-prev h4 { margin: 0 0 6px; }
.pw-prev ul { margin: 6px 0; padding-left: 20px; }
.pw-prev li { font-size: 13px; margin: 2px 0; }

/* ==== aiadmin.css ==== */
/* Tots — 🧠 AI Admin (aiadmin.js) */
.aia-msg { margin: 4px 0; padding: 6px 10px; border-left: 3px solid rgba(255,255,255,.18); font-size: 13px; }
.aia-reco { margin-top: 6px; font-size: 13px; }
.aia-reco b { color: #8ab4ff; }
.aia-vibes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; }
.aia-vibe { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 10px; }
.aia-vibe b { display: block; font-size: 12px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.aia-vibe span { font-size: 15px; font-weight: 600; }

/* ==== economy.css ==== */
/* Tots — 💰 Economy control (economy.js) */
.econ-mult { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.econ-mult input[type=range] { width: 100%; max-width: 320px; }
.econ-mult b { color: #ffd166; }
.econ-big { font-size: 15px; margin: 8px 0; }
.econ-big b { font-size: 22px; }
.econ-bars { display: flex; align-items: flex-end; gap: 3px; height: 64px; margin: 10px 0; }
.econ-bar { flex: 1; background: linear-gradient(180deg, #ffd166, #ff8c43); border-radius: 3px 3px 0 0; min-width: 3px; }
.econ-warn { color: #ffc46b; font-size: 13px; }

/* ==== slashcmds.css ==== */
/* Tots — ⌨️ Slash commands (slashcmds.js) */
#slCard code { background: rgba(255,255,255,.08); padding: 2px 6px; border-radius: 5px; font-size: 12px; }

/* ==== onboarding.css ==== */
/* Tots — 🆕 Onboarding tour (onboarding.js) */
#obModal { position: fixed; inset: 0; z-index: 99976; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.65); backdrop-filter: blur(5px); padding: 20px; }
.ob-card { width: min(380px, 100%); text-align: center; background: var(--neo-surface, #15151f); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 28px 24px; color: var(--neo-text, #fff); box-shadow: 0 24px 70px rgba(0,0,0,.6); animation: pgIn .35s cubic-bezier(.2,1.2,.4,1); }
.ob-emoji { font-size: 50px; }
.ob-card h2 { margin: 8px 0 8px; font-size: 22px; }
.ob-card p { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--neo-dim, rgba(235,235,245,.8)); }
.ob-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; }
.ob-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); }
.ob-dot.on { background: #8ab4ff; width: 20px; border-radius: 4px; }
#obCard code { background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* ==== qol.css ==== */
/* Tots — ✨ Quick controls (qol.js). Focus/Calm mode. */
html.cb-calm #neoSpace,
html.cb-calm #tbWall,
html.cb-calm .neo-glow,
html.cb-calm #neoGlow { display: none !important; }
html.cb-calm, html.cb-calm body { background: #0b0b12 !important; }
html.cb-calm *, html.cb-calm *::before, html.cb-calm *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.08s !important;
    scroll-behavior: auto !important;
}
html.cb-calm .card-tilt, html.cb-calm [data-tilt] { transform: none !important; }

/* ==== usertimeline.css ==== */
/* Tots — 🧾 User Timeline (usertimeline.js) */
.ut-head { background: rgba(255,255,255,.05); border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: 13px; }
.ut-timeline { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; }
.ut-ev { display: flex; align-items: baseline; gap: 10px; padding: 6px 8px; border-left: 2px solid rgba(255,255,255,.1); font-size: 13px; }
.ut-ic { flex: 0 0 20px; }
.ut-t { flex: 0 0 auto; font-size: 11px; color: var(--neo-dim, rgba(235,235,245,.5)); min-width: 120px; }
.ut-x { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* ==== quests.css ==== */
/* Tots — 🎯 Quests (quests.js). Reuses .sc-modal/.sc-box/.clan-btn. */
.qs-box { max-width: 460px; }
.qs-q { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.qs-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.qs-emoji { font-size: 24px; }
.qs-info { flex: 1; min-width: 0; }
.qs-info b { font-size: 14px; }
.qs-info small { display: block; font-size: 12px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.qs-reward { font-weight: 700; font-size: 13px; color: #ffd166; }
.qs-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; margin-bottom: 8px; }
.qs-bar span { display: block; height: 100%; background: linear-gradient(90deg,#8ab4ff,#34e8b0); border-radius: 999px; transition: width .4s; }
.qs-lock { font-size: 12px; color: var(--neo-dim, rgba(235,235,245,.55)); }

/* ==== saved.css ==== */
/* Tots — 🔖 Saved messages (saved.js). Reuses .sc-modal/.sc-box/.clan-btn. */
.sv-btn { margin-left: 6px; font-size: 11px; padding: 1px 5px; border-radius: 6px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); cursor: pointer; opacity: .4; transition: opacity .12s; }
.message:hover .sv-btn { opacity: .9; }
.sv-btn:hover { opacity: 1; }
.sv-box { max-width: 480px; }
.sv-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; max-height: 60vh; overflow-y: auto; }
.sv-item { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 10px 12px; position: relative; }
.sv-meta { font-size: 11px; color: var(--neo-dim, rgba(235,235,245,.6)); margin-bottom: 4px; }
.sv-text { font-size: 13.5px; overflow-wrap: anywhere; }
.sv-rm { position: absolute; right: 8px; top: 8px; font-size: 11px; background: none; border: none; color: #ff8aa0; cursor: pointer; }

/* ==== chatplus.css ==== */
/* Tots — 💬 Chat plus (chatplus.js) */
.message-content code, .dm-bubble code { font-family: ui-monospace, Menlo, monospace; font-size: .9em; background: var(--tt-raised, rgba(127,127,127,.18)); padding: 1px 5px; border-radius: 5px; }
.message-content p a, .dm-bubble p a { color: var(--tt-accent, #5865f2); text-decoration: underline; word-break: break-all; }

.cp-voice { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.cp-voice audio { height: 34px; max-width: 240px; }
.cp-vsecs { font-size: 11px; color: var(--tt-dim, #888); }

.chat-tool-btn.cp-emoji-btn, .chat-tool-btn.cp-voice-btn, .chat-tool-btn.cp-mute { background: none; border: 0; font-size: 18px; cursor: pointer; padding: 0 6px; opacity: .8; flex: none; }
.chat-tool-btn.cp-emoji-btn:hover, .chat-tool-btn.cp-voice-btn:hover, .chat-tool-btn.cp-mute:hover { opacity: 1; }
.cp-voice-btn.cp-rec { color: #e5484d; animation: cpPulse 1s infinite; opacity: 1; }
@keyframes cpPulse { 50% { transform: scale(1.2); } }
.cp-has-draft { box-shadow: inset 3px 0 0 var(--tt-warn, #f5a524); }

.cp-emoji { position: fixed; z-index: 99970; width: 290px; height: 320px; display: flex; flex-direction: column; background: var(--tt-surface, #1e1f22); border: 1px solid var(--tt-line, #333); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); padding: 8px; }
.cp-esearch { width: 100%; box-sizing: border-box; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--tt-line, #333); background: var(--tt-bg, #111); color: var(--tt-text, #eee); margin-bottom: 6px; }
.cp-egrid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); align-content: start; gap: 2px; }
.cp-egrid button { background: none; border: 0; font-size: 22px; padding: 3px 0; border-radius: 6px; cursor: pointer; }
.cp-egrid button:hover { background: var(--tt-hover, rgba(127,127,127,.2)); }
.cp-dim { grid-column: 1 / -1; color: var(--tt-dim, #888); text-align: center; font-size: 13px; }

.message-actions .cp-fwd, .message-actions .cp-muteuser, .message-actions .cp-explain { background: none; border: 0; cursor: pointer; }
.cp-thread { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--tt-accent, #5865f2); background: none; border: 0; cursor: pointer; padding: 0; }
.cp-thread:hover { text-decoration: underline; }
.message.cp-flash { animation: cpFlash 1.6s; }
@keyframes cpFlash { 0%, 60% { background: color-mix(in srgb, var(--tt-accent, #5865f2) 22%, transparent); } }
.message.cp-hidden > *:not(.cp-hidbar) { display: none !important; }
.cp-hidbar { font-size: 12px; color: var(--tt-dim, #888); font-style: italic; cursor: pointer; padding: 2px 0; }

.cp-modal { position: fixed; inset: 0; z-index: 99960; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.cp-box { position: relative; width: 100%; max-width: 440px; max-height: 80vh; overflow-y: auto; background: var(--tt-surface, #1e1f22); color: var(--tt-text, #eee); border-radius: 14px; padding: 18px; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.cp-box h3 { margin: 0 0 12px; }
.cp-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: inherit; font-size: 18px; cursor: pointer; }
.cp-btn { background: var(--tt-raised, #2b2d31); color: var(--tt-text, #eee); border: 1px solid var(--tt-line, #333); border-radius: 8px; padding: 8px 12px; cursor: pointer; font-weight: 600; }
.cp-btn:hover { background: var(--tt-hover, #35373c); }
.cp-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.cp-quote { border-left: 3px solid var(--tt-accent, #5865f2); padding: 6px 10px; margin-bottom: 12px; font-size: 13px; color: var(--tt-dim, #aaa); }
.cp-tlist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cp-trow { padding: 8px 10px; border-radius: 8px; background: var(--tt-raised, #2b2d31); font-size: 14px; }
.cp-trow b { display: block; font-size: 12px; margin-bottom: 2px; }
.cp-tparent { border-left: 3px solid var(--tt-accent, #5865f2); }

.cp-newpill { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 5; display: none; background: var(--tt-accent, #5865f2); color: #fff; border: 0; border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.cp-newpill.on { display: block; }
.cp-markall { display: block; width: calc(100% - 16px); margin: 2px 8px 6px; padding: 5px 8px; font-size: 12px; font-weight: 600; background: none; border: 1px dashed var(--tt-line, #444); color: var(--tt-dim, #aaa); border-radius: 8px; cursor: pointer; }
.cp-markall:hover { color: var(--tt-text, #eee); }
.nav-btn.cp-room-muted { opacity: .6; }
.nav-btn.cp-room-muted .unread-badge { display: none !important; }

.cp-seen { font-size: 11px; color: var(--tt-dim, #888); text-align: right; width: 100%; margin-top: 2px; }
.dm-row.self { flex-wrap: wrap; justify-content: flex-end; }

/* Phones: a dozen tool buttons + the box don't fit on one line — box + Send on top, tools wrap underneath */
@media (max-width: 600px) {
    #tots#tots .chat-input-container { flex-wrap: wrap !important; row-gap: 6px; }
    #tots#tots .chat-input-container > .chat-input { flex: 1 1 calc(100% - 96px) !important; min-width: 0 !important; order: -2; }
    #tots#tots .chat-input-container > .send-btn { order: -1; flex: none; }
    #tots#tots .chat-input-container > button:not(.send-btn), #tots#tots .chat-input-container > label { flex: none; }
}

/* ==== profileplus.css ==== */
/* Tots — 🪪 Profile plus (profileplus.js) */
.rw-prof-banner.pp-has-banner { background-size: cover !important; background-position: center !important; }
.pp-box { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.pp-show { display: flex; gap: 8px; justify-content: center; }
.pp-sbadge { display: flex; flex-direction: column; align-items: center; min-width: 78px; padding: 8px 6px; border-radius: 12px; background: var(--tt-raised, #2b2d31); border: 1px solid var(--tt-line, #333); }
.pp-sbadge span { font-size: 26px; line-height: 1.1; }
.pp-sbadge small { font-size: 11px; font-weight: 700; text-align: center; }
.pp-song { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--tt-line, #333); background: var(--tt-raised, #2b2d31); color: var(--tt-text, #eee); cursor: pointer; font-size: 13px; }
.pp-song b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.pp-song span { margin-left: auto; color: var(--tt-accent, #5865f2); font-weight: 700; }
.pp-about { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pp-about div { padding: 6px 10px; border-radius: 8px; background: var(--tt-raised, #2b2d31); font-size: 13px; }
.pp-about small { display: block; color: var(--tt-dim, #999); font-size: 11px; }
.pp-best small { color: var(--tt-dim, #999); font-size: 12px; }
.pp-bestlist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pp-chip { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--tt-line, #333); background: none; color: var(--tt-text, #eee); cursor: pointer; font-size: 12px; }
.pp-views { font-size: 12px; color: var(--tt-dim, #999); }
.pp-link { background: none; border: 0; padding: 0; color: var(--tt-accent, #5865f2); cursor: pointer; font: inherit; text-decoration: underline; }
.pp-visitors { font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.pp-visitors small { color: var(--tt-dim, #999); }

.pp-modal { position: fixed; inset: 0; z-index: 100001; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pp-card { position: relative; width: 100%; max-width: 480px; max-height: 85vh; overflow-y: auto; background: var(--tt-surface, #1e1f22); color: var(--tt-text, #eee); border-radius: 14px; padding: 18px; }
.pp-card h3 { margin: 0 0 10px; }
.pp-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: inherit; font-size: 18px; cursor: pointer; }
.pp-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.pp-tabs button { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--tt-line, #333); background: none; color: var(--tt-text, #eee); cursor: pointer; font-size: 12px; font-weight: 600; }
.pp-tabs button.on { background: var(--tt-accent, #5865f2); border-color: transparent; color: #fff; }
.pp-card section { display: flex; flex-direction: column; gap: 8px; }
.pp-card section[hidden] { display: none; }
.pp-dim { color: var(--tt-dim, #999); font-size: 13px; margin: 0; }
.pp-bprev { height: 110px; border-radius: 10px; background: var(--tt-raised, #2b2d31) center / cover no-repeat; }
.pp-lab { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; }
.pp-picks { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.pp-pick { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.pp-songnow { font-size: 13px; }

.pp-suggest { margin: 10px 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--tt-surface, #1e1f22); border: 1px solid var(--tt-line, #333); }
.pp-suggest h3 { margin: 0 0 8px; font-size: 15px; }
.pp-sglist { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.pp-sg { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 10px; background: var(--tt-raised, #2b2d31); }
.pp-sg small { color: var(--tt-dim, #999); font-size: 11px; }
@media (max-width: 500px) { .pp-about { grid-template-columns: 1fr; } .pp-show { flex-wrap: wrap; } }

/* ==== homeplus.css ==== */
/* Tots — 🏠 Home plus (homeplus.js) */
.neo-home .neo-hero { order: 0; }
.hp-arrbar { order: -1; grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 6px; margin-bottom: -4px; }
.hp-arrange { padding: 4px 10px; border-radius: 8px; border: 1px solid var(--tt-line, #333); background: var(--tt-surface, #1e1f22); color: var(--tt-dim, #aaa); font-size: 12px; font-weight: 600; cursor: pointer; }
.hp-arrange:hover { color: var(--tt-text, #eee); }
.hp-arranging .neo-tile { position: relative; outline: 2px dashed var(--tt-accent, #5865f2); outline-offset: -2px; cursor: grab; }
.hp-arranging .neo-tile.hp-dragging { opacity: .4; }
.hp-move { position: absolute; top: 6px; right: 6px; z-index: 3; display: flex; gap: 4px; }
.hp-move button { width: 28px; height: 28px; border-radius: 8px; border: 0; background: var(--tt-accent, #5865f2); color: #fff; font-weight: 700; cursor: pointer; }

.hp-pins { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--tt-line, #333); }
.hp-pins:empty { display: none; }
.hp-pin { width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--tt-raised, #2b2d31); font-size: 19px; cursor: pointer; }
.hp-pin:hover { background: var(--tt-hover, #35373c); }
@media (max-width: 900px) { .hp-pins { display: none; } }
#tots#tots .sidebar .nav-btn .hp-star { margin-left: auto; padding: 0 4px; opacity: 0; color: var(--tt-dim, #999); font-size: 14px; cursor: pointer; }
#tots#tots .sidebar .nav-btn:hover .hp-star, #tots#tots .sidebar .nav-btn .hp-star.on { opacity: 1; }
@media (hover: none) { #tots#tots .sidebar .nav-btn .hp-star { opacity: .5; } }
#tots#tots .sidebar .nav-btn .hp-star.on { color: #f5c542; }
.sidebar .nav-btn .unread-badge:not(.hidden) ~ .hp-star { margin-left: 4px; }

.hp-tile-h { font-weight: 700; margin-bottom: 8px; }
.hp-tile-b { display: flex; flex-direction: column; gap: 4px; }
.hp-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: 8px; border: 0; background: none; color: var(--tt-text, #eee); text-align: left; cursor: pointer; }
.hp-row:hover { background: var(--tt-hover, rgba(127,127,127,.15)); }
.hp-ic { font-size: 18px; width: 24px; text-align: center; flex: none; }
.hp-tx { display: flex; flex-direction: column; min-width: 0; }
.hp-tx b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-tx small { font-size: 11px; color: var(--tt-dim, #999); }
.hp-dim { color: var(--tt-dim, #999); font-size: 13px; margin: 0; }
.neo-home .neo-continue, .neo-home .neo-activity { grid-column: span 3; }
@media (max-width: 900px) { .neo-home .neo-continue, .neo-home .neo-activity { grid-column: span 2 !important; } }

/* ==== studyplus.css ==== */
/* Tots — 📚 Study plus (studyplus.js) */
.sp-card { margin: 16px 0; padding: 14px 16px; border-radius: 14px; background: var(--tt-surface, #1e1f22); border: 1px solid var(--tt-line, #333); color: var(--tt-text, #eee); }
.sp-card h3 { margin: 0 0 10px; font-size: 16px; }
.sp-in { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--tt-line, #333); background: var(--tt-bg, #111); color: var(--tt-text, #eee); font: inherit; font-size: 14px; min-width: 0; box-sizing: border-box; }
.sp-num { width: 80px; }
.sp-ta { width: 100%; min-height: 260px; resize: vertical; line-height: 1.5; }
.sp-btn { padding: 7px 12px; border-radius: 8px; border: 0; background: var(--tt-accent, #5865f2); color: #fff; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sp-btn.sp-ghost { background: var(--tt-raised, #2b2d31); color: var(--tt-text, #eee); }
.sp-btn:disabled { opacity: .6; cursor: default; }
.sp-row2 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.sp-row2 .sp-in:not(.sp-num) { flex: 1 1 140px; }
.sp-list { display: flex; flex-direction: column; gap: 6px; }
.sp-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--tt-raised, #2b2d31); }
.sp-row.sp-link { width: 100%; border: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.sp-row.sp-sub { background: none; padding: 3px 10px 3px 24px; font-size: 13px; }
.sp-grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-row.sp-sub .sp-grow { display: block; }
.sp-grow small, .sp-row small { color: var(--tt-dim, #999); font-size: 11px; }
.sp-dim { color: var(--tt-dim, #999); font-size: 13px; margin: 4px 0; }
.sp-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sp-gsub { display: flex; flex-direction: column; gap: 2px; }
#spGrChart { width: 100%; height: auto; margin-bottom: 8px; }
.sp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.sp-kpis div { padding: 10px; border-radius: 10px; background: var(--tt-raised, #2b2d31); text-align: center; }
.sp-kpis b { display: block; font-size: 22px; }
.sp-kpis small { color: var(--tt-dim, #999); font-size: 11px; }
.sp-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 120px; align-items: end; }
.sp-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.sp-bar i { width: 70%; min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--tt-accent, #5865f2); }
.sp-bar small { font-size: 11px; color: var(--tt-dim, #999); }
.sp-modal { position: fixed; inset: 0; z-index: 99960; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.sp-box { position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; background: var(--tt-surface, #1e1f22); color: var(--tt-text, #eee); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.sp-box h3 { margin: 0 0 4px; }
.sp-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: inherit; font-size: 18px; cursor: pointer; }
.sp-chat { height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 10px; background: var(--tt-bg, #111); }
.sp-msg { padding: 6px 10px; border-radius: 10px; background: var(--tt-raised, #2b2d31); font-size: 14px; max-width: 85%; align-self: flex-start; }
.sp-msg.me { align-self: flex-end; background: color-mix(in srgb, var(--tt-accent, #5865f2) 35%, var(--tt-raised, #2b2d31)); }
.sp-msg small { display: block; font-size: 10px; color: var(--tt-dim, #999); }
.sp-picks { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.sp-pick { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.sp-quote { border-left: 3px solid var(--tt-accent, #5865f2); padding: 6px 10px; font-size: 13px; color: var(--tt-dim, #aaa); }
.sp-explain { font-size: 14px; line-height: 1.5; }
@media (max-width: 600px) { .sp-kpis b { font-size: 18px; } }

/* ==== playplus.css ==== */
/* Tots — 🎮 Play plus (playplus.js) */
.pl-card { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--tt-surface, #1e1f22); border: 1px solid var(--tt-line, #333); color: var(--tt-text, #eee); }
.pl-card[hidden] { display: none; }
.pl-card h3 { margin: 0 0 8px; font-size: 15px; }
.pl-card h3 small { color: var(--tt-dim, #999); font-weight: 500; margin-left: 6px; }
.pl-stat { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; align-items: center; gap: 8px; font-size: 13px; margin: 3px 0; }
.pl-stat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-stat i { height: 8px; border-radius: 4px; background: var(--tt-accent, #5865f2); }
.pl-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.pl-chip { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--tt-line, #333); background: var(--tt-raised, #2b2d31); color: var(--tt-text, #eee); cursor: pointer; font-size: 13px; }
.pl-chip:hover { background: var(--tt-hover, #35373c); }
.game-card { position: relative; }
.pl-like { position: absolute; left: 8px; bottom: 8px; z-index: 2; padding: 2px 8px; border-radius: 999px; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; cursor: pointer; }
.pl-like.on { background: var(--tt-accent, #5865f2); }
.pl-fbest { margin-top: 4px; font-size: 12px; color: var(--tt-dim, #aaa); }
.pl-yth { margin: 0 0 12px; }
.pl-yth[hidden] { display: none; }
.pl-yth-h { font-weight: 700; margin-bottom: 6px; }
.pl-yth-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.pl-yth-v { flex: none; width: 168px; display: flex; flex-direction: column; gap: 3px; text-align: left; background: none; border: 0; color: var(--tt-text, #eee); cursor: pointer; padding: 0; }
.pl-yth-img { display: block; width: 168px; height: 94px; border-radius: 10px; background: var(--tt-raised, #2b2d31) center / cover no-repeat; }
.pl-yth-v b { font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pl-yth-v small { font-size: 11px; color: var(--tt-dim, #999); }
.pl-link { background: none; border: 0; padding: 0; color: var(--tt-accent, #5865f2); cursor: pointer; font: inherit; font-size: 12px; font-weight: 500; margin-left: 6px; }
.pl-btn { margin-top: 8px; padding: 7px 12px; border-radius: 8px; border: 0; background: var(--tt-accent, #5865f2); color: #fff; font-weight: 600; cursor: pointer; }
.pl-act { display: inline-block; margin: 4px 0; padding: 5px 12px; border-radius: 999px; border: 0; background: var(--tt-accent, #5865f2); color: #fff; font-weight: 700; font-size: 12px; cursor: pointer; }
.chat-tool-btn.pl-wp { background: none; border: 0; font-size: 18px; cursor: pointer; padding: 0 6px; opacity: .8; flex: none; }

/* ==== lookplus.css ==== */
/* Tots — 🎨 Look plus (lookplus.js). Variables use !important so they beat tots.css :root[data-tt-theme] tokens + neo.js's inline accent. */
html#tots[data-lp-skin="amoled"] {
    --tt-bg: #000 !important; --tt-rail: #000 !important; --tt-surface: #0a0a0a !important; --tt-raised: #111 !important;
    --tt-hover: #1a1a1a !important; --tt-press: #222 !important; --tt-line: #1f1f1f !important; --tt-line-hi: #333 !important;
}
html#tots[data-lp-skin="amoled"] body { background: #000 !important; }
html#tots[data-lp-skin="pastel"] {
    --tt-accent-base: #b06ee8; --neo-accent: #b06ee8 !important; --tt-accent: #b06ee8 !important;
    --tt-bg: #fbf4ff !important; --tt-rail: #f3e6fb !important; --tt-surface: #ffffff !important; --tt-raised: #fdf8ff !important;
    --tt-hover: #f5e9fc !important; --tt-press: #ecdcf7 !important; --tt-line: #eedcf7 !important; --tt-line-hi: #dfc4ef !important;
    --tt-text: #3a2a4a !important; --tt-dim: #6d5a80 !important; --tt-faint: #a090b0 !important;
}
html#tots[data-lp-skin="pastel"] body { background: #fbf4ff !important; }
html#tots[data-lp-skin="contrast"] {
    --neo-accent: #ffd400 !important; --tt-accent: #ffd400 !important; --tt-accent-ink: #000 !important;
    --tt-bg: #000 !important; --tt-rail: #000 !important; --tt-surface: #000 !important; --tt-raised: #0d0d0d !important;
    --tt-hover: #222 !important; --tt-press: #333 !important; --tt-line: #fff !important; --tt-line-hi: #fff !important;
    --tt-text: #fff !important; --tt-dim: #f0f0f0 !important; --tt-faint: #d0d0d0 !important;
}
html#tots[data-lp-skin="contrast"] body { background: #000 !important; }
html#tots[data-lp-skin="contrast"] a { text-decoration: underline; }
html#tots[data-lp-skin="contrast"] :focus-visible { outline: 3px solid #ffd400 !important; outline-offset: 2px; }

html.lp-zoomed { zoom: var(--lp-zoom, 1); }

#tots#tots.lp-still *, #tots#tots.lp-still *::before, #tots#tots.lp-still *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
}

#tots#tots.lp-compact .chat-messages .message { padding-top: 2px !important; padding-bottom: 2px !important; margin-top: 0 !important; margin-bottom: 0 !important; gap: 8px !important; }
#tots#tots.lp-compact .chat-messages .message-avatar { width: 26px !important; height: 26px !important; min-width: 26px !important; font-size: 12px !important; }
#tots#tots.lp-compact .chat-messages .message-content p { font-size: 13.5px !important; line-height: 1.35 !important; margin: 0 !important; }
#tots#tots.lp-compact .chat-messages .message-time { font-size: 10px !important; }
#tots#tots.lp-compact .dm-bubble { padding: 4px 10px !important; font-size: 13.5px !important; }

#tots#tots.lp-anim .tab-content.active { animation: lpIn .24s ease-out !important; }
@keyframes lpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

#lpZoom { width: 160px; accent-color: var(--tt-accent, #5865f2); }
.lp-hubs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lp-hub { display: flex; flex-direction: column; align-items: center; font-size: 14px; cursor: pointer; }
.lp-hub input { width: 30px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; }
.lp-hub input.lp-unset { opacity: .35; }
.lp-clear { padding: 4px 10px; border-radius: 8px; border: 1px solid var(--tt-line, #333); background: none; color: var(--tt-text, #eee); cursor: pointer; font-size: 12px; }
#lpSkin button.active { background: var(--tt-accent, #5865f2); color: var(--tt-accent-ink, #fff); }
/* zoom also scales 100vh, so the full-height shell + #general would overflow the screen — divide by the zoom */
html#tots.lp-zoomed .app-container, html#tots.lp-zoomed .main-content { height: calc(100dvh / var(--lp-zoom, 1)) !important; }
html#tots.lp-zoomed #general.dc-on .dc { height: calc(100dvh / var(--lp-zoom, 1) - 120px) !important; }
@media (max-width: 900px) { html#tots.lp-zoomed #general.dc-on .dc { height: calc(100dvh / var(--lp-zoom, 1) - 160px) !important; } }

/* ==== pvpgomoku.css ==== */
/* Tots — ⚫ Gomoku PvP (pvpgomoku.js). Reuses .du-modal / .du-box / .du-btn. */
.pgm-box { max-width: 460px; }
.pgm-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13.5px; flex-wrap: wrap; }
.pgm-people { display: flex; flex-wrap: wrap; gap: 6px; }
.pgm-status { text-align: center; font-weight: 700; font-size: 14px; margin: 8px 0; }
.pgm-grid { display: grid; gap: 1px; margin: 8px auto; max-width: 360px; background: rgba(210,180,120,.15); padding: 3px; border-radius: 6px; }
.pgm-c { aspect-ratio: 1; border: 1px solid rgba(255,255,255,.07); background: rgba(210,180,120,.08); cursor: default; font-size: clamp(7px,2vw,12px); padding: 0; display: flex; align-items: center; justify-content: center; }
.pgm-c.pgm-ok { cursor: pointer; }
.pgm-c.pgm-ok:hover { background: rgba(255,255,255,.18); }

/* ==== appeals.css ==== */
/* Tots — 📮 Appeals (appeals.js). Reuses .sc-modal/.sc-box/.clan-btn. */
#appealBtn { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2147483000; font: inherit; font-weight: 800; cursor: pointer; padding: 11px 22px; border-radius: 999px; border: none; color: #fff; background: linear-gradient(135deg, #8ab4ff, #6a9cff); box-shadow: 0 8px 26px rgba(0,0,0,.4); }
/* When living inside #banScreen, sit in its centered column instead of floating */
#appealBtn.appeal-inban { position: static; transform: none; margin-top: 8px; }
#appealModal { z-index: 2147483001 !important; }
.ap-box textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.25); color: inherit; font: inherit; margin: 10px 0; }
.ap-text { margin: 4px 0; font-style: italic; color: var(--neo-dim, rgba(235,235,245,.8)); }

/* ==== rep.css ==== */
/* Tots — ⭐ Reputation (rep.js) */
.rep-box { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 8px 0; }
.rep-count { font-size: 13px; color: var(--neo-dim, rgba(235,235,245,.8)); }
.rep-count b { color: #ffd166; font-size: 15px; }
.rep-give { font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 5px 13px; border-radius: 999px; border: 1px solid rgba(255,209,102,.5); background: rgba(255,209,102,.14); color: #ffd166; }
.rep-give:disabled { opacity: .7; cursor: default; border-color: rgba(52,232,176,.4); background: rgba(52,232,176,.12); color: #5ef0c0; }

/* ==== events.css ==== */
/* Tots — 📅 Events (events.js). Reuses .sc-modal/.sc-box/.clan-btn. */
.ev-box { max-width: 480px; }
#evList { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.ev-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 12px 14px; }
.ev-top { display: flex; align-items: center; justify-content: space-between; }
.ev-top b { font-size: 15px; }
.ev-del { background: none; border: none; color: rgba(255,255,255,.4); cursor: pointer; font-size: 13px; }
.ev-del:hover { color: #ff8aa0; }
.ev-meta { font-size: 12px; color: var(--neo-dim, rgba(235,235,245,.65)); margin: 4px 0; }
.ev-desc { font-size: 13px; margin: 4px 0 8px; }
.ev-foot { display: flex; align-items: center; justify-content: space-between; }
.ev-count { font-size: 13px; }
.ev-new { margin-top: 6px; }
.ev-new summary { cursor: pointer; color: var(--neo-accent, #8ab4ff); font-weight: 600; }
.ev-new input, .ev-new textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 9px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.25); color: inherit; font: inherit; margin: 6px 0; }

/* ==== guestbook.css ==== */
/* Tots — 📓 Profile Guestbook (guestbook.js) */
.gb-box { margin-top: 14px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px; }
.gb-title { margin: 0 0 8px; font-size: 14px; }
.gb-list { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; margin-bottom: 8px; }
.gb-item { background: rgba(255,255,255,.04); border-radius: 10px; padding: 7px 10px; font-size: 13px; position: relative; }
.gb-item b { font-size: 12.5px; }
.gb-ago { font-size: 10.5px; color: var(--neo-dim, rgba(235,235,245,.5)); margin-left: 4px; }
.gb-text { margin-top: 2px; overflow-wrap: anywhere; }
.gb-del { position: absolute; right: 6px; top: 6px; background: none; border: none; color: rgba(255,255,255,.4); cursor: pointer; font-size: 11px; }
.gb-del:hover { color: #ff8aa0; }
.gb-empty { font-size: 12.5px; color: var(--neo-dim, rgba(235,235,245,.55)); }
.gb-compose { display: flex; gap: 6px; }
.gb-compose input { flex: 1; padding: 8px 10px; border-radius: 9px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.25); color: inherit; font: inherit; }
.gb-send { font: inherit; font-weight: 700; cursor: pointer; padding: 8px 14px; border-radius: 9px; border: none; background: var(--gradient-purple, linear-gradient(135deg,#8ab4ff,#b69cff)); color: #10132a; }

/* ==== profilethemes.css ==== */
/* Tots — 🎨 Profile Themes (profilethemes.js). Colors the .rw-prof banner via data-ptheme. */
.rw-prof[data-ptheme="sunset"] .rw-prof-banner { background: linear-gradient(135deg,#ff6a3d,#ff2d78) !important; }
.rw-prof[data-ptheme="ocean"] .rw-prof-banner { background: linear-gradient(135deg,#1aa7ec,#4adede) !important; }
.rw-prof[data-ptheme="forest"] .rw-prof-banner { background: linear-gradient(135deg,#1d976c,#93f9b9) !important; }
.rw-prof[data-ptheme="candy"] .rw-prof-banner { background: linear-gradient(135deg,#f857a6,#ff5858) !important; }
.rw-prof[data-ptheme="mono"] .rw-prof-banner { background: linear-gradient(135deg,#434343,#000) !important; }
.rw-prof[data-ptheme="gold"] .rw-prof-banner { background: linear-gradient(135deg,#f7971e,#ffd200) !important; }
.rw-prof[data-ptheme="galaxy"] .rw-prof-banner { background: linear-gradient(135deg,#5f2c82,#49a09d) !important; }

.pt-box { margin-top: 12px; }
.pt-label { font-size: 12.5px; color: var(--neo-dim, rgba(235,235,245,.7)); margin-bottom: 6px; }
.pt-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.pt-sw.on { border-color: #fff; transform: scale(1.12); }
.pt-default { background: linear-gradient(135deg,#8ab4ff,#b69cff); }
.pt-sunset { background: linear-gradient(135deg,#ff6a3d,#ff2d78); }
.pt-ocean { background: linear-gradient(135deg,#1aa7ec,#4adede); }
.pt-forest { background: linear-gradient(135deg,#1d976c,#93f9b9); }
.pt-candy { background: linear-gradient(135deg,#f857a6,#ff5858); }
.pt-mono { background: linear-gradient(135deg,#434343,#000); }
.pt-gold { background: linear-gradient(135deg,#f7971e,#ffd200); }
.pt-galaxy { background: linear-gradient(135deg,#5f2c82,#49a09d); }

/* ==== arcadescores.css ==== */
/* Tots — 🏆 Arcade Leaderboards (arcadescores.js). Reuses .dg-entry / .du-modal / .du-box. */
.arclb-box { max-width: 460px; }
.arclb-game { margin-bottom: 14px; }
.arclb-game h3 { margin: 0 0 6px; font-size: 15px; }
.arclb-list { margin: 0; padding: 0; list-style: none; counter-reset: lb; }
.arclb-list li { counter-increment: lb; display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,.04); margin-bottom: 3px; font-size: 13.5px; }
.arclb-list li::before { content: counter(lb); width: 20px; text-align: center; font-weight: 800; color: var(--neo-dim, rgba(235,235,245,.6)); }
.arclb-list li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arclb-list li b { color: #ffd166; }
.arclb-list li:first-child::before { content: '🥇'; }
.arclb-list li:nth-child(2)::before { content: '🥈'; }
.arclb-list li:nth-child(3)::before { content: '🥉'; }

/* ==== closefriends.css ==== */
/* Tots — 💛 Close Friends (closefriends.js) */
.cf-toggle { display: block; margin: 8px auto; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,209,102,.4); background: rgba(255,209,102,.1); color: #ffd166; }
.cf-toggle.on { border-color: rgba(255,209,102,.7); background: rgba(255,209,102,.2); }
.cf-heart { margin-left: 4px; font-size: 12px; vertical-align: middle; }

/* ==== dailychallenge.css ==== */
/* Tots — 🎯 Daily Challenge (dailychallenge.js). Reuses .dg-entry. */
.dch-entry { border: 1px solid rgba(255,209,102,.35) !important; }
.dch-entry .dg-entry-icon { filter: drop-shadow(0 0 6px rgba(255,209,102,.5)); }

/* ==== coingift.css ==== */
/* Tots — 🎁 Gift Coins (coingift.js). Reuses .sc-modal/.sc-box/.clan-btn. */
.cg-give { display: block; margin: 8px auto; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 6px 16px; border-radius: 999px; border: none; color: #2a1a00; background: linear-gradient(135deg,#ffd166,#ffb347); }
.cg-give:active { transform: scale(.95); }
.cg-inbox { background: linear-gradient(135deg,#ffd166,#ff8c43) !important; color: #2a1405 !important; }
.cg-box { max-width: 420px; }
.cg-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cg-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255,209,102,.1); border: 1px solid rgba(255,209,102,.25); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.cg-item b { color: #ffd166; }

/* ==== spotlightuser.css ==== */
/* Tots — ⭐ Spotlight a user (spotlightuser.js) */
.message.cb-spotlit { position: relative; }
.message.cb-spotlit .message-content, .message.cb-spotlit .message-bubble {
    box-shadow: 0 0 0 2px rgba(255,209,102,.7), 0 0 18px rgba(255,209,102,.5) !important;
    border-radius: 14px !important;
    animation: cbSpotPulse 2.2s ease-in-out infinite;
}
.message.cb-spotlit::after { content: '⭐'; position: absolute; top: -6px; right: -4px; font-size: 14px; filter: drop-shadow(0 0 4px rgba(255,209,102,.8)); }
@keyframes cbSpotPulse { 0%,100% { box-shadow: 0 0 0 2px rgba(255,209,102,.7), 0 0 14px rgba(255,209,102,.4) !important; } 50% { box-shadow: 0 0 0 2px rgba(255,209,102,.9), 0 0 24px rgba(255,209,102,.7) !important; } }
@media (prefers-reduced-motion: reduce) { .message.cb-spotlit .message-content { animation: none; } }

/* ==== eventtemplates.css ==== */
/* Tots — ✨ Event Templates (eventtemplates.js) */
.et-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.et-btn { font-size: 14px; font-weight: 700; padding: 12px; }

/* ==== verified.css ==== */
/* Tots — ✔️ Verified badges (verified.js) */
.cb-verified { margin-left: 3px; font-size: 11px; vertical-align: middle; filter: drop-shadow(0 0 2px rgba(58,160,255,.6)); }

/* ==== liveticker.css ==== */
/* Tots — 📰 Live Ticker (liveticker.js) */
.tk-feed { display: flex; flex-direction: column; gap: 3px; max-height: 360px; overflow-y: auto; }
.tk-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.03); font-size: 13px; animation: tkIn .3s ease; }
@keyframes tkIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
.tk-ico { flex: 0 0 20px; }
.tk-txt { flex: 1; min-width: 0; }
.tk-ago { font-size: 11px; color: var(--neo-dim, rgba(235,235,245,.5)); }

/* ==== ghost.css ==== */
/* Tots — 👻 Ghost Mode (ghost.js) — no extra styles needed (uses .settings-card/.toggle). */

/* ==== honeypot.css ==== */
.hp-x{}

/* ==== aiassist.css ==== */
.aa-out{margin-top:10px}.aa-result{background:rgba(138,180,255,.08);border:1px solid rgba(138,180,255,.2);border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.6}

/* ==== tournaments.css ==== */
/* Tots — 🏆 Tournaments (tournaments.js). Reuses .dg-entry / .du-modal / .du-box / .du-btn. */
.tn-box { max-width: 560px; }
.tn-setup { display: flex; flex-direction: column; gap: 8px; }
.tn-setup input, .tn-setup select { padding: 9px 11px; border-radius: 9px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.25); color: inherit; font: inherit; }
.tn-join { background: var(--gradient-purple, linear-gradient(135deg,#8ab4ff,#b69cff)) !important; color: #10132a !important; border: none !important; }
.tn-in { color: #5ef0c0; font-weight: 700; }
.tn-players { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.tn-chip { background: rgba(255,255,255,.08); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; }
.tn-owner { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tn-bracket { display: flex; gap: 16px; overflow-x: auto; padding: 8px 0; }
.tn-round { min-width: 130px; }
.tn-round h4 { margin: 0 0 8px; font-size: 12px; color: var(--neo-dim, rgba(235,235,245,.6)); }
.tn-match { border: 1px solid rgba(255,255,255,.1); border-radius: 8px; margin-bottom: 14px; overflow: hidden; }
.tn-slot { padding: 7px 10px; font-size: 12.5px; border-bottom: 1px solid rgba(255,255,255,.08); }
.tn-slot:last-child { border-bottom: none; }
.tn-slot.tn-win { background: rgba(52,232,176,.18); color: #5ef0c0; font-weight: 700; }
.tn-slot.tn-pick { cursor: pointer; }
.tn-slot.tn-pick:hover { background: rgba(138,180,255,.2); }
.tn-champ { text-align: center; font-size: 18px; font-weight: 800; margin-top: 12px; color: #ffd166; }

/* ==== newbie.css ==== */
.cb-newbie{margin-left:3px;font-size:11px;vertical-align:middle}

/* ==== modtemplates.css ==== */
.mt-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.mt-tpl{font-size:12.5px}.mt-custom{display:inline-flex;align-items:center;gap:3px}

/* ==== motm.css ==== */
/* Tots — 🎖️ Member of the Month (motm.js). Reuses .sc-modal/.sc-box. */
.mm-vbox { max-width: 440px; }
.mm-vbox input { width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 9px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.25); color: inherit; font: inherit; margin-bottom: 10px; }
.mm-people { display: flex; flex-direction: column; gap: 5px; max-height: 50vh; overflow-y: auto; }
.mm-vote { text-align: left; font: inherit; font-size: 14px; cursor: pointer; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: inherit; }
.mm-vote:hover { background: rgba(255,255,255,.1); }
.mm-vote.voted { border-color: #ffd166; background: rgba(255,209,102,.15); color: #ffd166; font-weight: 700; }

/* ==== admininsights2.css ==== */
/* Tots — 🔀 Compare + 🕐 Busy Hours (admininsights2.js) */
.ci2-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.ci2-table th { text-align: left; font-size: 12px; color: var(--neo-dim, rgba(235,235,245,.6)); padding: 6px 10px; }
.ci2-table td { padding: 6px 10px; font-size: 13.5px; border-top: 1px solid rgba(255,255,255,.06); }
.ci2-table td.ci2-hi { color: #5ef0c0; font-weight: 700; }
.ci2-hours { display: flex; align-items: flex-end; gap: 2px; height: 80px; margin-top: 8px; }
.ci2-hbar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.ci2-hbar span { width: 70%; background: linear-gradient(180deg,#8ab4ff,#34e8b0); border-radius: 3px 3px 0 0; }
.ci2-hbar small { font-size: 8px; color: var(--neo-dim, rgba(235,235,245,.5)); margin-top: 2px; }

/* ==== jackpot.css ==== */
/* Tots — 🎰 Jackpot (jackpot.js). Reuses .sc-modal/.sc-box/.clan-btn. */
.jp-box { max-width: 400px; text-align: center; }
.jp-pool { font-size: 40px; font-weight: 800; color: #ffd166; margin: 8px 0; }
.jp-add { display: flex; gap: 8px; justify-content: center; margin: 14px 0; }
.jp-last { font-size: 13px; color: var(--neo-dim, rgba(235,235,245,.75)); }
.sc-note { font-size: 11px; color: var(--neo-dim, rgba(235,235,245,.5)); }

/* ==== holiday.css ==== */
/* Tots — 🎃 Holiday Mode (holiday.js) */
#holidayLayer { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
#holidayLayer span { position: absolute; top: -30px; animation-name: hdFall; animation-timing-function: linear; animation-iteration-count: infinite; opacity: .85; }
@keyframes hdFall { 0% { transform: translateY(-30px) rotate(0); } 100% { transform: translateY(105vh) rotate(360deg); } }
.hd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }

/* ==== flashgiveaway.css ==== */
/* Tots — 🎁 Flash Giveaway (flashgiveaway.js) */
#fgBanner { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 99987; display: flex; align-items: center; gap: 10px; width: min(380px, calc(100vw - 24px)); background: linear-gradient(135deg, rgba(60,30,10,.96), rgba(45,15,45,.96)); border: 1px solid rgba(255,209,102,.55); border-radius: 14px; padding: 9px 13px; box-shadow: 0 10px 34px rgba(0,0,0,.45); color: #fff; animation: dropIn .35s ease; }
.fg-ico { font-size: 28px; }
.fg-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fg-mid b { font-size: 13px; } .fg-mid small { font-size: 11px; color: rgba(255,255,255,.65); }
.fg-btn { font: inherit; font-weight: 800; cursor: pointer; padding: 9px 15px; border-radius: 10px; border: none; color: #2a1405; background: linear-gradient(135deg,#ffd166,#ffb347); }
.fg-btn:active { transform: scale(.93); }
.fg-won { color: #5ef0c0; font-weight: 700; font-size: 13px; } .fg-gone { color: #ff8aa0; font-size: 13px; }
@media (max-width: 560px) { #fgBanner { bottom: 150px; } }

/* ==== trustlevels.css ==== */
/* trustlevels.js — uses .spy-chips/.spy-person/.ad-sub */

/* ==== siteaccent.css ==== */
/* Tots — 🎨 Sitewide Accent (siteaccent.js) */
.sa-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.sa-sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); cursor: pointer; }
.sa-sw:hover { transform: scale(1.1); }
#saCustom { width: 36px; height: 30px; border: none; background: none; cursor: pointer; }

/* ==== giftitem.css ==== */
/* Tots — 🎁 Gift Shop Items (giftitem.js) */
.gi-gift { display: block; width: 100%; margin-top: 5px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 5px; border-radius: 8px; border: 1px solid rgba(255,209,102,.4); background: rgba(255,209,102,.1); color: #ffd166; }
.gi-gift:active { transform: scale(.96); }
.gi-inbox { background: linear-gradient(135deg,#ffd166,#ff8c43) !important; color: #2a1405 !important; }
.gi-box { max-width: 420px; }
.gi-list { display: flex; flex-direction: column; gap: 8px; }
.gi-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255,209,102,.1); border: 1px solid rgba(255,209,102,.25); border-radius: 12px; padding: 10px 12px; font-size: 14px; }

/* ==== typingnow.css ==== */
/* ============================================================
   Tots — ✍️ typing indicator (typingnow.js)
   The bar sits between the messages and the message box. It takes up NO
   space until somebody is actually typing (.on), and in the Discord-style
   #general it floats in the gap under the composer so it can never push the
   message box below the fold (the Oct 7 2026 Chromebook bug).
   ============================================================ */
.tn-bar {
    display: none;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    line-height: 1.2;
    color: var(--text-secondary);
    padding: 2px 10px 5px;
    min-height: 0;
    pointer-events: none;
    animation: tnFade .18s ease;
}
.tn-bar.on { display: flex; }
.tn-bar strong { color: var(--text-primary, #fff); font-weight: 600; }

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

/* three bouncing dots */
.tn-dots { display: inline-flex; gap: 3px; align-items: flex-end; height: 10px; }
.tn-dots i {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent-cyan, #7cc6ff);
    animation: tnBounce 1.1s infinite ease-in-out;
}
.tn-dots i:nth-child(2) { animation-delay: .18s; }
.tn-dots i:nth-child(3) { animation-delay: .36s; }

@keyframes tnBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .tn-dots i { animation: none; opacity: .8; }
    .tn-bar { animation: none; }
}
html.cb-calm .tn-dots i { animation: none; opacity: .8; }

/* Discord-style General: float in the gap under the composer */
#general.dc-on .chat-container { position: relative; }
#general.dc-on .tn-bar {
    position: absolute; bottom: 1px; left: 22px; right: 22px;
    padding: 0; font-size: 12px; color: #b5bac1;
}
#general.dc-on .tn-bar strong { color: #f2f3f5; }

/* DMs + group chats */
#dmConvo .tn-bar, #gdConvo .tn-bar { padding: 0 14px 6px; }

@media (max-width: 900px) {
    .tn-bar { font-size: 12px; padding: 2px 8px 4px; }
    #general.dc-on .tn-bar { left: 18px; right: 18px; }
}

/* ==== tots.css ==== */
/* ============================================================
   Tots — design layer (Oct 14 2026 redesign). Loaded LAST.

   One token set, dark + light. Every older layer's variables (styles.css --bg-* and --accent-*,
   liquid-glass --lg-*, neo --neo-*) are re-pointed here, so the ~95 feature sheets inherit
   the new look without being rewritten. Then the shell (rail + hub list + content) and the
   shared components are restyled once.

   Theme: html[data-tt-theme="light|dark|classic"] (classic = the old 2025 ChatBase navy + purple) (Settings → Personalize → Theme, localStorage
   tots_theme); no attribute = follow the device (prefers-color-scheme).
   Layout ids/classes JS depends on are untouched (see CLAUDE.md).
   Rules that must beat the old layers' !important use the #tots id on <html>.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
    --tt-accent-base: #5b7cfa;

    --tt-bg:        #0e1014;
    --tt-rail:      #0a0b0e;
    --tt-surface:   #15181e;
    --tt-raised:    #1b1f27;
    --tt-hover:     #222732;
    --tt-press:     #2a3040;
    --tt-line:      #252a34;
    --tt-line-hi:   #343b49;
    --tt-text:      #e9ebf0;
    --tt-dim:       #a2a8b6;
    --tt-faint:     #6c7383;
    --tt-ok:        #22c55e;
    --tt-warn:      #f59e0b;
    --tt-bad:       #ef4444;
    --tt-shadow:    0 1px 2px rgba(0, 0, 0, .35);
    --tt-shadow-lg: 0 12px 40px rgba(0, 0, 0, .5);
    --tt-scrim:     rgba(4, 6, 10, .6);

    --tt-r-sm: 8px;
    --tt-r:    12px;
    --tt-r-lg: 16px;
    --tt-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* accent follows --neo-accent, so neo.js's custom colour (inline on <html>) still works */
    --neo-accent:  var(--tt-accent-base);
    --tt-accent:   var(--neo-accent);
    --tt-accent-ink: #fff;
    --tt-accent-soft: color-mix(in srgb, var(--tt-accent) 16%, transparent);
    --tt-accent-line: color-mix(in srgb, var(--tt-accent) 45%, transparent);

    color-scheme: dark;

    /* --- re-point neo.css --- */
    --neo-black:   var(--tt-bg);
    --neo-ink:     var(--tt-bg);
    --neo-surface: var(--tt-surface);
    --neo-raised:  var(--tt-raised);
    --neo-line:    var(--tt-line);
    --neo-line-hi: var(--tt-line-hi);
    --neo-text:    var(--tt-text);
    --neo-dim:     var(--tt-dim);
    --neo-faint:   var(--tt-faint);
    --neo-accent2: var(--tt-accent);
    --neo-glow:    transparent;

    /* --- re-point liquid-glass.css: flat, no blur, no glow --- */
    --lg-violet: var(--tt-accent);
    --lg-indigo: var(--tt-accent);
    --lg-cyan:   var(--tt-accent);
    --lg-mint:   var(--tt-ok);
    --lg-pink:   #ec4899;
    --lg-amber:  var(--tt-warn);
    --lg-void:   var(--tt-bg);
    --lg-abyss:  var(--tt-bg);
    --lg-deep:   var(--tt-surface);
    --lg-glass-1: var(--tt-surface);
    --lg-glass-2: var(--tt-surface);
    --lg-glass-3: var(--tt-raised);
    --lg-glass-4: var(--tt-hover);
    --lg-rim:      var(--tt-line);
    --lg-rim-soft: var(--tt-line);
    --lg-rim-hot:  var(--tt-line-hi);
    --lg-specular: 0 0 0 transparent;
    --lg-lift-1: var(--tt-shadow);
    --lg-lift-2: var(--tt-shadow);
    --lg-lift-3: var(--tt-shadow-lg);
    --lg-glow-violet: 0 0 0 transparent;
    --lg-glow-cyan:   0 0 0 transparent;
    --lg-blur:      none;
    --lg-blur-deep: none;
    --lg-r-sm: var(--tt-r-sm);
    --lg-r-md: var(--tt-r);
    --lg-r-lg: var(--tt-r-lg);
    --lg-r-xl: var(--tt-r-lg);

    /* --- re-point styles.css --- */
    --bg-dark:   var(--tt-bg);
    --bg-darker: var(--tt-bg);
    --bg-card:   var(--tt-surface);
    --bg-hover:  var(--tt-hover);
    --text-primary:   var(--tt-text);
    --text-secondary: var(--tt-dim);
    --accent-purple: var(--tt-accent);
    --accent-blue:   var(--tt-accent);
    --accent-cyan:   #06b6d4;
    --accent-green:  var(--tt-ok);
    --accent-pink:   #ec4899;
    --accent-orange: var(--tt-warn);
    --gradient-purple: linear-gradient(0deg, var(--tt-accent), var(--tt-accent));
    --gradient-blue:   linear-gradient(0deg, var(--tt-accent), var(--tt-accent));
    --gradient-green:  linear-gradient(0deg, var(--tt-ok), var(--tt-ok));
    --gradient-orange: linear-gradient(0deg, var(--tt-warn), var(--tt-warn));
    --shadow: var(--tt-shadow);
    --border-radius: var(--tt-r);
    --glass-border: var(--tt-line);
}

/* Accent presets (Settings → Appearance swatches): mid-tones that read on dark AND light */
:root[data-accent="blue"]   { --neo-accent: #3b82f6; }
:root[data-accent="green"]  { --neo-accent: #16a34a; }
:root[data-accent="orange"] { --neo-accent: #ea7a0c; }
:root[data-accent="pink"]   { --neo-accent: #db2777; }
:root[data-accent="cyan"]   { --neo-accent: #0891b2; }
:root[data-accent] { --neo-accent2: var(--neo-accent); --neo-glow: transparent; --gradient-purple: linear-gradient(0deg, var(--neo-accent), var(--neo-accent)); }

/* Light — explicit choice, or the device's when on Auto */
:root[data-tt-theme="light"] {
    --tt-accent-base: #4466ee;
    --tt-bg:       #f4f5f8;
    --tt-rail:     #e9ebf0;
    --tt-surface:  #ffffff;
    --tt-raised:   #ffffff;
    --tt-hover:    #eef0f4;
    --tt-press:    #e3e6ec;
    --tt-line:     #e2e5eb;
    --tt-line-hi:  #cdd2db;
    --tt-text:     #151821;
    --tt-dim:      #545c6c;
    --tt-faint:    #8a92a2;
    --tt-shadow:    0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .06);
    --tt-shadow-lg: 0 16px 40px rgba(16, 24, 40, .16);
    --tt-scrim:     rgba(20, 24, 33, .35);
    color-scheme: light;
}
@media (prefers-color-scheme: light) {
    :root:not([data-tt-theme="dark"]):not([data-tt-theme="classic"]) {
        --tt-accent-base: #4466ee;
        --tt-bg:       #f4f5f8;
        --tt-rail:     #e9ebf0;
        --tt-surface:  #ffffff;
        --tt-raised:   #ffffff;
        --tt-hover:    #eef0f4;
        --tt-press:    #e3e6ec;
        --tt-line:     #e2e5eb;
        --tt-line-hi:  #cdd2db;
        --tt-text:     #151821;
        --tt-dim:      #545c6c;
        --tt-faint:    #8a92a2;
        --tt-shadow:    0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .06);
        --tt-shadow-lg: 0 16px 40px rgba(16, 24, 40, .16);
        --tt-scrim:     rgba(20, 24, 33, .35);
        color-scheme: light;
    }
}

/* Classic: the old 2025 ChatBase look (styles.css colours: navy #0f0f1a, cards #1a1a2e, purple #7c3aed) */
:root[data-tt-theme="classic"] {
    --tt-accent-base: #7c3aed;
    --tt-bg:       #0f0f1a;
    --tt-rail:     #0a0a12;
    --tt-surface:  #1a1a2e;
    --tt-raised:   #20203a;
    --tt-hover:    #252540;
    --tt-press:    #2e2e4e;
    --tt-line:     #26263e;
    --tt-line-hi:  #363656;
    --tt-text:     #ffffff;
    --tt-dim:      #a0a0b0;
    --tt-faint:    #6e6e86;
    --tt-shadow:    0 4px 20px rgba(0, 0, 0, .3);
    --tt-shadow-lg: 0 12px 40px rgba(0, 0, 0, .55);
    --tt-scrim:     rgba(5, 5, 12, .65);
    color-scheme: dark;
}
#tots[data-tt-theme="classic"] .nav-btn.active { background: linear-gradient(135deg, #7c3aed, #a855f7) !important; color: #fff !important; box-shadow: 0 4px 16px rgba(124, 58, 237, .4); }
#tots[data-tt-theme="classic"] :is(.tt-mark, .logo-icon) { background: linear-gradient(135deg, #7c3aed, #a855f7) !important; }

/* ---------- 2. Base ---------- */
html#tots, #tots body {
    background: var(--tt-bg) !important;
    color: var(--tt-text);
    font-family: var(--tt-font);
    -webkit-font-smoothing: antialiased;
}
/* Old ambient layers: star canvas, glow, animated backgrounds — gone */
#tots body::before, #tots body::after { display: none !important; content: none !important; }
#tots #bgFx, #tots #neoSpace, #tots #neoGlow, #tots #neoBoot, #tots #tbWall:not(.on) { display: none !important; }
#tots .settings-row:has(.bg-swatches),
#tots .settings-row:has([data-pref="glass"]),
#tots .settings-row:has([data-pref="sidebar"]) { display: none !important; }
#tots ::selection { background: var(--tt-accent-soft); }
#tots :focus-visible { outline: 2px solid var(--tt-accent) !important; outline-offset: 2px; }
#tots * { scrollbar-width: thin; scrollbar-color: var(--tt-line-hi) transparent; }

/* ---------- 3. Shell: rail + hub list + content ---------- */
:root { --tt-rail-w: 72px; --tt-list-w: 232px; --tt-top-h: 56px; }

#tots .app-container {
    display: block !important;
    height: 100vh; height: 100dvh;
    padding: 0 !important;
    background: var(--tt-bg) !important;
    overflow: hidden;
}

/* Rail */
.tt-rail {
    position: fixed; z-index: 320;
    top: 0; bottom: 0; left: 0;
    width: var(--tt-rail-w);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 12px 0;
    background: var(--tt-rail);
    border-right: 1px solid var(--tt-line);
}
.tt-brand {
    width: 44px; height: 44px; margin-bottom: 10px;
    display: grid; place-items: center; cursor: pointer;
}
.tt-mark, #tots .sidebar .logo-icon {
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--tt-accent); color: var(--tt-accent-ink);
    font: 800 22px/1 var(--tt-font); letter-spacing: -.04em;
    filter: none !important; font-style: normal;
}
.tt-hub {
    position: relative;
    width: 60px; padding: 8px 0 6px;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    border: 0; border-radius: var(--tt-r); cursor: pointer;
    background: transparent; color: var(--tt-dim);
    font: 600 11px/1.1 var(--tt-font);
    transition: background .15s, color .15s;
}
.tt-hub svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tt-hub:hover { background: var(--tt-hover); color: var(--tt-text); }
.tt-hub.active { background: var(--tt-accent-soft); color: var(--tt-accent); }
.tt-hub.active::before {
    content: ''; position: absolute; left: -6px; top: 12px; bottom: 12px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--tt-accent);
}
.tt-dot { display: none; position: absolute; top: 6px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--tt-bad); box-shadow: 0 0 0 2px var(--tt-rail); }
.tt-hub.has-unread .tt-dot { display: block; }

/* Hub list (the old .sidebar) */
#tots .sidebar {
    position: fixed !important; z-index: 310;
    top: 0 !important; bottom: 0 !important; left: var(--tt-rail-w) !important;
    width: var(--tt-list-w) !important; height: auto !important;
    display: flex !important; flex-direction: column !important;
    padding: 14px 10px 10px !important;
    background: var(--tt-surface) !important;
    border: 0 !important; border-right: 1px solid var(--tt-line) !important;
    border-radius: 0 !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    overflow-x: hidden !important; overflow-y: auto !important;
    transition: none !important;
}
#tots .sidebar:hover, #tots .sidebar:focus-within { width: var(--tt-list-w) !important; background: var(--tt-surface) !important; box-shadow: none !important; }
#tots .sidebar .logo { display: none !important; }
#tots .sidebar :is(.logo-text, .nav-btn > span:not(.nav-icon):not(.unread-badge), .user-info, .user-settings-icon, .legal-links) { opacity: 1 !important; }

/* Only the current hub's list shows */
#tots .sidebar .nav-section { display: none !important; margin: 0 !important; }
#tots:not([data-hub]) .sidebar .nav-section[data-hub="home"],
#tots[data-hub="home"]  .sidebar .nav-section[data-hub="home"],
#tots[data-hub="chat"]  .sidebar .nav-section[data-hub="chat"],
#tots[data-hub="study"] .sidebar .nav-section[data-hub="study"],
#tots[data-hub="play"]  .sidebar .nav-section[data-hub="play"],
#tots[data-hub="watch"] .sidebar .nav-section[data-hub="watch"],
#tots[data-hub="you"]   .sidebar .nav-section[data-hub="you"] { display: flex !important; flex-direction: column; gap: 2px; flex: 1; }

#tots .sidebar .nav-label {
    display: block !important; height: auto !important; overflow: visible !important; white-space: normal !important;
    padding: 6px 10px 12px !important; margin: 0 !important;
    font: 750 20px/1.2 var(--tt-font) !important; letter-spacing: -.02em !important; text-transform: none !important;
    color: var(--tt-text) !important; opacity: 1 !important;
}
#tots .sidebar .nav-label::after { display: none !important; }

#tots .sidebar .nav-btn {
    display: flex !important; align-items: center; gap: 10px;
    width: 100% !important; height: auto !important; min-height: 38px;
    margin: 0 !important; padding: 7px 10px !important;
    border: 0 !important; border-radius: var(--tt-r-sm) !important;
    background: transparent !important; box-shadow: none !important;
    color: var(--tt-dim) !important;
    font: 550 14.5px/1.2 var(--tt-font) !important; text-align: left;
    transform: none !important; transition: background .12s, color .12s !important;
}
#tots .sidebar .nav-btn::before, #tots .sidebar .nav-btn::after { display: none !important; }
#tots .sidebar .nav-btn:hover { background: var(--tt-hover) !important; color: var(--tt-text) !important; }
#tots .sidebar .nav-btn.active { background: var(--tt-accent-soft) !important; color: var(--tt-text) !important; font-weight: 650 !important; }
#tots .sidebar .nav-btn .nav-icon { width: 22px !important; font-size: 17px !important; text-align: center; filter: none !important; flex: 0 0 22px; }
#tots .sidebar .nav-btn .unread-badge {
    margin-left: auto !important; position: static !important; transform: none !important;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    background: var(--tt-bad) !important; color: #fff !important; box-shadow: none !important;
    font: 700 11.5px/20px var(--tt-font) !important; text-align: center;
}
#tots .sidebar .nav-btn .unread-badge.hidden { display: none !important; }
#tots .sidebar .nav-btn.hidden, #tots .sidebar .nav-btn.cb-nav-hidden { display: none !important; }

/* You panel at the bottom of the list */
#tots .sidebar .user-section {
    display: flex !important; align-items: center; gap: 10px;
    margin: 10px 0 0 !important; padding: 10px !important;
    border: 1px solid var(--tt-line) !important; border-radius: var(--tt-r) !important;
    background: var(--tt-bg) !important; box-shadow: none !important;
}
#tots .sidebar .user-section .user-name { color: var(--tt-text) !important; font-weight: 650; }
#tots .sidebar .user-section .user-status { color: var(--tt-dim) !important; }

/* Home has a single page, so its list folds away and the page uses the full width */
@media (min-width: 901px) {
    #tots[data-hub="home"] .sidebar, #tots:not([data-hub]) .sidebar { display: none !important; }
    #tots[data-hub="home"], #tots:not([data-hub]) { --tt-list-w: 0px; }
}

/* Top bar + content */
#tots .top-bar {
    position: fixed !important; z-index: 300;
    top: 0 !important; right: 0 !important; left: calc(var(--tt-rail-w) + var(--tt-list-w)) !important;
    height: var(--tt-top-h) !important;
    padding: 0 20px !important;
    background: var(--tt-bg) !important;
    border: 0 !important; border-bottom: 1px solid var(--tt-line) !important;
    border-radius: 0 !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
#tots .main-content {
    position: relative;
    margin: 0 0 0 calc(var(--tt-rail-w) + var(--tt-list-w)) !important;
    height: 100vh; height: 100dvh;
    overflow-y: auto;
    padding: calc(var(--tt-top-h) + 24px) 28px 28px !important;
    background: var(--tt-bg) !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* Discord-style General fills exactly the space the tab has (see CLAUDE.md "Height"): 56+24 top, 28 bottom, 12 tab */
#tots #general.dc-on .dc { height: calc(100vh - 120px) !important; height: calc(100dvh - 120px) !important; min-height: 0 !important; }

/* ---------- 4. Phones & small tablets: bottom hub bar + slide-up list ---------- */
@media (max-width: 900px) {
    :root { --tt-top-h: 54px; }
    .tt-rail {
        top: auto; right: 0; bottom: 0; left: 0;
        width: auto; height: calc(62px + env(safe-area-inset-bottom));
        flex-direction: row; justify-content: space-around;
        padding: 4px 4px env(safe-area-inset-bottom);
        border-right: 0; border-top: 1px solid var(--tt-line);
    }
    .tt-brand { display: none; }
    .tt-hub { width: auto; flex: 1; max-width: 76px; }
    .tt-hub.active::before { left: 30%; right: 30%; top: -4px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }

    #tots .sidebar {
        top: auto !important; left: 0 !important; right: 0 !important;
        bottom: calc(62px + env(safe-area-inset-bottom)) !important;
        width: auto !important; max-height: 70vh; height: auto !important;
        padding: 14px 12px !important;
        border-right: 0 !important; border-top: 1px solid var(--tt-line) !important;
        border-radius: 18px 18px 0 0 !important;
        box-shadow: var(--tt-shadow-lg) !important;
        transform: translateY(110%); visibility: hidden;
        transition: transform .22s ease, visibility 0s .22s !important;
        flex-direction: column !important; overflow-y: auto !important;
    }
    #tots.tt-sheet .sidebar { transform: none; visibility: visible; transition: transform .22s ease !important; }
    #tots.tt-sheet .main-content::after {
        content: ''; position: fixed; inset: 0; z-index: 305; background: var(--tt-scrim);
    }
    #tots .sidebar .nav-section { flex: 0 0 auto !important; }
    #tots .sidebar .nav-btn { min-height: 44px; font-size: 15.5px !important; }
    #tots .sidebar .nav-btn > span:not(.nav-icon):not(.unread-badge) { display: inline !important; }
    #tots .sidebar .nav-label { display: block !important; font-size: 18px !important; }
    #tots .sidebar .user-section { display: none !important; }

    #tots .top-bar { left: 0 !important; right: 0 !important; top: 0 !important; height: var(--tt-top-h) !important; border-radius: 0 !important; padding: 0 12px !important; }
    #tots .main-content {
        margin: 0 !important;
        padding: calc(var(--tt-top-h) + 14px) 14px calc(80px + env(safe-area-inset-bottom)) !important;
    }
    #tots #general.dc-on .dc { height: calc(100dvh - 54px - 14px - 80px - 12px) !important; }
}

/* ---------- 5. Components ---------- */
/* Cards / panels: flat surface + hairline */
#tots :is(.chat-container, .welcome-card, .settings-card, .stat-card, .resource-card, .quick-tool-card, .ai-room-card,
          .meme-card, .resources-panel, .note-item, .poll-card, .leaderboard-item, .contact-item, .call-history-item,
          .admin-user-card, .meeting-topic-card, .meeting-suggestion-card, .neo-tile, .neo-hero, .rw-card, .ad-card, .np-card) {
    background: var(--tt-surface) !important;
    border: 1px solid var(--tt-line) !important;
    border-radius: var(--tt-r-lg) !important;
    box-shadow: var(--tt-shadow) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    color: var(--tt-text);
}
#tots :is(.neo-tile, .neo-hero, .welcome-card, .quick-tool-card, .ai-room-card, .stat-card, .resource-card)::before,
#tots :is(.neo-tile, .neo-hero, .welcome-card, .quick-tool-card, .ai-room-card, .stat-card, .resource-card)::after { opacity: 0 !important; }
#tots :is(.quick-tool-card, .ai-room-card, .resource-card, .neo-tile):hover { border-color: var(--tt-line-hi) !important; transform: none !important; }

/* Page headers */
#tots .content-header h1 { font: 750 26px/1.2 var(--tt-font) !important; letter-spacing: -.02em; color: var(--tt-text) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
#tots .content-header p { color: var(--tt-dim) !important; }
#tots :is(h1, h2, h3, h4) { color: var(--tt-text); }

/* Buttons */
#tots :is(.send-btn, .btn-primary, .primary-btn, .neo-pill-btn, .ad-btn.ad-primary, .rw-btn-primary, .sign-in-btn) {
    background: var(--tt-accent) !important; color: var(--tt-accent-ink) !important;
    border: 0 !important; box-shadow: none !important; background-image: none !important;
    border-radius: var(--tt-r-sm) !important; font-weight: 650 !important;
}
#tots :is(.send-btn, .btn-primary, .primary-btn, .neo-pill-btn, .sign-in-btn):hover { filter: brightness(1.08); transform: none !important; }
#tots .neo-pill-btn.neo-danger { background: var(--tt-bad) !important; }
#tots :is(.ad-btn, .btn-secondary, .fa-btn):not(.ad-primary) {
    background: var(--tt-raised) !important; color: var(--tt-text) !important;
    border: 1px solid var(--tt-line) !important; box-shadow: none !important; border-radius: var(--tt-r-sm) !important;
}
#tots :is(.ad-btn, .btn-secondary, .fa-btn):not(.ad-primary):hover { background: var(--tt-hover) !important; }

/* Inputs */
#tots :is(input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"],
          input[type="url"], input[type="date"], input[type="time"], input:not([type]), textarea, select,
          .chat-input, .neo-input, .ad-input, .fa-input) {
    background: var(--tt-bg) !important; color: var(--tt-text) !important;
    border: 1px solid var(--tt-line) !important; border-radius: var(--tt-r-sm) !important;
    box-shadow: none !important;
}
#tots :is(input, textarea, select):focus { border-color: var(--tt-accent) !important; outline: none; }
#tots ::placeholder { color: var(--tt-faint) !important; opacity: 1; }
#tots .chat-input-container {
    background: var(--tt-raised) !important; border: 1px solid var(--tt-line) !important;
    border-radius: var(--tt-r) !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
#tots .chat-input-container .chat-input { background: transparent !important; border: 0 !important; }

/* Segmented controls + toggles */
#tots .neo-seg { background: var(--tt-bg) !important; border: 1px solid var(--tt-line) !important; border-radius: var(--tt-r-sm) !important; padding: 3px !important; box-shadow: none !important; }
#tots .neo-seg button { color: var(--tt-dim) !important; background: transparent !important; border-radius: 6px !important; box-shadow: none !important; }
#tots .neo-seg button.active, #tots .neo-seg button[aria-pressed="true"] { background: var(--tt-raised) !important; color: var(--tt-text) !important; box-shadow: var(--tt-shadow) !important; }
#tots .toggle-track { background: var(--tt-line-hi) !important; box-shadow: none !important; border: 0 !important; }
#tots .toggle input:checked + .toggle-track { background: var(--tt-accent) !important; }
#tots .toggle-track::after, #tots .toggle-track::before { background: #fff !important; box-shadow: 0 1px 2px rgba(0,0,0,.3) !important; }

/* Settings */
#tots .settings-card-header { border-bottom: 1px solid var(--tt-line) !important; }
#tots .settings-card-title { color: var(--tt-text) !important; font-weight: 700 !important; }
#tots .settings-row { border-color: var(--tt-line) !important; }
#tots .settings-row-title { color: var(--tt-text) !important; }
#tots .settings-row-desc { color: var(--tt-dim) !important; }
#tots .neo-set-nav { background: var(--tt-surface) !important; border: 1px solid var(--tt-line) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
#tots .neo-set-nav button.active, #tots .neo-set-nav a.active { background: var(--tt-accent-soft) !important; color: var(--tt-text) !important; }

/* Chat */
#tots .chat-messages { background: transparent !important; }
#tots .message { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#tots .message:hover { background: var(--tt-hover) !important; }
#tots .message-author { font-weight: 650; }
#tots .message-time, #tots .dc-time { color: var(--tt-faint) !important; }
#tots .message-content p, #tots .message-text { color: var(--tt-text) !important; }

/* Modals + pop-ups: solid surface, soft scrim */
#tots :is(.rw-modal-card, .du-box, .sc-box, .poll-create-modal .modal-content, .auth-box, .modal-content, .wn-card) {
    background: var(--tt-surface) !important; color: var(--tt-text);
    border: 1px solid var(--tt-line) !important; border-radius: var(--tt-r-lg) !important;
    box-shadow: var(--tt-shadow-lg) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
#tots :is(.rw-modal, .du-modal, .sc-modal) { background: var(--tt-scrim) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Toast */
#tots #toast, #tots .toast {
    background: var(--tt-text) !important; color: var(--tt-bg) !important;
    border: 0 !important; border-radius: var(--tt-r) !important; box-shadow: var(--tt-shadow-lg) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* Tables (admin) */
#tots table { border-color: var(--tt-line); }
#tots :is(th, td) { border-color: var(--tt-line) !important; }
#tots th { color: var(--tt-dim); }

/* Gradient text from older layers → plain */
#tots :is(.logo-text, .neo-greet, .gradient-text, .welcome-title) { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--tt-text) !important; }

/* ---------- 6. Light theme: undo hard-coded "white text" from older layers ---------- */
#tots[data-tt-theme="light"] :is([style*="color:#fff"], [style*="color: #fff"], [style*="color:white"], [style*="color: white"],
    [style*="color:rgba(255,255,255"], [style*="color: rgba(255,255,255"], [style*="color:rgba(255, 255, 255"], [style*="color: rgba(255, 255, 255"]) {
    color: var(--tt-dim) !important;
}
@media (prefers-color-scheme: light) {
    #tots:not([data-tt-theme="dark"]):not([data-tt-theme="classic"]) :is([style*="color:#fff"], [style*="color: #fff"], [style*="color:white"], [style*="color: white"],
        [style*="color:rgba(255,255,255"], [style*="color: rgba(255,255,255"], [style*="color:rgba(255, 255, 255"], [style*="color: rgba(255, 255, 255"]) {
        color: var(--tt-dim) !important;
    }
}

/* ---------- 7. Older layers' gradient / white text → tokens (works in both themes) ---------- */
#tots :is(.section-heading, .settings-title, .content-header h1, .wc-greet, .auth-brand, .neo-time, .stat-number, .np-card h2 span) {
    background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important; color: var(--tt-text) !important;
}
#tots .stat-number { color: var(--tt-accent) !important; }
#tots .neo-time { font-weight: 300 !important; letter-spacing: -.04em; }

/* Top bar: search pill, bell, name pill */
#tots .top-bar-left :is(button, a, div) { color: var(--tt-dim) !important; }
#tots .top-bar :is(kbd) { color: var(--tt-dim) !important; background: var(--tt-raised) !important; border: 1px solid var(--tt-line) !important; box-shadow: none !important; }
#tots .top-bar-left > * { background: var(--tt-surface) !important; border: 1px solid var(--tt-line) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
#tots .top-bar-left span { color: var(--tt-dim) !important; }
#tots #cbBell, #tots .user-pill { background: var(--tt-surface) !important; border: 1px solid var(--tt-line) !important; color: var(--tt-text) !important; box-shadow: none !important; }
#tots .user-pill-name { color: var(--tt-text) !important; }
#tots .sidebar-rewards { color: var(--tt-dim) !important; }
#tots .sidebar .legal-links a, #tots .sidebar .legal-links { color: var(--tt-faint) !important; }

/* Secondary buttons/chips from neo.css, rewards.js, dchome.js, flashcards */
#tots :is(.neo-btn, .rw-btn, .quiz-me-btn, .dch-link, .rw-chip) {
    background: var(--tt-raised) !important; color: var(--tt-text) !important;
    border: 1px solid var(--tt-line) !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
#tots :is(.neo-btn, .rw-btn, .quiz-me-btn, .dch-link):hover { background: var(--tt-hover) !important; }
#tots :is(.neo-btn.primary, .neo-btn-primary, .neo-hero .neo-btn:first-child) { background: var(--tt-accent) !important; color: var(--tt-accent-ink) !important; border-color: transparent !important; }
#tots .dch-link.on, #tots button.on:not(.tt-hub) { color: var(--tt-text) !important; }
#tots .neo-chip, #tots .neo-hero :is(.neo-pill, .neo-battery, .neo-weather) { background: var(--tt-raised) !important; color: var(--tt-dim) !important; border: 1px solid var(--tt-line) !important; }
#tots .neo-hero b, #tots .neo-hero strong { color: var(--tt-text) !important; }
#tots .rw-chip strong, #tots .rw-dot-amt { color: var(--tt-text) !important; }

/* ---------- 8. Discord-style General (dchat.css) on Tots tokens ---------- */
#tots #general.dc-on {
    --dc-side: var(--tt-surface); --dc-chat: var(--tt-surface); --dc-raise: var(--tt-raised); --dc-line: var(--tt-line);
    --dc-text: var(--tt-text); --dc-head: var(--tt-text); --dc-muted: var(--tt-dim);
    --dc-hover: color-mix(in srgb, var(--tt-text) 5%, transparent); --dc-sel: var(--tt-accent-soft);
    --dc-blurple: var(--tt-accent); --dc-green: var(--tt-ok);
}
/* The Chat hub list already lists every room, so General drops its own channel column (keeps chat + members). */
@media (min-width: 901px) {
    #tots #general.dc-on .dc { grid-template-columns: minmax(0, 1fr) 232px !important; border-radius: var(--tt-r-lg) !important; box-shadow: var(--tt-shadow) !important; }
    #tots #general.dc-on .dc.dc-nomembers { grid-template-columns: minmax(0, 1fr) !important; }
    #tots #general.dc-on .dc-side { display: none !important; }
}
#tots #general.dc-on .dc-main { background: var(--tt-surface) !important; }
#tots #general.dc-on .dc-members { background: var(--tt-bg) !important; border-left: 1px solid var(--tt-line) !important; }
@media (min-width: 901px) and (max-width: 1150px) {
    #tots #general.dc-on .dc { grid-template-columns: minmax(0, 1fr) !important; }   /* members slide over here (dchat.css) */
}

/* ---------- 9. Rewards header buttons (wrapped.js, showcase.js, turbo.js, ranks.js …) → quiet chips ---------- */
#tots #rewards .content-header button {
    background: var(--tt-raised) !important; background-image: none !important; color: var(--tt-text) !important;
    border: 1px solid var(--tt-line) !important; box-shadow: none !important; text-shadow: none !important;
    border-radius: 999px !important; font-weight: 600 !important; -webkit-text-fill-color: currentColor !important;
}
#tots #rewards .content-header button:hover { background: var(--tt-hover) !important; transform: none !important; }

/* ---------- 10. Admin: sections + pages nav, new tools (admintools.js), phone-friendly ---------- */
#tots .ad-power { max-width: 1200px; }
#tots .ad-jump {
    display: flex !important; flex-direction: column; gap: 8px; padding: 10px !important;
    background: var(--tt-surface) !important; border: 1px solid var(--tt-line) !important; border-radius: var(--tt-r-lg) !important;
    box-shadow: var(--tt-shadow) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    top: 0 !important;
}
#tots .ad-secs, #tots .ad-subs { display: flex; gap: 6px; flex-wrap: wrap; }
#tots .ad-subs { padding-top: 8px; border-top: 1px solid var(--tt-line); }
#tots .ad-jump button {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent !important; color: var(--tt-dim) !important; border: 1px solid transparent !important;
    border-radius: 999px !important; padding: 7px 12px !important; font-weight: 600 !important; box-shadow: none !important;
}
#tots .ad-jump button[hidden] { display: none !important; }
#tots .ad-jump button:hover { background: var(--tt-hover) !important; color: var(--tt-text) !important; }
#tots .ad-secs button.active { background: var(--tt-accent) !important; color: var(--tt-accent-ink) !important; }
#tots .ad-subs button.active { background: var(--tt-accent-soft) !important; color: var(--tt-text) !important; border-color: var(--tt-accent-line) !important; }
#tots .ad-jump .ad-nav-badge:empty { display: none; }
#tots .ad-jump .ad-nav-badge { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--tt-bad); color: #fff; font: 700 11px/18px var(--tt-font); font-style: normal; text-align: center; }

.tt-at .at-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; max-height: 560px; overflow-y: auto; }
.tt-at .at-row { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--tt-r-sm); border: 1px solid var(--tt-line); background: var(--tt-bg); }
.tt-at .at-row > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tt-at .at-row small { color: var(--tt-dim); white-space: nowrap; }
.tt-at .at-row > span small { white-space: normal; }
.tt-at .at-row.at-flag { border-color: color-mix(in srgb, var(--tt-warn) 55%, transparent); background: color-mix(in srgb, var(--tt-warn) 8%, var(--tt-bg)); }
.tt-at .at-row.at-late { border-color: color-mix(in srgb, var(--tt-bad) 60%, transparent); background: color-mix(in srgb, var(--tt-bad) 9%, var(--tt-bg)); }
.tt-at .at-row.at-late .at-age { color: var(--tt-bad); font-weight: 700; }
.tt-at .at-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 10px; }
.tt-at .at-tile, .tt-at .at-kv { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: var(--tt-r-sm); border: 1px solid var(--tt-line); background: var(--tt-bg); }
.tt-at .at-tile span, .tt-at .at-kv span { color: var(--tt-dim); font-size: 13px; }
.tt-at .at-on { color: var(--tt-ok) !important; font-weight: 600; }
.tt-at .at-360-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.tt-at .at-chat { height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 10px; margin-bottom: 10px; border-radius: var(--tt-r); border: 1px solid var(--tt-line); background: var(--tt-bg); }
.tt-at .at-msg { align-self: flex-start; max-width: 78%; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 14px; background: var(--tt-raised); border: 1px solid var(--tt-line); }
.tt-at .at-msg.me { align-self: flex-end; background: var(--tt-accent-soft); border-color: var(--tt-accent-line); }
.tt-at .at-msg b { font-size: 12px; color: var(--tt-dim); }
.tt-at .at-msg small { font-size: 11px; color: var(--tt-faint); }
.tt-at .at-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.tt-at .at-pane { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tt-at .at-feed { height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: var(--tt-r-sm); border: 1px solid var(--tt-line); background: var(--tt-bg); }
.tt-at .at-spy { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; }
.tt-at .at-spy:hover { background: var(--tt-hover); }
.tt-at .at-spy > span { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.tt-at .at-spy .ad-btn { padding: 3px 7px !important; opacity: .6; }
.tt-at .at-spy:hover .ad-btn { opacity: 1; }

@media (max-width: 900px) {
    #tots .ad-power { max-width: none; }
    #tots .ad-secs, #tots .ad-subs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    #tots .ad-jump button { flex: 0 0 auto; }
    #tots .ad-card { padding: 14px !important; }
    #tots .ad-row { flex-wrap: wrap; }
    #tots .ad-row > * { min-width: 0; }
    #tots .ad-card table { display: block; overflow-x: auto; }
    .tt-at .at-split { grid-template-columns: 1fr; }
    .tt-at .at-feed { height: 300px; }
    .tt-at .at-row { flex-wrap: wrap; }
}

/* Admin: HQ command bar + the "no giving yourself XP" banner on tokens */
#tots #adNoSelfGive { color: var(--tt-bad) !important; background: color-mix(in srgb, var(--tt-bad) 10%, var(--tt-surface)) !important; }
#tots .hq-bar, #tots #hqBar {
    background: var(--tt-surface) !important; color: var(--tt-text) !important;
    border: 1px solid var(--tt-line) !important; box-shadow: var(--tt-shadow) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    --hq-dim: var(--tt-dim);
}
#tots :is(.hq-bar, #hqBar) :is(b, .hq-brand b, strong) { color: var(--tt-text) !important; }
#tots :is(.hq-bar, #hqBar) button { background: var(--tt-raised) !important; color: var(--tt-text) !important; border: 1px solid var(--tt-line) !important; }
#tots :is(.hq-bar, #hqBar) input { background: var(--tt-bg) !important; }

/* Admin tools batch 2 (admintools2.js) */
.tt-at .a2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 10px; }
.tt-at .a2-pic { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--tt-r); border: 1px solid var(--tt-line); background: var(--tt-bg); }
.tt-at .a2-pic img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--tt-r-sm); background: var(--tt-raised); }
.tt-at .a2-pic small { display: block; color: var(--tt-dim); font-size: 12px; }
.tt-at .a2-big { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 10px; }
.tt-at .a2-big .ad-btn { padding: 14px !important; font-size: 15px !important; font-weight: 700 !important; }
.tt-at .a2-check { cursor: pointer; }
.tt-at .a2-check.on > span { text-decoration: line-through; color: var(--tt-dim); }
.tt-at .a2-open { border-color: var(--tt-accent-line); }
.tt-at .a2-bar { height: 5px; margin-top: 5px; border-radius: 3px; background: var(--tt-raised); overflow: hidden; }
.tt-at .a2-bar i { display: block; height: 100%; background: var(--tt-accent); border-radius: 3px; }
.tt-at .a2-spark { margin-top: 10px; padding: 10px; border-radius: var(--tt-r); border: 1px solid var(--tt-line); background: var(--tt-bg); }
.tt-at .a2-spark svg { width: 100%; height: 140px; display: block; }
.tt-at .a2-axis { display: flex; justify-content: space-between; color: var(--tt-faint); font-size: 12px; margin-top: 4px; }
.tt-at .a2-json { white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px; border-radius: var(--tt-r-sm); background: var(--tt-bg); border: 1px solid var(--tt-line); }
.tt-at .at-split > div { min-width: 0; }

/* Arcade game cards: readable names in both themes (an older layer forced white text) — Oct 15 2026 */
#tots .game-card { color: var(--tt-text) !important; }
#tots .game-card .game-name { color: var(--tt-text) !important; opacity: 1 !important; }
#tots .game-card .game-players { color: var(--tt-dim) !important; opacity: 1 !important; }

/* ---- Speed (Oct 15 2026) ----
   The hero's blurred spinning shape was only hidden with opacity, so it kept animating (blur + rotate) forever. */
#tots .neo-hero::before { display: none !important; animation: none !important; }
/* Low-end devices (hosting.js adds html.tt-lite): stop infinite animations — animated box-shadows on avatar
   frames repaint every frame. One-shot animations (pop-ups, confetti) still play. */
html.tt-lite [class*="frame-"], html.tt-lite [class*="frame-"]::before, html.tt-lite [class*="frame-"]::after,
html.tt-lite .rw-prof-avatar, html.tt-lite .rw-buddy, html.tt-lite .rw-buddy::before, html.tt-lite .rw-buddy::after,
html.tt-lite [class*="tbn-"], html.tt-lite [class*="tbd-"], html.tt-lite [class*="tbd-"]::before, html.tt-lite [class*="tbd-"]::after,
html.tt-lite .r-oneofakind, html.tt-lite .r-chroma, html.tt-lite .r-legendary { animation: none !important; }

/* #general: reaction bar + 🔖 save button only on hover, taking no space until there are reactions
   (they sat on every message and made each line ~80px tall) — Oct 15 2026 */
#tots #general.dc-on .chat-messages .message { position: relative; }
#tots #general.dc-on .message .react-bar:not(:has(.reaction-chip)) { position: absolute; top: -10px; right: 56px; margin: 0 !important; z-index: 3; }
#tots #general.dc-on .message .sv-btn { position: absolute; top: -10px; right: 16px; margin: 0; z-index: 3; opacity: 0; }
#tots #general.dc-on .message:hover .sv-btn { opacity: .9; }