/* =================================================================
   WORKSPACE.CSS � Full workspace page styles for maze-development.com
   Scoped under #ws-shell to avoid polluting other pages
   ================================================================= */

/* ==================== RESET & ROOT ==================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg-dark:          #0d0b09;
    --bg-secondary:     #161310;
    --bg-card:          #1e1a15;
    --bg-card-hover:    #252019;
    --bg-input:         #141210;
    --text-primary:     #ece8df;
    --text-secondary:   #c8c2b3;
    --text-muted:       #88826f;
    --accent:           #c772fe;
    --accent-dim:       rgba(199, 114, 254, 0.10);
    --accent-dim2:      rgba(199, 114, 254, 0.18);
    --border:           rgba(236, 232, 223, 0.12);
    --border-hover:     rgba(236, 232, 223, 0.24);
    --danger:           #e05555;
    --success:          #55c87a;
    --warn:             #e0aa44;

    --sidebar-w:        240px;
    --header-h:         52px;
    --topbar-h:         52px;
    --tabs-h:           44px;
    --radius:           0px;
    --transition:       0.15s ease;

    /* aliases — unify sub-apps that reference these names onto the palette */
    --bg-primary:       var(--bg-dark);
    --bg-sidebar:       var(--bg-secondary);
    --bg-tertiary:      var(--bg-card);
    --bg-hover:         var(--bg-card-hover);
    --hover:            var(--bg-card-hover);
    --card-bg:          var(--bg-card);
    --surface-1:        var(--bg-secondary);
    --surface-2:        var(--bg-card);
    --text:             var(--text-primary);
    --border-subtle:    var(--border);
    --radius-lg:        0px;
}

html, body { height: 100%; }

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

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

::selection { background: var(--accent); color: #0a0008; }

/* ==================== SITE HEADER ==================== */
#site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-h);
    z-index: 900;
    background: rgba(10, 10, 10, 0.97);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
}

#site-header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 1.2rem;
}

.logo {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-primary);
    text-decoration: none;
}
.logo span { color: var(--accent); }

.nav-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.user-avatar {
    width: 28px; height: 28px;
    border-radius: var(--radius);
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.68rem; font-weight: 700;
    color: var(--accent);
    overflow: hidden;
    flex-shrink: 0;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }

.btn-signout {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.78rem;
    padding: 0.35rem 0.85rem;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
    border-radius: var(--radius);
}
.btn-signout:hover { border-color: var(--danger); color: var(--danger); }

.user-avatar-wrap {
    position: relative;
}

.user-avatar { cursor: pointer; }

.avatar-popup {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.25rem;
    z-index: 1000;
    min-width: 110px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.avatar-popup.open { display: block; }

.avatar-popup-signout {
    width: 100%;
    background: none;
    border: none;
    color: var(--danger);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.82rem;
    padding: 0.4rem 0.65rem;
    cursor: pointer;
    text-align: left;
    border-radius: calc(var(--radius) - 2px);
    white-space: nowrap;
}
.avatar-popup-signout:hover { background: var(--accent-dim); }

.avatar-popup-settings {
    width: 100%;
    background: none;
    border: none;
    color: var(--text-primary);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.82rem;
    padding: 0.4rem 0.65rem;
    cursor: pointer;
    text-align: left;
    border-radius: calc(var(--radius) - 2px);
    white-space: nowrap;
}
.avatar-popup-settings:hover { background: var(--bg-hover); }
/* On desktop the settings button is visible in the sidebar footer; hide it from popup */
.avatar-popup-settings { display: none; }

/* -- Empty state action row -- */
.ws-empty-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}
.ws-empty-mobile-btn { display: none; }

/* -- Topbar overflow menu -- */
#btn-topbar-more { display: none; }

.topbar-more-wrap { position: relative; }

.topbar-more-popup {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.25rem;
    z-index: 1000;
    min-width: 120px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.topbar-more-popup.open { display: block; }

.topbar-more-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.82rem;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    text-align: left;
    border-radius: calc(var(--radius) - 2px);
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}
.topbar-more-item:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.topbar-more-item--danger { color: var(--danger); }
.topbar-more-item--danger:hover { background: rgba(224,85,85,0.1); color: var(--danger); }

/* -- FAB -- */
.ws-fab {
    display: none;
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 700;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(199,114,254,0.4);
    transition: transform var(--transition), box-shadow var(--transition);
}
.ws-fab:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(199,114,254,0.55); }
body[data-hub-app="gmail"] .ws-fab { display: none !important; }

/* ==================== WORKSPACE SHELL ==================== */
#ws-shell {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* ==================== SIDEBAR ==================== */
#ws-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.22s ease, opacity 0.22s ease;
}

#ws-sidebar.collapsed {
    width: 0;
    opacity: 0;
    pointer-events: none;
}

.ws-sb-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 0.9rem 0.7rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.ws-sb-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.ws-icon-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--transition), color var(--transition);
    flex-shrink: 0;
}
.ws-icon-btn:hover { background: var(--bg-card); color: var(--text-primary); }

.ws-sb-section-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    padding: 1rem 0.9rem 0.3rem;
    flex-shrink: 0;
}

.ws-project-list {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ws-project-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    /* Button resets */
    background: none;
    border: none;
    border-left: 2px solid transparent;
    width: 100%;
    text-align: left;
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ws-project-item:hover { background: var(--bg-card); color: var(--text-primary); }
.ws-project-item.active {
    color: var(--accent);
    background: var(--accent-dim);
    border-left-color: var(--accent);
}

.ws-project-item-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-muted);
}
.ws-project-item.active .ws-project-item-dot { background: var(--accent); }

.ws-project-item-icon {
    font-size: 1rem;
    flex-shrink: 0;
    color: var(--text-muted);
}
.ws-project-item.active .ws-project-item-icon { color: var(--accent); }

.ws-project-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ws-new-project-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: calc(100% - 1.8rem);
    margin: 0.5rem 0.9rem 0.4rem;
    padding: 0.45rem 0.7rem;
    background: none;
    border: 1px dashed var(--border-hover);
    color: var(--text-muted);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.78rem;
    cursor: pointer;
    border-radius: var(--radius);
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.ws-new-project-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

.ws-sb-divider {
    height: 1px;
    background: var(--border);
    margin: 0.6rem 0;
    flex-shrink: 0;
}

.ws-nav-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition), background var(--transition);
    border-radius: 0;
}
.ws-nav-item:hover { color: var(--text-primary); background: var(--bg-card); }

/* ==================== MAIN CONTENT ==================== */
#ws-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ==================== TOP BAR ==================== */
.ws-topbar {
    flex-shrink: 0;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    gap: 1rem;
}

.ws-topbar.hidden { display: none; }

.ws-topbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.ws-type-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 2px;
    background: var(--accent-dim2);
    color: var(--accent);
    flex-shrink: 0;
    white-space: nowrap;
}

.ws-project-title {
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.ws-status-badge {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 2px;
    flex-shrink: 0;
    white-space: nowrap;
}
.ws-status-badge[data-status="active"]   { background: rgba(85,200,122,0.12); color: var(--success); }
.ws-status-badge[data-status="planning"] { background: rgba(199,114,254,0.12); color: var(--accent); }
.ws-status-badge[data-status="paused"]   { background: rgba(224,170,68,0.12); color: var(--warn); }
.ws-status-badge[data-status="archived"] { background: rgba(136,136,136,0.12); color: #888; }
.ws-status-badge[data-status="done"]     { background: rgba(85,200,122,0.08); color: #6ab; }

.ws-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ==================== BUTTONS ==================== */
.ws-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.38rem 0.9rem;
    border: none;
    cursor: pointer;
    border-radius: var(--radius);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    white-space: nowrap;
    line-height: 1.4;
}

.ws-btn-ghost {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.ws-btn-ghost:hover { border-color: var(--border-hover); color: var(--text-primary); background: var(--bg-card); }

.ws-btn-accent {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #000;
    font-weight: 600;
}
.ws-btn-accent:hover { background: #d88aff; border-color: #d88aff; }

.ws-btn-danger {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.ws-btn-danger:hover { border-color: var(--danger); color: var(--danger); background: rgba(224,85,85,0.08); }

.ws-btn-sm {
    font-size: 0.72rem;
    padding: 3px 10px;
    height: auto;
    min-height: 0;
    line-height: 1.6;
}

/* ==================== TABS ==================== */
.ws-tabs {
    display: flex;
    align-items: center;
    height: var(--tabs-h);
    border-bottom: 1px solid var(--border);
    background: var(--bg-dark);
    padding: 0 1.2rem;
    gap: 0;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.ws-tabs::-webkit-scrollbar { display: none; }
.ws-tabs.hidden { display: none; }

.ws-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1rem;
    height: 100%;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}
.ws-tab:hover { color: var(--text-primary); }
.ws-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ==================== SECTIONS ==================== */
.ws-section {
    display: none;
    flex: 1;
    overflow: hidden;
    flex-direction: column;
}
.ws-section.active { display: flex; }

.ws-section-body {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
}

.ws-section-body--fill {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ws-section-body--kanban {
    overflow: hidden;
}

/* ==================== EMPTY STATE ==================== */
.ws-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    height: 100%;
    padding: 3rem;
}

.ws-empty-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
}

.ws-empty-state h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ws-empty-state p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    max-width: 340px;
}

/* ==================== SECTION TOOLBAR ==================== */
.section-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.section-toolbar-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.section-toolbar-actions {
    display: flex;
    gap: 0.5rem;
}

/* ==================== OVERVIEW ==================== */
.overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 900px) {
    .overview-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .overview-grid { grid-template-columns: 1fr; }
}

.overview-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
}

.overview-desc-card {
    grid-column: 1;
}

.overview-card-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 0.65rem;
}

.overview-desc-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

.overview-meta-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.overview-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.meta-key {
    font-size: 0.78rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.meta-val {
    font-size: 0.78rem;
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.meta-link { color: var(--accent) !important; text-decoration: none; }
.meta-link:hover { text-decoration: underline; }

.overview-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding-top: 0.25rem;
}

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

.stat-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.stat-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ==================== GITHUB CARD ==================== */
.overview-github-card {
    margin-bottom: 0;
}

.github-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.github-load-state {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.github-repo-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-bottom: 0.5rem;
}

.github-stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.github-stat svg { flex-shrink: 0; color: var(--text-muted); }

.github-stat-val {
    color: var(--text-primary);
    font-weight: 600;
}

.github-lang-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.github-commits-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin: 1rem 0 0.5rem;
}

.github-commits-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.github-commit {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
    min-width: 0;
}

.github-commit:last-child { border-bottom: none; }
.github-commit:hover { background: var(--bg-card-hover); }

.github-commit-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--bg-input);
}

.github-commit-body {
    flex: 1;
    min-width: 0;
}

.github-commit-msg {
    font-size: 0.8rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.github-commit-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 1px;
}

.github-commit-meta a {
    color: var(--accent);
    text-decoration: none;
}

.github-commit-meta a:hover { text-decoration: underline; }

.github-commit-sha {
    font-size: 0.68rem;
    font-family: monospace;
    color: var(--text-muted);
    flex-shrink: 0;
    padding-top: 3px;
    text-decoration: none;
}
.github-commit-sha:hover { color: var(--accent); }

/* ==================== END GITHUB CARD ==================== */

.overview-notes-area {
    margin-top: 0.5rem;
}

.readme-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.readme-label {
    display: flex;
    align-items: center;
}

.readme-tabs {
    display: flex;
    gap: 2px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px;
}

.readme-tab {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-family: inherit;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    min-height: 28px;
}
.readme-tab:hover { color: var(--text-primary); }
.readme-tab.active {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.readme-status {
    font-size: 0.72rem;
    color: var(--text-muted);
    min-height: 1.2em;
    margin-bottom: 0.35rem;
    transition: color 0.2s;
}
.readme-status--ok   { color: var(--success); }
.readme-status--warn { color: var(--warn); }

/* -- Rendered markdown preview -- */
.readme-preview {
    min-height: 180px;
    max-height: 560px;
    overflow-y: auto;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.7;
    word-break: break-word;
}
.readme-preview h1, .readme-preview h2, .readme-preview h3,
.readme-preview h4, .readme-preview h5, .readme-preview h6 {
    color: var(--text-primary);
    margin: 1.1em 0 0.4em;
    font-weight: 600;
    line-height: 1.3;
}
.readme-preview h1 { font-size: 1.45rem; }
.readme-preview h2 { font-size: 1.2rem;  }
.readme-preview h3 { font-size: 1.05rem; }
.readme-preview p  { margin: 0.5em 0; }
.readme-preview a  { color: var(--accent); text-decoration: none; }
.readme-preview a:hover { text-decoration: underline; }
.readme-preview code {
    background: rgba(255,255,255,0.07);
    border-radius: 4px;
    padding: 0.15em 0.4em;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 0.82em;
    color: #e6c77a;
    word-break: break-all;
}
.readme-preview pre {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem;
    overflow-x: auto;
    margin: 0.75em 0;
}
.readme-preview pre code {
    background: none;
    padding: 0;
    color: var(--text-primary);
    font-size: 0.83rem;
    word-break: normal;
}
.readme-preview ul, .readme-preview ol {
    padding-left: 1.5rem;
    margin: 0.5em 0;
}
.readme-preview li { margin: 0.2em 0; }
.readme-preview blockquote {
    border-left: 3px solid var(--accent);
    margin: 0.75em 0;
    padding: 0.4em 1rem;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.03);
    border-radius: 0 4px 4px 0;
}
.readme-preview hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.25em 0;
}
.readme-preview table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.75em 0;
    font-size: 0.83rem;
    display: block;
    overflow-x: auto;
}
.readme-preview th, .readme-preview td {
    border: 1px solid var(--border);
    padding: 0.4em 0.75em;
    text-align: left;
    white-space: nowrap;
}
.readme-preview th { background: rgba(255,255,255,0.05); font-weight: 600; }
.readme-preview img { max-width: 100%; border-radius: 4px; height: auto; }

/* -- Task lists -- */
.readme-preview .task-list-item {
    list-style: none;
    margin: 0.25rem 0;
    padding-left: 1.3rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.readme-preview input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 1em;
    height: 1em;
    min-width: 1em;
    margin-top: 0;
    border: 1px solid var(--border);
    border-radius: 0.25em;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
    position: relative;
}
.readme-preview input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.readme-preview input[type="checkbox"]::after {
    content: 'done';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
    font-size: 0.9em;
    color: transparent;
    transition: color 0.15s ease;
}
.readme-preview input[type="checkbox"]:checked::after {
    color: #fff;
}
.readme-preview input[type="checkbox"]:focus {
    outline: 2px solid rgba(100, 180, 255, 0.95);
    outline-offset: 2px;
}

/* -- <kbd> -- */
.readme-preview kbd {
    display: inline-block;
    padding: 0.1em 0.45em;
    font-family: 'Courier New', monospace;
    font-size: 0.78em;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    color: var(--text-primary);
    white-space: nowrap;
    line-height: 1.5;
}

/* -- <mark> -- */
.readme-preview mark {
    background: rgba(199, 114, 254, 0.28);
    color: var(--text-primary);
    border-radius: 2px;
    padding: 0.05em 0.25em;
}

/* -- <details> / <summary> -- */
.readme-preview details {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.9rem;
    margin: 0.75em 0;
}
.readme-preview summary {
    cursor: pointer;
    color: var(--accent);
    font-weight: 500;
    font-size: 0.88rem;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.4em;
}
.readme-preview summary::before {
    content: '?';
    font-size: 0.65em;
    transition: transform 0.18s;
    display: inline-block;
}
.readme-preview details[open] > summary::before { transform: rotate(90deg); }
.readme-preview details[open] > summary { margin-bottom: 0.5rem; }

/* -- Strikethrough -- */
.readme-preview del { opacity: 0.6; }

/* -- Definition lists -- */
.readme-preview dl { margin: 0.75em 0; }
.readme-preview dt {
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 0.65em;
}
.readme-preview dd {
    color: var(--text-secondary);
    margin-left: 1.5rem;
    margin-top: 0.15em;
    font-size: 0.875rem;
}

/* -- <abbr> -- */
.readme-preview abbr {
    text-decoration: underline dotted var(--text-muted);
    cursor: help;
    color: inherit;
}

/* -- Footnotes -- */
.readme-preview .footnote-ref a {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.78em;
    padding: 0 1px;
}
.readme-preview .footnotes {
    margin-top: 1.5rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.readme-preview .footnotes ol { padding-left: 1.5rem; }
.readme-preview .footnotes li { margin: 0.3em 0; }
.readme-preview .footnote-back { color: var(--text-muted); text-decoration: none; margin-left: 0.3em; }
.readme-preview .footnote-back:hover { color: var(--accent); }

/* -- Math (KaTeX) -- */
.readme-preview .math-block {
    overflow-x: auto;
    text-align: center;
    padding: 0.75em 0;
}
.readme-preview .math-inline { display: inline; }
.readme-preview .katex { font-size: 1em !important; color: var(--text-primary); }
.readme-preview .katex-display > .katex { font-size: 1.1em !important; }

/* Table column alignment (inline styles from GFM take effect; explicit fallbacks) */
.readme-preview th[style], .readme-preview td[style] { text-align: revert; }

.overview-notes-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 0.83rem;
    padding: 0.75rem 0.9rem;
    resize: vertical;
    outline: none;
    border-radius: var(--radius);
    transition: border-color var(--transition);
    line-height: 1.6;
    min-height: 200px;
    box-sizing: border-box;
}
.overview-notes-input:focus { border-color: var(--accent); }
.overview-notes-input::placeholder { color: var(--text-muted); }

/* ==================== FILE TREE SECTION ==================== */
.files-tree-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    padding: 0.75rem;
    gap: 0.5rem;
}

/* Search bar */
.files-search-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    flex-shrink: 0;
    color: var(--text-muted);
}
.files-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.83rem;
    font-family: inherit;
}
.files-search-input::placeholder { color: var(--text-muted); }

/* Bordered table container */
.ft-table {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

/* -- Commit header -- */
.ft-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.9rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    gap: 0.75rem;
    min-height: 42px;
    flex-shrink: 0;
}
.ft-hdr-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    overflow: hidden;
}
.ft-hdr-right {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.ft-hdr-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--bg-input);
}
.ft-hdr-avatar--empty {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-input);
}
.ft-hdr-author {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
}
.ft-hdr-msg {
    font-size: 0.82rem;
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.ft-hdr-msg:hover { text-decoration: underline; }
.ft-hdr-sha {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: none;
}
.ft-hdr-sha:hover { color: var(--text-primary); }
.ft-hdr-sep { color: var(--border); font-size: 0.9rem; }
.ft-hdr-time { white-space: nowrap; }
.ft-hdr-count {
    display: flex;
    align-items: center;
    gap: 0.3em;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-decoration: none;
    padding-left: 0.6rem;
    margin-left: 0.15rem;
    border-left: 1px solid var(--border);
    white-space: nowrap;
}
.ft-hdr-count:hover { color: var(--text-primary); }

/* -- Tree container -- */
.repo-filetree {
    flex: 1;
    overflow-y: auto;
}

/* -- Rows -- */
.ft-row {
    display: grid;
    grid-template-columns: minmax(140px, 35%) 1fr 110px;
    align-items: center;
    min-height: 32px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
    text-decoration: none;
}
.ft-row:last-child { border-bottom: none; }
.ft-dir:last-child > summary.ft-row { border-bottom: none; }
.ft-row:hover { background: rgba(255,255,255,0.045); }

summary.ft-row {
    cursor: pointer;
    list-style: none;
}
summary.ft-row::-webkit-details-marker { display: none; }
summary.ft-row::marker { display: none; }

.ft-file { cursor: default; }
.ft-file:hover { background: rgba(255,255,255,0.045); }

/* -- Cells -- */
.ft-cell-name {
    display: flex;
    align-items: center;
    gap: 0.45em;
    min-width: 0;
    padding-right: 0.75rem;
    overflow: hidden;
    height: 100%;
}
.ft-cell-msg {
    font-size: 0.8rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 0.75rem;
}
.ft-cell-time {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: right;
    padding-right: 0.9rem;
    white-space: nowrap;
}

/* Commit link inside msg cell */
.ft-commit-link {
    color: var(--text-muted);
    text-decoration: none;
}
.ft-commit-link:hover { color: var(--text-primary); text-decoration: underline; }

/* Name text */
.ft-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    font-size: 0.83rem;
}
summary .ft-name { color: var(--text-primary); font-weight: 500; }
a.ft-name {
    color: var(--text-primary);
    text-decoration: none;
    display: block;
}
a.ft-name:hover { color: var(--accent); text-decoration: underline; }

/* Caret */
.ft-caret {
    flex-shrink: 0;
    width: 10px;
    color: var(--text-muted);
    font-size: 0.44em;
    transition: transform 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ft-dir[open] > summary .ft-caret { transform: rotate(90deg); }

/* Icons */
.ft-icon { flex-shrink: 0; color: var(--text-muted); }
.ft-icon-dir { color: #c9a84c; }

/* File type icon colours */
.ft-js   .ft-icon { color: #d4bc5a; }
.ft-ts   .ft-icon { color: #4a90d9; }
.ft-css  .ft-icon { color: #9b72bf; }
.ft-html .ft-icon { color: #cc5533; }
.ft-md   .ft-icon { color: #888; }
.ft-json .ft-icon { color: #7ab356; }
.ft-py   .ft-icon { color: #4a85b5; }
.ft-rs   .ft-icon { color: #c8906a; }
.ft-go   .ft-icon { color: #29a8c8; }
.ft-img  .ft-icon { color: #b866a0; }

/* Empty / loading / truncated */
.ft-empty, .ft-loading {
    padding: 2rem 1.5rem;
    color: var(--text-muted);
    font-size: 0.83rem;
    text-align: center;
}
.ft-truncated {
    padding: 0.45rem 1rem;
    background: rgba(255, 180, 0, 0.07);
    border-top: 1px solid rgba(255, 180, 0, 0.15);
    color: var(--warn);
    font-size: 0.75rem;
}
/* ==================== END FILE TREE ====================*/



.notes-save-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.6rem;
}

.notes-hint {
    font-size: 0.75rem;
    color: var(--success);
    opacity: 0;
    transition: opacity 0.3s;
}
.notes-hint.visible { opacity: 1; }

/* ==================== BOARD ==================== */



/* -- Layout -- */

.board-body {

    display: flex;

    flex-direction: row;

    flex: 1;

    overflow: hidden;

    min-height: 0;

    position: relative;

}



/* -- Left toolbar -- */

.board-toolbar {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2px;

    width: 72px;

    min-width: 72px;

    background: var(--bg-sidebar, #111);

    border-right: 1px solid var(--border);

    padding: 12px 6px;

    overflow-y: auto;

    z-index: 20;

}

.btb-group {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2px;

    width: 100%;

}

.btb-divider {

    width: 40px;

    height: 1px;

    background: var(--border);

    margin: 6px 0;

}

.btb-btn {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    width: 100%;

    padding: 8px 4px 7px;

    border: none;

    border-radius: 8px;

    background: none;

    color: var(--text-muted);

    cursor: pointer;

    transition: background 0.15s, color 0.15s;

    font-family: 'Geist', system-ui, -apple-system, sans-serif;

}

.btb-btn:hover {

    background: var(--bg-card-hover, #202020);

    color: var(--text-primary);

}

.btb-btn.active {

    background: var(--accent-dim);

    color: var(--accent);

}

.btb-btn span {

    font-size: 0.57rem;

    font-weight: 500;

    letter-spacing: 0.02em;

    text-align: center;

    line-height: 1.1;

    white-space: nowrap;

}



/* -- Canvas -- */

.board-canvas {

    flex: 1;

    position: relative;

    overflow: hidden;

    min-height: 0;

    cursor: default;

    background: var(--bg-dark);

    background-image: radial-gradient(circle, #1e1e1e 1px, transparent 1px);

    background-size: 28px 28px;

}

.board-canvas.canvas-pan-mode { cursor: grab; }

.board-canvas.canvas-pan-mode:active { cursor: grabbing; }



.board-canvas-inner {

    position: absolute;

    top: 0; left: 0;

    width: 6000px;

    height: 6000px;

    transform-origin: 0 0;

    z-index: 2;

}



.board-empty {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    text-align: center;

    pointer-events: none;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

}

.board-empty p { font-size: 0.88rem; color: var(--text-muted); margin: 0; }

.board-empty-sub { font-size: 0.75rem; color: var(--text-muted); opacity: 0.6; }



/* -- Drag-select box -- */

.board-select-box {

    position: absolute;

    border: 1px solid var(--accent);

    background: var(--accent-dim);

    pointer-events: none;

    z-index: 900;

    border-radius: 3px;

}



/* -- BASE CARD -- */

.board-card {

    position: absolute;

    min-width: 180px;

    min-height: 80px;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    background: var(--card-bg, var(--bg-card));

    color: var(--card-text, var(--text-primary));

    user-select: none;

    cursor: grab;

    overflow: visible;

    transition: border-color var(--transition), box-shadow var(--transition);

    box-sizing: border-box;

    padding: 0.7rem;

}

.board-card:active { cursor: grabbing; }

/* -- When a light color is applied, force all card text dark -- */
.board-card[style*="--card-text"] .board-card-text,
.board-card[style*="--card-text"] .board-heading-text,
.board-card[style*="--card-text"] .board-card-textarea,
.board-card[style*="--card-text"] .board-link-name,
.board-card[style*="--card-text"] .board-todo-title,
.board-card[style*="--card-text"] .board-todo-row,
.board-card[style*="--card-text"] .board-quote-text,
.board-card[style*="--card-text"] .board-quote-author,
.board-card[style*="--card-text"] .board-file-name,
.board-card[style*="--card-text"] .board-file-url,
.board-card[style*="--card-text"] .board-tag-text,
.board-card[style*="--card-text"] .board-column-title,
.board-card[style*="--card-text"] .board-divider-label,
.board-card[style*="--card-text"] .board-swatch-label,
.board-card[style*="--card-text"] .board-embed-label { color: var(--card-text); }

.board-card:hover {

    border-color: var(--border-hover);

    box-shadow: 0 4px 24px rgba(0,0,0,0.45);

    z-index: 100;

}

.board-card.selected {

    outline: 2px solid var(--accent);

    outline-offset: 2px;

    box-shadow: 0 0 0 5px var(--accent-dim2);

    z-index: 200;

}

.board-card.dragging { opacity: 0.85; z-index: 500; }



/* -- Card action buttons (appear top-right on hover) -- */

.board-card-actions {

    position: absolute;

    top: 4px;

    right: 4px;

    display: flex;

    gap: 3px;

    opacity: 0;

    transition: opacity 0.15s;

    z-index: 30;

}

.board-card:hover .board-card-actions { opacity: 1; }

.board-card-edit,

.board-card-dup,

.board-card-del,

.board-card-color {

    background: rgba(10,10,10,0.85);

    border: 1px solid #333;

    color: var(--text-secondary, #aaa);

    padding: 3px 5px;

    cursor: pointer;

    border-radius: 3px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: border-color var(--transition), color var(--transition);

}

.board-card-edit:hover,

.board-card-dup:hover,

.board-card-color:hover { border-color: var(--accent); color: var(--accent); }

.board-card-del:hover   { border-color: var(--danger, #e05555); color: var(--danger, #e05555); }



/* -- Resize handle -- */

.board-card-resize {

    position: absolute;

    bottom: 0; right: 0;

    width: 14px; height: 14px;

    cursor: se-resize;

    opacity: 0;

    transition: opacity var(--transition);

    background: linear-gradient(135deg, transparent 50%, var(--border-hover) 50%);

}

.board-card:hover .board-card-resize { opacity: 1; }



/* -- Inline textarea for editing -- */

.board-card-textarea {

    position: absolute;

    inset: 0;

    width: 100%; height: 100%;

    background: var(--bg-card);

    border: none;

    outline: none;

    color: var(--text-primary);

    font-family: 'Geist', system-ui, -apple-system, sans-serif;

    font-size: 0.84rem;

    padding: 0.7rem;

    resize: none;

    box-sizing: border-box;

    z-index: 30;

    line-height: 1.6;

    border-radius: var(--radius);

}



/* -- Generic card text -- */

.board-card-text {

    font-size: 0.84rem;

    line-height: 1.6;

    color: var(--text-primary);

    word-break: break-word;

    white-space: pre-wrap;

}



/* -- HEADING CARD -- */

.board-card--heading {

    background: transparent;

    border-color: transparent;

    min-height: 40px;

    padding: 6px 8px;

}

.board-card--heading:hover { border-color: var(--border-hover); }

.board-heading-text {

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--text-primary);

    line-height: 1.3;

    word-break: break-word;

    white-space: pre-wrap;

}



/* -- LINK CARD -- */

.board-card--link {

    padding: 0;

    overflow: hidden;

    min-width: 220px;

}

.board-link-inner {

    display: flex;

    flex-direction: column;

    text-decoration: none;

    color: inherit;

}

.board-link-thumb {

    width: 100%;

    height: 100px;

    overflow: hidden;

    background: var(--bg-dark);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}

.board-link-thumb-img { width: 100%; height: 100%; object-fit: cover; }

.board-link-thumb-fb {

    width: 32px; height: 32px;

    object-fit: contain;

    opacity: 0.6;

}

.board-link-body { padding: 0.6rem 0.75rem 0.5rem; }

.board-link-name {

    font-size: 0.8rem;

    font-weight: 600;

    color: var(--text-primary);

    margin-bottom: 2px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.board-link-url {

    display: block;

    font-size: 0.68rem;

    color: var(--accent);

    text-decoration: none;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.board-link-url:hover { text-decoration: underline; }



/* -- IMAGE CARD -- */

.board-card--image {

    padding: 0;

    overflow: hidden;

}

.board-image-wrap {

    width: 100%;

    display: flex;

    flex-direction: column;

}

.board-image-wrap img {

    width: 100%;

    display: block;

    object-fit: cover;

}

.board-image-empty {

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.78rem;

    color: var(--text-muted);

}

.board-image-label {

    font-size: 0.72rem;

    color: var(--text-secondary, #aaa);

    padding: 4px 10px 6px;

    background: rgba(0,0,0,0.5);

    text-align: center;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



/* -- TODO CARD -- */

.board-todo-title {

    font-size: 0.8rem;

    font-weight: 600;

    color: var(--text-primary);

    margin-bottom: 0.45rem;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.board-todo-list { display: flex; flex-direction: column; gap: 3px; }

.board-todo-row {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    font-size: 0.79rem;

    color: var(--text-secondary, #aaa);

    cursor: default;

    padding: 1px 0;

}

.board-todo-check {

    appearance: none;

    -webkit-appearance: none;

    width: 14px; height: 14px;

    border: 1.5px solid var(--border-hover);

    border-radius: 3px;

    flex-shrink: 0;

    margin-top: 2px;

    cursor: pointer;

    position: relative;

    transition: background var(--transition), border-color var(--transition);

}

.board-todo-check:checked {

    background: var(--accent);

    border-color: var(--accent);

}

.board-todo-check:checked::after {

    content: '';

    position: absolute;

    top: 1px; left: 1px;

    width: 8px; height: 5px;

    border-left: 1.5px solid #fff;

    border-bottom: 1.5px solid #fff;

    transform: rotate(-45deg) translateY(-1px);

}

.board-todo-done { text-decoration: line-through; opacity: 0.45; }

.board-todo-progress {

    height: 3px;

    background: var(--border);

    border-radius: 2px;

    margin-top: 10px;

    overflow: hidden;

}

.board-todo-progress-bar {

    height: 100%;

    background: var(--accent);

    border-radius: 2px;

    transition: width 0.3s ease;

}



/* -- Todo editor modal rows -- */

.todo-editor-list { display: flex; flex-direction: column; gap: 5px; }

.todo-editor-row { display: flex; align-items: center; gap: 6px; }

.todo-editor-row .te-check {

    width: 13px; height: 13px;

    border: 1.5px solid var(--border-hover);

    border-radius: 3px;

    flex-shrink: 0;

    cursor: pointer;

}

.todo-editor-row .te-text {

    flex: 1;

    background: var(--bg-dark);

    border: 1px solid var(--border);

    color: var(--text-primary);

    font-family: 'Geist', system-ui, -apple-system, sans-serif;

    font-size: 0.8rem;

    padding: 3px 8px;

    border-radius: 4px;

    outline: none;

}

.todo-editor-row .te-text:focus { border-color: var(--accent); }

.todo-editor-row .te-del {

    background: none;

    border: none;

    color: var(--text-muted);

    cursor: pointer;

    padding: 2px;

    display: flex;

    align-items: center;

    transition: color var(--transition);

}

.todo-editor-row .te-del:hover { color: var(--danger, #e05555); }



/* -- COLUMN CARD -- */

.board-card--column {

    padding: 0;

    background: var(--card-bg, var(--bg-card-hover, #202020));

    border-color: var(--border);

    overflow: visible;

    min-width: 220px;

    min-height: 140px;

    height: auto !important;

    display: flex;

    flex-direction: column;

    z-index: 1;

}

.board-card--column:hover,
.board-card--column.selected,
.board-card--column.dragging {

    z-index: 1;

}

.board-column-header {

    display: flex;

    align-items: center;

    padding: 9px 12px 7px;

    cursor: grab;

    border-bottom: 1px solid var(--border);

    gap: 6px;

}

.board-column-drag-handle {

    display: flex;

    align-items: center;

    color: var(--text-muted);

    cursor: grab;

    padding: 2px;

    flex-shrink: 0;

    opacity: 0;

    transition: opacity 0.15s;

}

.board-card--column:hover .board-column-drag-handle { opacity: 1; }

.board-column-title {

    font-size: 0.78rem;

    font-weight: 600;

    color: var(--text-primary);

    flex: 1;

    outline: none;

    border: none;

    background: transparent;

    font-family: 'Geist', system-ui, -apple-system, sans-serif;

    cursor: text;

    min-width: 0;

}

.board-column-actions {

    display: flex;

    gap: 3px;

    opacity: 0;

    transition: opacity 0.15s;

    flex-shrink: 0;

}

.board-card--column:hover .board-column-actions {

    opacity: 1;

}

.board-column-body {

    padding: 8px 12px 12px;

    min-height: 80px;

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 6px;

}

/* Drop-target highlight when dragging a card over the column body */
.board-column-body.col-drop-active {

    background: rgba(124, 77, 255, 0.10);

    outline: 2px dashed var(--accent);

    outline-offset: -3px;

    border-radius: 4px;

}

/* Cards rendered inside a column body */
.board-card--column-child {

    position: relative !important;

    left: auto !important;

    top: auto !important;

    width: auto !important;

    min-width: 0;

    cursor: grab;

    margin-bottom: 0;

    z-index: auto;

}

.board-card--column-child:hover {

    z-index: auto;

}

/* Eject-from-group button */
.board-col-eject {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 20px;

    height: 20px;

    border: none;

    border-radius: 4px;

    background: transparent;

    color: var(--text-muted);

    cursor: pointer;

    padding: 0;

    flex-shrink: 0;

}

.board-col-eject:hover {

    background: var(--bg-hover);

    color: var(--text-primary);

}




/* -- CODE CARD -- */

.board-card--code {

    padding: 0;

    overflow: hidden;

    background: var(--card-bg, #0d1117);

    border-color: #30363d;

    min-width: 240px;

}

.board-code-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 5px 12px;

    background: rgba(0,0,0,0.35);

    border-bottom: 1px solid #30363d;

}

.board-code-lang {

    font-size: 0.63rem;

    color: var(--accent);

    text-transform: uppercase;

    letter-spacing: 0.1em;

    font-weight: 600;

}

.board-code-copy {

    background: none;

    border: none;

    color: #8b949e;

    cursor: pointer;

    padding: 2px 6px;

    border-radius: 3px;

    display: flex;

    align-items: center;

    transition: color 0.12s, background 0.12s;

}

.board-code-copy:hover { color: #e6edf3; background: rgba(255,255,255,0.07); }

.board-code-copy.copied { color: var(--accent); }

.board-code-pre {

    margin: 0;

    padding: 10px 14px;

    font-family: 'Courier New', Courier, monospace;

    font-size: 0.76rem;

    line-height: 1.65;

    color: #e6edf3;

    tab-size: 2;

    white-space: pre-wrap;

    word-break: break-word;

    max-height: 280px;

    overflow: auto;

    background: transparent;

    cursor: pointer;

}

.board-code-pre code { font-family: inherit; background: none; }

.board-code-textarea {

    width: 100%;

    background: var(--bg-dark);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    color: var(--text-primary);

    font-family: 'Courier New', Courier, monospace;

    font-size: 0.8rem;

    padding: 10px 12px;

    resize: vertical;

    outline: none;

    box-sizing: border-box;

    min-height: 240px;

}

.board-code-textarea:focus { border-color: var(--accent); }



/* -- CONTEXT MENU -- */

.board-ctx-menu {

    position: fixed;

    background: var(--bg-card);

    border: 1px solid var(--border-hover);

    border-radius: 10px;

    padding: 4px;

    z-index: 2000;

    min-width: 168px;

    box-shadow: 0 8px 32px rgba(0,0,0,0.55);

}

.board-ctx-menu.hidden { display: none; }

.ctx-menu-label {

    font-size: 0.62rem;

    color: var(--text-muted);

    padding: 5px 10px 4px;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    user-select: none;

}

.ctx-menu-sep {

    height: 1px;

    background: var(--border);

    margin: 3px 0;

}

.ctx-menu-item {

    display: flex;

    align-items: center;

    gap: 8px;

    width: 100%;

    padding: 7px 10px;

    background: none;

    border: none;

    border-radius: 6px;

    font-family: 'Geist', system-ui, -apple-system, sans-serif;

    font-size: 0.78rem;

    color: var(--text-primary);

    cursor: pointer;

    text-align: left;

    transition: background 0.12s;

}

.ctx-menu-item:hover { background: var(--bg-card-hover, #202020); }

.ctx-menu-item--danger { color: var(--danger, #e05555); }

.ctx-menu-item--danger:hover { background: rgba(224,85,85,0.12); }



/* -- CARD COLOR PICKER -- */

.board-color-picker {

    position: fixed;

    background: var(--bg-card);

    border: 1px solid var(--border-hover);

    border-radius: 10px;

    padding: 8px;

    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    width: 196px;

    z-index: 2100;

    box-shadow: 0 8px 28px rgba(0,0,0,0.5);

}

.board-color-picker.hidden { display: none; }

.bcp-swatch {

    width: 26px; height: 26px;

    border-radius: 50%;

    border: 2px solid transparent;

    cursor: pointer;

    transition: transform 0.12s, border-color 0.12s;

    flex-shrink: 0;

}

.bcp-swatch:hover { transform: scale(1.18); }

.bcp-swatch.active { border-color: var(--text-primary); }

.bcp-sep {

    width: 100%;

    height: 1px;

    background: var(--border);

    margin: 2px 0;

}

.bcp-custom-row {

    display: flex;

    align-items: center;

    gap: 5px;

    width: 100%;

}

#bcp-custom-color {

    width: 26px; height: 26px;

    border: 1px solid var(--border);

    border-radius: 4px;

    padding: 0;

    cursor: pointer;

    background: none;

    flex-shrink: 0;

}

.bcp-hex-input {

    flex: 1;

    min-width: 0;

    background: var(--bg-dark);

    border: 1px solid var(--border);

    border-radius: 4px;

    color: var(--text-primary);

    font-size: 0.72rem;

    font-family: 'Courier New', monospace;

    padding: 3px 5px;

    outline: none;

    text-transform: uppercase;

}

.bcp-hex-input:focus { border-color: var(--accent); }

.bcp-apply {

    width: 24px; height: 24px;

    background: var(--accent);

    border: none;

    border-radius: 4px;

    color: #fff;

    font-size: 0.8rem;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}

.bcp-apply:hover { filter: brightness(1.15); }



/* -- MEDIA PICKER -- */

.ws-modal--wide { max-width: min(700px, 95vw) !important; }

.bmp-grid {

    display: flex;

    flex-direction: column;

    gap: 4px;

    padding: 0 16px 16px;

    max-height: 420px;

    overflow-y: auto;

}

.bmp-item {

    background: var(--bg-dark);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 7px 10px;

    cursor: pointer;

    transition: border-color var(--transition), background var(--transition);

    display: flex;

    flex-direction: row;

    gap: 10px;

    align-items: center;

    width: 100%;

    text-align: left;

}

.bmp-item:hover { border-color: var(--accent); background: var(--bg-card); }

.bmp-thumb {

    width: 52px;

    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 3px;

    background: var(--bg-card);

}

.bmp-thumb img { width: 100%; height: 100%; object-fit: cover; }

.bmp-thumb .bmp-favicon {

    width: 20px;

    height: 20px;

    object-fit: contain;

}

.bmp-info {

    flex: 1;

    min-width: 0;

}

.bmp-name {

    font-size: 0.78rem;

    color: var(--text-primary);

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    width: 100%;

}

.bmp-url {

    font-size: 0.68rem;

    color: var(--text-muted);

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    width: 100%;

    margin-top: 1px;

}

.bmp-loading {

    grid-column: 1 / -1;

    text-align: center;

    font-size: 0.82rem;

    color: var(--text-muted);

    padding: 2rem;

    text-align: center;

    font-size: 0.82rem;

    color: var(--text-muted);

    padding: 2rem;

}

/* -- QUOTE CARD -- */
.board-card--quote {
    padding: 0.7rem 0.9rem;
    border-left: 3px solid var(--accent);
}
.board-quote-accent {
    display: none; /* border-left handles the accent */
}
.board-quote-text {
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--text-secondary, #ccc);
    font-style: italic;
    word-break: break-word;
    white-space: pre-wrap;
}
.board-quote-author {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 6px;
    font-style: normal;
}

/* -- DIVIDER CARD -- */
.board-card--divider {
    background: transparent;
    border-color: transparent;
    min-height: 32px;
    padding: 6px 8px;
    min-width: 120px;
}
.board-card--divider:hover { border-color: var(--border-hover); }
.board-divider-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 100%;
}
.board-divider-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    flex-shrink: 0;
}
.board-divider-line {
    flex: 1;
    height: 1px;
    background: var(--border-hover);
}

/* -- FILE CARD -- */
.board-card--file {
    padding: 0;
    overflow: hidden;
    min-width: 200px;
}
.board-file-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.6rem 0.75rem;
    text-decoration: none;
    color: inherit;
}
.board-file-thumb {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--bg-dark);
    flex-shrink: 0;
    overflow: hidden;
}
.board-file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.board-file-ext-badge {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.04em;
}
.board-file-meta { flex: 1; min-width: 0; }
.board-file-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.board-file-url {
    font-size: 0.68rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

/* -- TAG CARD -- */
.board-card--tag {
    background: transparent;
    border-color: var(--border);
    border-radius: 999px;
    min-width: 60px;
    min-height: 26px;
    padding: 0;
}
.board-card--tag:hover { border-color: var(--accent); }
.board-tag-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    height: 100%;
}
.board-tag-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.board-tag-text {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}
.board-tag-input {
    background: none;
    border: none;
    outline: none;
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-primary);
    width: 80px;
}
.board-tag-del {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 2px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.board-card--tag:hover .board-tag-del { opacity: 1; }
.board-tag-del:hover { color: var(--danger, #e05555); }

/* -- MEDIA PICKER SEARCH -- */
.bmp-search {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.82rem;
    padding: 7px 12px;
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--transition);
}
.bmp-search:focus { border-color: var(--accent); }

/* -- Media picker source tabs -- */
.bmp-tabs {
    display: flex;
    gap: 2px;
    padding: 8px 20px 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}
.bmp-tab {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--text-muted);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 12px;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.bmp-tab:hover { color: var(--text-primary); background: var(--bg-card); }
.bmp-tab.active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-dim);
}

/* -- EMBED CARD -- */
.board-card--embed {
    padding: 0;
    overflow: hidden;
    min-width: 240px;
    min-height: 140px;
    background: #0a0a0a;
    border-color: var(--border);
    display: flex;
    flex-direction: column;
}

.board-embed-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #000;
    min-height: 120px;
}

.board-embed-placeholder {
    position: absolute;
    inset: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.board-embed-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.board-embed-placeholder:hover .board-embed-thumb { opacity: 0.5; }

.board-embed-overlay {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.board-embed-play {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    border: 2px solid rgba(255,255,255,0.8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    backdrop-filter: blur(4px);
}
.board-embed-placeholder:hover .board-embed-play {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.08);
}

.board-embed-platform {
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: rgba(0,0,0,0.5);
    padding: 2px 8px;
    border-radius: 10px;
    backdrop-filter: blur(4px);
}

.board-embed-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    padding: 16px;
    min-height: 100px;
    color: var(--text-muted);
    font-size: 0.78rem;
}
.board-embed-fallback a { color: var(--accent); word-break: break-all; }

.board-embed-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    padding: 5px 10px 6px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

/* -- SWATCH CARD -- */
.board-card--swatch {
    padding: 0;
    overflow: hidden;
    min-width: 80px;
    min-height: 80px;
    border-color: var(--border);
    display: flex;
    flex-direction: column;
}

.board-swatch-fill {
    flex: 1;
    background: var(--card-bg, var(--accent));
    min-height: 60px;
}

/* When a color is set via --card-bg, swatch fill uses it */
.board-card--swatch[style*="--card-bg"] .board-swatch-fill {
    background: var(--card-bg);
}

.board-swatch-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    padding: 4px 8px 5px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

/* -- SHAPE CARD -- */
.board-card--shape {
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    min-width: 80px;
    min-height: 80px;
    overflow: visible;
}

.board-card--shape:hover { border-color: var(--border-hover); }

.board-shape-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    background: var(--card-bg, var(--accent));
    transition: filter 0.15s;
}

.board-shape--rect          { border-radius: 4px; }
.board-shape--circle        { border-radius: 50%; }
.board-shape--pill          { border-radius: 999px; }
.board-shape--triangle      { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); border-radius: 0; }
.board-shape--diamond       { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); border-radius: 0; }
.board-shape--star          { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); border-radius: 0; }
.board-shape--hexagon       { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%); border-radius: 0; }
.board-shape--parallelogram { clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%); border-radius: 0; }

.board-card--shape:hover .board-shape-inner { filter: brightness(1.08); }

.board-shape-text {
    color: #fff;
    font-size: 0.84rem;
    font-weight: 600;
    text-align: center;
    padding: 8px;
    word-break: break-word;
    mix-blend-mode: overlay;
}

/* -- SHAPE PICKER POPUP -- */

.board-shape-picker {
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--border-hover);
    border-radius: 10px;
    padding: 8px;
    z-index: 2100;
    box-shadow: 0 8px 28px rgba(0,0,0,0.5);
    min-width: 184px;
}

.board-shape-picker.hidden { display: none; }

.bsp-label {
    font-size: 0.62rem;
    color: var(--text-muted);
    padding: 0 4px 6px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    user-select: none;
}

.bsp-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.bsp-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-dark);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.bsp-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.bsp-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* -- form hint text -- */
.form-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ==================== BOARD ARROWS + CONNECTION DOTS ==================== */

/* SVG overlay � inside board-canvas-inner, so it follows the pan transform */
.board-arrows-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 6000px;
    height: 6000px;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

.board-arrow-path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.85;
    transition: opacity 0.15s;
}

.board-arrow-path.selected {
    stroke: #fff;
    opacity: 1;
    stroke-width: 2.5;
}

.board-arrow-path.board-arrow-temp {
    opacity: 0.5;
    stroke-dasharray: 6 4;
}

/* Wide invisible hit area for arrow click selection */
.board-arrow-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 16;
    pointer-events: stroke;
    cursor: pointer;
}

/* Connection dots � appear on card hover */
.board-conn-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-dark);
    cursor: crosshair;
    opacity: 0;
    pointer-events: all;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 20;
}

.board-card:hover .board-conn-dot { opacity: 1; }

.board-conn-dot--top    { top: -6px;  left: 50%; transform: translateX(-50%); }
.board-conn-dot--bottom { bottom: -6px; left: 50%; transform: translateX(-50%); }
.board-conn-dot--left   { left: -6px; top: 50%; transform: translateY(-50%); }
.board-conn-dot--right  { right: -6px; top: 50%; transform: translateY(-50%); }

.board-conn-dot:hover {
    transform: translateX(-50%) scale(1.4);
    opacity: 1;
}
.board-conn-dot--left:hover,
.board-conn-dot--right:hover {
    transform: translateY(-50%) scale(1.4);
}

/* Card color override � pastels need dark text */
.board-card[style*="--card-bg: #F"],
.board-card[style*="--card-bg: #B"],
.board-card[style*="--card-bg: #D"] {
    --card-text: #1a1a1a;
    color: var(--card-text);
}
.board-card[style*="--card-bg: #F"] .board-card-text,
.board-card[style*="--card-bg: #B"] .board-card-text,
.board-card[style*="--card-bg: #D"] .board-card-text { color: var(--card-text); }


/* ==================== NODES ==================== */
.nodes-canvas {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--bg-dark);
    background-image:
        radial-gradient(circle, #1e1e1e 1px, transparent 1px);
    background-size: 28px 28px;
}

.nodes-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.nodes-container {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.nodes-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.nodes-empty p { font-size: 0.88rem; color: var(--text-muted); }
.nodes-empty-sub { font-size: 0.78rem; margin-top: 0.3rem; }

.node-box {
    position: absolute;
    min-width: 120px;
    max-width: 200px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem 0.85rem;
    background: var(--bg-card);
    cursor: move;
    user-select: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    z-index: 10;
}
.node-box:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim2); }
.node-box.selected { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 5px var(--accent-dim2); z-index: 200; }
.node-box.selected { border-color: var(--accent); }

.node-box-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

.node-box-type {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-align: center;
    margin-top: 2px;
}

.node-box-del {
    position: absolute;
    top: 3px; right: 3px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    opacity: 0;
    transition: opacity var(--transition), color var(--transition);
    display: flex; align-items: center; justify-content: center;
}
.node-box:hover .node-box-del { opacity: 1; }
.node-box-del:hover { color: var(--danger); }

.node-port {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--bg-dark);
    border: 2px solid var(--border-hover);
    cursor: crosshair;
    transition: border-color var(--transition), background var(--transition);
    z-index: 11;
}
.node-port:hover,
.node-port.active { border-color: var(--accent); background: var(--accent); }
.node-port.out { bottom: -5px; left: 50%; transform: translateX(-50%); }
.node-port.in  { top: -5px;    left: 50%; transform: translateX(-50%); }

/* Node type colours */
.node-box[data-type="start"]    { border-color: rgba(85,200,122,0.45); }
.node-box[data-type="end"]      { border-color: rgba(224,85,85,0.45); }
.node-box[data-type="decision"] { border-color: rgba(224,170,68,0.45); }
.node-box[data-type="data"]     { border-color: rgba(199,114,254,0.35); }
.node-box[data-type="note"]     { border-color: rgba(100,160,255,0.35); }
.node-box[data-type="image"]    { border-color: rgba(255,255,255,0.15); padding: 0; overflow: hidden; min-width: 140px; }

.node-image-wrap {
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius);
}
.node-image-wrap img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
}
.node-box-note {
    font-size: 0.7rem;
    color: var(--text-muted);
    padding: 4px 6px;
    line-height: 1.4;
    text-align: center;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==================== MEDIA � DASHBOARD MIRROR ==================== */

/* Toolbar search */
.media-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.media-search-input {
    display: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.78rem;
    padding: 0.35rem 0.75rem;
    width: 0;
    border-radius: var(--radius);
    outline: none;
    transition: border-color var(--transition), width 0.2s ease;
}
.media-search-input:focus { border-color: var(--accent); }
.media-search-input::placeholder { color: var(--text-muted); }

.media-search-close { display: none; }

/* Searching state */
#media-toolbar.searching .section-toolbar-title { display: none; }
#media-toolbar.searching #btn-add-media-link    { display: none; }
#media-toolbar.searching .media-search-input {
    display: block;
    width: 200px;
}
#media-toolbar.searching .media-search-close { display: flex; }

/* -- Layout toggle buttons -- */
.media-layout-btns {
    display: flex;
    gap: 2px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2px;
}
.media-layout-btn {
    color: var(--text-muted);
    border-radius: calc(var(--radius) - 2px);
    padding: 0.28rem 0.42rem;
    transition: background var(--transition), color var(--transition);
}
.media-layout-btn.active {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.media-layout-btn:hover:not(.active) { color: var(--text-secondary); }

/* Scroll container for category blocks */
.media-body {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* ----------- LIST LAYOUT ----------- */
/* Applied via .media-body.layout-list */

/* Tighten subgroup spacing */
.media-body.layout-list { gap: 1.5rem; }

/* Sites — horizontal list rows */
.media-body.layout-list .db-sites-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.media-body.layout-list .db-site-card { overflow: hidden; }
.media-body.layout-list .db-site-card + .db-site-card { border-top: 1px solid var(--border); }

.media-body.layout-list .db-site-link {
    flex-direction: row;
    align-items: center;
    gap: 0.65rem;
    border: none;
    border-radius: 0;
    background: transparent;
}
.media-body.layout-list .db-site-link:hover { background: var(--bg-secondary); border: none; }
.media-body.layout-list .db-site-thumb {
    width: 36px;
    height: 36px;
    aspect-ratio: 1;
    border-radius: 6px;
    border-bottom: none;
    border: 1px solid var(--border);
    flex-shrink: 0;
    margin: 0.45rem 0 0.45rem 0.75rem;
}
.media-body.layout-list .db-site-thumb-fb { gap: 0.2rem; }
.media-body.layout-list .db-site-thumb-fb span { display: none; }
.media-body.layout-list .db-site-thumb-fb img { width: 18px; height: 18px; }
/* Shrink the new db-site-icon (16:9 banner) to a small square in list mode */
.media-body.layout-list .db-site-icon {
    width: 44px;
    height: 44px;
    aspect-ratio: 1;
    border-radius: 8px;
    border: 1px solid var(--border-hover);
    flex-shrink: 0;
    margin: 0.5rem 0 0.5rem 0.75rem;
}
.media-body.layout-list .db-site-fav-lg { width: 32px; height: 32px; }
.media-body.layout-list .db-site-fav-badge { display: none; }
.media-body.layout-list .db-site-body {
    flex: 1;
    padding: 0.45rem 0.75rem 0.45rem 0;
    gap: 0;
    min-width: 0;
}
.media-body.layout-list .db-site-name {
    font-size: 0.82rem;
    -webkit-line-clamp: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    color: var(--text-primary);
}

/* Images/Videos — horizontal rows */
.media-body.layout-list .media-grid {
    columns: unset;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.media-body.layout-list .media-grid > * {
    margin-bottom: 0;
    break-inside: unset;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid var(--border) !important;
}
.media-body.layout-list .media-grid > *:first-child { border-top: none !important; }
/* Feed mode — YouTube Shorts style */
.layout-feed {
    padding: 0 !important;
    overflow: hidden !important;
}
.shorts-grid {
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    -webkit-overflow-scrolling: touch;
}
.feed-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 9 / 16;
    border-radius: 12px;
    overflow: hidden;
    background: #111;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    flex-shrink: 0;
    cursor: pointer;
}
.feed-card-media-wrap {
    position: absolute;
    inset: 0;
}
.feed-card-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.feed-card-media-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.feed-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.15) 45%, transparent 70%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
}
.feed-card-info {
    padding: 0.85rem 1rem;
    pointer-events: all;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.feed-card-title {
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.feed-card-creator {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}
.feed-card-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(255,255,255,0.65);
    flex-shrink: 0;
}
.feed-card-avatar--fb {
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.75);
}
.feed-card-creator-name {
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.feed-card-persons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.feed-card-person-tag {
    background: rgba(85, 204, 187, 0.22);
    border: 1px solid rgba(85, 204, 187, 0.45);
    color: #7ff5e6;
    font-size: 0.68rem;
    padding: 2px 8px;
    border-radius: 99px;
    cursor: pointer;
    transition: background 0.15s;
}
.feed-card-person-tag:hover { background: rgba(85, 204, 187, 0.4); }
.feed-card-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    cursor: pointer;
    pointer-events: all;
}
.feed-card-play-btn svg { width: 100%; height: 100%; }
.feed-card-placeholder {
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.feed-vg-thumb-fallback {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    background: #111;
}
.feed-card .db-card-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(0,0,0,0.45);
    border-radius: 6px;
    z-index: 2;
}

/* Twitter embed — no fixed aspect ratio, let tweet size itself */
.video-iframe-wrap--twitter {
    aspect-ratio: unset;
    height: auto;
    position: relative;
}
.video-iframe-wrap--twitter iframe {
    position: static;
    width: 100%;
    height: 520px;
    border: none;
}
/* In feed card, tweet iframe fills card height */
.feed-card-media--tweet {
    width: 100%;
    height: 100%;
    border: none;
}

/* All media cards become uniform fixed-height rows: [thumb 84×56] [title …] [actions] */
.media-body.layout-list .image-card,
.media-body.layout-list .video-card,
.media-body.layout-list .image-group-card,
.media-body.layout-list .video-group-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 60px;
    min-height: 60px;
    padding: 0;
    overflow: hidden;
}
/* Thumbnail (single image/video) */
.media-body.layout-list .image-card-img,
.media-body.layout-list .video-iframe-wrap {
    width: 84px;
    height: 56px;
    flex-shrink: 0;
    object-fit: cover;
    aspect-ratio: unset;
    border-radius: 4px;
    margin: 2px 0 2px 2px;
}
.media-body.layout-list .video-iframe-wrap iframe,
.media-body.layout-list .video-iframe-wrap video,
.media-body.layout-list .video-iframe-wrap img { width: 100%; height: 100%; object-fit: cover; }
.media-body.layout-list .video-link-placeholder { position: static; width: 84px; height: 56px; min-height: 0; padding: 0.3rem; margin: 2px 0 2px 2px; }

/* Group cards: collapse the multi-image grid/cycler to a single fixed thumbnail */
.media-body.layout-list .image-group-grid,
.media-body.layout-list .ig-cycle-wrap {
    width: 84px !important;
    height: 56px !important;
    flex-shrink: 0;
    display: block !important;
    margin: 2px 0 2px 2px;
    border-radius: 4px;
    overflow: hidden;
}
.media-body.layout-list .image-group-grid .ig-item:not(:first-child) { display: none !important; }
.media-body.layout-list .image-group-grid .ig-item:first-child { width: 100%; height: 100%; }
.media-body.layout-list .image-group-grid img,
.media-body.layout-list .ig-cycle-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.media-body.layout-list .ig-cycle-btn,
.media-body.layout-list .ig-cycle-counter { display: none !important; }

/* Title block */
.media-body.layout-list .image-card-body,
.media-body.layout-list .video-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.85rem;
}
.media-body.layout-list .image-card-name,
.media-body.layout-list .video-card-name {
    font-size: 0.84rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: unset;
    color: var(--text-primary);
}
/* Group count badge stays visible (shows how many images); other badges hidden */
.media-body.layout-list .image-type-badge,
.media-body.layout-list .video-type-badge {
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.55rem;
}
.media-body.layout-list .image-card-person,
.media-body.layout-list .image-card-creator { display: none; }
.media-body.layout-list .sortable-handle { display: none; }

/* Touch devices: always show handle for affordance */
@media (hover: none) {
    .sortable-handle { opacity: 1; }
}

/* Creators � tighter rows */
.media-body.layout-list .creators-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.media-body.layout-list .creator-card {
    border-radius: 0;
    border-top: none;
}
.media-body.layout-list .creators-grid .creator-card:first-child { border-radius: var(--radius) var(--radius) 0 0; border-top: 1px solid var(--border); }
.media-body.layout-list .creators-grid .creator-card:last-child  { border-radius: 0 0 var(--radius) var(--radius); }
.media-body.layout-list .creators-grid .creator-card:only-child  { border-radius: var(--radius); border-top: 1px solid var(--border); }
.media-body.layout-list .creator-avatar,
.media-body.layout-list .creator-avatar-fallback {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
}

/* Add-type cards hidden in list view */
.media-body.layout-list .add-type-card { display: none; }

/* ----------- TILES LAYOUT — dense uniform square grid (Instagram-style) ----------- */
.media-body.layout-tiles .media-grid {
    columns: unset;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--mgh-grid-col, 200px) * 0.55), 1fr));
    gap: 4px;
}
.media-body.layout-tiles .media-grid > * {
    margin: 0;
    break-inside: unset;
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    border: none;
}
/* Image/group/video fill the square via cover */
.media-body.layout-tiles .image-card-img,
.media-body.layout-tiles .ig-cycle-img,
.media-body.layout-tiles .image-group-grid img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 1;
}
.media-body.layout-tiles .image-group-grid,
.media-body.layout-tiles .ig-cycle-wrap {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}
.media-body.layout-tiles .image-group-grid .ig-item:not(:first-child) { display: none !important; }
.media-body.layout-tiles .image-group-grid .ig-item:first-child { width: 100%; height: 100%; }
.media-body.layout-tiles .ig-cycle-btn,
.media-body.layout-tiles .ig-cycle-counter { display: none !important; }
.media-body.layout-tiles .video-card { display: block; height: 100%; }
.media-body.layout-tiles .video-iframe-wrap {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
}
.media-body.layout-tiles .video-iframe-wrap img,
.media-body.layout-tiles .video-iframe-wrap video,
.media-body.layout-tiles .video-iframe-wrap iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
/* Center the play overlay on the square thumbnail */
.media-body.layout-tiles .video-thumb-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Hide text bodies; show a small overlaid badge only */
.media-body.layout-tiles .image-card-body,
.media-body.layout-tiles .video-card-body { display: none; }
.media-body.layout-tiles .image-card-creator,
.media-body.layout-tiles .image-card-person { display: none; }
/* Tiny type badge in the corner */
.media-body.layout-tiles .image-type-badge,
.media-body.layout-tiles .video-type-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 2;
    font-size: 0.5rem;
    padding: 1px 4px;
    opacity: 0.85;
}
/* Sites become square tiles too */
.media-body.layout-tiles .db-sites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--mgh-grid-col, 200px) * 0.55), 1fr));
    gap: 4px;
}
.media-body.layout-tiles .db-site-icon { aspect-ratio: 1; }
.media-body.layout-tiles .db-site-name { font-size: 0.62rem; padding: 0.3rem 0.4rem; }

/* Creators & characters as square tiles: full-bleed avatar with name overlaid
   on a gradient scrim — matches the image/video tiles for a consistent grid. */
.media-body.layout-tiles .creators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--mgh-grid-col, 200px) * 0.55), 1fr));
    gap: 4px;
}
.media-body.layout-tiles .creator-card {
    aspect-ratio: 1;
    display: block;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    background: var(--bg-card);
}
/* Avatar fills the whole square */
.media-body.layout-tiles .creator-avatar-clip,
.media-body.layout-tiles .creator-avatar-fallback {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
}
.media-body.layout-tiles .creator-avatar {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    object-fit: cover;
}
/* Fallback initial (only shown by JS when the avatar fails): big, centered.
   Don't force `display` here — the inline display:none must keep it hidden
   until the avatar errors, otherwise it would cover a perfectly good avatar. */
.media-body.layout-tiles .creator-avatar-fallback {
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-tertiary);
}
/* Name + meta overlaid at the bottom on a dark gradient */
.media-body.layout-tiles .creator-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 1.6rem 0.45rem 0.4rem;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0) 100%);
    text-align: left;
    min-width: 0;
    pointer-events: none;
}
.media-body.layout-tiles .creator-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.media-body.layout-tiles .creator-meta {
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.media-body.layout-tiles .creator-platform-badge {
    font-size: 0.5rem;
    padding: 1px 4px;
}
.media-body.layout-tiles .creator-media-count {
    font-size: 0.52rem;
    padding: 1px 5px;
}
.media-body.layout-tiles .creator-desc,
.media-body.layout-tiles .creator-card-feed-btn { display: none; }
/* Profile-link arrow stays tappable in the top-right */
.media-body.layout-tiles .creator-card-link {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    width: 22px;
    height: 22px;
    background: rgba(0,0,0,0.55);
    color: #fff;
}

/* ----------- MOBILE: compact grid by default ----------- */
@media (max-width: 560px) {
    .media-body {
        padding: 1rem;
        gap: 1.5rem;
    }
    /* tighter site card grid on mobile */
    .media-body:not(.layout-list) .db-sites-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.5rem;
    }
    /* 2-col creators */
    .media-body:not(.layout-list) .creators-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    /* larger touch target on cards */
    .db-card-actions { opacity: 1; }
    /* hide layout labels toggle on mobile — keep just icons */
    .media-layout-btns { display: flex; }
}

/* Tighten further on very small phones */
@media (max-width: 420px) {
    .media-body { padding: 0.75rem; gap: 1.25rem; }
    .media-body:not(.layout-list) .db-sites-grid { gap: 0.4rem; }
    .db-sub-header { margin-bottom: 0.45rem; }
    /* 1-col creators so avatar + text have room to breathe */
    .media-body:not(.layout-list) .creators-grid { grid-template-columns: 1fr; }
    /* bigger touch targets for card action buttons */
    .db-card-action-btn { padding: 0.4rem 0.5rem; }
}

/* -- Category block -- */
.db-cat-block {}

.db-cat-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.db-cat-name {
    font-size: 1.05rem;
    font-weight: 600;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.db-cat-count {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0px 7px;
}

/* -- Project header actions -- */
.db-cat-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    opacity: 0;
    transition: opacity var(--transition);
    flex-shrink: 0;
}
.db-cat-block:hover .db-cat-actions { opacity: 1; }
.db-cat-actions .ws-btn {
    font-size: 0.68rem !important;
    padding: 0.22rem 0.5rem !important;
}

/* -- Card action overlay -- */
.db-site-card,
.image-card,
.image-group-card,
.video-card,
.creator-card { position: relative; }

.db-card-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--transition);
    z-index: 2;
}
.db-site-card:hover .db-card-actions,
.image-card:hover .db-card-actions,
.image-group-card:hover .db-card-actions,
.video-card:hover .db-card-actions,
.creator-card:hover .db-card-actions { opacity: 1; }

.db-card-action-btn {
    background: rgba(10,10,10,0.85);
    border: 1px solid #333;
    color: var(--text-secondary);
    padding: 0.28rem 0.36rem;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--transition), color var(--transition);
}
.db-card-action-btn:hover { border-color: var(--accent); color: var(--accent); }
.db-card-del-btn:hover { border-color: var(--danger) !important; color: var(--danger) !important; }

/* -- SortableJS drag handle & states -- */
.sortable-handle {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10,10,10,0.75);
    border: 1px solid #333;
    border-radius: 3px;
    color: var(--text-muted);
    cursor: grab;
    opacity: 0;
    transition: opacity var(--transition), color var(--transition);
    z-index: 2;
}
.db-site-card:hover .sortable-handle,
.image-card:hover .sortable-handle,
.image-group-card:hover .sortable-handle,
.video-card:hover .sortable-handle,
.creator-card:hover .sortable-handle { opacity: 1; }
.sortable-handle:hover { color: var(--text-primary); border-color: var(--border-hover); }
.sortable-handle:active { cursor: grabbing; }

.sortable-ghost { opacity: 0.35; }
.sortable-chosen { box-shadow: 0 0 0 2px var(--accent); }

.db-cat-empty {
    font-size: 0.82rem;
    color: var(--text-muted);
    padding: 0.5rem 0;
}

/* -- Sub-group -- */
.db-sub-group {
    margin-bottom: 1.5rem;
}
.db-sub-group:last-child { margin-bottom: 0; }

.db-sub-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
}

.db-sub-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    white-space: nowrap;
}

.db-sub-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* -- Sites grid -- */
.db-sites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 0.6rem;
    justify-content: start;
}

.db-site-card {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    transition: opacity var(--transition);
}
.db-site-card:hover { opacity: 0.88; }

.db-site-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-card);
    transition: border-color var(--transition), background var(--transition);
}
.db-site-link:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }

/* Icon/thumbnail container (generated by JS as .db-site-icon) */
.db-site-icon {
    width: 100%;
    aspect-ratio: 4 / 3;
    background:
        radial-gradient(circle at 50% 38%, rgba(255,255,255,0.06), transparent 60%),
        var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Large favicon shown when no screenshot is available */
.db-site-fav-lg {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.4);
    flex-shrink: 0;
    transition: transform var(--transition);
}
.db-site-card:hover .db-site-fav-lg { transform: scale(1.06); }
/* Small favicon badge overlaid on a screenshot */
.db-site-fav-badge {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: var(--bg-card);
    padding: 2px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.db-site-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.db-site-thumb-img--err { display: none !important; }

/* Thumbnail area — screenshot with favicon/label fallback */
.db-site-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.db-site-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.db-site-thumb-fb {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
}
.db-site-thumb-fb img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.db-site-thumb-fb span {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
}

/* Text body below thumbnail */
.db-site-body {
    padding: 0.5rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

/* App name label */
.db-site-name {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.3;
    padding: 0.5rem 0.6rem;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    max-width: 100%;
    word-break: break-word;
    transition: color var(--transition);
}
.db-site-card:hover .db-site-name { color: var(--text-primary); }
.db-site-url {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.58rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Add Type Card (used in Media grids) */
.add-type-card {
    background: transparent;
    border: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-height: 130px;
    border-radius: var(--radius);
    gap: 0.4rem;
    color: var(--text-secondary);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.8rem;
    transition: border-color var(--transition), color var(--transition);
    padding: 0.5rem;
}
.add-type-card:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-card); }
.add-type-card .add-type-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* ----------- COVERFLOW ("STAGE") LAYOUT — 3-D card carousel ----------- */
.media-body.layout-coverflow {
    padding: 0 !important;
    overflow: hidden !important;
    gap: 0 !important;
}
.mgh-cf-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background:
        radial-gradient(ellipse 60% 70% at 50% 38%, rgba(120,120,150,0.10), transparent 70%),
        linear-gradient(180deg, var(--bg-secondary, #16161a) 0%, #0c0c0f 100%);
}
.mgh-cf-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    perspective: 1400px;
    perspective-origin: 50% 45%;
    overflow: hidden;
    cursor: grab;
    user-select: none;
}
.mgh-cf-stage:active { cursor: grabbing; }
.mgh-cf-track {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}
.mgh-cf-card {
    position: absolute;
    top: 48%;
    left: 50%;
    width: calc(clamp(180px, 30vmin, 340px) * var(--mgh-cf-scale, 1));
    height: calc(clamp(180px, 30vmin, 340px) * var(--mgh-cf-scale, 1));
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
    transition: transform 0.42s cubic-bezier(0.25, 0.8, 0.3, 1),
                opacity 0.42s ease, filter 0.42s ease;
    cursor: pointer;
    will-change: transform, opacity;
}
.mgh-cf-frame {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: #0a0a0c;
    box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
    -webkit-box-reflect: below 1px linear-gradient(transparent 62%, rgba(0,0,0,0.32) 100%);
}
.mgh-cf-card.is-center .mgh-cf-frame {
    box-shadow: 0 26px 70px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.07);
    cursor: zoom-in;
}
.mgh-cf-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mgh-cf-noimg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3a3a42;
    background: #131317;
}
.mgh-cf-noimg .material-symbols-outlined { font-size: 3rem; opacity: 0.4; }
.mgh-cf-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.mgh-cf-card.is-center .mgh-cf-play { opacity: 1; }
.mgh-cf-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border, #333);
    background: rgba(20,20,24,0.75);
    backdrop-filter: blur(6px);
    color: var(--text-primary, #eee);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.1s;
}
.mgh-cf-nav:hover { background: rgba(40,40,48,0.9); border-color: var(--border-hover, #555); }
.mgh-cf-nav:active { transform: translateY(-50%) scale(0.92); }
.mgh-cf-prev { left: 18px; }
.mgh-cf-next { right: 18px; }
.mgh-cf-meta {
    flex-shrink: 0;
    text-align: center;
    padding: 0.6rem 1rem 1rem;
}
.mgh-cf-caption {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #eee);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.mgh-cf-counter {
    margin-top: 0.2rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--text-secondary, #888);
    font-variant-numeric: tabular-nums;
}
.mgh-cf-root.mgh-cf-reflect-off .mgh-cf-frame { -webkit-box-reflect: unset; }

@media (max-width: 640px) {
    .mgh-cf-nav { width: 36px; height: 36px; }
    .mgh-cf-prev { left: 6px; }
    .mgh-cf-next { right: 6px; }
}

/* ── Coverflow options inside the Gallery Settings modal ── */
.lgs-cf-opts { display: flex; flex-direction: column; gap: 2px; }
.lgs-cf-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.82rem;
    color: var(--text-primary);
    cursor: pointer;
}
.lgs-cf-range {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem 0;
    font-size: 0.82rem;
    color: var(--text-primary);
}
.lgs-cf-range input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }
.lgs-cf-select {
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.78rem;
    outline: none;
    cursor: pointer;
    transition: border-color var(--transition);
}
.lgs-cf-select:focus { border-color: var(--accent); }
/* Small switch reused in the modal */
.lgs-switch { position: relative; display: inline-flex; flex-shrink: 0; }
.lgs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.lgs-switch-track {
    position: relative;
    width: 34px;
    height: 18px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: background var(--transition), border-color var(--transition);
}
.lgs-switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: left var(--transition), background var(--transition);
}
.lgs-switch input:checked + .lgs-switch-track { background: var(--accent); border-color: var(--accent); }
.lgs-switch input:checked + .lgs-switch-track::after { left: 18px; background: #fff; }

/* ═══════════ ADMIN — master-detail layout ═══════════ */
.adm-md {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    min-height: 0;
    overflow: hidden;
}

/* ── Left: user list ── */
.adm-md-list {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--border);
    background: var(--bg-secondary);
}
.adm-md-list-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 8px;
    flex-shrink: 0;
}
.adm-md-search-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    transition: border-color var(--transition);
}
.adm-md-search-wrap:focus-within { border-color: var(--accent); }
.adm-md-search {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.8rem;
    padding: 7px 0;
    outline: none;
}
.adm-md-refresh {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}
.adm-md-refresh:hover { color: var(--accent); border-color: var(--accent); }
.adm-md-list-sub {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 16px 8px;
    flex-shrink: 0;
}
.adm-user-count {
    font-size: 0.68rem;
    color: var(--text-muted);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0 8px;
    font-variant-numeric: tabular-nums;
}
.adm-md-users { flex: 1; overflow-y: auto; padding: 0 8px 12px; }
.adm-md-user {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.adm-md-user:hover { background: var(--bg-hover); }
.adm-md-user.active { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); }
.adm-md-user-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-md-user-meta .adm-user-name { font-size: 0.8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-md-user-meta .adm-user-email { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-md-user-badge {
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.64rem;
    font-weight: 700;
    border-radius: 9px;
    background: color-mix(in srgb, #f59e0b 22%, transparent);
    color: #f59e0b;
    font-variant-numeric: tabular-nums;
}

/* ── Right: detail pane ── */
.adm-md-detail { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.adm-md-detail-scroll { flex: 1; overflow-y: auto; padding: 20px 22px; }
.adm-md-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-muted);
}
.adm-md-empty .material-symbols-outlined { font-size: 3rem; opacity: 0.35; }
.adm-md-empty p { font-size: 0.85rem; }

.adm-md-dhead {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}
.adm-avatar--xl { width: 56px; height: 56px; font-size: 1.3rem; flex-shrink: 0; }
.adm-md-dident { flex: 1; min-width: 0; }
.adm-md-dname { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.adm-md-demail { font-size: 0.78rem; color: var(--text-secondary); margin-top: 1px; }
.adm-md-duid { font-size: 0.66rem; color: var(--text-muted); font-family: monospace; margin-top: 3px; word-break: break-all; }
.adm-md-dstats { display: flex; gap: 7px; flex-shrink: 0; }
.adm-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.74rem;
    color: var(--text-secondary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 9px;
    font-variant-numeric: tabular-nums;
}
.adm-stat .material-symbols-outlined { font-size: 15px; opacity: 0.75; }
button.adm-stat { cursor: pointer; transition: border-color var(--transition), color var(--transition); }
button.adm-stat.adm-links-count:hover { border-color: var(--accent); color: var(--accent); }

.adm-md-section { margin-bottom: 22px; }
.adm-md-section-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.adm-md-section-head .material-symbols-outlined { font-size: 17px; color: var(--accent); }
.adm-md-section-count {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 1px 8px;
    margin-left: 2px;
}

.adm-md-flags {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2px 18px;
}
.adm-md-flag {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 2px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-subtle, transparent);
}
.adm-md-flag-icon { font-size: 18px; color: var(--text-muted); flex-shrink: 0; }
.adm-md-flag-label { flex: 1; font-size: 0.82rem; color: var(--text-primary); user-select: none; }

.adm-md-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px 22px;
    align-items: start;
}
.adm-md-group { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; }
.adm-md-group-title {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.adm-md-group .adm-md-flag { padding: 6px 0; border: none; }
.adm-md-group .adm-md-flag-label { font-size: 0.8rem; }

@media (max-width: 720px) {
    .adm-md { grid-template-columns: 1fr; grid-template-rows: minmax(140px, 38%) 1fr; }
    .adm-md-list { border-right: none; border-bottom: 1px solid var(--border); }
}

/* -- Media grid � Pinterest masonry -- */
.media-grid {
    column-width: var(--mgh-grid-col, 200px);
    column-count: auto;
    column-gap: 1rem;
}
/* Sites & creators grids in grid view also follow the size slider */
.media-body:not(.layout-list):not(.layout-tiles):not(.layout-feed) .db-sites-grid,
.media-body:not(.layout-list):not(.layout-tiles):not(.layout-feed) .creators-grid {
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--mgh-grid-col, 200px) * 0.7), 1fr));
}
.media-grid > * {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 1rem;
    display: block;
    width: 100%;
}

/* -- Image card -- */
.image-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s;
}
.image-card:hover { border-color: var(--border-hover); }

.image-card-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
    cursor: zoom-in;
}
.image-card:hover .image-card-img { transform: scale(1.03); }

.image-card-body {
    padding: 0.65rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.image-type-badge {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    border: 1px solid rgba(199,114,254,0.4);
    padding: 1px 5px;
    flex-shrink: 0;
}

.image-card-name {
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.card-source-link {
    position: relative;
    z-index: 3;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color var(--transition);
    padding: 2px;
}
.card-source-link:hover { color: var(--accent); }

/* Person / creator attribution rows on image/video cards */
.image-card-person {
    padding: 0 0.9rem 0.55rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    color: #55ccbb;
    cursor: pointer;
    transition: color 0.15s;
}
.image-card-person:hover { color: #7ff5e6; }
.image-card-person-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-card-creator {
    padding: 0 0.9rem 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    color: var(--accent);
    cursor: pointer;
    transition: opacity 0.15s;
}
.image-card-creator:hover { opacity: 0.75; }

/* -- Image group card (Twitter-style multi-image) -- */
.image-group-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s;
}
.image-group-card:hover { border-color: var(--border-hover); }

.image-group-grid {
    display: grid;
    gap: 2px;
    width: 100%;
}
.image-group-grid[data-count="1"] { grid-template-columns: 1fr; }
.image-group-grid[data-count="2"] { grid-template-columns: 1fr 1fr; }
.image-group-grid[data-count="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.image-group-grid[data-count="3"] .ig-item:first-child { grid-row: 1 / 3; }
.image-group-grid[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ig-item {
    overflow: hidden;
    cursor: zoom-in;
    background: #111;
}
/* First item: natural height — JS measures it and sets grid height */
.ig-item:first-child img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}
/* Other items: fill their cell once JS assigns a grid height */
.ig-item:not(:first-child) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.ig-item:hover img { transform: scale(1.04); }

/* image-group cycling (> 4 images) */
.ig-cycle-wrap {
    position: relative;
    width: 100%;
    background: #111;
}
.ig-cycle-img {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
    transition: opacity 0.15s;
}
.ig-cycle-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.55);
    border: none;
    color: #eee;
    font-size: 1.4rem;
    line-height: 1;
    width: 30px;
    height: 44px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ig-cycle-wrap:hover .ig-cycle-btn,
.feed-card:hover .ig-cycle-btn { opacity: 1; }
.ig-cycle-prev { left: 0; border-radius: 0 4px 4px 0; }
.ig-cycle-next { right: 0; border-radius: 4px 0 0 4px; }
.ig-cycle-counter {
    position: absolute;
    bottom: 6px;
    right: 8px;
    background: rgba(0,0,0,0.6);
    color: #ccc;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    pointer-events: none;
}

/* image-group in list layout */
.media-body.layout-list .image-group-card {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.media-body.layout-list .image-group-grid {
    width: 72px;
    flex-shrink: 0;
    gap: 1px;
    overflow: hidden;
}
.media-body.layout-list .ig-item img {
    width: 72px;
    height: auto;
}

/* -- Video card -- */
.video-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s;
}
.video-card:hover { border-color: var(--border-hover); }

.video-iframe-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    position: relative;
}
.video-iframe-wrap--thumb {
    aspect-ratio: unset;
    height: auto;
}
.video-iframe-wrap--thumb img {
    width: 100%;
    height: auto;
    display: block;
}
.video-iframe-wrap--direct {
    aspect-ratio: unset;
    height: auto;
}
.video-iframe-wrap--direct video {
    width: 100%;
    height: auto;
    display: block;
    background: #000;
}
.video-iframe-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-card-body {
    padding: 0.65rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.video-type-badge {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ff4444;
    border: 1px solid rgba(255,68,68,0.4);
    padding: 1px 5px;
    flex-shrink: 0;
}

.video-card-name {
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.video-thumb-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}
.video-thumb-play-overlay:hover { opacity: 0.8; }

.video-link-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 110px;
    padding: 1.2rem;
    background: #1a1a1a;
    cursor: pointer;
    transition: background 0.15s;
}
/* When inside the 16:9 iframe wrapper, fill it absolutely like an iframe */
.video-iframe-wrap .video-link-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
}
.video-link-placeholder:hover { background: #222; }

.video-link-domain {
    font-size: 0.72rem;
    color: #888;
    text-align: center;
    word-break: break-all;
}

/* -- Creators grid -- */
.creators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.6rem;
}

.creator-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}
.creator-card:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }

.creator-card-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 6px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
    text-decoration: none;
}
.creator-card-link:hover { color: var(--accent); background: var(--bg-secondary); }

/* Auto-link button — person/character cards only */
.creator-card-autotag-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.creator-card-autotag-btn:hover {
    color: #fff;
    background: #55ccbb;
    border-color: #55ccbb;
}

/* "View all media" feed button on creator / person cards */
.creator-card-feed-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.creator-card-feed-btn:hover {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}
/* On mobile: always show (touch can't hover to reveal) */
@media (max-width: 640px) {
    .creator-card-feed-btn { opacity: 1; }
}

.creator-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
}
.creator-avatar-fallback {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
    opacity: .85;
}

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

.creator-name {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.creator-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.15rem;
    overflow: hidden;
}

.creator-platform-badge {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 1px 5px;
    flex-shrink: 0;
    border: 1px solid transparent;
}
.creator-platform-badge.yt     { color: #ff4444; border-color: rgba(255,68,68,0.4); }
.creator-platform-badge.tw     { color: #1d9bf0; border-color: rgba(29,155,240,0.4); }
.creator-platform-badge.ig     { color: #e1306c; border-color: rgba(225,48,108,0.4); }
.creator-platform-badge.ttk    { color: #69c9d0; border-color: rgba(105,201,208,0.4); }
.creator-platform-badge.twitch { color: #9147ff; border-color: rgba(145,71,255,0.4); }
.creator-platform-badge.other  { color: var(--text-secondary); border-color: var(--border); }
.creator-platform-badge.person { color: #55ccbb; border-color: rgba(85,204,187,0.4); }

.creator-media-count {
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.creator-media-count:hover { border-color: var(--accent); color: var(--accent); }

.creator-username {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.creator-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -- Creator panel (slide-up overlay) -- */
.creator-panel {
    position: fixed;
    inset: 0;
    background: var(--bg-dark);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.creator-panel.active { transform: translateY(0); }

.creator-panel-header {
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.creator-panel-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.25rem 0.6rem;
}

.creator-panel-back {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.78rem;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.creator-panel-back:hover { border-color: var(--accent); color: var(--accent); }

.creator-panel-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.25rem 1rem;
}

/* Panel avatar clip container (enables crop/pan/zoom) */
.creator-panel-avatar-clip {
    width: 64px; height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    border: 2px solid var(--border);
    background: var(--bg-card);
}
.creator-panel-avatar-clip .creator-panel-avatar {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;   /* fallback until JS runs */
    max-width: none;
    max-height: none;
    border-radius: 0;
    border: none;
    background: transparent;
}

/* Standalone (legacy) */
.creator-panel-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-card);
}
.creator-panel-avatar-fallback {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.creator-panel-name {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
}

.creator-panel-sub {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
}

.creator-panel-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 0.3rem;
}

.creator-panel-profile-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    padding: 0.25rem 0.65rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: border-color 0.15s, color 0.15s;
    white-space: nowrap;
    text-decoration: none;
}
.creator-panel-profile-btn:hover { border-color: var(--accent); color: var(--accent); }

.creator-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.creator-panel-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-secondary);
}
.creator-panel-empty p { margin-top: 0.5rem; font-size: 0.85rem; }

.creator-panel-count {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

/* Actions row inside the creator/person panel */
.cp-actions-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.cp-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem !important;
}
.cp-action-btn--teal {
    color: #55ccbb !important;
    border-color: rgba(85,204,187,0.4) !important;
}
.cp-action-btn--teal:hover {
    background: rgba(85,204,187,0.15) !important;
    border-color: #55ccbb !important;
}

@media (max-width: 600px) {
    .media-grid { columns: 2 150px; }
}
@media (max-width: 480px) {
    .media-grid { columns: 1; }
    .media-grid > * { margin-bottom: 0.75rem; }
}

.ws-placeholder {
    font-size: 0.84rem;
    color: var(--text-muted);
    padding: 1.5rem 0;
}
.ws-placeholder a { color: var(--accent); }



/* ==================== KANBAN ==================== */
/* -- GitHub Projects-style kanban board -- */
.kanban-board {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem 1.5rem;
    flex: 1;
    overflow-x: auto;
    align-items: flex-start;
    background: var(--bg-dark);
}

.kanban-col {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    min-height: 80px;
    max-height: 100%;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
}

.kanban-col-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
}

.kanban-col-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dot-backlog    { background: #6e7681; }
.dot-todo       { background: #388bfd; }
.dot-inprogress { background: var(--accent); }
.dot-review     { background: var(--warn); }
.dot-done       { background: #3fb950; }

.kanban-count {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 7px;
    line-height: 1.7;
    min-width: 20px;
    text-align: center;
}

.kanban-cards {
    flex: 1;
    overflow-y: auto;
    padding: 0 0.5rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* GitHub-style issue card */
.kanban-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.7rem 0.8rem;
    cursor: default;
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
}
.kanban-card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

/* Top row: open-issue icon + title + action buttons */
.kanban-card-top {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}

.kanban-issue-open-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: #3fb950;
}
.kanban-col[data-col="done"] .kanban-issue-open-icon { color: #8957e5; }

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

.kanban-card-title {
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}

.kanban-card-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kanban-card-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.kanban-card:hover .kanban-card-actions { opacity: 1; }
.kanban-card-edit,
.kanban-card-del {
    background: none; border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    display: flex; align-items: center;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.kanban-card-edit:hover { color: var(--accent); background: var(--accent-dim); }
.kanban-card-del:hover  { color: var(--danger); background: rgba(224,85,85,0.1); }

/* Footer: labels row */
.kanban-card-footer {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

/* GitHub label-style priority pill */
.kanban-priority {
    font-size: 0.65rem;
    font-weight: 500;
    padding: 1px 8px;
    border-radius: 12px;
    border: 1px solid;
    line-height: 1.6;
}
.kanban-priority--low    { background: rgba(45,164,78,0.15);  border-color: rgba(45,164,78,0.4);  color: #3fb950; }
.kanban-priority--medium { background: rgba(210,153,34,0.15); border-color: rgba(210,153,34,0.4); color: #d4a72c; }
.kanban-priority--high   { background: rgba(248,81,73,0.15);  border-color: rgba(248,81,73,0.4);  color: #f85149; }

/* -- Issue badge on kanban cards -- */
.kanban-issue-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.67rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    text-decoration: none;
    line-height: 1.4;
    transition: color var(--transition), border-color var(--transition);
    flex-shrink: 0;
}
.kanban-issue-badge:hover { color: var(--accent); border-color: var(--accent); }
.kanban-issue-badge svg   { flex-shrink: 0; }

/* -- GitHub sync button dim when no token -- */
.kanban-gh-no-token { opacity: 0.5; }

.kanban-add-inline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.45rem 0.75rem;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.78rem;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
    margin-top: 2px;
    text-align: left;
}
.kanban-add-inline:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }

/* ==================== MODALS ==================== */
.ws-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.15s ease;
}
.ws-modal-overlay.hidden { display: none; }

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

.ws-modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-hover);
    border-radius: 6px;
    width: 100%;
    max-width: 460px;
    animation: slideUp 0.18s ease;
    max-height: 90vh;
    overflow-y: auto;
}

.ws-modal--sm { max-width: 360px; }

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

.ws-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.3rem 0.9rem;
    border-bottom: 1px solid var(--border);
}

.ws-modal-header h2 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ws-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    transition: color var(--transition), background var(--transition);
}
.ws-modal-close:hover { color: var(--text-primary); background: var(--bg-card); }

.ws-modal-body {
    padding: 1.2rem 1.3rem;
}

.ws-modal-body p {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.ws-modal-form {
    padding: 1.2rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ws-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    margin-top: 0.4rem;
}

/* Modals without forms (e.g. Delete Confirm) need padding on the footer */
.ws-modal > .ws-modal-footer,
.ws-modal-body + .ws-modal-footer {
    padding: 0.9rem 1.3rem 1.2rem;
    margin-top: 0;
}

/* -- Icon Picker Modal -- */
.icon-cat-btn {
    text-align: left;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius);
    transition: background var(--transition), color var(--transition);
}
.icon-cat-btn:hover { background: var(--bg-card); color: var(--text-primary); }
.icon-cat-btn.active { color: var(--accent); background: var(--accent-dim); font-weight: 500; }

#ip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 8px;
    align-content: start;
}
.ip-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.ip-icon-btn:hover {
    background: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.form-group label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.form-group input,
.form-group textarea,
.form-group select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.85rem;
    padding: 0.55rem 0.8rem;
    outline: none;
    border-radius: var(--radius);
    transition: border-color var(--transition);
    width: 100%;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--accent); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }
.form-group textarea { resize: vertical; line-height: 1.55; }
.form-group select { cursor: pointer; }
.form-group select[multiple] { padding: 0.3rem 0; cursor: default; }
.form-group select[multiple] option { padding: 0.35rem 0.8rem; }
.form-hint { font-size: 0.72rem; color: var(--text-muted); margin-left: 0.4rem; font-weight: 400; }

.color-swatches {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.color-swatch {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--transition), transform var(--transition);
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.active { border-color: var(--accent); }

/* ==================== LIGHTBOX / FULLSCREEN VIEWER ==================== */
.ws-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: #000;
    -webkit-tap-highlight-color: transparent;
}
.ws-lightbox.open { display: block; }
body.wslb-active  { overflow: hidden; }

/* Stage: fills viewport above the footer */
.wslb-stage {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.wslb-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}
.wslb-video-wrap {
    width: min(100%, calc((100vh - 88px) * 1.778));
    aspect-ratio: 16 / 9;
    position: relative;
}
.wslb-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.wslb-thumb-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.wslb-play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s;
    text-decoration: none;
}
.wslb-play-btn:hover { transform: translate(-50%, -50%) scale(1.1); }
.wslb-play-btn svg  { width: 72px; height: 72px; }
.wslb-link-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: rgba(255,255,255,0.65);
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s;
}
.wslb-link-placeholder:hover { color: #fff; }

/* Prev / Next */
.wslb-nav {
    position: absolute;
    top: 40%; transform: translateY(-50%);
    z-index: 5;
    background: transparent;
    border: 0; padding: 0;
    color: rgba(255,255,255,0.3);
    width: 60px; height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s;
    font-family: inherit;
}
.wslb-nav:hover { color: rgba(255,255,255,0.88); }
.wslb-prev { left: 0; }
.wslb-next { right: 0; }

/* Close */
.wslb-close {
    position: absolute;
    top: 14px; right: 14px; z-index: 10;
    background: rgba(0,0,0,0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    width: 40px; height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    padding: 0;
    font-family: inherit;
}
.wslb-close:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* Footer: dots + caption */
.wslb-foot {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 88px;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-bottom: 22px;
    pointer-events: none;
}
.wslb-dots {
    display: flex;
    gap: 6px;
    align-items: center;
}
.wslb-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    border: 0; padding: 0;
    cursor: pointer;
    pointer-events: all;
    transition: background 0.18s, transform 0.18s;
    font-family: inherit;
}
.wslb-dot.active { background: #fff; transform: scale(1.38); }
.wslb-cap {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.4);
    text-align: center;
    padding: 0 3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 600px;
    pointer-events: none;
}

@media (max-width: 480px) {
    .wslb-nav { width: 44px; }
    .wslb-close { top: 12px; right: 12px; width: 38px; height: 38px; }
    .wslb-foot { padding-bottom: max(18px, env(safe-area-inset-bottom, 18px)); height: auto; min-height: 80px; }
}

/* ==================== TOAST ==================== */
.ws-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 3000;
    background: var(--bg-card);
    border: 1px solid var(--border-hover);
    color: var(--text-primary);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.82rem;
    padding: 0.7rem 1.2rem;
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.ws-toast.show {
    opacity: 1;
    transform: translateY(0);
}
.ws-toast.error { border-color: var(--danger); color: var(--danger); }
.ws-toast.success { border-color: var(--success); }

/* ==================== UTILITIES ==================== */
.hidden { display: none !important; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    :root {
        --sidebar-w: 200px;
    }

    .ws-topbar { height: auto; min-height: var(--topbar-h); flex-wrap: wrap; padding: 0.5rem 1rem; }
    .ws-project-title { font-size: 0.88rem; }

    .kanban-board { padding: 0.75rem; gap: 0.6rem; }
    .kanban-col   { flex: 0 0 200px; }

    .overview-grid { grid-template-columns: 1fr 1fr; }
    .overview-card { padding: 1rem; }
    .form-row      { grid-template-columns: 1fr; }
    .readme-preview { padding: 0.75rem 0.9rem; max-height: 440px; }
    .notes-save-row { flex-direction: row; justify-content: flex-end; }

    /* -- File tree: drop time column at tablet -- */
    .ft-row { grid-template-columns: minmax(130px, 50%) 1fr; }
    .ft-cell-time { display: none; }

    /* -- File tree header: stack on tablet -- */
    .ft-hdr { flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 0.6rem 0.8rem; }
    .ft-hdr-right { flex-wrap: wrap; gap: 0.3rem; }
    .ft-hdr-count { border-left: none; padding-left: 0; margin-left: 0; }

    /* -- Section toolbar wrapping -- */
    .section-toolbar { flex-wrap: wrap; gap: 0.5rem; }
}

/* -- Sidebar toggle in header (desktop) -- */
.ws-header-toggle {
    display: flex;
    flex-shrink: 0;
    color: var(--text-secondary);
}
.ws-header-toggle.rotated svg { transform: rotate(180deg); }

/* -- Sidebar overlay (mobile) -- */
#ws-sidebar-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 799;
    cursor: pointer;
}
#ws-sidebar-overlay.visible { display: block; }

/* -- Mobile hamburger button -- */
.ws-mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.3rem;
    margin-right: 0.25rem;
    border-radius: var(--radius);
    flex-shrink: 0;
    transition: color var(--transition);
}
.ws-mobile-menu-btn:hover { color: var(--text-primary); }

body.sidebar-collapsed .ws-mobile-menu-btn {
    display: flex;
}

/* -- Sidebar toggle: lives outside the sidebar so it stays visible when collapsed -- */
#ws-sidebar-toggle {
    position: absolute;
    top: 14px;
    left: calc(var(--sidebar-w) - 28px);
    z-index: 20;
    transition: left 0.22s ease;
}
body.sidebar-collapsed #ws-sidebar-toggle {
    left: 6px;
}
#ws-sidebar-toggle svg { transition: transform 0.22s ease; }
#ws-sidebar-toggle.rotated svg { transform: rotate(180deg); }

@media (max-width: 560px) {
    /* Sidebar goes off-canvas (absolute within #ws-shell) */
    #ws-sidebar {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 800;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        width: 240px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    #ws-sidebar.mobile-open { transform: translateX(0); }

    /* Show hamburger, hide desktop toggle */
    .ws-mobile-menu-btn { display: flex; }
    #ws-sidebar-toggle  { display: none; }

    /* Main fills full width */
    #ws-main { width: 100%; }

    /* Topbar condensed */
    .ws-topbar {
        padding: 0.4rem 0.75rem;
        gap: 0.5rem;
        height: auto;
        min-height: var(--topbar-h);
        flex-wrap: wrap;
    }
    .ws-topbar-right { width: 100%; justify-content: flex-end; }

    /* Tabs smaller */
    .ws-tabs { padding: 0 0.5rem; }
    .ws-tab  { padding: 0 0.65rem; font-size: 0.74rem; }

    /* Creator panel full-width */
    .creator-panel { width: 100%; border-left: none; border-top: 1px solid var(--border); }

    /* Modal full-screen-ish */
    .ws-modal {
        width: calc(100vw - 2rem);
        max-width: none;
        margin: 1rem;
        max-height: calc(100vh - 2rem);
    }

    /* -- Mobile editing: stop iOS auto-zoom on focus (any input < 16px zooms) -- */
    .form-group input,
    .form-group textarea,
    .form-group select,
    .link-ig-url,
    .link-ig-name,
    .link-vg-row input { font-size: 16px; }

    /* Roomier tap targets + breathing room in the link/image edit form */
    .ws-modal-form { padding: 1rem 1rem 0; gap: 0.9rem; }
    .form-group input,
    .form-group select,
    .link-thumb-row input { padding: 0.6rem 0.7rem; }
    .link-ig-url, .link-ig-name { padding: 0.55rem 0.7rem; }

    /* Image-group rows: stack url/caption with a clear, large remove button */
    .link-vg-row { gap: 8px; align-items: stretch; }
    .link-vg-remove { width: 36px; min-height: 36px; }
    .link-crop-btn { min-height: 36px; }

    /* Keep Save/Cancel reachable without scrolling the whole form away */
    .ws-modal-form .ws-modal-footer {
        position: sticky;
        bottom: 0;
        background: var(--bg-secondary);
        padding: 0.75rem 0 0.85rem;
        margin: 0.4rem -0.1rem 0;
    }
    .ws-modal-footer .ws-btn { padding: 0.6rem 1rem; }

    /* Section padding */
    .section-body { padding: 0.75rem; }
    .ws-section-body { padding: 0.75rem; }
    .overview-grid { grid-template-columns: 1fr; gap: 0.65rem; margin-bottom: 0.75rem; }
    .overview-card { padding: 0.85rem; }

    /* -- Sidebar brand header hidden -- */
    .ws-sb-top { display: none; }

    /* -- Tabs: icon-only -- */
    .tab-label { display: none; }
    .ws-tab {
        min-width: 44px;
        min-height: 44px;
        padding: 0 0.6rem;
        justify-content: center;
    }

    /* -- Topbar: hide badges + desktop buttons, show overflow -- */
    #project-type-badge   { display: none; }
    #project-status-badge { display: none; }
    #btn-edit-project     { display: none; }
    #btn-delete-project   { display: none; }
    #btn-topbar-more      { display: flex; }
    .ws-topbar-right      { width: auto; }

    /* -- Empty state: show Browse Projects button -- */
    .ws-empty-mobile-btn { display: flex; }

    /* -- FAB -- */
    .ws-fab { display: flex; bottom: calc(56px + 1.5rem); }

    /* -- Notes textarea height -- */
    .overview-notes-input { min-height: 120px; height: auto; }
    .readme-preview { min-height: 120px; max-height: 400px; }
    .readme-preview h1 { font-size: 1.2rem; }
    .readme-preview h2 { font-size: 1.05rem; }
    .readme-preview table th, .readme-preview table td { white-space: normal; }
    .github-repo-stats { gap: 0.4rem 1rem; }
    .overview-card { padding: 0.9rem 1rem; }

    /* -- Kanban: accordion (vertical stack) -- */
    .kanban-board {
        flex-direction: column;
        overflow-x: hidden;
        padding: 0.75rem;
        gap: 0.4rem;
    }
    .kanban-col {
        flex: none;
        width: 100%;
        min-height: unset;
    }
    .kanban-col-header {
        cursor: pointer;
        user-select: none;
    }
    .kanban-col-header::after {
        content: "";
        display: inline-block;
        margin-left: auto;
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid currentColor;
        opacity: 0.5;
        transition: transform 0.18s ease;
        flex-shrink: 0;
    }
    .kanban-col.collapsed .kanban-col-header::after {
        transform: rotate(-90deg);
    }
    .kanban-col.collapsed .kanban-cards,
    .kanban-col.collapsed .kanban-add-inline {
        display: none;
    }

    /* -- File tree: single-column (name only) on phones -- */
    .ft-row { grid-template-columns: 1fr; }
    .ft-cell-msg  { display: none; }
    .ft-cell-time { display: none; }
    .files-tree-wrap { padding: 0.5rem; gap: 0.4rem; }
    .ft-table { border-radius: calc(var(--radius) + 1px); }
    .ft-hdr { padding: 0.5rem 0.75rem; }
    .ft-hdr-author { font-size: 0.8rem; }
    .ft-hdr-msg    { font-size: 0.8rem; }
    .ft-hdr-count  { display: none; }
    .files-search-bar { padding: 0.4rem 0.65rem; }

    /* -- Nodes: touch notice -- */
    .nodes-canvas { touch-action: none; }

    /* -- Media section: fullwidth search -- */
    #media-toolbar.searching .media-search-input { width: 100%; }

    /* -- Media toolbar: compact on phones -- */
    #media-toolbar { padding: 0.55rem 0.85rem; gap: 0.4rem; }
    #media-toolbar .section-toolbar-title { font-size: 0.75rem; }
    /* Keep layout-toggle visible but shrink it */
    .media-layout-btns { gap: 1px; }
    .media-layout-btn { padding: 0.22rem 0.32rem; }
    #btn-add-media-link { padding: 0.3rem 0.6rem; font-size: 0.75rem; flex-shrink: 0; }
}

/* =================================================================
   HUB LAYOUT � Outlook-style app switcher bar
   ================================================================= */

/* -- Hub nav bar -- */
#hub-nav {
    width: 54px;
    flex-shrink: 0;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
    overflow: visible;
}

.hub-nav-logo {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.hub-logo-link {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition);
    border-radius: var(--radius);
    padding: 6px;
}
.hub-logo-link:hover { color: var(--accent); }

/* -- App buttons -- */
.hub-apps {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
}

.hub-app-btn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition);
    flex-shrink: 0;
}
.hub-app-btn:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}
.hub-app-btn.active {
    background: var(--accent-dim);
    color: var(--accent);
}

/* Tooltip on hover */
.hub-app-btn::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 4px 10px;
    border-radius: var(--radius);
    font-size: 0.72rem;
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s, transform 0.12s;
    z-index: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.hub-app-btn:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* -- Hub nav footer (user avatar) -- */
.hub-nav-footer {
    border-top: 1px solid var(--border);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    flex-shrink: 0;
}

/* Popup opens to the right, aligned to bottom */
#hub-nav .avatar-popup {
    top: auto;
    bottom: 0;
    right: auto;
    left: calc(100% + 10px);
    min-width: 160px;
}

.avatar-popup-name {
    font-size: 0.78rem;
    color: var(--text-secondary);
    padding: 0.4rem 0.65rem 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.2rem;
}

/* -- Hub content area -- */
#hub-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    min-width: 0;
}

/* -- Individual app containers -- */
.hub-app {
    display: none;
    flex: 1;
    overflow: hidden;
    min-width: 0;
}
.hub-app.active {
    display: flex;
}

/* Workspace app: column so mobile topbar sits above the shell */
#app-workspace {
    flex-direction: column;
}

/* Mobile topbar inside workspace app */
.ws-mobile-topbar {
    display: none;
    align-items: center;
    gap: 0.6rem;
    height: 48px;
    padding: 0 0.9rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

@media (max-width: 560px) {
    .ws-mobile-topbar { display: flex; }
}

/* On mobile, hub-nav becomes a bottom tab bar */
@media (max-width: 600px) {
    body {
        flex-direction: column;
    }
    #hub-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 56px;
        flex-direction: row;
        border-right: none;
        border-top: 1px solid var(--border);
        overflow: visible;
        z-index: 200;
    }
    .hub-nav-logo {
        width: 54px;
        height: 100%;
        border-bottom: none;
        border-right: 1px solid var(--border);
        flex-shrink: 0;
    }
    .hub-apps {
        flex-direction: row;
        flex: 1;
        padding: 0;
        justify-content: space-around;
        align-items: center;
        overflow: visible;
    }
    .hub-nav-footer {
        border-top: none;
        border-left: 1px solid var(--border);
        padding: 0;
        width: auto;
        height: 100%;
        justify-content: center;
        padding: 0 12px;
    }
    /* Hide the standalone settings btn; use avatar popup instead */
    #hub-btn-settings { display: none !important; }
    .avatar-popup-settings { display: block; }
    #hub-content {
        flex: 1;
        padding-bottom: 56px;
    }
    /* Tooltips hidden on mobile */
    .hub-app-btn::after { display: none; }
    /* Popup from bottom nav opens upward */
    #hub-nav .avatar-popup {
        bottom: calc(100% + 8px);
        left: auto;
        right: 0;
        top: auto;
    }
}

/* =================================================================
   LINK GALLERY APP
   ================================================================= */

#app-links {
    background: var(--bg-dark);
}

/* -- Links header toolbar -- */
.links-header {
    flex-shrink: 0;
    height: var(--topbar-h);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 1rem 0 0.5rem;
    gap: 0.6rem;
}

.links-header-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}
.links-header-title svg { color: var(--text-muted); flex-shrink: 0; }

.links-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.links-search-input {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 0.78rem;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius);
    width: 190px;
    outline: none;
    transition: border-color var(--transition);
}
.links-search-input:focus { border-color: var(--accent); }
.links-search-input::placeholder { color: var(--text-muted); }

/* Category drawer backdrop — only shown on mobile when drawer is open */
.links-cat-overlay { display: none; }

/* -- Category nav (horizontal strip by default, sidebar on desktop) -- */
.links-cats {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    background: var(--bg-secondary);
}

.links-cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.72rem;
    padding: 0.22rem 0.65rem;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    flex-shrink: 0;
}
.links-cat-btn:hover { border-color: var(--border-hover); color: var(--text-primary); background: var(--bg-card); }
.links-cat-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.links-cat-btn-icon { font-size: 1rem; line-height: 1; }

.links-cat-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 1px dashed var(--border-hover);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 0.72rem;
    padding: 0.22rem 0.65rem;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}
.links-cat-add-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* Hide the header "Add Link" button when a prefab hub is active (it has its own +Add).
   The sidebar "+Category" button stays visible so categories can be added from anywhere. */
#app-links[data-prefab="streaming"] #btn-add-link,
#app-links[data-prefab="media"] #btn-add-link { display: none; }

/* In "All" view you see category cards (not links), so per-link controls don't apply */
#app-links[data-view="all"] #btn-links-settings,
#app-links[data-view="all"] #btn-links-select-mode { display: none; }

/* Mobile category select � hidden by default, shown at =480px */
.links-cat-select {
    display: none;
}

/* �� Category overview grid �� */
.link-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.85rem;
    padding: 1.5rem;
}
.link-cat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1rem 0.65rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
    text-align: center;
    position: relative;
}
.link-cat-card:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}
.link-cat-card-icon  { display: flex; align-items: center; justify-content: center; height: 2.2rem; }
.link-cat-card-icon .material-symbols-outlined { font-size: 2.2rem; color: var(--text-secondary); }
.link-cat-card-name  { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.link-cat-card-count { font-size: 0.68rem; color: var(--text-muted); }
.link-cat-card-footer {
    display: flex;
    gap: 2px;
    margin-top: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    align-self: stretch;
    justify-content: flex-end;
    min-height: 28px;
}

/* �� Category form �� */
/* -- Prefab type picker -- */
.lc-prefabs {
    display: flex; gap: 0.5rem;
}
.lc-prefab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    padding: 0.65rem 0.5rem; border-radius: 6px;
    border: 1.5px solid var(--border); background: var(--bg-card);
    color: var(--text-muted); cursor: pointer; font-size: 0.72rem; font-family: inherit;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.lc-prefab .material-symbols-outlined { font-size: 1.3rem; }
.lc-prefab.active { border-color: var(--accent); color: var(--accent); background: rgba(99,102,241,0.07); }
.lc-prefab[data-prefab="streaming"].active { border-color: #e50914; color: #e50914; background: rgba(229,9,20,0.07); }
.lc-prefab[data-prefab="media"].active { border-color: #818cf8; color: #818cf8; background: rgba(129,140,248,0.09); }

/* -- Lock badge on category cards -- */
.link-cat-lock-badge {
    position: absolute; top: 6px; right: 6px;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.link-cat-lock-badge .material-symbols-outlined { font-size: 0.8rem; color: rgba(255,255,255,0.7); }
.link-cat-lock-toggle {
    display: flex; align-items: center; gap: 0.5rem;
    cursor: pointer; font-size: 0.85rem; user-select: none;
}
.link-cat-lock-toggle input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

/* -- Category lock screen -- */
.link-lockscreen {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 340px; padding: 2rem 1.5rem; gap: 0.85rem; text-align: center;
}
.link-ls-folder-icon .material-symbols-outlined {
    font-size: 3.2rem;
    color: var(--text-muted);
    opacity: 0.35;
}
.link-ls-name { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.link-ls-sub  { font-size: 0.82rem; color: var(--text-muted); margin-top: -0.3rem; }
.link-ls-actions { display: flex; gap: 0.65rem; margin-top: 0.25rem; }

/* -- Streaming Hub category card -- */
.link-cat-card--streaming {
    background: linear-gradient(145deg, #1e0807 0%, #130000 100%);
    border-color: rgba(229,9,20,0.2);
}
.link-cat-card--streaming:hover { border-color: rgba(229,9,20,0.5); }
.link-cat-card--streaming .link-cat-card-icon .material-symbols-outlined { color: #e50914; }

/* -- Media Hub category card -- */
.link-cat-card--media {
    background: linear-gradient(145deg, #0e0e20 0%, #0a0a18 100%);
    border-color: rgba(129,140,248,0.2);
}
.link-cat-card--media:hover { border-color: rgba(129,140,248,0.5); }
.link-cat-card--media .link-cat-card-icon .material-symbols-outlined { color: #818cf8; }

/* ---------- MEDIA HUB VIEW ---------- */
.media-gallery-hub {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.mgh-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
}
.mgh-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}
.mgh-title .material-symbols-outlined { font-size: 1.1rem; color: #818cf8; }
.mgh-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.mgh-body.layout-feed {
    padding: 0;
    overflow: hidden;
}
.mgh-body.layout-feed .shorts-grid {
    height: 100%;
}
.mgh-section { display: flex; flex-direction: column; gap: 0.75rem; }
.mgh-section-count {
    font-size: 0.68rem;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 7px;
    flex-shrink: 0;
}

/* ---------- MERGED CREATORS + CHARACTERS (split section) ---------- */
.mgh-people-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.mgh-people-col {
    min-width: 0;
    padding: 0 1.1rem;
}
.mgh-people-col:first-child { padding-left: 0; }
/* Divider only appears between two columns, never on a lone column */
.mgh-people-col + .mgh-people-col {
    border-left: 1px solid var(--border);
}
.mgh-people-col:last-child { padding-right: 0; }
.mgh-people-col-head {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

/* People cards render as readable single-column rows (avatar + name),
   regardless of the hub's grid/tiles/list layout — the half-width columns
   are too narrow for the normal card styles. */
.mgh-body .mgh-people-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.mgh-body .mgh-people-grid .creator-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.55rem !important;
    aspect-ratio: auto !important;
    padding: 0.4rem 0.5rem !important;
    border-radius: var(--radius) !important;
}
.mgh-body .mgh-people-grid .creator-avatar-clip {
    position: relative !important;
    inset: auto !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}
.mgh-body .mgh-people-grid .creator-avatar-fallback {
    position: static !important;
    inset: auto !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}
.mgh-body .mgh-people-grid .creator-avatar { border-radius: 50% !important; object-fit: cover; }
.mgh-body .mgh-people-grid .creator-avatar-fallback { font-size: 0.95rem !important; }
.mgh-body .mgh-people-grid .creator-info {
    position: static !important;
    background: none !important;
    padding: 0 !important;
    flex: 1;
    min-width: 0;
    text-align: left !important;
}
.mgh-body .mgh-people-grid .creator-name {
    color: var(--text-primary) !important;
    text-shadow: none !important;
    font-size: 0.8rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mgh-body .mgh-people-grid .creator-meta { margin-top: 1px; }
.mgh-body .mgh-people-grid .creator-desc { display: none !important; }
.mgh-body .mgh-people-grid .creator-card-link {
    position: static !important;
    background: none !important;
    color: var(--text-muted) !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0;
}
/* Drag handle sits inline at the end of the row in manual sort */
.mgh-body .mgh-people-grid .sortable-handle {
    position: static !important;
    opacity: 1;
    width: 20px;
    height: 24px;
    background: none;
    border: none;
    flex-shrink: 0;
}
.mgh-people-empty {
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 0.4rem 0;
}
@media (max-width: 600px) {
    .mgh-people-col { padding: 0 0.55rem; }
    .mgh-body .mgh-people-grid .creator-name { font-size: 0.76rem !important; }
}

/* ---------- LINK FORM ---------- */
.link-badge-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.link-badge-row input[type="text"] { flex: 1; }
.link-badge-row input[type="color"] {
    width: 38px;
    height: 36px;
    padding: 2px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: transparent;
    cursor: pointer;
}
.ml-attr-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.ml-attr-col { display: flex; flex-direction: column; gap: 4px; }
.ml-attr-label { font-size: 0.72rem; color: var(--text-muted); }
.ml-attr-col select { min-height: 36px; }
.ml-attr-col select[multiple] { min-height: 72px; }
.link-batch-field {
    min-height: 116px;
    resize: vertical;
    border-style: dashed;
}
.link-batch-field.is-dragover {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.04);
}

/* ---------- MEDIA HUB TOOLBAR (search + layout) ---------- */
.mgh-search-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    max-width: 240px;
}
.mgh-search-input {
    flex: 1;
    height: 30px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 0.5rem;
    color: var(--text-primary);
    font-size: 0.8rem;
}
.mgh-search-input:focus { outline: none; border-color: var(--accent); }
.mgh-search-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); display: flex; align-items: center; padding: 4px;
}
.mgh-search-close:hover { color: var(--text-primary); }
.mgh-toolbar-actions {
    display: flex; align-items: center; gap: 2px;
}
/* Grid-size slider */
.mgh-scale-wrap {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0 0.5rem 0 0.35rem;
    margin-right: 0.25rem;
    border-right: 1px solid var(--border);
    color: var(--text-muted);
}
.mgh-scale-slider {
    width: 84px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
.mgh-scale-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 2px solid var(--bg-card);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.mgh-scale-slider::-moz-range-thumb {
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 2px solid var(--bg-card);
}
.ws-btn-icon {
    padding: 5px 7px !important;
    display: flex; align-items: center; justify-content: center;
}
.mgh-layout-btn.active { color: var(--accent) !important; background: var(--bg-tertiary) !important; }
/* Uniform icon sizing across SVG + material-symbol layout buttons */
.mgh-layout-btn { width: 30px; height: 28px; padding: 0 !important; }
.mgh-layout-btn .material-symbols-outlined { font-size: 18px; line-height: 1; }
.mgh-layout-btn svg { width: 15px; height: 15px; }
.mgh-scale-wrap .material-symbols-outlined { font-size: 16px; line-height: 1; opacity: 0.6; }

/* ---------- MEDIA HUB SPEED-DIAL FAB (mobile) ---------- */
.mgh-fab-wrap { display: none; }   /* desktop: toolbar is used instead */
.mgh-fab {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(199,114,254,0.5);
    transition: transform 0.2s, box-shadow 0.2s;
}
.mgh-fab:active { transform: scale(0.94); }
.mgh-fab-plus { transition: transform 0.25s ease; }
.mgh-fab-wrap.open .mgh-fab-plus { transform: rotate(135deg); }
.mgh-fab-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 192px;
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 34px rgba(0,0,0,0.55);
    transform-origin: bottom right;
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.mgh-fab-wrap.open .mgh-fab-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.mgh-fab-item {
    display: flex; align-items: center; gap: 0.65rem;
    width: 100%;
    padding: 0.55rem 0.6rem;
    border: none;
    background: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.84rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.mgh-fab-item:hover,
.mgh-fab-item:active { background: var(--bg-secondary); color: var(--text-primary); }
.mgh-fab-item svg { flex-shrink: 0; }
.mgh-fab-item--accent { color: var(--accent); font-weight: 600; }
.mgh-fab-sep { height: 1px; background: var(--border); margin: 4px 2px; }

/* ---------- SETTINGS: section order list ---------- */
.lgs-section-order {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lgs-so-row {
    display: flex;
    flex-direction: column;
    cursor: grab;
    gap: 8px;
    padding: 0.5rem 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.lgs-so-main { display: flex; align-items: center; gap: 0.6rem; }
.lgs-so-grip {
    display: flex;
    color: var(--text-muted);
    pointer-events: none;
    cursor: grab;
    flex-shrink: 0;
}
.lgs-so-row:active { cursor: grabbing; }
.lgs-so-row:hover { border-color: var(--border-hover); }
.lgs-so-name { flex: 1; min-width: 0; }
.lgs-so-eye {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 32px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 5px;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}
.lgs-so-eye:hover { color: var(--text-primary); background: var(--bg-secondary); }
.lgs-so-row--hidden { opacity: 0.5; }
.lgs-so-row--hidden > .lgs-so-main .lgs-so-name { text-decoration: line-through; }

/* People sub-row: static labels with per-side eye toggles */
.lgs-so-people {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: calc(12px + 0.6rem);
}
.lgs-pc-chip {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 1px 3px 1px 7px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-secondary);
    font-size: 0.72rem;
    color: var(--text-secondary);
    cursor: grab;
}
.lgs-pc-chip:active { cursor: grabbing; }
.lgs-pc-chip--hidden { opacity: 0.45; }
.lgs-pc-chip--hidden .lgs-pc-name { text-decoration: line-through; }
.lgs-pc-eye {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 26px; padding: 0;
    border: none; background: none; cursor: pointer;
    color: var(--text-muted);
    border-radius: 3px;
    transition: color 0.15s;
}
.lgs-pc-eye:hover { color: var(--text-primary); }

/* Mobile: collapse the cut-off media-hub toolbar actions into the speed-dial FAB */
@media (max-width: 600px) {
    .mgh-fab-wrap {
        display: block;
        position: fixed;
        right: 1.1rem;
        bottom: calc(56px + 1.1rem);   /* clear the bottom hub nav */
        z-index: 750;
    }
    /* Layout switching + text actions move to the FAB; keep the grid-size slider */
    .mgh-layout-btn { display: none; }
    .mgh-toolbar > .ws-btn { display: none; }
    .mgh-scale-wrap { border-right: none; margin-right: 0; padding-right: 0; }
    .mgh-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    /* The generic "New Project" FAB isn't relevant in the Link Gallery */
    body[data-hub-app="links"] .ws-fab { display: none !important; }

    /* Grid view: let the size slider drive density on phones too */
    .mgh-body:not(.layout-list):not(.layout-tiles) .db-sites-grid,
    .mgh-body:not(.layout-list):not(.layout-tiles) .creators-grid {
        grid-template-columns: repeat(auto-fill, minmax(calc(var(--mgh-grid-col, 200px) * 0.7), 1fr));
    }
    .mgh-body:not(.layout-list):not(.layout-tiles) .media-grid {
        column-count: auto;
        column-width: var(--mgh-grid-col, 200px);
    }
}

/* ---------- MEDIA HUB IMPORT DIALOG ---------- */
.mgh-import-overlay {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
}
.mgh-import-dialog {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 10px);
    padding: 1.25rem 1.5rem;
    width: 360px; max-width: 95vw;
    display: flex; flex-direction: column; gap: 0.85rem;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.mgh-import-header {
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 600; font-size: 0.92rem;
}
.mgh-import-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); display: flex; align-items: center; padding: 4px;
    border-radius: var(--radius);
}
.mgh-import-close:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.mgh-import-label { font-size: 0.78rem; color: var(--text-muted); }
.mgh-import-select {
    width: 100%; padding: 0.45rem 0.6rem;
    background: var(--bg-tertiary); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text-primary);
    font-size: 0.85rem; font-family: inherit;
}
.mgh-import-check {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.82rem; color: var(--text-secondary); cursor: pointer;
}
.mgh-import-actions {
    display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.25rem;
}

/* ---------- STREAMING HUB VIEW ---------- */
.streaming-hub { padding: 0; }

/* -- Service pill bar -- */
.sh-services-bar {
    display: flex; align-items: center; gap: 0.45rem;
    flex-wrap: wrap; padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 0.85rem;
}
/* Pill wrapper for positioning the delete button */
.sh-pill-wrap { position: relative; display: inline-flex; }
.sh-pill-del {
    position: absolute; top: -5px; right: -5px; z-index: 2;
    width: 16px; height: 16px; border-radius: 50%;
    background: #333; border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7); font-size: 9px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s, background 0.15s;
}
.sh-pill-wrap:hover .sh-pill-del { opacity: 1; }
.sh-pill-del:hover { background: #e50914; border-color: #e50914; color: #fff; }
/* Hub add-item form (persists in body) */
.sh-item-add-form {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    z-index: 1500; background: #0d0d0d;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
    display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 0.6rem 0.75rem; min-width: 360px; max-width: 520px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
}
.sh-item-add-form.sd-hidden { display: none; }
.sh-item-add-form .sd-add-input { width: 100%; }
.sh-item-add-form select.sd-add-input { background: rgba(255,255,255,0.06); }
.sh-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.32rem 0.65rem 0.32rem 0.4rem;
    background: #1a1a1a; border: 1px solid rgba(255,255,255,0.1); border-radius: 99px;
    color: rgba(255,255,255,0.75); font-size: 0.75rem; font-weight: 500;
    cursor: pointer; transition: border-color 0.15s, background 0.15s; font-family: inherit;
}
.sh-pill:hover { border-color: rgba(229,9,20,0.6); background: #242424; color: #fff; }
.sh-pill-add {
    border-style: dashed; border-color: rgba(255,255,255,0.15); background: transparent;
    color: rgba(255,255,255,0.35);
}
.sh-pill-add:hover { border-color: rgba(229,9,20,0.5); color: rgba(255,255,255,0.7); background: rgba(229,9,20,0.04); }
.sh-pill-favicon { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; flex-shrink: 0; }
.sh-pill-favicon-fb { font-size: 0.9rem; color: rgba(255,255,255,0.25); }
.sh-pill-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }

/* -- Hub tabs -- */
.sh-tab-bar {
    display: flex; gap: 0; margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    align-items: center;
}
.sh-tab {
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: 0.45rem 0.9rem; font-size: 0.78rem; font-weight: 500;
    color: rgba(255,255,255,0.4); cursor: pointer; font-family: inherit;
    transition: color 0.15s, border-color 0.15s; margin-bottom: -1px;
}
.sh-tab:hover { color: rgba(255,255,255,0.7); }
.sh-tab-active { color: #fff; border-bottom-color: #e50914; }

/* -- Feeling Lucky button -- */
.sh-lucky-btn {
    margin-left: auto; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.7rem 0.3rem 0.5rem;
    background: rgba(229,9,20,0.1); border: 1px solid rgba(229,9,20,0.3);
    border-radius: 99px; color: rgba(229,9,20,0.85); font-size: 0.74rem;
    font-weight: 600; font-family: inherit; cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.sh-lucky-btn:hover { background: rgba(229,9,20,0.2); border-color: rgba(229,9,20,0.6); color: #ff3040; }
.sh-lucky-btn .material-symbols-outlined { font-size: 1rem; }
.sh-lucky-btn-label { display: inline; }

/* -- Feeling Lucky Modal -- */
.sh-lucky-overlay {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(0,0,0,0.75); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
}
.sh-lucky-overlay.sh-lucky-visible { opacity: 1; pointer-events: auto; }
.sh-lucky-modal {
    position: relative; background: #111; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; width: 100%; max-width: 680px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.8);
    overflow: hidden;
    transform: scale(0.97);
    transition: transform 0.2s;
}
.sh-lucky-overlay.sh-lucky-visible .sh-lucky-modal { transform: scale(1); }
.sh-lucky-close {
    position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2;
    background: rgba(255,255,255,0.07); border: none; border-radius: 50%;
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.6); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.sh-lucky-close:hover { background: rgba(255,255,255,0.14); color: #fff; }
.sh-lucky-header {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.85rem 1.1rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.5);
    text-transform: uppercase; letter-spacing: 0.07em;
}
.sh-lucky-dice-icon { font-size: 1rem; color: #e50914; }
.sh-lucky-card {
    display: flex; gap: 0; min-height: 200px;
}
.sh-lucky-card.sh-lucky-loading-state { opacity: 0.7; }
.sh-lucky-poster-wrap {
    width: 160px; min-width: 160px; background: #0a0a0a;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; border-right: 1px solid rgba(255,255,255,0.07);
}
.sh-lucky-poster-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-lucky-poster-blank {
    width: 100%; height: 240px; display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.15);
}
.sh-lucky-poster-blank .material-symbols-outlined { font-size: 3rem; }
.sh-lucky-info {
    flex: 1; min-width: 0; padding: 1.1rem 1.25rem 1rem;
    display: flex; flex-direction: column; gap: 0.45rem;
}
.sh-lucky-type-badge {
    font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
    color: rgba(229,9,20,0.75); background: rgba(229,9,20,0.1);
    border: 1px solid rgba(229,9,20,0.2); border-radius: 99px;
    padding: 0.15rem 0.55rem; align-self: flex-start;
}
.sh-lucky-title {
    font-size: 1.2rem; font-weight: 700; color: #fff; line-height: 1.25;
}
.sh-lucky-ep-label {
    font-size: 0.8rem; color: rgba(255,255,255,0.55); line-height: 1.4;
}
.sh-lucky-ep-label strong { color: rgba(255,255,255,0.85); font-weight: 600; }
.sh-lucky-desc {
    font-size: 0.8rem; color: rgba(255,255,255,0.55); line-height: 1.55;
    margin: 0; flex: 1; max-height: 6.2em; overflow-y: auto;
    display: flex; align-items: flex-start; gap: 0.35rem;
}
.sh-lucky-desc--loading { color: rgba(255,255,255,0.3); align-items: center; }
.sh-lucky-desc--empty { color: rgba(255,255,255,0.25); font-style: italic; }
.sh-lucky-svc {
    font-size: 0.67rem; color: rgba(255,255,255,0.25); letter-spacing: 0.04em;
}
.sh-lucky-actions {
    display: flex; align-items: center; gap: 0.6rem; margin-top: 0.35rem;
}
.sh-lucky-watch-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.45rem 0.95rem; background: #e50914; border: none;
    border-radius: 6px; color: #fff; font-size: 0.8rem; font-weight: 600;
    font-family: inherit; cursor: pointer; text-decoration: none;
    transition: background 0.15s; white-space: nowrap;
}
.sh-lucky-watch-btn:hover { background: #ff1f2e; }
.sh-lucky-watch-btn--disabled {
    background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.3); cursor: default;
    border: 1px solid rgba(255,255,255,0.08);
}
.sh-lucky-unaired-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.42rem 0.85rem; background: rgba(255,180,0,0.1);
    border: 1px solid rgba(255,180,0,0.25); border-radius: 6px;
    color: rgba(255,180,0,0.8); font-size: 0.78rem; font-weight: 500;
}
.sh-lucky-unaired-badge .material-symbols-outlined { font-size: 1rem; }
.sh-lucky-watch-btn .material-symbols-outlined { font-size: 1rem; }
.sh-lucky-retry-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.42rem 0.85rem; background: transparent;
    border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;
    color: rgba(255,255,255,0.5); font-size: 0.78rem; font-weight: 500;
    font-family: inherit; cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s; white-space: nowrap;
}
.sh-lucky-retry-btn:hover { border-color: rgba(255,255,255,0.3); color: #fff; background: rgba(255,255,255,0.05); }
.sh-lucky-retry-btn .material-symbols-outlined { font-size: 1rem; }
.sh-lucky-spin-icon {
    font-size: 1.1rem; display: inline-block;
    animation: sh-spin 1s linear infinite;
}
@keyframes sh-spin { to { transform: rotate(360deg); } }

/* -- Mobile: lucky modal stack poster on top -- */
@media (max-width: 520px) {
    .sh-lucky-card { flex-direction: column; }
    .sh-lucky-poster-wrap { width: 100%; min-width: unset; height: 200px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
    .sh-lucky-poster-blank { height: 200px; }
    .sh-lucky-title { font-size: 1rem; }
    /* Collapse button to icon-only on small screens */
    .sh-lucky-btn-label { display: none; }
    .sh-lucky-btn { padding: 0.3rem 0.45rem; }
}

/* -- Hub content area -- */
.sh-content { padding-top: 0.25rem; }
.sh-loading { color: rgba(255,255,255,0.3); font-size: 0.82rem; padding: 1.5rem 0; }
.sh-empty {
    display: flex; flex-direction: column; align-items: center;
    padding: 3rem 1rem; gap: 0.6rem; text-align: center;
}
.sh-empty .material-symbols-outlined { font-size: 2.5rem; opacity: 0.15; }
.sh-empty p { font-size: 0.82rem; color: rgba(255,255,255,0.35); margin: 0; }

/* -- Hub sections -- */
.sh-section { margin-bottom: 1.75rem; }
.sh-section-hdr {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.5);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75rem;
}
.sh-section-hdr .material-symbols-outlined { font-size: 0.95rem; }
.sh-section-count {
    margin-left: auto; font-size: 0.68rem; font-weight: 400;
    color: rgba(255,255,255,0.3); text-transform: none; letter-spacing: 0;
}

/* -- Service badge on each card -- */
.sh-svc-badge {
    font-size: 0.58rem; color: rgba(255,255,255,0.28);
    text-align: center; padding: 0 0.2rem 0.2rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* -- Series list rows -- */
.sh-series-list { display: flex; flex-direction: column; gap: 0.4rem; }
.sh-series-row {
    display: flex; align-items: center; gap: 0.75rem;
    background: #1a1a1a; border: 1px solid rgba(255,255,255,0.06);
    border-radius: 5px; padding: 0.55rem 0.75rem;
    transition: border-color 0.15s;
}
.sh-series-row:hover { border-color: rgba(255,255,255,0.12); }
.sh-series-row-left { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.sh-series-title {
    font-size: 0.82rem; font-weight: 500; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sh-series-row-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.sh-series-prog { width: 80px; flex-shrink: 0; }
.sh-pct { font-size: 0.68rem; color: rgba(255,255,255,0.4); min-width: 28px; text-align: right; }
.sh-open-btn {
    background: none; border: none; color: rgba(255,255,255,0.25);
    cursor: pointer; padding: 2px; display: flex; align-items: center;
    transition: color 0.15s;
}
.sh-open-btn:hover { color: #e50914; }
.sh-open-btn .material-symbols-outlined { font-size: 14px; }

/* -- Tab bar "Add item" button -- */
.sh-add-item-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; margin-left: 0.3rem;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%; color: rgba(255,255,255,0.5);
    cursor: pointer; transition: all 0.15s; font-family: inherit; flex-shrink: 0;
}
.sh-add-item-btn:hover { background: rgba(229,9,20,0.15); border-color: rgba(229,9,20,0.4); color: #e50914; }
.sh-add-item-btn .material-symbols-outlined { font-size: 1rem; }

/* -- Service Picker overlay -- */
.sh-svc-picker-overlay {
    display: none; position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,0.65); backdrop-filter: blur(3px);
    align-items: center; justify-content: center; padding: 1.5rem;
}
.sh-svc-picker-overlay.sh-svc-picker-open { display: flex; }
.sh-svc-picker {
    background: #1a1a1a; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; width: 100%; max-width: 460px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    display: flex; flex-direction: column; overflow: hidden;
    max-height: 90vh;
}
.sh-svc-picker-hdr {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.9rem 1rem 0.75rem;
    font-size: 0.82rem; font-weight: 600; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sh-svc-picker-close {
    margin-left: auto; background: none; border: none; color: rgba(255,255,255,0.45);
    font-size: 1.2rem; cursor: pointer; padding: 0 0.2rem;
    line-height: 1; transition: color 0.15s;
}
.sh-svc-picker-close:hover { color: #fff; }
.sh-svc-picker-search-wrap {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.65rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sh-svc-picker-search-icon { font-size: 1rem; color: rgba(255,255,255,0.3); flex-shrink: 0; }
.sh-svc-picker-input {
    flex: 1; background: none; border: none; outline: none;
    color: #fff; font-size: 0.85rem; font-family: inherit;
}
.sh-svc-picker-input::placeholder { color: rgba(255,255,255,0.28); }
.sh-svc-picker-list {
    flex: 1; overflow-y: auto; padding: 0.5rem;
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.sh-svc-picker-list::-webkit-scrollbar { width: 4px; }
.sh-svc-picker-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.sh-svc-picker-item {
    display: flex; align-items: center; gap: 0.45rem;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 0.45rem 0.7rem; cursor: pointer;
    font-family: inherit; font-size: 0.8rem; color: rgba(255,255,255,0.8);
    transition: all 0.15s; white-space: nowrap;
}
.sh-svc-picker-item:hover:not([disabled]) {
    background: rgba(229,9,20,0.12); border-color: rgba(229,9,20,0.35); color: #fff;
}
.sh-svc-picker-item--added, .sh-svc-picker-item[disabled] {
    opacity: 0.42; cursor: default;
}
.sh-svc-picker-fav { width: 18px; height: 18px; border-radius: 3px; object-fit: contain; flex-shrink: 0; }
.sh-svc-picker-name { font-weight: 500; }
.sh-svc-picker-badge {
    font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    color: rgba(229,9,20,0.7); background: rgba(229,9,20,0.1);
    border: 1px solid rgba(229,9,20,0.2); border-radius: 99px; padding: 0.1rem 0.5rem; margin-left: 0.2rem;
}
.sh-svc-picker-empty {
    width: 100%; text-align: center; font-size: 0.8rem;
    color: rgba(255,255,255,0.3); padding: 1.5rem 0.5rem;
}
.sh-svc-picker-footer {
    padding: 0.6rem 1rem; border-top: 1px solid rgba(255,255,255,0.07);
}
.sh-svc-picker-custom-btn {
    display: flex; align-items: center; gap: 0.45rem; width: 100%;
    background: none; border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 6px; padding: 0.5rem 0.75rem;
    color: rgba(255,255,255,0.45); font-size: 0.8rem; font-family: inherit;
    cursor: pointer; transition: all 0.15s;
}
.sh-svc-picker-custom-btn:hover { border-color: rgba(255,255,255,0.35); color: #fff; }
.sh-svc-picker-custom-btn .material-symbols-outlined { font-size: 1rem; }

.link-cat-form-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.link-cat-icon-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 44px;
    min-width: 44px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    flex-shrink: 0;
    color: var(--text-secondary);
}
.link-cat-icon-cats {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}
.link-cat-icon-search {
    width: 100%;
    height: 30px;
    padding: 0 0.5rem;
    font-size: 0.78rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
    margin: 0.3rem 0 0;
    transition: border-color var(--transition);
}
.link-cat-icon-search:focus { border-color: var(--accent); }
.link-cat-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 4px;
    margin-top: 0.35rem;
    max-height: 200px;
    overflow-y: auto;
}
.link-cat-icon-swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
    color: var(--text-secondary);
}
.link-cat-icon-swatch:hover { background: var(--bg-tertiary); }
.link-cat-icon-swatch.selected { background: var(--accent-dim); border-color: var(--accent); }

/* -- Links body (scrollable) -- */
.links-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    min-height: 0;
}

/* -- Links grid -- */
.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.75rem;
}

/* -- Section header (Pinned / Links) -- */
.links-section { margin-bottom: 1.75rem; }
.links-section:last-child { margin-bottom: 0; }

.links-section-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 0.7rem;
}

/* -- Link card -- */
.link-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color var(--transition), background var(--transition);
}
.link-card:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}
.link-card.pinned { border-color: rgba(199,114,254,0.3); }

.link-card-main {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem;
    text-decoration: none;
    color: inherit;
    flex: 1;
    transition: background var(--transition);
}
.link-card-main:hover { background: var(--bg-card-hover); }

.link-card-favicon-wrap {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.link-card-favicon {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    object-fit: contain;
}

/* -- Media card (image / 3d-model) -- */
.link-card--media {
    /* banner makes the card naturally taller; no span needed for auto rows */
}
.link-card-banner {
    display: block;
    width: 100%;
    height: 160px;
    background: var(--bg-sidebar);
    overflow: hidden;
    position: relative;
    text-decoration: none;
    flex-shrink: 0;
}
.link-card-banner:hover { opacity: 0.9; }
.link-card-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}
.link-card-banner:hover .link-card-banner-img { transform: scale(1.03); }
.link-card-banner--error .link-card-banner-img { display: none; }
.link-card-banner--error::after {
    content: "broken_image";
    font-family: "Material Symbols Outlined";
    font-size: 2rem;
    color: var(--text-muted);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.35;
}
.link-card-banner-icon {
    font-size: 3rem !important;
    color: var(--text-muted);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
}
.link-card-main--compact {
    padding: 0.6rem 0.85rem;
}

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

.link-card-title {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.link-card-url {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.64rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.link-card-desc {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -- Card footer -- */
.link-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.85rem;
    border-top: 1px solid var(--border);
    background: var(--bg-dark);
    gap: 0.5rem;
    min-height: 32px;
}

.link-card-cat {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 2px;
    background: var(--accent-dim2);
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

.link-card-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--transition);
}
.link-card:hover .link-card-actions { opacity: 1; }
@media (pointer: coarse) { .link-card-actions { opacity: 1; } }

.link-card-action-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 5px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition), background var(--transition);
}
.link-card-action-btn:hover { color: var(--text-primary); background: var(--bg-card); }
.link-card-action-btn.active { color: var(--accent); }
.link-card-action-btn--danger:hover { color: var(--danger); }

/* -- Links empty state -- */
.links-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    color: var(--text-muted);
    text-align: center;
    gap: 0.75rem;
}
.links-empty p { font-size: 0.85rem; }

/* Base: column flow so header/cats/body stack vertically on mobile */
#app-links.active { flex-direction: column; }

/* -- Desktop: two-column sidebar layout -- */
@media (min-width: 769px) {
    #app-links.active {
        display: grid;
        grid-template-rows: var(--topbar-h) 1fr;
        grid-template-columns: 210px 1fr;
        grid-template-areas:
            "header header"
            "sidebar body";
        transition: grid-template-columns 0.22s ease;
    }

    /* Collapsed sidebar — matches #ws-sidebar.collapsed behavior */
    #app-links.active.links-sidebar-collapsed {
        grid-template-columns: 0 1fr;
    }
    #app-links.active.links-sidebar-collapsed .links-cats {
        width: 0;
        min-width: 0;
        padding: 0;
        overflow: hidden;
        border-right: none;
        opacity: 0;
        pointer-events: none;
    }

    /* Show sidebar toggle on desktop */
    .links-sb-toggle-btn { display: flex; }

    .links-header {
        grid-area: header;
    }

    .links-cats {
        grid-area: sidebar;
        flex-direction: column;
        align-items: stretch;
        overflow-y: auto;
        overflow-x: hidden;
        border-bottom: none;
        border-right: 1px solid var(--border);
        padding: 0.5rem 0;
        gap: 1px;
        background: var(--bg-secondary);
        transition: width 0.22s ease, padding 0.22s ease, opacity 0.22s ease;
    }

    /* Exact match to .ws-project-item */
    .links-cat-btn {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        width: 100%;
        padding: 0.5rem 0.9rem;
        font-size: 0.8rem;
        font-family: 'Geist', system-ui, -apple-system, sans-serif;
        color: var(--text-secondary);
        background: none;
        border: none;
        border-left: 2px solid transparent;
        border-radius: 0;
        text-align: left;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: background var(--transition), color var(--transition), border-color var(--transition);
    }
    .links-cat-btn:hover {
        background: var(--bg-card);
        color: var(--text-primary);
    }
    .links-cat-btn.active {
        color: var(--accent);
        background: var(--accent-dim);
        border-left-color: var(--accent);
    }
    .links-cat-btn.active .links-cat-btn-icon { color: var(--accent); }
    .links-cat-btn-icon { font-size: 1rem; flex-shrink: 0; color: var(--text-muted); }
    .links-cat-btn.active .links-cat-btn-icon { color: var(--accent); }

    /* Exact match to .ws-new-project-btn */
    .links-cat-add-btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: calc(100% - 1.8rem);
        margin: 0.25rem 0.9rem;
        padding: 0.45rem 0.7rem;
        background: var(--bg-secondary);
        border: 1px dashed var(--border-hover);
        border-radius: var(--radius);
        color: var(--text-muted);
        font-size: 0.78rem;
        font-family: 'Geist', system-ui, -apple-system, sans-serif;
        cursor: pointer;
        white-space: nowrap;
        position: sticky;
        bottom: 0.5rem;
        z-index: 2;
        transition: border-color var(--transition), color var(--transition), background var(--transition);
    }
    .links-cat-add-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
        background: var(--accent-dim);
    }

    .links-body {
        grid-area: body;
    }
}

/* -- Responsive (mobile) -- */
@media (max-width: 600px) {
    .links-header { padding: 0 0.75rem; gap: 0.5rem; }
    .links-search-input { width: 130px; }
    .links-body { padding: 1rem; }
    .links-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .links-cats { padding: 0.45rem 0.75rem; }
}
@media (max-width: 480px) {
    .links-header {
        height: var(--topbar-h);
        padding: 0 0.6rem;
        gap: 0.35rem;
    }
    .links-header-title { flex-shrink: 1; min-width: 0; font-size: 0.85rem; overflow: hidden; }
    .links-header-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #btn-add-link { display: none; }
    .links-toolbar-right {
        flex: 1;
        justify-content: flex-end;
        gap: 0.3rem;
        min-width: 0;
    }
    .links-search-input {
        flex: 1;
        width: auto;
        min-width: 0;
        max-width: 120px;
    }
    #btn-links-select-mode .btn-label { display: none; }
    /* Ensure icon-only buttons stay visible and tappable */
    #btn-links-settings,
    #btn-links-select-mode { flex-shrink: 0; min-width: 34px; }
    .links-grid { grid-template-columns: 1fr 1fr; }
    .links-body { padding: 0.75rem; }
}
@media (max-width: 360px) {
    /* On very small phones collapse the search to icon-only, freeing room for action buttons */
    .links-search-input { max-width: 80px; font-size: 0.72rem; }
    .links-header-title { display: none; }
}

/* -- Mobile/tablet: category sidebar becomes an off-canvas drawer (matches #ws-sidebar) -- */
@media (max-width: 768px) {
    /* Stack header above body; body fills full width, drawer overlays it */
    #app-links.active {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .links-sb-toggle-btn { display: flex; }
    .links-cat-select { display: none; }

    /* Off-canvas vertical drawer */
    .links-cats {
        position: absolute;
        top: var(--topbar-h);
        bottom: 0;
        left: 0;
        z-index: 800;
        width: 230px;
        max-width: 80vw;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 1px;
        padding: 0.5rem 0 !important;
        overflow-y: auto;
        overflow-x: hidden;
        background: var(--bg-secondary);
        border-right: 1px solid var(--border) !important;
        border-bottom: none;
        box-shadow: 4px 0 18px rgba(0,0,0,0.35);
        transform: translateX(-100%);
        transition: transform 0.22s ease;
    }
    #app-links.links-sidebar-mobile-open .links-cats { transform: translateX(0); }

    /* Vertical project-style rows (match desktop sidebar) */
    .links-cat-btn {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        width: 100%;
        padding: 0.55rem 0.95rem;
        font-size: 0.82rem;
        color: var(--text-secondary);
        background: none;
        border: none;
        border-left: 2px solid transparent;
        border-radius: 0;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .links-cat-btn.active {
        color: var(--accent);
        background: var(--accent-dim);
        border-left-color: var(--accent);
    }
    .links-cat-add-btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: calc(100% - 1.6rem);
        margin: 0.5rem 0.8rem;
        padding: 0.5rem 0.7rem;
        background: var(--bg-secondary);
        border: 1px dashed var(--border-hover);
        border-radius: var(--radius);
        color: var(--text-muted);
        font-size: 0.78rem;
        white-space: nowrap;
        position: sticky;
        bottom: 0.4rem;
    }

    /* Backdrop overlay */
    .links-cat-overlay {
        display: none;
        position: absolute;
        top: var(--topbar-h);
        left: 0; right: 0; bottom: 0;
        z-index: 700;
        background: rgba(0,0,0,0.5);
        opacity: 0;
        transition: opacity 0.22s ease;
    }
    #app-links.links-sidebar-mobile-open .links-cat-overlay {
        display: block;
        opacity: 1;
    }
}

/* ---------- LINK GALLERY � NEW ELEMENTS ---------- */

/* -- Sort select -- */
.links-sort-select {
    height: 28px;
    padding: 0 0.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    outline: none;
    transition: border-color var(--transition);
}
.links-sort-select:hover,
.links-sort-select:focus { border-color: var(--border-hover); color: var(--text-primary); }

/* -- Type filter bar -- */
.links-type-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.links-type-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-muted);
    font-size: 0.7rem;
    padding: 3px 10px;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}
.links-type-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.links-type-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); font-weight: 500; }

/* -- Category section headers -- */
.links-cat-section { margin-bottom: 1.75rem; }
.links-cat-section:last-child { margin-bottom: 0; }

.links-cat-section-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.65rem;
}
.links-cat-section-name {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}
.links-cat-section-count {
    font-size: 0.6rem;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border-radius: 10px;
    padding: 1px 6px;
    font-weight: 500;
}
.links-cat-section-actions { margin-left: 0.25rem; }

/* -- Category button count badge -- */
.links-cat-btn-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border-radius: 10px;
    padding: 1px 5px;
    margin-left: 4px;
    min-width: 16px;
}
.links-cat-btn.active .links-cat-btn-count {
    background: rgba(99,102,241,0.25);
    color: var(--accent);
}

/* -- Type badge (shows in card top-right) -- */
.link-type-badge {
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity var(--transition);
}
.link-card-main:hover .link-type-badge { opacity: 1; }

/* -- Drag handle -- */
.link-card-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    padding: 0.2rem 0.4rem 0 0.4rem;
    cursor: grab;
    opacity: 0;
    transition: opacity var(--transition);
}
.link-card:hover .link-card-drag-handle { opacity: 0.4; }
.link-card-drag-handle:active { cursor: grabbing; }

/* -- Drag-and-drop feedback -- */
.link-card.dragging {
    opacity: 0.4;
    transform: scale(0.97);
}
.link-card.drag-over {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

/* -- Sidebar collapse toggle button — styled to match the Workspace .ws-icon-btn --
   Visible at all sizes; desktop collapses sidebar width, mobile opens the drawer. */
.links-sb-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 4px 6px;
    border-radius: var(--radius);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.links-sb-toggle-btn:hover { background: var(--bg-card); color: var(--text-primary); }
.links-sb-toggle-btn svg { transition: transform 0.22s ease; }
.links-sb-toggle-btn.rotated svg { transform: rotate(180deg); }

/* -- Settings modal sections -- */
.lgs-modal-body { padding: 1.2rem; display: flex; flex-direction: column; gap: 1.1rem; }
.lgs-divider { height: 1px; background: var(--border); margin: 0 -1.2rem; }
.lgs-row { display: flex; gap: 1.2rem; }
.lgs-section { display: flex; flex-direction: column; gap: 0.45rem; }
.lgs-section--half { flex: 1; min-width: 0; }
.lgs-btn-group { flex-wrap: wrap; }

/* Category context chip */
.lgs-cat-context {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.2rem;
    background: var(--accent-dim);
    border-bottom: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.lgs-cat-ctx-name { color: var(--accent); font-weight: 600; }
.lgs-cat-reset-btn {
    margin-left: auto;
    font-size: 0.7rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--border-hover);
    border-radius: var(--radius);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}
.lgs-cat-reset-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }

.lgs-section-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}
.lgs-view-btns,
.lgs-sort-btns {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.lgs-view-btn,
.lgs-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: none;
    color: var(--text-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.lgs-view-btn:hover,
.lgs-sort-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.lgs-view-btn.active,
.lgs-sort-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.lgs-options-list { display: flex; flex-direction: column; gap: 0; }
.lgs-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    gap: 1rem;
}
.lgs-toggle-row:last-child { border-bottom: none; }
.lgs-toggle-label { font-size: 0.82rem; color: var(--text-secondary); }
.lgs-toggle-cb { cursor: pointer; accent-color: var(--accent); width: 16px; height: 16px; }
.lgs-full-btn { width: 100%; justify-content: center; gap: 0.4rem; }

/* -- Compact layout -- */
.links-body.layout-compact .links-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.4rem;
}
.links-body.layout-compact .link-card-drag-handle { display: none; }
.links-body.layout-compact .link-card-banner { display: none; }
.links-body.layout-compact .link-card-main {
    padding: 0.5rem 0.6rem;
    gap: 0.5rem;
}
.links-body.layout-compact .link-card-favicon-wrap { width: 20px; height: 20px; }
.links-body.layout-compact .link-card-favicon { width: 16px; height: 16px; }
.links-body.layout-compact .link-card-title { font-size: 0.75rem; }
.links-body.layout-compact .link-card-url { font-size: 0.58rem; }
.links-body.layout-compact .link-card-desc { display: none; }
.links-body.layout-compact .link-card-footer {
    padding: 0.2rem 0.6rem;
    min-height: 26px;
}
.links-body.layout-compact .link-card-cat { font-size: 0.58rem; padding: 1px 5px; }
.links-body.layout-compact .link-type-badge { font-size: 0.85rem; }

/* -- List layout for link cards -- */
.links-body.layout-list .links-grid,
.links-body.layout-rows .links-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.links-body.layout-list .link-cat-section,
.links-body.layout-rows .link-cat-section { margin-bottom: 1rem; }

.links-body.layout-list .link-card {
    flex-direction: row;
    align-items: stretch;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid var(--border);
}
.links-body.layout-list .link-card:last-child { border-bottom: none; }
.links-body.layout-list .link-card-drag-handle { display: none; }
.links-body.layout-list .link-card-banner { display: none; }
.links-body.layout-list .link-card-main {
    flex: 1;
    padding: 0.5rem 0.85rem;
    min-width: 0;
}
.links-body.layout-list .link-card-title { font-size: 0.82rem; }
.links-body.layout-list .link-card-footer {
    border-top: none;
    border-left: 1px solid var(--border);
    background: transparent;
    padding: 0 0.65rem;
    gap: 0.35rem;
    flex-shrink: 0;
    width: auto;
    min-height: 0;
}

/* -- Rows layout (ultra-compact single-line rows) -- */
.links-body.layout-rows .link-card {
    flex-direction: row;
    align-items: center;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid var(--border);
    min-height: 0;
}
.links-body.layout-rows .link-card:last-child { border-bottom: none; }
.links-body.layout-rows .link-card-drag-handle { display: none; }
.links-body.layout-rows .link-card-banner { display: none; }
.links-body.layout-rows .link-card-main {
    flex: 1;
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.75rem;
    min-width: 0;
}
.links-body.layout-rows .link-card-favicon-wrap { width: 18px; height: 18px; flex-shrink: 0; }
.links-body.layout-rows .link-card-favicon { width: 15px; height: 15px; }
.links-body.layout-rows .link-card-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; }
.links-body.layout-rows .link-card-title { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
.links-body.layout-rows .link-card-url { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
.links-body.layout-rows .link-card-desc { display: none; }
.links-body.layout-rows .link-type-badge { font-size: 0.72rem; flex-shrink: 0; }
.links-body.layout-rows .link-card-footer {
    border-top: none;
    border-left: 1px solid var(--border);
    background: transparent;
    padding: 0 0.5rem;
    gap: 0.25rem;
    flex-shrink: 0;
    width: auto;
    min-height: 0;
}
.links-body.layout-rows .link-card-cat { display: none; }
.links-body.layout-rows .link-card-action-btn { padding: 3px 4px; }

/* -- Bulk select mode -- */
.links-bulk-bar {
    flex-shrink: 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--accent);
    padding: 0.45rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
}
.links-bulk-count {
    font-weight: 600;
    color: var(--accent);
    flex: 1;
}
.links-bulk-actions { display: flex; align-items: center; gap: 0.5rem; }

/* Prevent opening links while in select mode */
.links-select-mode .link-card a { pointer-events: none; }
.links-select-mode .link-card { cursor: pointer; user-select: none; }
/* Hide drag handle in select mode */
.links-select-mode .link-card-drag-handle { display: none; }

/* Selected card highlight */
.link-card--selected {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-dim) !important;
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-secondary));
}
.link-card--selected::before {
    content: "check_circle";
    font-family: "Material Symbols Outlined";
    font-size: 0.95rem;
    color: var(--accent);
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    line-height: 1;
}
/* Box-hover (while rubber-banding) */
.link-card--box-hover {
    border-color: var(--accent) !important;
    opacity: 0.75;
}
/* Rubber-band selection rectangle */
.links-box-select {
    position: absolute;
    border: 1.5px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    pointer-events: none;
    z-index: 10;
    border-radius: 3px;
}
/* links-body needs relative positioning for the box to position correctly */
.links-body { position: relative; }

/* ── Avatar clip container (card-level) ─────────────────────── */
.creator-avatar-clip {
    width: 48px; height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
}
.creator-avatar-clip .creator-avatar {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;   /* fallback until JS runs */
    max-width: none;
    max-height: none;
    border-radius: 0;
    border: none;
    background: transparent;
}

/* ── Thumb preview + crop button in link form ────────────────── */
.link-thumb-row {
    display: flex; gap: 0.45rem; align-items: center;
}
.link-thumb-row input { flex: 1; min-width: 0; }
.link-crop-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}
.link-thumb-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.55rem;
}
.link-thumb-preview-circle {
    width: 52px; height: 52px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-tertiary);
    position: relative;
    border: 1px solid var(--border);
}
.link-thumb-preview-circle img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;   /* fallback until JS runs */
    max-width: none;
    max-height: none;
}
.link-thumb-preview-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ── Avatar crop modal ───────────────────────────────────────── */
.acm-overlay {
    position: fixed; inset: 0; z-index: 5000;
    background: rgba(0,0,0,0.62);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.acm-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 10px);
    width: min(320px, 92vw);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.acm-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem; font-weight: 600;
}
.acm-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); display: flex; align-items: center; padding: 4px;
    font-family: inherit;
}
.acm-close:hover { color: var(--text-primary); }
.acm-body {
    padding: 1.25rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.65rem;
}
.acm-circle {
    width: 220px; height: 220px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    cursor: grab;
    background: var(--bg-tertiary);
    user-select: none;
    touch-action: none;
    flex-shrink: 0;
}
.acm-circle:active { cursor: grabbing; }
.acm-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2.5px solid var(--accent);
    pointer-events: none; z-index: 2;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.45);
}
.acm-img {
    position: absolute; top: 0; left: 0;
    transform-origin: 0 0;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}
.acm-hint {
    font-size: 0.7rem; color: var(--text-muted); text-align: center;
}
.acm-zoom-row {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0 1.25rem 0.85rem;
    color: var(--text-muted);
}
.acm-zoom-slider {
    flex: 1;
    accent-color: var(--accent);
    cursor: pointer;
}
.acm-footer {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--border);
}

/* -- Favicon fallback (material icon) -- */
.link-card-favicon-fb {
    font-size: 1.2rem;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

/* ==================== MGH VIEWER (fullscreen multi-item) ==================== */
/* Reuses wslb-* inner CSS; only needs the outer container */
.mgh-viewer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 4500;
    background: #000;
    -webkit-tap-highlight-color: transparent;
}
.mgh-viewer.open { display: block; }
body.mgh-viewer-active { overflow: hidden; }

/* ==================== MGH FEED FULLSCREEN (TikTok-style) ==================== */
.mgh-feed-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 4500;
    background: #000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    -webkit-tap-highlight-color: transparent;
}
body.mgh-feed-open { overflow: hidden; }

.mgh-feed-fs-close {
    position: absolute;
    top: 14px; right: 14px; z-index: 10;
    background: rgba(0,0,0,0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    width: 40px; height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    padding: 0;
    font-family: inherit;
}
.mgh-feed-fs-close:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* Feed grid fills the full overlay, cards snap one-per-screen */
.mgh-feed-fullscreen .shorts-grid {
    flex: 1;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    padding: 0;
}
.mgh-feed-fullscreen .feed-card {
    max-width: 100%;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    aspect-ratio: unset;
    border-radius: 0;
}

/* ── Feed: tap to zoom to full image (cover ↔ contain toggle) ── */
.feed-card-media.feed-card-media--fit {
    object-fit: contain;
}
.feed-card-media-wrap.feed-card-media-wrap--fit {
    background: #000;
}

/* ── Image-group slideshow dots ── */
.feed-card-slideshow-dots {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 5px;
    z-index: 8;
    pointer-events: none;
}
.feed-card-slideshow-dot {
    height: 4px;
    width: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.4);
    transition: background 0.2s, width 0.25s;
    flex-shrink: 0;
}
.feed-card-slideshow-dot.active {
    background: #fff;
    width: 16px;
}

/* ── Image-group: tap left/right to advance slides ── */
.feed-card-slide-prev,
.feed-card-slide-next {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 38%;
    z-index: 5;
    cursor: pointer;
}
.feed-card-slide-prev { left: 0; }
.feed-card-slide-next { right: 0; }

/* ── Feed: custom direct-video controls ── */
.feed-card-video-ctrl {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
}
.feed-card-tap-zone {
    flex: 1;
    display: flex;
}
.feed-card-tap-left,
.feed-card-tap-right {
    flex: 1;
    cursor: pointer;
}
.feed-card-seek-flash {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: #fff;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s;
    text-shadow: 0 1px 5px rgba(0,0,0,0.9);
}
.feed-card-seek-flash.active { opacity: 1; }
.feed-card-seek-flash--left  { left: 12%; }
.feed-card-seek-flash--right { right: 12%; }
.feed-card-pause-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    background: rgba(0,0,0,0.48);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
}
.feed-card-pause-icon.visible { opacity: 1; }
.feed-card-video-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.55rem 0.7rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.55));
    z-index: 5;
    pointer-events: all;
}
.feed-card-progress-wrap {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.28);
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    transition: height 0.15s;
}
.feed-card-progress-wrap:hover { height: 5px; }
.feed-card-progress-bar {
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: 2px;
    pointer-events: none;
}
.feed-card-mute-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px;
    color: #fff;
    opacity: 0.82;
    line-height: 0;
    flex-shrink: 0;
}
.feed-card-mute-btn:hover { opacity: 1; }

/* ==================== LINKS APP — MOBILE IMPROVEMENTS ==================== */
@media (max-width: 480px) {
    /* Tighter mgh-body padding */
    .mgh-body { padding: 0.85rem 1rem; gap: 1.5rem; }
    /* Compact toolbar on mobile */
    .mgh-toolbar { padding: 0.55rem 0.85rem; gap: 0.5rem; }
    .mgh-title { font-size: 0.82rem; }
    /* Sites/creators grids: 2 cols */
    .mgh-body .db-sites-grid { grid-template-columns: repeat(2, 1fr); gap: 0.55rem; }
    .mgh-body .creators-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    /* Links grid: 1 col so cards have breathing room */
    .links-grid { grid-template-columns: 1fr; gap: 0.6rem; }
    /* Bigger tap targets for card action buttons */
    .link-card-action-btn { padding: 0.42rem 0.55rem; }
    .db-card-action-btn   { padding: 0.4rem 0.5rem; }
    /* Banner height shorter on small phones */
    .link-card-banner { height: 130px; }
}

/* -- Link type badge colours (optional accent) -- */
.link-type-badge--youtube-channel,
.link-type-badge--youtube-playlist,
.link-type-badge--youtube-video { color: #ff4444; opacity: 0.7; }

/* -- Link type-hint in modal label -- */
.link-type-hint {
    display: none;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-left: 0.35rem;
    font-weight: 400;
}

/* ---------- GMAIL APP ---------- */

#app-gmail { flex-direction: column; }

/* -- Header -- */
.gmail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    height: 52px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    gap: 1rem;
}
.gmail-header-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}
.gmail-header-title svg { color: var(--text-muted); flex-shrink: 0; }
.gmail-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* -- Body scroll -- */
.gmail-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* pre-auth full-width placeholder */
.gmail-no-sidebar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.6rem;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
    font-size: 0.82rem;
}
.gmail-no-sidebar .gmail-setup-sub { font-size: 0.75rem; max-width: 420px; line-height: 1.6; }
.gmail-no-sidebar .gmail-setup-code {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    font-size: 0.7rem;
    font-family: monospace;
    color: var(--text-secondary);
    text-align: left;
    white-space: pre-wrap;
    max-width: 480px;
    width: 100%;
}

/* -- Sidebar + main layout -- */
.gmail-layout {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.gmail-nav {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0 1rem;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    flex-shrink: 0;
    gap: 0;
}

.gmail-compose-btn {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0.75rem 0.75rem;
    padding: 0.7rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition);
    flex-shrink: 0;
}
.gmail-compose-btn:hover {
    background: var(--bg-secondary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.gmail-nav-scroll {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.gmail-nav-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0 0.5rem 0 0.75rem;
    height: 34px;
    margin: 1px 0.5rem 1px 0;
    border-radius: 0 24px 24px 0;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
}
.gmail-nav-item:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.gmail-nav-item.active {
    background: var(--accent-dim);
    color: var(--accent);
    font-weight: 600;
}
.gmail-nav-item svg { flex-shrink: 0; opacity: 0.75; }
.gmail-nav-item.active svg { opacity: 1; }
.gmail-nav-item > span:not(.gmail-label-dot):not(.gmail-nav-count) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.gmail-nav-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-left: auto;
    flex-shrink: 0;
    padding-right: 0.25rem;
}
.gmail-nav-item.active .gmail-nav-count { color: var(--accent); }

.gmail-nav-divider {
    height: 1px;
    background: var(--border);
    margin: 0.5rem 1rem;
}

.gmail-nav-section-title {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    padding: 0.25rem 0.75rem 0.25rem;
}

.gmail-label-dot {
    display: inline-block;
    width: 10px;
    min-width: 10px;
    height: 10px;
    min-height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gmail-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* �� BlueMap iframe view �� */
.gmail-bluemap-wrap {
    flex: 1;
    display: flex;
    overflow: hidden;
}
.gmail-bluemap-frame {
    flex: 1;
    border: none;
    width: 100%;
    height: 100%;
}

/* ---------- BLUEMAP HUB APP ---------- */
#app-bluemap {
    flex: 1;
    overflow: hidden;
    flex-direction: column;
}
.bluemap-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-secondary);
}
.bluemap-bar-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-right: 0.2rem;
}
.bluemap-bar-sep {
    color: var(--text-muted);
    font-size: 0.85rem;
}
.bluemap-input {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-size: 0.78rem;
    padding: 0.28rem 0.5rem;
    outline: none;
    font-family: monospace;
}
.bluemap-input:focus {
    border-color: var(--accent);
}
.bluemap-input--url {
    flex: 1;
    min-width: 0;
}
.bluemap-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.bluemap-frame {
    flex: 1;
    width: 100%;
    border: none;
    display: block;
}
.bluemap-open-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
    padding: 2rem;
}
.bluemap-hint {
    opacity: .7;
    font-size: 0.78rem;
    max-width: 42ch;
}
.bluemap-code {
    display: inline-block;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 0.3rem 0.7rem;
    font-family: monospace;
    font-size: 0.78rem;
    color: var(--text);
    user-select: all;
}

/* �� Keyword rule tags �� */
.gmail-rule-tags { display: flex; gap: 3px; flex-shrink: 0; align-items: center; margin: 0 0.25rem; flex-wrap: nowrap; overflow: hidden; }
.gmail-rule-tag  { font-size: 0.62rem; border: 1px solid; border-radius: 10px; padding: 1px 6px; white-space: nowrap; font-weight: 600; flex-shrink: 0; }

/* �� Keywords management view �� */
.gmail-kw-list { padding: 0.5rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; overflow-y: auto; }
.gmail-kw-row  {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--bg-card);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border);
}
.gmail-kw-keyword { font-size: 0.82rem; font-weight: 600; font-family: monospace; color: var(--text-primary); }
.gmail-kw-arrow   { color: var(--text-muted); font-size: 0.8rem; flex-shrink: 0; }
.gmail-kw-result-important {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: #f6bf26;
    flex-shrink: 0;
}
.gmail-kw-actions { margin-left: auto; display: flex; gap: 0.25rem; flex-shrink: 0; }
.gmail-kw-action-radios { display: flex; gap: 1rem; }
.gmail-kw-radio-label   { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; cursor: pointer; }

/* -- Contacts grid -- */
.gmail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

/* -- Contact card -- */
.gmail-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 2);
    padding: 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0.85rem;
    row-gap: 0;
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.gmail-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.gmail-card--pinned { border-color: rgba(199,114,254,0.3); }

/* -- Avatar -- */
.gmail-card-avatar {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    align-self: center;
}

/* -- Info -- */
.gmail-card-info {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}
.gmail-card-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gmail-card-email {
    font-size: 0.71rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/* -- Action buttons row -- */
.gmail-card-actions {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    gap: 0.4rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}
.gmail-btn-inbox {
    background: var(--accent-dim);
    border-color: transparent;
    color: var(--accent);
    font-weight: 500;
}

/* -- Footer action row (pin/edit/delete) -- */
.gmail-card-footer-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

/* -- Color picker for Gmail contact form -- */
.gmail-color-picker {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}
.gmail-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--transition), border-color var(--transition);
}
.gmail-color-swatch:hover { transform: scale(1.15); }
.gmail-color-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }

/* -- Responsive Gmail -- */
@media (max-width: 600px) {
    .gmail-header { padding: 0 1rem; }
    .gmail-body { padding: 1rem; }
    .gmail-grid { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------
   LINKS GALLERY � media-style section headers
   --------------------------------------------------- */

.links-sub-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
    user-select: none;
}
.links-sub-header:hover .links-sub-label { color: var(--text-secondary); }

.links-sub-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    white-space: nowrap;
    transition: color var(--transition);
}

.links-sub-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}

.links-cat-section {
    margin-bottom: 1.75rem;
}
.links-cat-section[draggable="true"] { cursor: grabbing; }

/* ---------------------------------------------------
   GMAIL � inbox toolbar & email list
   --------------------------------------------------- */

.gmail-inbox-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.gmail-email-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

/* -- email row -- */
.gmail-email-row {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition), box-shadow var(--transition);
    flex-shrink: 0;
    position: relative;
}
.gmail-email-row:hover {
    background: var(--bg-secondary);
    box-shadow: inset 1px 0 0 var(--border), inset -1px 0 0 var(--border);
    z-index: 1;
}

/* Unread row � bold text, subtly lighter background */
.gmail-email-row--unread { background: var(--bg-card); }
.gmail-email-row--unread:hover { background: var(--bg-secondary); }
.gmail-email-row--unread .gmail-email-from,
.gmail-email-row--unread .gmail-email-subject-text,
.gmail-email-row--unread .gmail-email-date {
    font-weight: 700;
    color: var(--text-primary);
}

/* -- star -- */
.gmail-star-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    flex-shrink: 0;
    color: var(--text-muted);
    opacity: 0.28;
    transition: opacity var(--transition), color var(--transition);
    pointer-events: none;
}
.gmail-star-btn.starred { color: #f2b900; opacity: 1; }
.gmail-email-row:hover .gmail-star-btn { opacity: 0.7; }
.gmail-email-row:hover .gmail-star-btn.starred { opacity: 1; }

/* -- importance marker -- */
.gmail-important-marker,
.gmail-important-placeholder {
    width: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gmail-important-marker { color: #f2b900; }

/* -- avatar -- */
.gmail-email-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
    color: #fff;
    margin: 0 0.6rem;
}

/* -- sender -- */
.gmail-email-from {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    width: 155px;
    min-width: 155px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 0.75rem;
}

/* -- subject + snippet -- */
.gmail-email-body-line {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
}
.gmail-email-subject-text {
    color: var(--text-secondary);
    font-weight: 500;
}
.gmail-email-sep { color: var(--border-hover, var(--border)); }
.gmail-email-snippet-inline { color: var(--text-muted); }

/* -- attachment clip -- */
.gmail-email-attach {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    flex-shrink: 0;
    margin: 0 0.4rem;
    opacity: 0.7;
}

/* -- date -- */

/* ==================== SHEET VIEWER APP ==================== */
#app-sheet {
    flex-direction: column;
    background: var(--bg-dark);
}

/* -- Header -- */
.sv-header {
    flex-shrink: 0;
    height: 52px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
}

.sv-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}
.sv-title svg { color: var(--text-muted); flex-shrink: 0; }

.sv-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.35rem 0.85rem;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
    flex-shrink: 0;
}
.sv-add-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* -- URL bar -- */
.sv-url-bar {
    flex-shrink: 0;
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.5rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}
.sv-url-bar--open { display: flex; }

.sv-url-input {
    flex: 1;
    min-width: 0;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.8rem;
    padding: 0.36rem 0.7rem;
    border-radius: var(--radius);
    outline: none;
    transition: border-color var(--transition);
}
.sv-url-input::placeholder { color: var(--text-muted); }
.sv-url-input:focus { border-color: var(--accent); }

.sv-url-load-btn {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #000;
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.36rem 0.9rem;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--transition);
}
.sv-url-load-btn:hover { background: #d88aff; border-color: #d88aff; }
.sv-url-load-btn:disabled { opacity: 0.55; cursor: default; }

.sv-url-close-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: color var(--transition), border-color var(--transition);
}
.sv-url-close-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }

/* -- File tabs (top-level: one per file) -- */
.sv-file-tabs {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}
.sv-file-tabs::-webkit-scrollbar { display: none; }
.sv-file-tabs:empty { display: none; }

.sv-file-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.4rem 0.35rem 0.9rem;
    border: none;
    border-right: 1px solid var(--border);
    background: none;
    color: var(--text-muted);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
    flex-shrink: 0;
    max-width: 200px;
}
.sv-file-tab .sv-tab-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.sv-file-tab:hover { color: var(--text-secondary); background: var(--bg-card); }
.sv-file-tab.active { color: var(--text-primary); background: var(--bg-dark); border-bottom-color: transparent; }

.sv-file-tab-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.72rem;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    flex-shrink: 0;
    transition: all var(--transition);
    padding: 0;
}
.sv-file-tab-close:hover { color: var(--danger); background: rgba(224,85,85,0.12); }

/* -- Sub-tabs (worksheets inside an Excel file) -- */
.sv-sub-tabs {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 1.5rem 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}
.sv-sub-tabs::-webkit-scrollbar { display: none; }
.sv-sub-tabs:empty { display: none; }

.sv-sub-tab {
    background: none;
    border: 1px solid transparent;
    border-bottom: none;
    color: var(--text-muted);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.72rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius) var(--radius) 0 0;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition);
}
.sv-sub-tab:hover { color: var(--text-secondary); }
.sv-sub-tab.active {
    color: var(--text-primary);
    background: var(--bg-dark);
    border-color: var(--border);
    border-bottom-color: var(--bg-dark);
}

/* -- Body (drop zone / content) -- */
.sv-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    position: relative;
}

.sv-drop {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    margin: 2rem;
    padding: 3rem 2rem;
    color: var(--text-muted);
    transition: border-color var(--transition), background var(--transition);
}
.sv-drop.sv-drag-over { border-color: var(--accent); background: var(--accent-dim); }

.sv-drop-icon { font-size: 3rem; opacity: 0.35; }
.sv-drop-text { font-size: 0.95rem; font-weight: 500; color: var(--text-secondary); text-align: center; }
.sv-drop-sub { font-size: 0.8rem; color: var(--text-muted); text-align: center; }

.sv-browse-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.sv-browse-btn:hover { opacity: 0.8; }

.sv-content {
    flex: 1;
    display: none;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.sv-content.sv-has-files { display: flex; }

/* -- Table -- */
.sv-table-wrap {
    flex: 1;
    overflow: auto;
    background: var(--bg-dark);
}

.sv-table {
    border-collapse: collapse;
    font-size: 0.8rem;
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    min-width: 100%;
    table-layout: auto;
}

/* Header row */
.sv-table thead th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.72rem;
    text-align: left;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
    user-select: none;
}
/* If cell has an explicit background colour from the sheet, use it in the header too */
.sv-table thead th[style] {
    color: inherit;
    font-weight: 700;
}

/* Data cells */
.sv-table td {
    color: var(--text-primary);
    background: var(--bg-dark);
    padding: 0.32rem 0.9rem;
    border: 1px solid var(--border);
    min-width: 80px;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: text;
    transition: outline 0.08s;
}
.sv-table td[style] {
    /* Cells with explicit colours from the sheet */
    color: inherit;
}

/* Editable cell � active focus ring like Excel */
.sv-table td[contenteditable]:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    white-space: pre-wrap;
    overflow: visible;
    max-width: none;
    z-index: 3;
    position: relative;
}

/* Row-number gutter + corner cell */
.sv-table td.sv-row-num,
.sv-table th.sv-corner {
    color: var(--text-muted);
    background: var(--bg-secondary) !important;
    font-size: 0.65rem;
    min-width: 2.5rem;
    max-width: 2.5rem;
    width: 2.5rem;
    text-align: center;
    user-select: none;
    cursor: default;
    position: sticky;
    left: 0;
    z-index: 1;
    border-right: 1px solid var(--border-hover);
    contenteditable: false;
}
.sv-table th.sv-corner { z-index: 2; }
.sv-table td.sv-row-num { font-style: normal; }

/* Tab cloud icon for URL-saved sheets */
.sv-tab-cloud {
    font-size: 0.85rem;
    opacity: 0.5;
    flex-shrink: 0;
}
.streaming-drawer { position: fixed; inset: 0; z-index: 1100; pointer-events: none; }
.streaming-drawer.sd-closed { display: none; }
.streaming-drawer:not(.sd-closed) { pointer-events: all; }

.sd-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.75);
    opacity: 0; transition: opacity 0.3s;
}
.streaming-drawer.sd-open .sd-overlay { opacity: 1; }

.sd-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 460px; max-width: 100vw;
    background: #111;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.streaming-drawer.sd-open .sd-panel { transform: translateX(0); }

/* G��G�� Hero G��G�� */
.sd-hero {
    position: relative; flex-shrink: 0;
    padding: 2.8rem 1.25rem 1.15rem;
    background: linear-gradient(170deg, color-mix(in srgb, var(--sd-brand, #e50914) 25%, #000) 0%, color-mix(in srgb, var(--sd-brand, #e50914) 8%, #000) 55%, #0f0f0f 100%);
    border-bottom: 2px solid var(--sd-brand, #e50914);
}
.sd-close-btn {
    position: absolute; top: 0.7rem; right: 0.7rem;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,0.07); border: none;
    color: rgba(255,255,255,0.5); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; z-index: 2;
}
.sd-close-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }

.sd-hero-inner { display: flex; align-items: center; gap: 1rem; }
.sd-hero-favicon { width: 46px; height: 46px; border-radius: 10px; flex-shrink: 0; object-fit: contain; }
.sd-hero-text { flex: 1; min-width: 0; }
.sd-hero-title {
    font-size: 1.05rem; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
}
.sd-hero-stats { font-size: 0.69rem; color: rgba(255,255,255,0.42); margin-top: 3px; }

.sd-watch-btn {
    display: flex; align-items: center; gap: 3px;
    background: var(--sd-brand, #e50914); color: #fff; border: none;
    padding: 0.48rem 0.9rem; border-radius: 3px;
    font-size: 0.77rem; font-weight: 700; cursor: pointer;
    text-decoration: none; flex-shrink: 0; letter-spacing: 0.02em;
    transition: background 0.15s; font-family: inherit;
}
.sd-watch-btn:hover { background: color-mix(in srgb, var(--sd-brand, #e50914) 85%, #fff); }
.sd-watch-btn .material-symbols-outlined { font-size: 1.1rem; }

/* G��G�� Progress track G��G�� */
.sd-progress-track { height: 3px; background: rgba(255,255,255,0.06); flex-shrink: 0; }
.sd-progress-fill { height: 100%; background: var(--sd-brand, #e50914); transition: width 0.6s ease; width: 0%; }

/* G��G�� Toolbar G��G�� */
.sd-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0; gap: 0.5rem; background: #0d0d0d;
}
.sd-tabs { display: flex; gap: 2px; }
.sd-tab {
    background: none; border: none; color: rgba(255,255,255,0.38);
    font-size: 0.73rem; font-weight: 500; padding: 0.27rem 0.68rem;
    border-radius: 20px; cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.sd-tab:hover { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.06); }
.sd-tab.sd-tab-active { color: #fff; background: rgba(255,255,255,0.11); font-weight: 600; }

.sd-add-btns { display: flex; gap: 0.3rem; }
.sd-add-btn {
    display: flex; align-items: center; gap: 2px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5); font-size: 0.7rem; font-weight: 500;
    padding: 0.25rem 0.5rem; border-radius: 3px; cursor: pointer;
    transition: all 0.15s; font-family: inherit;
}
.sd-add-btn:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.18); }
.sd-add-btn .material-symbols-outlined { font-size: 13px; }

/* G��G�� Add form G��G�� */
.sd-add-form {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.07);
    background: #0d0d0d; flex-shrink: 0;
}
.sd-add-form.sd-hidden { display: none; }
.sd-add-input {
    flex: 1; height: 30px;
    border: 1px solid rgba(255,255,255,0.12); border-radius: 3px;
    background: rgba(255,255,255,0.05); color: #fff;
    font-size: 0.8rem; padding: 0 0.6rem; outline: none;
    transition: border-color 0.15s; font-family: inherit;
}
.sd-add-input::placeholder { color: rgba(255,255,255,0.22); }
.sd-add-input:focus { border-color: var(--sd-brand, #e50914); }
.sd-save-btn {
    height: 30px; padding: 0 0.8rem; border-radius: 3px;
    background: var(--sd-brand, #e50914); border: none; color: #fff;
    font-size: 0.77rem; font-weight: 700; cursor: pointer;
    font-family: inherit; transition: background 0.15s;
}
.sd-save-btn:hover { background: color-mix(in srgb, var(--sd-brand, #e50914) 80%, #fff); }
.sd-cancel-btn {
    height: 30px; width: 30px; border-radius: 3px;
    background: rgba(255,255,255,0.05); border: none; color: rgba(255,255,255,0.38);
    cursor: pointer; font-family: inherit; transition: all 0.15s;
    display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}
.sd-cancel-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* G��G�� Body G��G�� */
.sd-body { flex: 1; overflow-y: auto; background: #111; padding: 1rem 0.85rem 1.5rem; }
.sd-body::-webkit-scrollbar { width: 4px; }
.sd-body::-webkit-scrollbar-track { background: transparent; }
.sd-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.sd-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

.sd-loading, .sd-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 200px; font-size: 0.79rem; color: rgba(255,255,255,0.28);
    padding: 2.5rem 1rem; text-align: center; gap: 0.65rem;
}

/* G��G�� Sections G��G�� */
.sd-section { padding: 0.9rem 1rem 0.65rem; }
.sd-section + .sd-section { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 0.9rem; }
.sd-section-hdr {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.61rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; color: rgba(255,255,255,0.32); margin-bottom: 0.8rem;
}
.sd-section-hdr .material-symbols-outlined { font-size: 0.9rem; }
.sd-section-count { margin-left: auto; font-size: 0.64rem; font-weight: 600; color: var(--sd-brand, #e50914); }

/* G��G�� Movies poster grid G��G�� */
.sd-movies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 0.55rem;
}
.sd-movie-card {
    border-radius: 4px; overflow: hidden; position: relative;
    background: #1a1a1a; border: 1px solid rgba(255,255,255,0.06);
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.sd-movie-card:hover { transform: scale(1.04); border-color: rgba(255,255,255,0.14); box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
.sd-movie-card.sd-movie-watched { border-color: color-mix(in srgb, var(--sd-brand, #e50914) 40%, transparent); }

.sd-movie-poster {
    width: 100%; aspect-ratio: 2/3; background: #0e0e0e;
    display: flex; align-items: center; justify-content: center;
    position: relative; cursor: pointer; border: none; padding: 0; overflow: hidden;
}
.sd-movie-icon { font-size: 2rem; color: rgba(255,255,255,0.28); pointer-events: none; }
.sd-movie-watched-overlay {
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--sd-brand, #e50914) 82%, transparent);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s;
}
.sd-movie-watched .sd-movie-watched-overlay { opacity: 1; }
.sd-movie-card:hover .sd-movie-poster .sd-movie-watched-overlay { opacity: 0.88; }
.sd-movie-watched .sd-movie-poster:hover .sd-movie-watched-overlay { opacity: 0.55; }
.sd-movie-watched-overlay .material-symbols-outlined { font-size: 2rem; color: #fff; }

.sd-movie-info {
    display: flex; align-items: center; gap: 2px;
    padding: 0.3rem 0.35rem 0.35rem; min-width: 0;
}
.sd-movie-title {
    flex: 1; font-size: 0.64rem; color: rgba(255,255,255,0.68);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.sd-del-btn {
    background: none; border: none; color: rgba(255,255,255,0.2);
    cursor: pointer; padding: 1px; flex-shrink: 0;
    display: flex; align-items: center; opacity: 0; transition: all 0.15s;
}
.sd-movie-card:hover .sd-del-btn,
.sd-series-card:hover .sd-del-btn { opacity: 1; }
.sd-del-btn:hover { color: var(--sd-brand, #e50914); }

/* G��G�� Series cards G��G�� */
.sd-series-card {
    background: #1a1a1a; border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.06);
    padding: 0.7rem 0.75rem; margin-bottom: 0.5rem;
    transition: border-color 0.15s;
}
.sd-series-card:last-child { margin-bottom: 0; }
.sd-series-card:hover { border-color: rgba(255,255,255,0.12); }

.sd-series-hdr { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; }
.sd-series-meta { flex: 1; min-width: 0; }
.sd-series-title {
    font-size: 0.82rem; font-weight: 500; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block; margin-bottom: 5px;
}
.sd-series-prog-bar { height: 2px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.sd-series-prog-fill { height: 100%; background: var(--sd-brand, #e50914); border-radius: 2px; transition: width 0.4s ease; }

.sd-series-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.sd-pct-badge { font-size: 0.64rem; font-weight: 600; color: var(--sd-brand, #e50914); min-width: 28px; text-align: right; }
.sd-icon-btn {
    background: none; border: none; color: rgba(255,255,255,0.28);
    cursor: pointer; padding: 3px; border-radius: 3px;
    display: flex; align-items: center; transition: all 0.15s;
}
.sd-icon-btn:hover { color: #fff; background: rgba(255,255,255,0.07); }
.sd-icon-btn--danger:hover { color: var(--sd-brand, #e50914); background: color-mix(in srgb, var(--sd-brand, #e50914) 10%, transparent); }

/* G��G�� Season rows G��G�� */
.sd-seasons { display: flex; flex-direction: column; gap: 0.5rem; }
.sd-season-row { display: flex; align-items: center; gap: 0.55rem; }
.sd-s-label { font-size: 0.74rem; font-weight: 700; color: rgba(255,255,255,0.35); width: 26px; flex-shrink: 0; background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; }
.sd-s-label:hover { color: rgba(255,255,255,0.8); }
.sd-s-label.sd-s-done { color: var(--sd-brand, #e50914); }
.sd-s-label.sd-s-done:hover { color: color-mix(in srgb, var(--sd-brand, #e50914) 80%, #fff); }
.sd-expand-hdr { display: flex; justify-content: flex-end; margin-bottom: 0.35rem; }
.sd-toggle-show {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none; color: rgba(255,255,255,0.35);
    cursor: pointer; font-size: 0.74rem; font-family: inherit;
    padding: 0.2rem 0.35rem; border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.sd-toggle-show:hover { color: #fff; background: rgba(255,255,255,0.07); }
.sd-toggle-show--done { color: var(--sd-brand, #e50914); }
.sd-toggle-show--done:hover { color: var(--sd-brand, #e50914); background: color-mix(in srgb, var(--sd-brand, #e50914) 8%, transparent); }
.sd-ep-wrap { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.sd-ep {
    width: 26px; height: 26px; border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.4); font-size: 0.68rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.12s; padding: 0; font-family: inherit; flex-shrink: 0;
}
.sd-ep:hover { border-color: var(--sd-brand, #e50914); color: var(--sd-brand, #e50914); background: color-mix(in srgb, var(--sd-brand, #e50914) 8%, transparent); }
.sd-ep.sd-ep-done { background: var(--sd-brand, #e50914); border-color: var(--sd-brand, #e50914); color: #fff; }
.sd-ep-count { font-size: 0.72rem; color: rgba(255,255,255,0.3); min-width: 32px; text-align: right; flex-shrink: 0; }
.sd-no-seasons { font-size: 0.78rem; color: rgba(255,255,255,0.25); padding: 0.25rem 0; }

/* G��G�� Expand/collapse seasons toggle G��G�� */
.sd-expand-toggle {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 4px;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5); cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sd-expand-toggle:hover { background: color-mix(in srgb, var(--sd-brand, #e50914) 18%, transparent); border-color: color-mix(in srgb, var(--sd-brand, #e50914) 45%, transparent); color: var(--sd-brand, #e50914); }
.sd-expand-toggle .material-symbols-outlined { font-size: 14px; }

/* G��G�� Season add form G��G�� */
.sd-season-form {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0 0.15rem; flex-wrap: wrap; margin-top: 0.3rem;
}
.sd-sf-label { font-size: 0.71rem; color: rgba(255,255,255,0.33); }
.sd-sf-input {
    width: 52px; height: 26px;
    border: 1px solid rgba(255,255,255,0.12); border-radius: 3px;
    background: rgba(255,255,255,0.05); color: #fff;
    font-size: 0.8rem; padding: 0 0.4rem; outline: none; font-family: inherit;
    transition: border-color 0.15s;
}
.sd-sf-input:focus { border-color: var(--sd-brand, #e50914); }

/* G��G�� Return prompt G��G�� */
.sd-return-prompt {
    position: fixed; bottom: 1.25rem; left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: #1c1c1c; border: 1px solid color-mix(in srgb, var(--sd-brand, #e50914) 45%, transparent);
    border-radius: 6px; padding: 0.6rem 1rem;
    display: flex; align-items: center; gap: 0.6rem;
    font-size: 0.79rem; color: rgba(255,255,255,0.75);
    box-shadow: 0 6px 28px rgba(0,0,0,0.6), 0 0 0 1px color-mix(in srgb, var(--sd-brand, #e50914) 12%, transparent);
    z-index: 1200; opacity: 0;
    transition: opacity 0.22s, transform 0.22s;
    pointer-events: all; white-space: nowrap;
}
.sd-return-prompt.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.sd-return-prompt strong { color: #fff; }

/* G��G�� Add-form layout with poster preview G��G�� */
.sd-add-form { flex-wrap: nowrap; align-items: flex-start; gap: 0.5rem; }

/* G��G�� Movie play overlay G��G�� */
.sd-movie-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.6);
    opacity: 0; transition: opacity 0.15s;
    text-decoration: none; color: #fff; border-radius: 4px; z-index: 2;
}
.sd-movie-card:hover .sd-movie-play { opacity: 1; }
.sd-movie-play .material-symbols-outlined { font-size: 2.2rem; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.7)); }

/* G��G�� Clickable item titles G��G�� */
.sd-movie-title-link, .sd-series-title-link {
    color: inherit; text-decoration: none;
}
.sd-movie-title-link:hover { color: #fff; text-decoration: underline; }
.sd-series-title-link:hover { color: var(--sd-brand, #e50914); }

/* G��G�� Poster image inside movie card G��G�� */
.sd-movie-poster-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    border-radius: inherit; pointer-events: none;
}

/* G��G�� Series thumbnail G��G�� */
.sd-series-thumb {
    width: 38px; height: 57px; object-fit: cover;
    border-radius: 3px; flex-shrink: 0; align-self: flex-start;
}
.sd-series-thumb--sm { width: 30px; height: 45px; border-radius: 2px; }

/* G��G�� Poster preview in add form G��G�� */
.sd-add-form-fields { flex: 1; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; position: relative; }

/* G��G�� Search results picker G��G�� */
.sd-search-results {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
    background: #1e1e1e; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; overflow: hidden;
    box-shadow: 0 8px 28px rgba(0,0,0,0.7);
    max-height: 280px; overflow-y: auto;
}
.sd-search-results.sd-hidden { display: none; }
.sd-sr-item {
    display: flex; align-items: center; gap: 0.6rem;
    width: 100%; padding: 0.45rem 0.6rem;
    background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor: pointer; text-align: left; color: #fff; font-family: inherit;
    transition: background 0.12s;
}
.sd-sr-item:last-child { border-bottom: none; }
.sd-sr-item:hover { background: rgba(255,255,255,0.06); }
.sd-sr-poster {
    width: 34px; height: 51px; object-fit: cover;
    border-radius: 3px; flex-shrink: 0;
}
.sd-sr-poster--empty {
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.25);
}
.sd-sr-poster--empty .material-symbols-outlined { font-size: 16px; }
.sd-sr-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sd-sr-title { font-size: 0.8rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-sr-meta { font-size: 0.68rem; color: rgba(255,255,255,0.38); }
.sd-add-poster-preview {
    display: none;
    width: 54px; height: 81px; object-fit: cover;
    border-radius: 3px; flex-shrink: 0; align-self: center;
}

/* G��G�� FAB add button G��G�� */
.sd-add-fab {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--sd-brand, #e50914); border: none; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background 0.15s;
    font-size: 1.35rem; line-height: 1;
}
.sd-add-fab:hover { background: color-mix(in srgb, var(--sd-brand, #e50914) 80%, #fff); }

/* G��G�� Add form type buttons G��G�� */
.sd-add-type-btns {
    display: flex; gap: 0.35rem; align-items: center; flex-shrink: 0;
}
.sd-type-btn {
    display: flex; align-items: center; gap: 3px;
    height: 30px; padding: 0 0.65rem; border-radius: 3px;
    background: var(--sd-brand, #e50914); border: none; color: #fff;
    font-size: 0.72rem; font-weight: 700; cursor: pointer;
    font-family: inherit; transition: background 0.15s; white-space: nowrap;
}
.sd-type-btn:hover { background: color-mix(in srgb, var(--sd-brand, #e50914) 80%, #fff); }
.sd-type-btn--series { background: color-mix(in srgb, var(--sd-brand, #e50914) 55%, transparent); }
.sd-type-btn--series:hover { background: var(--sd-brand, #e50914); }

/* G��G�� Watched toggle overlaid on card G��G�� */
.sd-watched-toggle {
    position: absolute; bottom: 4px; right: 4px; z-index: 3;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(0,0,0,0.6); border: none; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.45); transition: all 0.15s;
    opacity: 0;
}
.sd-movie-card:hover .sd-watched-toggle { opacity: 1; }
.sd-movie-watched .sd-watched-toggle { opacity: 1; color: var(--sd-brand, #e50914); }
.sd-watched-toggle .material-symbols-outlined { font-size: 14px; }

/* G��G�� Series tile progress bar G��G�� */
.sd-tile-prog {
    position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: rgba(255,255,255,0.1);
}
.sd-tile-prog-fill { height: 100%; background: var(--sd-brand, #e50914); }

/* G��G�� Season count badge (top-right of poster) G��G�� */
.sd-season-badge {
    position: absolute; top: 4px; right: 4px;
    background: rgba(0,0,0,0.72); color: rgba(255,255,255,0.82);
    font-size: 0.55rem; font-weight: 700; letter-spacing: 0.04em;
    padding: 2px 5px; border-radius: 3px; pointer-events: none;
    backdrop-filter: blur(4px);
}

/* G��G�� Series tile G�� clickable poster + inline expand G��G�� */
.sd-series-tile .sd-movie-poster { cursor: pointer; }
.sd-hub-series { cursor: pointer; }
.sd-series-expand {
    padding: 0.65rem 0.65rem 0.45rem;
    background: #141414;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.sd-series-expand.sd-hidden { display: none; }

/* When expanded: span full grid row, poster left + seasons right */
.sd-series-tile:has(.sd-series-expand:not(.sd-hidden)) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: auto 1fr;
    transform: none !important;
}
.sd-series-tile:has(.sd-series-expand:not(.sd-hidden)) .sd-movie-poster {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 100px;
    height: 100%;
    min-height: 120px;
    aspect-ratio: unset;
}
.sd-series-tile:has(.sd-series-expand:not(.sd-hidden)) .sd-movie-info {
    grid-column: 2;
    grid-row: 1;
    padding: 0.55rem 0.65rem 0.3rem;
}
.sd-series-tile:has(.sd-series-expand:not(.sd-hidden)) .sd-movie-title {
    font-size: 0.82rem;
    white-space: normal;
}
.sd-series-tile:has(.sd-series-expand:not(.sd-hidden)) .sd-series-expand {
    grid-column: 2;
    grid-row: 2;
    border-top: none;
    padding-top: 0;
}

.sd-sf-add-btn {
    display: flex; align-items: center; gap: 3px;
    background: none; border: none; color: rgba(255,255,255,0.28);
    font-size: 0.72rem; cursor: pointer; font-family: inherit;
    padding: 0.25rem 0; margin-top: 0.4rem; transition: color 0.15s;
}
.sd-sf-add-btn:hover { color: var(--sd-brand, #e50914); }

/* G��G�� Unified grid G��G�� */
.sd-unified-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 0.55rem;
    align-items: start;
}

/* G��G�� Collection block G��G�� */
.sd-coll-block {
    grid-column: 1 / -1;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 6px;
    overflow: hidden;
}
.sd-coll-block.sd-drag-over { border-color: var(--sd-brand, #e50914); box-shadow: 0 0 0 1px var(--sd-brand, #e50914); }

/* G��G�� Drag insert-before / insert-after indicators G��G�� */
.sd-drop-before { box-shadow: -4px 0 0 0 var(--sd-brand, #e50914) !important; outline: 1px solid color-mix(in srgb, var(--sd-brand, #e50914) 30%, transparent); outline-offset: 1px; }
.sd-drop-after  { box-shadow: 4px 0 0 0 var(--sd-brand, #e50914) !important; outline: 1px solid color-mix(in srgb, var(--sd-brand, #e50914) 30%, transparent); outline-offset: 1px; }
.sd-coll-hdr {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    cursor: default;
}
.sd-coll-name { flex: 1; font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.8); }
.sd-coll-badge {
    font-size: 0.64rem; font-weight: 600;
    background: rgba(255,255,255,0.08); border-radius: 10px;
    padding: 0 0.4rem; color: rgba(255,255,255,0.45); line-height: 1.6;
}
.sd-coll-toggle {
    background: none; border: none; color: rgba(255,255,255,0.3);
    cursor: pointer; padding: 1px; display: flex; align-items: center;
    transition: color 0.15s; flex-shrink: 0;
}
.sd-coll-toggle:hover { color: #fff; }
.sd-coll-toggle .material-symbols-outlined { font-size: 1rem; }
.sd-coll-inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 0.5rem;
    padding: 0.55rem;
}
.sd-coll-inner.sd-hidden { display: none; }

/* G��G�� Remove-from-collection drop zone G��G�� */
.sd-remove-zone {
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    margin-top: 0.6rem; padding: 0.6rem 0.85rem;
    border: 1.5px dashed rgba(255,255,255,0.13); border-radius: 6px;
    color: rgba(255,255,255,0.28); font-size: 0.73rem;
    transition: all 0.15s; cursor: default; user-select: none;
}
.sd-remove-zone.sd-hidden { display: none; }
.sd-remove-zone.sd-drag-over { border-color: var(--sd-brand, #e50914); color: var(--sd-brand, #e50914); background: color-mix(in srgb, var(--sd-brand, #e50914) 7%, transparent); }
.sd-remove-zone .material-symbols-outlined { font-size: 1rem; }

/* G��G�� Hub unified grid (collections + solo cards) G��G�� */
.sh-unified-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 0.55rem; align-items: start;
    padding: 0.85rem;
}
.sh-unified-grid .sd-coll-block { grid-column: 1/-1; }

/* G��G�� Collection rename button (pencil, visible on header hover) G��G�� */
.sd-coll-rename-btn { opacity: 0; transition: opacity 0.15s; }
.sd-coll-hdr:hover .sd-coll-rename-btn { opacity: 1; }

/* G��G�� Collapsed collection: stacked poster card (reuses .sd-movie-card) G��G�� */
.sd-movie-card.sd-coll-collapsed { overflow: visible; }
.sd-coll-stack-btn {
    cursor: pointer; border: none;
    padding: 0; position: relative; overflow: visible;
}
.sd-coll-stack-btn:hover .sd-cs-front { transform: scale(1.04); }
.sd-cs-layer {
    position: absolute; inset: 0;
    border-radius: 4px; overflow: hidden;
    background: #1a1a1a; border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.sd-cs-back2 {
    transform: rotate(-4deg) translateY(4px) translateX(-3px);
    background: #161616;
    z-index: 1;
    filter: brightness(0.7);
}
.sd-cs-back1 {
    transform: rotate(-2deg) translateY(2px) translateX(-1px);
    background: #1c1c1c;
    z-index: 2;
    filter: brightness(0.85);
}
.sd-cs-front {
    position: absolute; inset: 0;
    z-index: 3; border-radius: 4px; overflow: hidden;
    background: #1a1a1a; border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s;
    pointer-events: none;
}
.sd-cs-front img { width: 100%; height: 100%; object-fit: cover; }
.sd-cs-count {
    position: absolute; bottom: 6px; right: 6px; z-index: 4;
    background: rgba(0,0,0,0.78); color: #fff;
    font-size: 0.6rem; font-weight: 700;
    padding: 2px 5px; border-radius: 3px; line-height: 1.4;
    letter-spacing: 0.04em;
}

/* G��G�� Drag handle G��G�� */
.sd-drag-handle {
    position: absolute; top: 4px; left: 4px;
    background: rgba(0,0,0,0.65); border-radius: 3px;
    padding: 1px 3px; opacity: 0; cursor: grab;
    z-index: 6; color: rgba(255,255,255,0.75);
    font-size: 15px; line-height: 1;
    user-select: none; pointer-events: auto;
    display: flex; align-items: center;
    transition: opacity 0.15s;
}
.sd-drag-handle:active { cursor: grabbing; }
.sd-drag-handle--coll {
    position: static; background: none; border-radius: 0;
    padding: 0; opacity: 0.4; cursor: grab; font-size: 16px;
    transition: opacity 0.15s;
}
.sd-coll-hdr:hover .sd-drag-handle--coll { opacity: 0.9; }
.sd-coll-collapsed:hover .sd-drag-handle--coll { opacity: 0.9; }
.sd-movie-card:hover .sd-drag-handle { opacity: 1; }
.sd-unit-dragging { opacity: 0.3; pointer-events: none; }
.sd-movie-card.sd-drag-over { border-color: #e50914; box-shadow: 0 0 0 2px rgba(229,9,20,0.35); transform: scale(1.04); }

/* G��G�� Card footer (edit + delete buttons) G��G�� */
.sd-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 3px 3px;
    opacity: 0; transition: opacity 0.15s;
}
.sd-movie-card:hover .sd-card-footer { opacity: 1; }
.sd-edit-btn { color: rgba(255,255,255,0.3); }
.sd-edit-btn:hover { color: #fff !important; background: rgba(255,255,255,0.08) !important; }

/* G��G�� Item edit modal G��G�� */
.sd-iem-overlay {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(0,0,0,0.72);
    display: flex; align-items: center; justify-content: center;
}
.sd-iem-overlay.sd-hidden { display: none; }
.sd-iem-panel {
    background: #1c1c1c; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 1.25rem 1.4rem 1.1rem;
    width: 340px; max-width: 92vw;
    display: flex; flex-direction: column; gap: 0.75rem;
}
.sd-iem-title { font-size: 0.88rem; font-weight: 700; color: #fff; }
.sd-iem-field { display: flex; flex-direction: column; gap: 0.3rem; }
.sd-iem-lbl { font-size: 0.69rem; color: rgba(255,255,255,0.4); }
.sd-iem-btns { display: flex; justify-content: flex-end; gap: 0.45rem; margin-top: 0.2rem; }
.sd-iem-btns .sd-cancel-btn { width: auto; padding: 0 0.85rem; font-size: 0.77rem; font-weight: 500; }

/* G��G�� Streaming hub wrapper G��G�� */
.streaming-hub { padding: 1rem 1.25rem; }

/* G��G�� Mobile responsive G��G�� */
@media (max-width: 560px) {
    .sd-panel { width: 100vw; }
    .sd-hero { padding: 2.6rem 1rem 0.9rem; }
    .sd-hero-title { font-size: 0.92rem; }
    .sd-toolbar { padding: 0.4rem 0.6rem; }
    .sd-add-btn span:not(.material-symbols-outlined) { display: none; }
    .sd-section { padding: 0.7rem 0.7rem 0.45rem; }
    .sd-movies-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 0.4rem; }
    .sh-services-bar {
        overflow-x: auto; flex-wrap: nowrap;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .sh-services-bar::-webkit-scrollbar { display: none; }
    .sh-pill { flex-shrink: 0; }
    .sh-tab-bar { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .sh-tab-bar::-webkit-scrollbar { display: none; }
    .sh-tab { flex-shrink: 0; }
    .streaming-hub {
        padding: 0.6rem 0.75rem;
        padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    }
}

/* -- Hub nav footer: settings btn sits above avatar with a gap -- */
.hub-nav-footer .hub-app-btn {
    margin-bottom: 6px;
}

/* =================================================================
   SETTINGS / TUTORIAL APP
   ================================================================= */

#app-settings {
    background: var(--bg-dark);
    overflow: hidden;
}

.tut-shell {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    height: 100%;
}

/* G��G�� Sidebar nav G��G�� */
.tut-nav {
    width: 210px;
    flex-shrink: 0;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0 1rem;
    overflow-y: auto;
    gap: 2px;
}

.tut-nav-title {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    padding: 0.65rem 1rem 0.65rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.4rem;
}

.tut-nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 0.45rem 1rem;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--text-secondary);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition), color var(--transition);
}
.tut-nav-item svg { flex-shrink: 0; opacity: 0.7; }
.tut-nav-item:hover  { background: var(--bg-card); color: var(--text-primary); }
.tut-nav-item.active { background: var(--accent-dim); color: var(--accent); }
.tut-nav-item.active svg { opacity: 1; }

/* G��G�� Content area G��G�� */
.tut-content {
    flex: 1;
    overflow-y: auto;
    padding: 2.5rem 3rem;
}

/* G��G�� Pages G��G�� */
.tut-page { display: none; max-width: 780px; }
.tut-page.active { display: block; }

.tut-h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

/* -- Hub tabs settings toggles -- */
.hub-tabs-settings {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.hub-tab-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border);
    gap: 1rem;
}
.hub-tab-row:last-child { border-bottom: none; }

.hub-tab-row-label {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary);
}

.hub-tab-row-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.hub-toggle-switch {
    position: relative;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}
.hub-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.hub-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: var(--border-hover);
    transition: background 0.2s;
}
.hub-toggle-track::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    left: 3px;
    top: 3px;
    transition: transform 0.2s;
}
.hub-toggle-switch input:checked + .hub-toggle-track {
    background: var(--accent);
}
.hub-toggle-switch input:checked + .hub-toggle-track::before {
    transform: translateX(18px);
}


.tut-lead {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1.5rem;
}

.tut-h2 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 1.75rem 0 0.6rem;
}

.tut-list {
    padding-left: 1.2rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.75;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tut-list li { padding-left: 2px; }

/* Inline UI labels */
.tut-ui {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 7px;
    line-height: 1.6;
    white-space: nowrap;
}

/* Inline keyboard key */
.tut-kbd, kbd {
    display: inline-block;
    font-size: 0.73rem;
    font-family: monospace;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-hover);
    border-radius: 4px;
    padding: 1px 7px;
    line-height: 1.7;
    box-shadow: 0 2px 0 var(--border);
    white-space: nowrap;
}

/* Code block */
.tut-code {
    font-family: monospace;
    font-size: 0.82rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 0.7rem 1rem;
    color: var(--text-primary);
    margin: 0.5rem 0 0.75rem;
    overflow-x: auto;
    white-space: pre;
}

/* Callout boxes */
.tut-callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    font-size: 0.82rem;
    line-height: 1.55;
    margin: 1.25rem 0;
}
.tut-callout svg { flex-shrink: 0; margin-top: 1px; }
.tut-callout--info {
    background: rgba(199, 114, 254, 0.08);
    border: 1px solid rgba(199, 114, 254, 0.25);
    color: #c5a0e8;
}
.tut-callout--info svg { stroke: var(--accent); }
.tut-callout--warn {
    background: rgba(224, 170, 68, 0.08);
    border: 1px solid rgba(224, 170, 68, 0.25);
    color: #d4a84a;
}
.tut-callout--warn svg { stroke: var(--warn); }

/* Table */
.tut-table-wrap {
    overflow-x: auto;
    margin: 0.5rem 0 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.tut-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.tut-table th {
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.55rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.tut-table td {
    padding: 0.55rem 0.9rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    line-height: 1.5;
}
.tut-table td:first-child { color: var(--text-primary); font-weight: 500; }
.tut-table tr:last-child td { border-bottom: none; }
.tut-table code {
    font-family: monospace;
    font-size: 0.78rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    padding: 1px 5px;
    border-radius: 3px;
}

/* G��G�� Getting started: step list G��G�� */
.tut-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}
.tut-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--transition);
}
.tut-step:hover { border-color: var(--border-hover); }
.tut-step-num {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: var(--accent-dim);
    color: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}
.tut-step-body strong {
    display: block;
    font-size: 0.88rem;
    color: var(--text-primary);
    margin-bottom: 3px;
}
.tut-step-body p {
    font-size: 0.81rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* G��G�� Getting started: feature cards G��G�� */
.tut-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.tut-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.tut-card-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: var(--accent-dim);
    color: var(--accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tut-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.tut-card-body strong {
    font-size: 0.82rem;
    color: var(--text-primary);
}
.tut-card-body span {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* G��G�� Kanban column demo pills G��G�� */
.tut-cols-demo {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.5rem 0 1.25rem;
}
.tut-col-pill {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 3px;
}
.tut-col-backlog    { background: rgba(88,88,88,0.18);  color: #888; }
.tut-col-todo       { background: rgba(85,200,122,0.12); color: var(--success); }
.tut-col-inprogress { background: rgba(199,114,254,0.12);color: var(--accent); }
.tut-col-review     { background: rgba(224,170,68,0.12); color: var(--warn); }
.tut-col-done       { background: rgba(85,200,122,0.1);  color: var(--success); }

/* G��G�� Priority demo row G��G�� */
.tut-priority-row {
    display: flex;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

/* G��G�� Keyboard shortcut table G��G�� */
.tut-kbd-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 0.5rem 0 1.25rem;
}
.tut-kbd-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
}
.tut-kbd-row:last-child { border-bottom: none; }
.tut-kbd-row:nth-child(even) { background: var(--bg-card); }
.tut-kbd-row kbd {
    flex-shrink: 0;
    min-width: 140px;
}
.tut-kbd-row span { color: var(--text-secondary); }

@media (max-width: 768px) {
    .tut-nav { width: 48px; overflow: hidden; }
    .tut-nav-title, .tut-nav-item span { display: none; }
    .tut-nav-item { justify-content: center; padding: 0.6rem; }
    .tut-nav-item svg { opacity: 1; }
    .tut-content { padding: 1.5rem 1.25rem; }
    .tut-kbd-row kbd { min-width: 100px; }
}

/* G��G�� Mobile: horizontal scrolling tab strip at the top G��G�� */
@media (max-width: 560px) {
    .tut-shell {
        flex-direction: column;
    }

    /* Nav becomes a horizontal scrolling tab bar */
    .tut-nav {
        width: 100%;
        height: 44px;
        min-height: 44px;
        flex-direction: row;
        align-items: center;
        gap: 0;
        padding: 0;
        border-right: none;
        border-bottom: 1px solid var(--border);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    .tut-nav::-webkit-scrollbar { display: none; }

    .tut-nav-title { display: none; }

    .tut-nav-item {
        flex-direction: row;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        gap: 0.3rem;
        padding: 0 0.85rem;
        height: 44px;
        border-radius: 0;
        border-bottom: 2px solid transparent;
        font-size: 0.73rem;
        white-space: nowrap;
    }
    /* Show text labels again in the horizontal strip */
    .tut-nav-item span { display: inline; }
    .tut-nav-item svg  { opacity: 0.6; }
    .tut-nav-item.active {
        background: transparent;
        color: var(--accent);
        border-bottom-color: var(--accent);
    }
    .tut-nav-item.active svg { opacity: 1; }

    .tut-content { padding: 1.25rem 1rem; }
    .tut-h1 { font-size: 1.3rem; }
    .tut-lead { font-size: 0.85rem; margin-bottom: 1.5rem; padding-bottom: 1rem; }
    .tut-kbd-row kbd { min-width: 80px; }
    .tut-feature-cards { grid-template-columns: 1fr; }
}

/* ==================== SHARING ==================== */

/* Shared project badge in sidebar */
.ws-project-shared-badge {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.5;
    padding-right: 0.2rem;
}

/* Shared section label in sidebar */
.ws-sb-shared-label {
    margin-top: 0.6rem;
    border-top: 1px solid var(--border);
    padding-top: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ws-sb-admin-refresh {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px;
    display: flex;
    align-items: center;
    border-radius: 3px;
}
.ws-sb-admin-refresh:hover { color: var(--text); background: var(--hover); }

.ws-sb-admin-owner-label {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    padding: 0.5rem 0.9rem 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Member role badge in topbar */
.ws-member-role-badge {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 2px;
    background: rgba(199,114,254,0.12);
    color: var(--accent);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Share modal */
.ws-modal--share { max-width: 500px; }

.ws-modal-body { padding: 1rem 1.3rem 1.3rem; }

.share-modal-body { display: flex; flex-direction: column; gap: 1.2rem; }

.share-section-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 0.55rem;
}

.share-members-list { display: flex; flex-direction: column; gap: 0.5rem; }

.share-no-members {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

.share-member-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.7rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.share-member-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--accent-dim);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.share-member-info { flex: 1; min-width: 0; }
.share-member-name { font-size: 0.82rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.share-member-email { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.share-role-badge {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: capitalize;
    padding: 2px 7px;
    border-radius: 2px;
    background: rgba(199,114,254,0.12);
    color: var(--accent);
    flex-shrink: 0;
}

.share-remove-btn {
    flex-shrink: 0;
    color: var(--text-muted);
}
.share-remove-btn:hover { color: var(--danger, #e05c5c); }

/* Inline role select in share modal */
.ws-select-sm {
    appearance: none;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    padding: 0.25rem 0.55rem;
    cursor: pointer;
    flex-shrink: 0;
}
.ws-select-sm:focus { outline: none; border-color: var(--accent); }

/* Add member form */
.share-add-section { display: flex; flex-direction: column; gap: 0.4rem; }

.share-add-form {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.share-email-input {
    flex: 1;
    min-width: 160px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.8rem;
    padding: 0.38rem 0.7rem;
}
.share-email-input:focus { outline: none; border-color: var(--accent); }
.share-email-input::placeholder { color: var(--text-muted); }

.share-add-error {
    font-size: 0.76rem;
    color: var(--danger, #e05c5c);
    min-height: 1rem;
}

.share-role-hint {
    font-size: 0.73rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

/* Picker header row (search + role select) */
.share-picker-header {
    display: flex;
    gap: 0.45rem;
    margin-bottom: 0.55rem;
    flex-wrap: wrap;
}
.share-picker-header .share-email-input { flex: 1; min-width: 160px; }

/* Scrollable user list */
.share-user-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 2px;
}

.share-user-loading {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Each browseable user row */
.share-pick-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card);
    transition: background var(--transition);
}
.share-pick-row--added {
    opacity: 0.55;
}

/* Small accent button for Add */
.ws-btn--xs {
    padding: 0.22rem 0.65rem;
    font-size: 0.73rem;
    flex-shrink: 0;
}

/* "Added" badge */
.share-pick-added-badge {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--success, #55c87a);
    flex-shrink: 0;
    padding: 2px 6px;
    border-radius: 2px;
    background: rgba(85,200,122,0.1);
}


/* -----------------------------------------------------------
   ADMIN PANEL  (admin.html + admin-app.js)
   ----------------------------------------------------------- */

/* -- Base reset for admin page -- */
body.adm-page {
    margin: 0;
    background: var(--bg-dark, #0f0f11);
    color: var(--text, #e0e0e0);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* -- Header -- */
#adm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.2rem;
    height: 48px;
    flex-shrink: 0;
    background: var(--bg-card, #16161a);
    border-bottom: 1px solid var(--border, #2a2a30);
    z-index: 10;
}
.adm-header-left { display: flex; align-items: center; gap: 0.6rem; }
.adm-header-right { display: flex; align-items: center; gap: 0.6rem; }

.adm-logo-link {
    display: flex;
    align-items: center;
    color: var(--text-muted, #888);
    text-decoration: none;
}
.adm-logo-link:hover { color: var(--text, #e0e0e0); }

.adm-brand {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text, #e0e0e0);
}
.adm-brand-under { color: var(--accent, #c772fe); }

.adm-badge {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 2px 8px;
    border-radius: 3px;
    background: rgba(199,114,254,0.18);
    color: var(--accent, #c772fe);
    border: 1px solid rgba(199,114,254,0.35);
}

.adm-signed-as {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: var(--text-muted, #888);
}

.adm-header-btn {
    font-size: 0.72rem;
    font-family: inherit;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--border, #2a2a30);
    background: transparent;
    color: var(--text-muted, #888);
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color .15s, border-color .15s, background .15s;
}
.adm-header-btn:hover {
    color: var(--text, #e0e0e0);
    border-color: var(--border-hover, #444);
    background: var(--hover, rgba(255,255,255,0.04));
}
.adm-header-btn--danger:hover { color: var(--danger, #e05c5c); border-color: var(--danger, #e05c5c); }

/* -- Layout -- */
#adm-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* -- Sidebar -- */
#adm-sidebar {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border, #2a2a30);
    background: var(--bg-sidebar, #111114);
    overflow: hidden;
}

.adm-sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 0.9rem 0.4rem;
}
.adm-sidebar-title {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted, #888);
}
.adm-user-count {
    font-size: 0.65rem;
    color: var(--text-muted, #888);
}

.adm-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0.6rem 0.5rem;
    padding: 5px 8px;
    border: 1px solid var(--border, #2a2a30);
    border-radius: 5px;
    background: var(--bg-dark, #0f0f11);
    color: var(--text-muted, #888);
    flex-shrink: 0;
}
.adm-search-input {
    background: none;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--text, #e0e0e0);
    flex: 1;
    min-width: 0;
}
.adm-search-input::placeholder { color: var(--text-muted, #888); }

.adm-user-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 0.3rem 0.5rem;
}

.adm-user-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    color: var(--text, #e0e0e0);
    transition: background .12s;
    font-family: inherit;
}
.adm-user-item:hover    { background: var(--hover, rgba(255,255,255,0.04)); }
.adm-user-item.active   { background: rgba(199,114,254,0.1); }

.adm-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(199,114,254,0.2);
    color: var(--accent, #c772fe);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.adm-user-info { min-width: 0; }
.adm-user-name {
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-user-email {
    font-size: 0.66rem;
    color: var(--text-muted, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- Main content -- */
#adm-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* Placeholder */
.adm-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex: 1;
    color: var(--text-muted, #888);
    font-size: 0.85rem;
}

/* -- User content -- */
#adm-user-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* User header */
.adm-user-hdr {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1.3rem;
    border-bottom: 1px solid var(--border, #2a2a30);
    background: var(--bg-card, #16161a);
    flex-shrink: 0;
}

.adm-user-hdr-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(199,114,254,0.2);
    color: var(--accent, #c772fe);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}
.adm-user-hdr-info { flex: 1; min-width: 0; }
.adm-user-hdr-name {
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-user-hdr-email {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
}
.adm-user-hdr-uid {
    font-size: 0.62rem;
    color: var(--text-muted, #888);
    font-family: 'Courier New', monospace;
    opacity: .6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-user-hdr-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Shared buttons */
.adm-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-family: inherit;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.adm-btn-ghost {
    background: transparent;
    border-color: var(--border, #2a2a30);
    color: var(--text-muted, #888);
}
.adm-btn-ghost:hover {
    color: var(--text, #e0e0e0);
    border-color: var(--border-hover, #444);
    background: var(--hover, rgba(255,255,255,0.04));
}
.adm-btn-accent {
    background: rgba(199,114,254,0.15);
    border-color: rgba(199,114,254,0.4);
    color: var(--accent, #c772fe);
}
.adm-btn-accent:hover {
    background: rgba(199,114,254,0.25);
    border-color: var(--accent, #c772fe);
}

.adm-icon-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted, #888);
    cursor: pointer;
    transition: background .12s, color .12s;
    flex-shrink: 0;
}
.adm-icon-btn:hover { background: var(--hover, rgba(255,255,255,0.06)); color: var(--text, #e0e0e0); }
.adm-icon-btn--danger:hover { background: rgba(224,92,92,0.12); color: var(--danger, #e05c5c); }

/* -- Tabs -- */
.adm-tabs {
    display: flex;
    gap: 2px;
    padding: 0.55rem 1rem 0;
    border-bottom: 1px solid var(--border, #2a2a30);
    background: var(--bg-card, #16161a);
    flex-shrink: 0;
}
.adm-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-family: inherit;
    font-weight: 500;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 4px 4px 0 0;
    background: transparent;
    color: var(--text-muted, #888);
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
    margin-bottom: -1px;
}
.adm-tab:hover { color: var(--text, #e0e0e0); background: var(--hover, rgba(255,255,255,0.03)); }
.adm-tab.active { color: var(--accent, #c772fe); border-bottom-color: var(--accent, #c772fe); }

.adm-tab-count {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 10px;
    background: rgba(199,114,254,0.15);
    color: var(--accent, #c772fe);
}

.adm-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.3rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
}
/* Make only the active tab take up space */
#adm-user-content > #adm-tab-projects,
#adm-user-content > #adm-tab-gallery,
#adm-user-content > #adm-tab-settings { flex: 1; }

/* -- Project cards -- */
.adm-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
}

.adm-project-card {
    background: var(--bg-card, #16161a);
    border: 1px solid var(--border, #2a2a30);
    border-radius: 7px;
    padding: 0.7rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: border-color .15s;
}
.adm-project-card:hover { border-color: var(--border-hover, #3a3a44); }

.adm-project-card-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}
.adm-project-card-left {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-width: 0;
    flex: 1;
}
.adm-project-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.adm-project-icon {
    font-size: 18px;
    color: var(--accent, #c772fe);
    flex-shrink: 0;
    margin-top: 1px;
}
.adm-project-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent, #c772fe);
    flex-shrink: 0;
    margin-top: 6px;
}
.adm-project-card-info { min-width: 0; }
.adm-project-title {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-project-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 3px;
}
.adm-project-desc {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
    line-height: 1.5;
    padding-left: 1.5rem;
}

/* Status badges */
.adm-status-badge {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 6px;
    border-radius: 3px;
}
.adm-status-active     { background: rgba(85,200,122,0.1);  color: #55c87a; }
.adm-status-on-hold    { background: rgba(255,184,0,0.1);   color: #ffb800; }
.adm-status-completed  { background: rgba(88,166,255,0.1);  color: #58a6ff; }
.adm-status-archived   { background: rgba(136,136,136,0.1); color: #888; }

/* Chips */
.adm-chip {
    font-size: 0.62rem;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 3px;
}
.adm-chip--dim    { background: rgba(255,255,255,0.06); color: var(--text-muted, #888); }
.adm-chip--purple { background: rgba(199,114,254,0.1);  color: var(--accent, #c772fe); }

/* -- Gallery grid -- */
.adm-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.6rem;
    align-content: start;
}

.adm-gallery-category {
    grid-column: 1 / -1;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #888);
    padding: 0.4rem 0 0.1rem;
    border-bottom: 1px solid var(--border, #2a2a30);
    margin-top: 0.4rem;
}

.adm-link-card {
    background: var(--bg-card, #16161a);
    border: 1px solid var(--border, #2a2a30);
    border-radius: 7px;
    padding: 0.65rem 0.8rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    transition: border-color .15s;
}
.adm-link-card:hover { border-color: var(--border-hover, #3a3a44); }

.adm-link-card-body { flex: 1; min-width: 0; }
.adm-link-title {
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.adm-link-url {
    font-size: 0.68rem;
    color: var(--text-muted, #888);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.adm-link-url:hover { color: var(--accent, #c772fe); text-decoration: underline; }

/* -- Account tab -- */
.adm-account-card {
    background: var(--bg-card, #16161a);
    border: 1px solid var(--border, #2a2a30);
    border-radius: 8px;
    overflow: hidden;
    max-width: 540px;
}
.adm-account-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border, #2a2a30);
}
.adm-account-row:last-child { border-bottom: none; }
.adm-account-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #888);
    width: 100px;
    flex-shrink: 0;
}
.adm-code {
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    color: var(--accent, #c772fe);
    word-break: break-all;
}
.adm-copy-btn {
    background: none;
    border: 1px solid var(--border, #2a2a30);
    border-radius: 4px;
    color: var(--text-muted, #888);
    cursor: pointer;
    padding: 3px 5px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color .12s, border-color .12s;
}
.adm-copy-btn:hover { color: var(--text, #e0e0e0); border-color: var(--border-hover, #444); }

/* -- Edit project modal -- */
.adm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}
.adm-modal-overlay.hidden { display: none; }

.adm-modal {
    background: var(--bg-card, #16161a);
    border: 1px solid var(--border, #2a2a30);
    border-radius: 10px;
    padding: 1.3rem 1.5rem;
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.adm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.adm-modal-header h2 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}
.adm-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #888);
    padding: 3px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}
.adm-modal-close:hover { color: var(--text, #e0e0e0); }

.adm-form-group { display: flex; flex-direction: column; gap: 4px; }
.adm-form-row   { display: flex; gap: 0.8rem; }
.adm-form-row .adm-form-group { flex: 1; }

.adm-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #888);
}
.adm-input {
    background: var(--bg-dark, #0f0f11);
    border: 1px solid var(--border, #2a2a30);
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--text, #e0e0e0);
    outline: none;
    transition: border-color .15s;
}
.adm-input:focus { border-color: var(--accent, #c772fe); }
.adm-textarea { resize: vertical; min-height: 70px; }

.adm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border, #2a2a30);
}

/* -- Toast -- */
.adm-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: var(--bg-card, #1e1e24);
    border: 1px solid var(--border, #2a2a30);
    color: var(--text, #e0e0e0);
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 300;
    white-space: nowrap;
}
.adm-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.adm-toast.success { border-color: rgba(85,200,122,0.4); color: #55c87a; }
.adm-toast.error   { border-color: rgba(224,92,92,0.4);  color: var(--danger, #e05c5c); }

/* -- Misc -- */
.adm-no-results,
.adm-loading {
    font-size: 0.78rem;
    color: var(--text-muted, #888);
    padding: 1rem 0;
}
.adm-error {
    font-size: 0.78rem;
    color: var(--danger, #e05c5c);
    padding: 1rem 0;
}

/* --------------------------------------------------------
   ADMIN PANEL � Workspace-shell layout extras
   (Used by admin.html which reuses hub-nav / ws-shell)
   -------------------------------------------------------- */

/* Hub-nav: shield button for admin page (accent tint) */
.adm-hub-active { color: var(--accent, #c772fe); }

/* User-filter container in admin sidebar */
.adm-user-filter-wrap {
    flex-shrink: 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border, #2a2a30);
    margin-bottom: 0.2rem;
}

/* User list inside the admin filter wrap */
.adm-user-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 0.35rem 0.25rem;
    max-height: 38vh;
    overflow-y: auto;
}

/* Individual user row */
.adm-user-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 0.5rem;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted, #888);
    font-size: 0.75rem;
    text-align: left;
    width: 100%;
    transition: background 0.12s, color 0.12s;
}
.adm-user-item:hover {
    background: var(--bg-hover, rgba(255,255,255,0.05));
    color: var(--text, #e2e2e6);
}
.adm-user-item.active {
    background: var(--accent-dim, rgba(199,114,254,0.12));
    color: var(--accent, #c772fe);
}

/* Avatar circle */
.adm-user-item-avatar {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-card, #1c1c21);
    border: 1px solid var(--border, #2a2a30);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted, #888);
    line-height: 1;
}
.adm-user-item.active .adm-user-item-avatar {
    border-color: var(--accent, #c772fe);
    color: var(--accent, #c772fe);
}

/* Label (email/name) � truncate */
.adm-user-item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Project count badge */
.adm-user-item-count {
    flex-shrink: 0;
    font-size: 0.65rem;
    opacity: 0.55;
    background: var(--bg-card, #1c1c21);
    border-radius: 10px;
    padding: 0px 5px;
    min-width: 18px;
    text-align: center;
}

/* Refresh button inside section label */
.adm-user-refresh-btn {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #888);
    padding: 0;
    display: flex;
    align-items: center;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.adm-user-refresh-btn:hover { opacity: 1; }

/* Sidebar brand badge ("Panel") */
.adm-sb-badge {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--accent-dim, rgba(199,114,254,0.15));
    color: var(--accent, #c772fe);
    border: 1px solid rgba(199,114,254,0.25);
    flex-shrink: 0;
}

/* Sidebar search */
.ws-sb-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 0.7rem;
    margin: 0.4rem 0.5rem 0.3rem;
    background: var(--bg-dark, #0f0f11);
    border: 1px solid var(--border, #2a2a30);
    border-radius: 6px;
    flex-shrink: 0;
    color: var(--text-muted, #888);
}
.ws-sb-search-wrap svg { flex-shrink: 0; }
.ws-sb-search-input {
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary, #e0e0e0);
    font-family: inherit;
    font-size: 0.78rem;
    padding: 0.45rem 0;
    width: 100%;
}
.ws-sb-search-input::placeholder { color: var(--text-muted, #888); }

/* Avatar inside user list items (.ws-project-item) */
.adm-list-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-dim, rgba(199,114,254,0.15));
    border: 1px solid rgba(199,114,254,0.25);
    color: var(--accent, #c772fe);
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ws-project-item overrides for 2-line user names */
#adm-user-list .ws-project-item {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    align-items: center;
}
#adm-user-list .ws-project-item-name { flex: 1; min-width: 0; }

/* Avatar in ws-topbar for admin user display */
.adm-topbar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-dim, rgba(199,114,254,0.15));
    border: 1.5px solid rgba(199,114,254,0.35);
    color: var(--accent, #c772fe);
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* User count label in section header */
.adm-user-count {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-muted, #888);
    margin-left: 2px;
}
/* =================================================================
   EUROVISION 2026 POINT TRACKER  (#app-sheet -> #esc-app)
   Follows workspace design system: var(--accent) purple, Poppins
   ================================================================= */

.esc-app {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--bg-dark);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
}

@media (max-width: 600px) {
    .esc-app {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }
}

/* -- HEADER -- */
.esc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    gap: 1rem;
    flex-wrap: wrap;
}

.esc-header-left, .esc-header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.esc-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.esc-logo-star {
    font-size: 1.6rem;
    color: var(--accent);
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(199,114,254,0.45));
}

.esc-logo-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.esc-logo-sub {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 400;
}

.esc-room-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.esc-room-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    background: var(--accent-dim);
    border: 1px solid rgba(199,114,254,0.3);
    color: var(--accent);
    border-radius: var(--radius);
}

/* -- INPUTS -- */
.esc-input {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.82rem;
    padding: 0.38rem 0.75rem;
    border-radius: var(--radius);
    outline: none;
    transition: border-color var(--transition);
}
.esc-input:focus { border-color: var(--accent); }
.esc-name-input { width: 130px; }

/* -- BUTTONS -- */
.esc-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.38rem 0.9rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.esc-btn-share {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.esc-btn-share:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

.esc-btn-leave {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.esc-btn-leave:hover { border-color: var(--danger); color: var(--danger); }

.esc-btn-copy {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #000;
    font-weight: 600;
}
.esc-btn-copy:hover { background: #d88aff; border-color: #d88aff; }

/* -- MEMBERS BAR -- */
.esc-members-bar {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    background: var(--accent-dim);
    border-bottom: 1px solid rgba(199,114,254,0.15);
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: thin;
}

.esc-member {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.3rem 0.65rem;
    flex-shrink: 0;
}

.esc-member--me {
    border-color: rgba(199,114,254,0.4);
    background: var(--accent-dim);
}

.esc-member-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-dim2);
    border: 1px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
}

.esc-member-info { display: flex; flex-direction: column; gap: 1px; }
.esc-member-name { font-size: 0.72rem; font-weight: 600; color: var(--text-primary); }
.esc-member-done { font-size: 0.6rem; color: var(--text-muted); }

/* -- PROGRESS -- */
.esc-progress-wrap {
    padding: 0.6rem 1.5rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.esc-progress-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
    gap: 0.5rem;
}

#esc-progress-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.esc-progress-hint {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.esc-progress-bar {
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.esc-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* -- SECTION LABEL -- */
.esc-section-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    padding: 0 0.1rem;
}

/* -- MAIN LAYOUT -- */
.esc-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.esc-grid-wrap {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    border-right: 1px solid var(--border);
    min-height: 0;
}

.esc-leaderboard-wrap {
    padding: 1.25rem 1rem;
    overflow-y: auto;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Leaderboard tab: desktop hides the tab, sidebar always visible */
@media (min-width: 769px) {
    .esc-tab[data-tab="leaderboard"] { display: none; }
}

/* -- SCORE GRID -- */
.esc-grid {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.esc-country-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem 0.75rem;
    transition: border-color var(--transition), background var(--transition);
}
.esc-country-card:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }

.esc-country-card--scored {
    border-color: rgba(199,114,254,0.3);
    background: var(--accent-dim);
}

.esc-country-card--host {
    border-left: 2px solid var(--accent);
}

.esc-country-info {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.45rem;
}

.esc-flag {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

.esc-country-name {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.esc-host-badge {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--accent-dim2);
    border: 1px solid rgba(199,114,254,0.4);
    color: var(--accent);
    padding: 1px 5px;
    border-radius: 2px;
}

.esc-country-pts-badge {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-dim);
    border: 1px solid rgba(199,114,254,0.3);
    padding: 1px 6px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* -- POINT BUTTONS -- */
.esc-pt-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.esc-pt-btn {
    width: 30px;
    height: 26px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.12s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.esc-pt-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
    transform: translateY(-1px);
}
.esc-pt-btn--active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #000 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(199,114,254,0.35);
    transform: translateY(-1px);
}

/* -- LEADERBOARD -- */
.esc-leaderboard {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

.esc-lb-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
    padding: 2rem 0;
    line-height: 1.7;
}
.esc-lb-empty span { font-size: 0.72rem; }

.esc-lb-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius);
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: border-color var(--transition);
    font-size: 0.78rem;
}
.esc-lb-row--top {
    border-color: rgba(199,114,254,0.2);
    background: var(--accent-dim);
}
.esc-lb-row--zeroed {
    opacity: 0.38;
}

.esc-lb-rank { font-size: 0.75rem; min-width: 22px; text-align: center; flex-shrink: 0; }
.esc-lb-flag { font-size: 0.95rem; flex-shrink: 0; }
.esc-lb-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.esc-lb-my-pts { font-size: 0.62rem; color: var(--accent); flex-shrink: 0; opacity: 0.8; }
.esc-lb-bar-wrap {
    width: 36px; height: 3px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}
.esc-lb-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.esc-lb-pts {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent);
    min-width: 26px;
    text-align: right;
    flex-shrink: 0;
}

.esc-lb-mode-toggle {
    margin-left: auto;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 1px 6px;
    background: var(--accent-dim);
    border: 1px solid rgba(199,114,254,0.2);
    color: var(--accent);
    border-radius: 2px;
    text-transform: none;
    letter-spacing: 0;
}
.esc-lb-mode--group {
    background: var(--accent-dim2);
    border-color: rgba(199,114,254,0.4);
}

/* -- SHARE MODAL -- */
.esc-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.esc-modal-backdrop--open { display: flex; }

.esc-modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    width: min(480px, 90vw);
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
    animation: esc-modal-in 0.2s ease;
}
@keyframes esc-modal-in {
    from { opacity: 0; transform: scale(0.97) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.esc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
}
.esc-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius);
    transition: color var(--transition), background var(--transition);
}
.esc-modal-close:hover { color: var(--text-primary); background: var(--bg-card); }

.esc-modal-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    line-height: 1.6;
}
.esc-modal-row { margin-bottom: 1rem; }
.esc-modal-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}
.esc-copy-row { display: flex; gap: 0.5rem; }
.esc-copy-input { flex: 1; min-width: 0; font-size: 0.78rem; }
.esc-modal-divider {
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 1rem 0;
}

/* Room history list */
.esc-room-history-list {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.esc-room-history-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.esc-room-history-join {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.4rem 0.65rem;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition), background var(--transition);
    min-width: 0;
}
.esc-room-history-join:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }
.esc-room-history-item--active .esc-room-history-join {
    border-color: rgba(199,114,254,0.4);
    background: var(--accent-dim);
}
.esc-room-history-code {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: monospace;
    letter-spacing: 0.05em;
}
.esc-room-history-names {
    font-size: 0.72rem;
    color: var(--text-secondary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.esc-room-history-date {
    font-size: 0.65rem;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: auto;
}
.esc-room-history-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.3rem 0.4rem;
    border-radius: var(--radius);
    flex-shrink: 0;
    transition: color var(--transition), background var(--transition);
}
.esc-room-history-remove:hover { color: var(--text-primary); background: var(--bg-card); }

/* -- TOAST -- */
.esc-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.78rem;
    padding: 0.45rem 1.1rem;
    border-radius: 20px;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    white-space: nowrap;
    pointer-events: none;
}
.esc-toast--ok   { border-color: var(--success); color: var(--success); }
.esc-toast--warn { border-color: var(--warn); color: var(--warn); }
.esc-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* -- RESPONSIVE -- */
@media (max-width: 900px) {
    .esc-layout { grid-template-columns: 1fr; }
    .esc-grid-wrap { border-right: none; }
}
@media (max-width: 600px) {
    .esc-header { padding: 0.6rem 1rem; }
    .esc-grid-wrap, .esc-leaderboard-wrap { padding: 0.75rem; }
    .esc-progress-wrap { padding: 0.5rem 1rem; }
    .esc-name-input { width: 100px; }
    .esc-pt-btn { width: 26px; height: 24px; font-size: 0.65rem; }
    .esc-progress-hint { display: none; }
}

/* -- ESC TAB BAR -- */
.esc-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
    padding: 0 1.5rem;
}
.esc-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1rem;
    height: 42px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}
.esc-tab:hover { color: var(--text-primary); }
.esc-tab--active { color: var(--accent); border-bottom-color: var(--accent); }
.esc-tab-count {
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 5px;
    color: var(--text-muted);
    min-width: 20px;
    text-align: center;
}
.esc-tab--active .esc-tab-count { background: var(--accent-dim); border-color: rgba(199,114,254,0.3); color: var(--accent); }

/* -- FINALIST TOGGLE BUTTON -- */
.esc-finalist-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0 3px;
    line-height: 1;
    flex-shrink: 0;
    transition: color var(--transition), transform 0.12s;
    opacity: 0.35;
}
.esc-finalist-btn:hover { color: var(--accent); opacity: 1; transform: scale(1.2); }
.esc-finalist-btn--on { color: var(--accent); opacity: 1; }
.esc-finalist-btn--on:hover { opacity: 0.6; }

/* Country card finalist highlight in "all" tab */
.esc-country-card--finalist { border-left: 2px solid var(--accent); }

/* -- ESC BRAND COLOR OVERRIDES (Eurovision 2026: blue #009FE3 -> magenta #E4007C) -- */
.esc-app {
    --esc-blue:     #009FE3;
    --esc-pink:     #E4007C;
    --esc-grad:     linear-gradient(135deg, #009FE3, #E4007C);
    --esc-dim-blue: rgba(0, 159, 227, 0.10);
    --esc-dim-pink: rgba(228, 0, 124, 0.10);
    --esc-dim:      rgba(0, 159, 227, 0.08);
}

/* Logo SVG */
.esc-logo-svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 5px rgba(0,159,227,0.4));
}
.esc-logo-star { display: none; } /* hide old star if still present */

/* Header title underline using brand gradient */
.esc-logo-title {
    background: var(--esc-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Room badge */
.esc-room-badge {
    background: var(--esc-dim-blue);
    border-color: rgba(0,159,227,0.35);
    color: var(--esc-blue);
}

/* Share button brand color */
.esc-btn-share:hover {
    border-color: var(--esc-blue);
    color: var(--esc-blue);
    background: var(--esc-dim-blue);
}

/* Tab active state */
.esc-tab--active {
    color: var(--esc-blue);
    border-bottom-color: var(--esc-blue);
}
.esc-tab--active .esc-tab-count {
    background: var(--esc-dim-blue);
    border-color: rgba(0,159,227,0.3);
    color: var(--esc-blue);
}

/* Progress fill */
.esc-progress-fill { background: var(--esc-grad); }

/* Member bar */
.esc-members-bar { background: var(--esc-dim); border-bottom-color: rgba(0,159,227,0.15); }
.esc-member--me  { border-color: rgba(0,159,227,0.4); background: var(--esc-dim-blue); }
.esc-member-avatar {
    background: var(--esc-dim-blue);
    border-color: var(--esc-blue);
    color: var(--esc-blue);
}

/* Scored country card */
.esc-country-card--scored    { border-color: rgba(0,159,227,0.3); background: var(--esc-dim); }
.esc-country-card--finalist  { border-left: 2px solid var(--esc-blue); }

/* AUTO badge */
.esc-host-badge {
    background: var(--esc-dim-blue);
    border-color: rgba(0,159,227,0.4);
    color: var(--esc-blue);
}

/* Points badge */
.esc-country-pts-badge {
    background: var(--esc-grad);
    border-color: transparent;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

/* Point buttons */
.esc-pt-btn:hover {
    border-color: var(--esc-blue);
    color: var(--esc-blue);
    background: var(--esc-dim-blue);
}
.esc-pt-btn--active {
    background: var(--esc-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 2px 8px rgba(0,159,227,0.4);
}

/* Finalist SVG button */
.esc-finalist-btn {
    width: 18px;
    height: 18px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.esc-finalist-btn svg {
    width: 14px;
    height: 14px;
    fill: var(--text-muted);
    transition: fill var(--transition), transform 0.12s;
}
.esc-finalist-btn:hover svg { fill: var(--esc-blue); transform: scale(1.2); }
.esc-finalist-btn--on svg   { fill: url(#escGrad); }
.esc-finalist-btn--on:hover svg { opacity: 0.6; }

/* Leaderboard */
.esc-lb-row--top  { border-color: rgba(0,159,227,0.2); background: var(--esc-dim); }
.esc-lb-my-pts    { color: var(--esc-blue); }
.esc-lb-bar       { background: var(--esc-grad); }
.esc-lb-pts       { color: var(--esc-blue); }
.esc-lb-mode-toggle { background: var(--esc-dim-blue); border-color: rgba(0,159,227,0.2); color: var(--esc-blue); }
.esc-lb-mode--group { background: var(--esc-dim-pink); border-color: rgba(228,0,124,0.25); color: var(--esc-pink); }

/* -- Sidebar Eurovision icon: gray by default, gradient when active -- */
.hub-app-btn[data-app="sheet"] svg path { fill: var(--text-muted); transition: fill var(--transition); }
.hub-app-btn[data-app="sheet"]:hover svg path { fill: var(--text-secondary); }
.hub-app-btn[data-app="sheet"].active svg path { fill: url(#escNavGrad); }

/* -- Leaderboard rank icons -- */
.esc-lb-rank {
    font-size: 1rem;
    min-width: 22px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
}
.esc-rank-gold   { color: #FFD700; }
.esc-rank-silver { color: #C0C0C0; }
.esc-rank-bronze { color: #CD7F32; }
.esc-rank-num { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }

/* -- Member photo avatar -- */
.esc-member-avatar-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.esc-member--me .esc-member-avatar-img { border-color: var(--esc-blue, #009FE3); }

/* -- Hide FAB on Eurovision tab -- */
body[data-hub-app="sheet"] .ws-fab { display: none !important; }

/* -- Flag images -- */
.esc-flag-img {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
    display: block;
    border: 1px solid rgba(255,255,255,0.08);
}
.esc-lb-flag { display: flex; align-items: center; }
.esc-lb-flag .esc-flag-img { width: 22px; height: 16px; }

/* -- Mobile optimizations -- */
@media (max-width: 768px) {
    /* Compact header on mobile */
    .esc-header {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }
    .esc-logo-title { font-size: 0.88rem; }
    .esc-logo-sub   { display: none; }
    .esc-logo-svg   { width: 22px; height: 22px; }
    .esc-name-input { width: 80px; font-size: 0.75rem; }

    /* Room badge wrap */
    .esc-room-badge { font-size: 0.6rem; padding: 1px 6px; }

    /* Tab bar bigger touch targets */
    .esc-tab { height: 38px; padding: 0 0.75rem; font-size: 0.75rem; }

    /* Progress */
    .esc-progress-wrap { padding: 0.4rem 0.75rem; }

    /* Grid layout stacked */
    .esc-layout { grid-template-columns: 1fr; }
    .esc-grid-wrap { padding: 0.75rem; border-right: none; }

    /* Compact country cards */
    .esc-country-card { padding: 0.45rem 0.6rem; }
    .esc-country-info { margin-bottom: 0.35rem; }
    .esc-country-name { font-size: 0.78rem; }
    .esc-flag-img { width: 18px; height: 13px; }

    /* Point buttons � 10 across on phone */
    .esc-pt-row { gap: 3px; flex-wrap: nowrap; }
    .esc-pt-btn { width: calc((100% - 27px) / 10); min-width: 22px; height: 28px; font-size: 0.65rem; border-radius: 3px; }

    /* Leaderboard: hidden by default on mobile, shown as a full tab */
    .esc-leaderboard-wrap { display: none; }
    .esc-layout--lb-tab .esc-grid-wrap { display: none; }
    .esc-layout--lb-tab .esc-leaderboard-wrap {
        display: flex;
        flex: 1;
        max-height: none;
        padding: 0.75rem;
        background: var(--bg-primary);
        border-top: none;
    }
    .esc-lb-row { padding: 0.3rem 0.4rem; gap: 0.35rem; }
    .esc-lb-name { font-size: 0.7rem; }
    .esc-lb-pts  { font-size: 0.72rem; min-width: 20px; }
    .esc-lb-bar-wrap { width: 28px; }

    /* Modal full width */
    .esc-modal { width: 95vw; padding: 1.1rem; }

    /* Members bar compact */
    .esc-members-bar { padding: 0.35rem 0.75rem; }
    .esc-member { padding: 0.25rem 0.5rem; }
    .esc-member-avatar, .esc-member-avatar-img { width: 22px; height: 22px; font-size: 0.6rem; }
    .esc-member-name { font-size: 0.65rem; }
    .esc-member-done { font-size: 0.55rem; }
}

@media (max-width: 400px) {
    .esc-pt-btn { height: 25px; font-size: 0.6rem; }
    .esc-header-right { gap: 0.35rem; }
    .esc-btn { padding: 0.3rem 0.6rem; font-size: 0.72rem; }
}

/* -- Mobile scroll fix: full-column scroll instead of clipped panels -- */
@media (max-width: 768px) {
    .esc-layout {
        overflow-y: auto;
        overflow-x: hidden;
        height: auto;
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }
    /* Let grid flow to natural height, no clipping */
    .esc-grid-wrap { overflow-y: visible; flex-shrink: 0; }
    /* Leaderboard tab: scrollable within the flex container */
    .esc-layout--lb-tab .esc-leaderboard-wrap { overflow-y: auto; flex-shrink: 1; }
}

/* ==================== ANIMATION STUDIO ==================== */

#section-animation { overflow: hidden; }

.anim-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-dark);
    overflow: hidden;
}

/* ── Toolbar ── */
.anim-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
    flex-wrap: wrap;
    min-height: 46px;
}

.anim-toolbar-left,
.anim-toolbar-center,
.anim-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.anim-toolbar-left  { flex: 1; }
.anim-toolbar-center { justify-content: center; flex: 0 0 auto; }
.anim-toolbar-right  { flex: 1; justify-content: flex-end; }

.anim-toolbar-sep {
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 0.2rem;
}

.anim-scene-counter {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    margin-right: 0.25rem;
}

.anim-fps-wrap {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.5rem;
}

.anim-fps-label {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.anim-fps-input {
    width: 44px;
    padding: 0.2rem 0.35rem;
    font-size: 0.78rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    text-align: center;
    -moz-appearance: textfield;
}
.anim-fps-input::-webkit-outer-spin-button,
.anim-fps-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.anim-play-btn {
    background: var(--accent-dim2) !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    border-radius: var(--radius) !important;
    width: 30px !important;
    height: 30px !important;
}
.anim-play-btn:hover { background: var(--accent) !important; color: #fff !important; }

/* Drawing tools */
.anim-tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}
.anim-tool-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.anim-tool-btn.active {
    background: var(--accent-dim2);
    border-color: var(--accent);
    color: var(--accent);
}

.anim-color-input {
    width: 28px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    cursor: pointer;
}
.anim-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.anim-color-input::-webkit-color-swatch { border: none; border-radius: 2px; }

.anim-size-wrap {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.anim-size-slider {
    width: 70px;
    height: 4px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* ── Stage ── */
.anim-stage-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #0d0d0d;
    padding: 0.75rem;
    min-height: 0;
}

.anim-stage {
    position: relative;
    width: 100%;
    max-width: min(100%, calc((100vh - 180px) * 16/9));
    aspect-ratio: 16/9;
    background: #111;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    cursor: crosshair;
    box-shadow: 0 4px 24px rgba(0,0,0,.5);
}

.anim-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

.anim-canvas--onion {
    pointer-events: none;
    z-index: 1;
}

#anim-draw-canvas {
    z-index: 2;
}

.anim-cutout-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    /* scale cutout coords (set as px in CANVAS space) to CSS space */
    --canvas-w: 960;
    --canvas-h: 540;
}

/* ── Cutout items ── */
.anim-cutout {
    position: absolute;
    pointer-events: all;
    cursor: move;
    user-select: none;
    transform-origin: center center;
    /* Convert canvas-space coords to CSS: using relative % of canvas size */
}

.anim-cutout img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    border: 1px dashed rgba(199,114,254,.4);
    border-radius: 2px;
}

.anim-cutout:hover img {
    border-color: var(--accent);
}

.anim-cutout.dragging { opacity: 0.85; }

.anim-cutout-del {
    position: absolute;
    top: -8px; right: -8px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--danger);
    border: none;
    color: #fff;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 0;
}
.anim-cutout:hover .anim-cutout-del { display: flex; }

.anim-cutout-resize {
    position: absolute;
    bottom: -5px; right: -5px;
    width: 14px; height: 14px;
    background: var(--accent);
    border-radius: 2px;
    cursor: se-resize;
    opacity: 0;
    z-index: 10;
}
.anim-cutout:hover .anim-cutout-resize { opacity: 1; }

/* Empty state overlay */
.anim-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    pointer-events: none;
    z-index: 0;
}

.anim-empty.hidden { display: none; }

/* ── Timeline ── */
.anim-timeline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
    overflow-x: hidden;
    min-height: 80px;
}

.anim-timeline-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    flex-shrink: 0;
}

.anim-frames {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
    flex: 1;
    padding: 0.25rem 0;
    scrollbar-width: thin;
}

.anim-frame {
    flex-shrink: 0;
    width: 96px;
    height: 54px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #111;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition);
}

.anim-frame:hover { border-color: var(--border-hover); }

.anim-frame.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.anim-frame-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.anim-frame-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.anim-frame-num {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 0.65rem;
    color: rgba(255,255,255,.45);
    line-height: 1;
}

/* ── Cutout Picker Modal ── */
.anim-cutout-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.6rem;
    max-height: 340px;
    overflow-y: auto;
    padding: 0.25rem;
}

.anim-cpick-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    cursor: pointer;
    transition: var(--transition);
    overflow: hidden;
}

.anim-cpick-item:hover {
    border-color: var(--accent);
    background: var(--accent-dim);
}

.anim-cpick-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #111;
}

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

.anim-cpick-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    padding: 0.3rem 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.anim-cpick-empty {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    padding: 2rem;
}

/* ── Project form: tab checkboxes ── */
.proj-tabs-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.25rem;
}

.proj-tab-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.proj-tab-check input[type="checkbox"] {
    accent-color: var(--accent);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.proj-tab-check span { color: var(--text-primary); }

/* ==================== SCENE LIBRARY ==================== */

.anim-library {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.anim-lib-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.anim-lib-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Infinite-ish scrollable graph canvas */
.anim-lib-canvas {
    flex: 1;
    position: relative;
    overflow: auto;
    min-height: 0;
    background: radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0) 0 0 / 24px 24px;
}

.anim-connections-svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    min-width: 2400px;
    min-height: 1200px;
    pointer-events: none;
    overflow: visible;
    z-index: 0;
}

.anim-conn-path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    opacity: 0.55;
}

.anim-conn-dot {
    fill: var(--accent);
    opacity: 0.75;
}

/* Delete button overlay layer */
.anim-conn-dels {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    min-width: 2400px;
    min-height: 1200px;
    pointer-events: none;
    z-index: 2;
}

.anim-conn-del-btn {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    pointer-events: all;
    opacity: 0;
    transition: opacity 0.15s;
}

.anim-lib-canvas:hover .anim-conn-del-btn { opacity: 0.8; }
.anim-conn-del-btn:hover { opacity: 1 !important; background: var(--accent); color: #fff; }

/* Scene cards container */
.anim-scene-cards {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    min-width: 2400px;
    min-height: 1200px;
    z-index: 1;
}

/* Individual scene card */
.anim-scene-card {
    position: absolute;
    width: 160px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.anim-scene-card:hover { border-color: var(--border-hover); }

.anim-scene-card.anim-card-connecting {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(199,114,254,.3);
}

.anim-scene-card.anim-card-connectable {
    border-color: rgba(199,114,254,.45);
    cursor: cell;
}

.anim-card-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    background: #0d0d0d;
}

.anim-card-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
}

.anim-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.28rem 0.4rem;
    gap: 0.25rem;
    border-top: 1px solid var(--border);
}

.anim-card-name {
    font-size: 0.74rem;
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: text;
}

.anim-card-actions {
    display: flex;
    gap: 0.15rem;
    flex-shrink: 0;
}

.anim-card-connect,
.anim-card-del {
    width: 20px; height: 20px;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: 0.12s;
}

.anim-card-connect:hover { color: var(--accent); background: var(--accent-dim); }
.anim-card-del:hover     { color: var(--danger); background: rgba(220,60,60,.12); }

/* Library empty state */
.anim-lib-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 10;
}

/* ==================== FRAME EDITOR ==================== */

.anim-editor {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Single-row editor toolbar (replaces old .anim-toolbar) */
.anim-editor-bar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
    flex-wrap: wrap;
    min-height: 44px;
}

.anim-clip-name-display {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anim-frame-counter {
    font-size: 0.76rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.anim-editor-sep {
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 0.15rem;
    flex-shrink: 0;
}

/* ── touch-action: none so Wacom pen events aren't swallowed ── */
#anim-draw-canvas {
    touch-action: none;
    z-index: 2;
    cursor: crosshair;
}

/* ==================== SEQUENCE PLAYER OVERLAY ==================== */

.anim-seq-overlay {
    position: absolute;
    inset: 0;
    background: #0a0a0a;
    z-index: 200;
    display: flex;
    flex-direction: column;
}

.anim-seq-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.anim-seq-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}

.anim-seq-counter {
    font-size: 0.74rem;
    color: var(--text-muted);
    flex: 1;
}

.anim-seq-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 1rem;
}

.anim-seq-stage canvas {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* Connection arrow + order badge */
.anim-conn-arrow {
    fill: var(--accent);
    opacity: 0.75;
}

.anim-conn-badge-bg {
    fill: var(--bg-card);
    stroke: var(--accent);
    stroke-width: 1.5;
}

.anim-conn-badge-num {
    fill: var(--accent);
    font-size: 9px;
    font-weight: 700;
    font-family: monospace;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

/* Dim cards that are not part of any connection */
.anim-scene-card.anim-card-isolated {
    opacity: 0.45;
}

/* ============================================================
   CONCEPT ART STUDIO
   ============================================================ */

.concept-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ── Gallery ── */
.concept-gallery {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.concept-gallery-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.concept-gallery-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 4px;
}

.concept-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    align-content: flex-start;
}

.concept-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ── Gallery cards ── */
.concept-card {
    width: 200px;
    border-radius: 7px;
    background: var(--surface-2, #1e1e28);
    border: 2px solid transparent;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.1s;
    flex-shrink: 0;
}
.concept-card:hover {
    border-color: var(--accent, #c772fe);
    transform: translateY(-2px);
}

.concept-card-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: #0e0e14;
}
.concept-card-thumb-empty {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0e0e14;
}

/* Gallery card: reference image as CSS background, strokes PNG overlaid */
.concept-card-thumb-ref {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: #0e0e14;
}

.concept-card-stroke-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    display: block;
}

.concept-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    gap: 6px;
}

.concept-card-name {
    font-size: 0.75rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.concept-card-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
}
.concept-card:hover .concept-card-actions { opacity: 1; }

.concept-card-del {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 3px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.1s, background 0.1s;
}
.concept-card-del:hover { color: #ff6b6b; background: rgba(255,107,107,0.12); }

/* ── Editor shell ── */
.concept-editor {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.concept-editor-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.concept-name-display {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 4px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.concept-editor-sep {
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 2px;
    flex-shrink: 0;
}

.concept-tool-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-muted);
    padding: 4px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.concept-tool-btn:hover { color: var(--text-primary); background: var(--surface-2); }
.concept-tool-btn.active {
    color: var(--accent, #c772fe);
    border-color: rgba(199,114,254,0.35);
    background: rgba(199,114,254,0.08);
}

.concept-opacity-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Drawing stage ── */
.concept-stage-wrap {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-1, #13131a);
    padding: 16px;
}

.concept-stage {
    position: relative;
    width: 100%;
    max-width: 960px;
    aspect-ratio: 16 / 9;
    background: #0a0a10;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}

.concept-ref-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.15s;
}

.concept-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
}

/* ── New concept modal image picker ── */
.concept-img-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 2px 8px;
    margin-bottom: 4px;
}

.concept-cpick-item {
    width: 110px;
    border-radius: 5px;
    border: 2px solid transparent;
    cursor: pointer;
    overflow: hidden;
    background: var(--surface-2, #1e1e28);
    transition: border-color 0.12s;
    flex-shrink: 0;
}
.concept-cpick-item:hover { border-color: var(--accent, #c772fe); }
.concept-cpick-item.concept-cpick-selected {
    border-color: var(--accent, #c772fe);
    background: rgba(199,114,254,0.08);
}

.concept-cpick-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0e0e14;
    display: flex;
    align-items: center;
    justify-content: center;
}
.concept-cpick-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.concept-cpick-blank {
    background: #0e0e14;
}

.concept-cpick-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    padding: 4px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.concept-cpick-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 6px 0;
    width: 100%;
}

/* -----------------------------------------------------------
   ANALYTICS  (admin.html — site visit stats)
   ----------------------------------------------------------- */

#app-analytics {
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.an-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.an-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.an-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── stat boxes ── */
.an-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 600px) {
    .an-stats { grid-template-columns: repeat(2, 1fr); }
}

.an-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    text-align: center;
}

.an-stat--accent {
    border-color: var(--accent);
    background: var(--accent-dim);
}

.an-stat-num {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 4px;
}

.an-stat--accent .an-stat-num { color: var(--accent); }

.an-stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── section wrapper ── */
.an-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.an-section-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

/* ── 7-day bar chart ── */
.an-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 100px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 12px 0;
}

.an-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    gap: 4px;
}

.an-bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.an-bar {
    width: 100%;
    min-height: 2px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
    opacity: 0.75;
    transition: opacity 0.15s;
}

.an-bar:hover { opacity: 1; }

.an-bar-count {
    font-size: 0.62rem;
    color: var(--text-muted);
    min-height: 14px;
    text-align: center;
}

.an-bar-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    padding-bottom: 8px;
    text-align: center;
}

/* ── browser / OS / device breakdown ── */
.an-breakdown-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.an-breakdown-col {
    flex: 1;
    min-width: 120px;
}

.an-pills {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.an-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.78rem;
}

.an-pill-name { color: var(--text-secondary); }
.an-pill-cnt  { font-weight: 600; color: var(--accent); margin-left: 8px; }

/* ── top referrers ── */
.an-refs {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.an-ref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.8rem;
}

.an-ref-host {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.an-ref-cnt {
    font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
    margin-left: 12px;
}

/* ── recent visits ── */
.an-recent {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 0.78rem;
}

.an-recent-hdr,
.an-recent-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 80px 80px 70px 24px;
    gap: 8px;
    padding: 7px 12px;
    align-items: center;
}

.an-recent-hdr {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.an-recent-row {
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}

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

.an-recent-time    { color: var(--text-muted); font-size: 0.72rem; white-space: nowrap; }
.an-recent-ref     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-recent-browser { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-recent-device  { color: var(--text-muted); text-transform: capitalize; }
.an-recent-loc     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; }
.an-recent-ip      { font-family: monospace; font-size: 0.71rem; color: var(--text-muted); white-space: nowrap; user-select: all; }

/* Wider grid for geo columns — wraps in overflow scroll on small screens */
.an-recent--geo {
    overflow-x: auto;
}
.an-recent--geo .an-recent-hdr,
.an-recent--geo .an-recent-row {
    grid-template-columns: 140px 120px 130px 65px 170px 120px 1fr;
    min-width: 780px;
}

.an-del-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 2px 4px;
    border-radius: 3px;
    line-height: 1;
    justify-self: end;
    transition: color var(--transition), background var(--transition);
}
.an-del-btn:hover { color: var(--danger); background: rgba(224,85,85,0.12); }

/* ═══════════════════════════════════════════════════════════
   ACCOUNT SWITCHER  (avatar popup enhancements)
   ═══════════════════════════════════════════════════════════ */

.avatar-popup {
    min-width: 210px;
    max-width: 260px;
}

.avatar-popup-email {
    font-size: 0.68rem;
    color: var(--text-muted);
    padding: 0 12px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar-popup-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.avatar-popup-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.78rem;
    padding: 7px 12px;
    cursor: pointer;
    text-align: left;
    border-radius: 0;
    transition: background var(--transition), color var(--transition);
}
.avatar-popup-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.avatar-popup-btn.avatar-popup-signout { color: var(--danger); }
.avatar-popup-btn.avatar-popup-signout:hover { background: rgba(224,85,85,0.1); }

.avatar-popup-switch-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 6px 12px 3px;
}

.avatar-popup-accounts {
    display: flex;
    flex-direction: column;
    max-height: 140px;
    overflow-y: auto;
}

.avatar-popup-account-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    text-align: left;
    border-radius: 0;
    transition: background var(--transition);
    color: var(--text-primary);
}
.avatar-popup-account-item:hover { background: var(--bg-hover); }

.avatar-mini {
    width: 24px;
    height: 24px;
    border-radius: var(--radius);
    object-fit: cover;
    flex-shrink: 0;
}
.avatar-mini--init {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
}

.account-item-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.account-item-name {
    font-size: 0.75rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.account-item-email {
    font-size: 0.66rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════
   ADMIN PANEL  (app-admin-users hub section)
   ═══════════════════════════════════════════════════════════ */

#app-admin-users.active { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

.adm-panel-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* (inner-tabs removed — admin panel is now a single flat panel) */

/* Toolbar */
.adm-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.adm-toolbar-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-right: 4px;
}

.adm-search-input {
    flex: 1;
    min-width: 160px;
    max-width: 280px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.78rem;
    outline: none;
    transition: border-color var(--transition);
}
.adm-search-input:focus { border-color: var(--accent); }

/* Service config section */
.adm-svc-config {
    padding: 10px 16px 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
    max-height: 220px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.adm-svc-config > .adm-toolbar-title { display: block; margin-bottom: 8px; flex-shrink: 0; }
.adm-svc-body { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-height: 0; }
.adm-svc-table-wrap { overflow-y: auto; flex: 1; min-height: 0; }
.adm-svc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    min-width: 420px;
}
.adm-svc-table thead th {
    padding: 4px 8px;
    text-align: left;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 1;
}
.adm-svc-table td { padding: 3px 8px; vertical-align: middle; border-bottom: 1px solid var(--border-subtle, var(--border)); }
.adm-svc-name-cell { color: var(--text-primary); white-space: nowrap; font-weight: 500; }
.adm-svc-def-cell { color: var(--text-muted); font-family: monospace; font-size: 0.72rem; }
.adm-svc-footer { padding: 6px 0 8px; flex-shrink: 0; }
.adm-svc-input {
    width: 100%;
    padding: 3px 7px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-family: monospace;
    outline: none;
    transition: border-color var(--transition);
}
.adm-svc-input:focus { border-color: var(--accent); }

/* Scrollable content areas */
.adm-users-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 16px;
}

/* Table wrapper */
.adm-table-wrap {
    overflow-x: auto;
    padding: 0 16px;
}

.adm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    min-width: 600px;
}

.adm-table thead th {
    padding: 8px 10px;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.adm-table tbody tr { border-bottom: 1px solid var(--border); transition: background var(--transition); }
.adm-table tbody tr:last-child { border-bottom: none; }
.adm-table tbody tr:hover { background: var(--bg-hover); }

.adm-table td { padding: 8px 10px; vertical-align: middle; }

/* Column widths */
.adm-th-user   { width: 100%; min-width: 200px; }
.adm-th-num    { width: 36px; text-align: center; }
.adm-th-features { text-align: center; }

/* Feature header cells */
.adm-feat-hdr { text-align: center; padding: 6px 6px; font-size: 0.9rem; }
.adm-feat-label-row th { font-size: 0.6rem; color: var(--text-muted); text-transform: none; letter-spacing: 0; font-weight: 500; }
.adm-feat-label-row .adm-feat-hdr { padding: 2px 6px 6px; }

/* User cell */
.adm-user-cell { min-width: 200px; }
.adm-user-id   { display: flex; align-items: center; gap: 10px; }
.adm-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.adm-avatar--init {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}
.adm-user-name  { font-size: 0.8rem; color: var(--text-primary); font-weight: 500; }
.adm-user-email { font-size: 0.68rem; color: var(--text-muted); margin-top: 1px; }

/* Stat cells */
.adm-num-cell { text-align: center; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.adm-links-count { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; color: var(--accent); }
.adm-links-count:hover { text-decoration-style: solid; }

/* Feature flag toggle */
.adm-feat-cell { text-align: center; }
.adm-toggle    { display: inline-flex; align-items: center; cursor: pointer; }
.adm-toggle input { display: none; }

.adm-toggle-track {
    position: relative;
    width: 30px;
    height: 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: background var(--transition), border-color var(--transition);
}
.adm-toggle input:checked + .adm-toggle-track {
    background: var(--accent);
    border-color: var(--accent);
}
.adm-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: left var(--transition), background var(--transition);
}
.adm-toggle input:checked + .adm-toggle-track .adm-toggle-thumb {
    left: 16px;
    background: #fff;
}

/* Links browser (used in both admin panel overlay and link table) */
.adm-links-table .adm-th-type  { width: 100px; }
.adm-links-table .adm-th-url   { width: 240px; }
.adm-links-table .adm-th-del   { width: 32px; }

.adm-link-title { font-size: 0.78rem; color: var(--text-primary); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-link-url   { font-size: 0.72rem; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-link-href  { color: var(--text-muted); text-decoration: none; }
.adm-link-href:hover { color: var(--accent); text-decoration: underline; }

.adm-type-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-muted);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.adm-del-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color var(--transition), background var(--transition);
}
.adm-del-btn:hover { color: var(--danger); background: rgba(224,85,85,0.12); }

/* ── Video-group / image-group form rows ── */
.link-vg-list { display: flex; flex-direction: column; gap: 6px; }
.link-vg-row  { display: flex; gap: 6px; align-items: center; }
/* Video group: URL + thumb side by side */
.link-vg-url   { flex: 2; min-width: 0; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-input); color: var(--text-primary); font-size: 0.78rem; outline: none; }
.link-vg-thumb { flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-input); color: var(--text-primary); font-size: 0.78rem; outline: none; }
.link-vg-url:focus, .link-vg-thumb:focus { border-color: var(--accent); }
/* Image group: URL + caption stacked in a wrapper */
.link-vg-fields { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.link-ig-url, .link-ig-name { width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-input); color: var(--text-primary); font-size: 0.78rem; outline: none; box-sizing: border-box; }
.link-ig-url:focus, .link-ig-name:focus { border-color: var(--accent); }
.link-vg-remove { flex-shrink: 0; color: var(--text-muted); }

/* ── Account badge (provider label in account switcher) ── */
.account-item-badge {
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--bg-input);
    color: var(--text-muted);
    border: 1px solid var(--border);
    margin-left: auto;
    flex-shrink: 0;
}

/* ── DiceBear style picker ── */
.links-dicebear-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 8px;
}
.dicebear-style-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 6px 8px;
    background: var(--bg-input);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s;
    color: var(--text-secondary);
    font-size: 0.7rem;
}
.dicebear-style-btn:hover { border-color: var(--border-hover); }
.dicebear-style-btn.active { border-color: var(--accent); color: var(--accent); }
.dicebear-style-btn img { border-radius: 50%; background: var(--bg-secondary); }

/* ── Admin Links bar (injected at top of #app-links) ── */
.adm-links-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 0.76rem;
    flex-shrink: 0;
}
.adm-links-bar-icon { font-size: 16px; opacity: .6; }
.adm-links-bar-label { color: var(--text-muted); white-space: nowrap; }
.adm-links-user-sel {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.76rem;
    cursor: pointer;
    min-width: 160px;
}
.adm-links-bar-info { font-size: 0.7rem; color: var(--text-muted); margin-left: 4px; }

/* (admin links overlay removed — Link Gallery now renders in full) */
.an-del-btn:disabled { opacity: 0.3; cursor: default; }

/* =================================================================
   PORTFOLIO FLAVOR — matches maze-development.com palette, flat
   geometry and interaction style. Appended last so it overrides.
   ================================================================= */

/* paper grain — subtle dotted texture layered over the dark base */
body {
    background-image: radial-gradient(rgba(236, 232, 223, 0.022) 1px, transparent 1px);
    background-size: 3px 3px;
}

/* flat buttons with the portfolio's hover-lift + invert */
.ws-btn {
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform 0.12s ease;
}
.ws-btn:hover { transform: translateY(-1px); }
.ws-btn-accent { color: #0a0008; }

/* ghost button inverts to ink-on-paper on hover, like the portfolio */
.ws-btn-ghost:hover {
    background: var(--text-primary);
    color: var(--bg-dark);
    border-color: var(--text-primary);
}

/* =================================================================
   FLAT / SHARP — kill the bevels for the portfolio's editorial,
   hairline-bordered look. Everything square except true circles
   (avatars, status dots, the accent dot).
   ================================================================= */

/* zero out every rounded surface: cards, inputs, badges, buttons,
   tabs, menus, chips, thumbnails — the bulk of the workspace UI */
.ws-btn, .ws-btn-sm, .ws-icon-btn, .ws-new-project-btn,
.ws-type-badge, .ws-status-badge,
.overview-card, .overview-github-card,
input, textarea, select, button,
[class*="-card"], [class*="-badge"], [class*="-chip"],
[class*="-input"], [class*="-btn"], [class*="-tab"],
[class*="-menu"], [class*="-popup"], [class*="-thumb"],
[class*="-pill"], [class*="-tag"], [class*="-tile"] {
    border-radius: 0 !important;
}

/* but keep genuine circles round */
.ws-project-item-dot, .github-lang-dot,
[class*="avatar"], [class*="-dot"], [class*="-circle"] {
    border-radius: 50% !important;
}

/* popup is a box, not a circle */
.user-avatar-wrap, [class*="avatar-popup"] {
    border-radius: 0 !important;
}

/* hairline section dividers + sharp accent-tinted card hover */
.overview-card {
    transition: border-color var(--transition), background var(--transition);
}
.overview-card:hover {
    border-color: var(--border-hover);
    background: color-mix(in oklab, var(--accent) 4%, var(--bg-card));
}

/* flatten card/panel drop-shadows (portfolio uses none); floating
   menus keep a crisp hairline border instead of a soft glow */
.overview-card, [class*="-card"] { box-shadow: none !important; }