/* Hummingbird — Main Stylesheet */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    font-size: var(--font-size-base);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.6;
    min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* ── Layout ── */
.layout {
    display: flex;
    min-height: 100vh;
}

.layout-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-left: var(--sidebar-w);
}

/* ── Sidebar ── */
.sidebar {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    color: var(--sidebar-ink);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-collapse-btn {
    background: none;
    border: none;
    color: var(--sidebar-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    line-height: 0;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity var(--duration) var(--ease), color var(--duration) var(--ease);
}

.sidebar-collapse-btn:hover { opacity: 1; color: var(--sidebar-text); }

.sidebar-open-btn {
    display: none;
    background: none;
    border: 1px solid var(--border);
    color: var(--ink-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-md);
    line-height: 0;
    margin-right: var(--space-sm);
    flex-shrink: 0;
}

.sidebar-open-btn:hover { color: var(--accent); border-color: var(--accent); }

.sidebar-collapsed .sidebar-open-btn { display: flex; }

.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
}

.sidebar-collapsed .layout-main {
    margin-left: 0;
    transition: margin-left 0.25s ease;
}

.layout-main {
    transition: margin-left 0.25s ease;
}

.sidebar-brand-row {
    display: flex;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
}

.sidebar-brand-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.sidebar-brand-icon-img {
    width: 36px; height: 36px;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.sidebar-brand-name {
    font-weight: 700;
    font-size: var(--font-size-base);
    line-height: 1.2;
}

.sidebar-brand-sub {
    font-size: var(--font-size-xs);
    color: var(--sidebar-ink-muted);
}

.sidebar-section {
    padding: var(--space-md) var(--space-lg) var(--space-sm);
}

.sidebar-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--sidebar-ink-muted);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
}

.sidebar-section-label {
    padding: 0 var(--space-sm);
    margin-top: var(--space-sm);
}

.sidebar-toggle {
    display: flex;
    gap: 2px;
    background: rgba(255,255,255,0.08);
    padding: 3px;
    border-radius: var(--radius-md);
}

.sidebar-toggle-btn {
    flex: 1;
    padding: 5px 8px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    font-family: var(--font);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--sidebar-ink-muted);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    white-space: nowrap;
}

.sidebar-toggle-btn:hover { color: var(--sidebar-ink); }
.sidebar-toggle-btn.active {
    background: var(--accent);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.sidebar-nav {
    flex: 1;
    padding: var(--space-xs) var(--space-sm);
    overflow-y: auto;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px 12px;
    font-size: var(--font-size-sm);
    color: var(--sidebar-ink);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--duration) var(--ease);
    position: relative;
}

.sidebar-nav-item::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--sidebar-ink-muted);
    flex-shrink: 0;
}

.sidebar-nav-item:hover {
    background: var(--sidebar-hover);
    text-decoration: none;
    color: #fff;
}

.sidebar-nav-item.active {
    background: var(--sidebar-active);
    color: var(--accent);
}

.sidebar-nav-item.active::before {
    background: var(--accent);
}

.sidebar-nav-sub { padding-left: 28px; }
.sidebar-nav-sub::before { width: 4px; height: 4px; }

/* Sidebar groups */
.sidebar-group { margin-bottom: 2px; }

.sidebar-group-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: 8px 12px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-family: var(--font);
    color: var(--sidebar-ink);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--duration) var(--ease);
}

.sidebar-group-btn:hover { background: var(--sidebar-hover); }

.sidebar-group-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sidebar-group-arrow {
    margin-left: auto;
    transition: transform var(--duration) var(--ease);
    opacity: 0.5;
}

.sidebar-group.open .sidebar-group-arrow {
    transform: rotate(90deg);
}

.sidebar-expand-controls {
    display: flex;
    gap: 2px;
}

.sidebar-expand-btn {
    background: none;
    border: none;
    color: var(--sidebar-muted);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    line-height: 0;
    opacity: 0.6;
    transition: opacity var(--duration) var(--ease), color var(--duration) var(--ease);
}

.sidebar-expand-btn:hover {
    opacity: 1;
    color: var(--sidebar-text);
}

/* Drag and drop */
.sidebar-nav-sub[draggable="true"] {
    cursor: grab;
}

.sidebar-nav-sub[draggable="true"]:active {
    cursor: grabbing;
}

.sidebar-nav-sub.dragging {
    opacity: 0.4;
}

.sidebar-group.drag-over > .sidebar-group-btn {
    background: var(--sidebar-active);
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

.sidebar-group-items.drag-over {
    background: rgba(59,130,246,0.08);
    border-radius: var(--radius-sm);
}

.sidebar-group-items {
    padding: 2px 0 4px;
}

/* Sidebar user */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--sidebar-border);
    margin-top: auto;
}

.sidebar-user-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 700;
    flex-shrink: 0;
}

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

.sidebar-user-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.3;
}

.sidebar-user-role {
    font-size: var(--font-size-xs);
    color: var(--sidebar-ink-muted);
}

.sidebar-user-menu {
    color: var(--sidebar-ink-muted);
    transition: color var(--duration) var(--ease);
}

.sidebar-user-menu:hover { color: var(--sidebar-ink); text-decoration: none; }

.sidebar-mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--ink-secondary);
    cursor: pointer;
    padding: var(--space-xs);
}

/* ── Top Bar ── */
.top-bar {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: 0 var(--space-xl);
    height: var(--topbar-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
}

.top-bar-search {
    flex: 1;
    max-width: 560px;
}

.search-box {
    position: relative;
}

.search-box input {
    width: 100%;
    padding: 0.55rem 1rem 0.55rem 2.5rem;
    font-family: var(--font);
    font-size: var(--font-size-sm);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--ink);
    transition: border-color var(--duration) var(--ease);
    outline: none;
}

.search-box input:focus { border-color: var(--accent); }

.search-box svg {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--ink-muted);
    pointer-events: none;
}

/* View switch (Summary / Detailed) */
.view-switch {
    display: flex;
    gap: var(--space-xs);
}

.view-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-family: var(--font);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--ink-secondary);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    white-space: nowrap;
}

.view-switch-btn:hover { border-color: var(--accent); color: var(--accent); }

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

.top-bar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.notification-btn {
    position: relative;
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-secondary);
    cursor: pointer;
    transition: background var(--duration) var(--ease);
}

.notification-btn:hover { background: var(--paper); }

/* ── Content ── */
.content {
    flex: 1;
    padding: var(--space-xl);
    max-width: 1200px;
    width: 100%;
}

/* ── Hero Banner ── */
.hero-banner {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-2xl);
    margin-bottom: var(--space-xl);
}

.hero-icon {
    flex-shrink: 0;
    width: 80px; height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-light);
    border-radius: var(--radius-lg);
}

.hero-text h1 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.hero-text p {
    color: var(--ink-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    max-width: 560px;
}

/* ── Stats ── */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.stat-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.stat-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-teal { background: #ccfbf1; color: #0d9488; }
.stat-icon-amber { background: #fef3c7; color: #d97706; }
.stat-icon-gold { background: #fef9c3; color: #ca8a04; }
.stat-icon-blue { background: #dbeafe; color: #3b82f6; }

.stat-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--ink-secondary);
    margin-bottom: 2px;
}

.stat-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
}

.stat-sub {
    font-size: var(--font-size-xs);
    color: var(--ink-muted);
    margin-top: 2px;
}

/* ── Info Banner ── */
.info-banner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
    margin-bottom: var(--space-xl);
}

.info-banner-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-banner-text {
    flex: 1;
}

.info-banner-text strong {
    display: block;
    font-size: var(--font-size-sm);
    margin-bottom: 2px;
}

.info-banner-text span {
    font-size: var(--font-size-xs);
    color: var(--ink-secondary);
    line-height: 1.5;
}

.info-banner-graphic {
    flex-shrink: 0;
    opacity: 0.6;
}

/* ── Summary Grid ── */
.summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.section-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

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

.section-card-header h2 {
    font-size: var(--font-size-base);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.section-card-link {
    display: block;
    text-align: left;
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border-light);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

/* ── Activity List ── */
.activity-list {
    padding: 0;
}

.activity-row {
    display: grid;
    grid-template-columns: 36px 1fr auto auto;
    gap: var(--space-sm);
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-light);
    font-size: var(--font-size-sm);
}

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

.activity-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.activity-name { font-weight: 600; }

.activity-action {
    font-size: var(--font-size-xs);
    color: var(--ink-muted);
}

.activity-user {
    font-size: var(--font-size-xs);
    color: var(--ink-secondary);
}

.activity-time {
    font-size: var(--font-size-xs);
    color: var(--ink-muted);
    text-align: right;
}

.activity-empty {
    padding: var(--space-xl);
    text-align: center;
    color: var(--ink-muted);
    font-size: var(--font-size-sm);
}

/* ── Favorites List ── */
.favorites-list {
    padding: 0;
}

.favorite-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background var(--duration) var(--ease);
}

.favorite-item:last-child { border-bottom: none; }
.favorite-item:hover { background: var(--surface-hover); }

.favorite-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

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

.favorite-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.favorite-category {
    font-size: var(--font-size-xs);
    color: var(--ink-muted);
}

.favorite-star {
    color: #eab308;
    flex-shrink: 0;
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.5rem 1rem;
    font-family: var(--font);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    text-decoration: none;
    line-height: 1.4;
}

.btn:hover { text-decoration: none; }

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

.btn-emerald { background: var(--emerald); color: #fff; }
.btn-emerald:hover { background: #047857; color: #fff; }

.btn-ghost { background: transparent; color: var(--ink-secondary); }
.btn-ghost:hover { background: var(--paper); color: var(--ink); }

.btn-outline { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.btn-outline:hover { background: var(--accent-light); }

.btn-sm { padding: 0.3rem 0.7rem; font-size: var(--font-size-xs); }
.btn-lg { padding: 0.7rem 1.5rem; font-size: var(--font-size-base); }

.btn-icon {
    width: 36px; height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}

/* ── Cards ── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.card:hover { box-shadow: var(--shadow-card-hover); }
.card-clickable { cursor: pointer; }
.card-clickable:hover { transform: translateY(-2px); }

/* ── Detailed View Toolbar ── */
.detailed-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
}

.filter-tabs {
    display: flex;
    gap: 4px;
    background: var(--paper-warm);
    padding: 3px;
    border-radius: var(--radius-full);
}

.filter-tab {
    padding: 0.35rem 0.9rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    font-family: var(--font);
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--ink-secondary);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    white-space: nowrap;
}

.filter-tab:hover { color: var(--ink); }
.filter-tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.filter-tab[data-category="personal"].active { color: var(--cat-personal); }
.filter-tab[data-category="forte"].active { color: var(--cat-forte); }
.filter-tab[data-category="pioneer"].active { color: var(--cat-pioneer); }

.sort-select {
    padding: 0.45rem 0.8rem;
    font-family: var(--font);
    font-size: var(--font-size-xs);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink-secondary);
    cursor: pointer;
    outline: none;
}

.view-toggle {
    display: flex;
    gap: 2px;
    background: var(--paper-warm);
    padding: 3px;
    border-radius: var(--radius-md);
}

.view-btn {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.view-btn:hover { color: var(--ink); }
.view-btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ── App Grid ── */
.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-lg);
}

.app-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.app-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.app-card-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.app-card-icon-sm {
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.app-card-title { flex: 1; min-width: 0; }

.app-card-title h3 {
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 2px;
}

.app-card-cats { display: flex; gap: 4px; flex-wrap: wrap; }

.cat-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: var(--radius-full);
    line-height: 1.6;
}

.cat-badge[data-cat="personal"] { background: #dbeafe; color: var(--cat-personal); }
.cat-badge[data-cat="forte"] { background: #ede9fe; color: var(--cat-forte); }
.cat-badge[data-cat="pioneer"] { background: #fee2e2; color: var(--cat-pioneer); }

.app-card-summary {
    font-size: var(--font-size-sm);
    color: var(--ink-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.app-card-meta {
    display: flex;
    gap: var(--space-lg);
    font-size: var(--font-size-xs);
    color: var(--ink-muted);
}

.app-card-meta span { display: flex; align-items: center; gap: 4px; }

.status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.app-card-footer {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-light);
    margin-top: auto;
}

.app-card-footer .btn { font-size: var(--font-size-xs); }
.app-card-footer .btn-edit { margin-left: auto; padding: 4px 6px; color: var(--ink-muted); }
.app-card-footer .btn-edit:hover { color: var(--accent); }
.list-col-actions .btn-edit { padding: 4px 6px; color: var(--ink-muted); }
.list-col-actions .btn-edit:hover { color: var(--accent); }

.version-badge {
    font-size: var(--font-size-xs);
    color: var(--ink-muted);
    margin-left: auto;
    font-weight: 500;
}

/* ── App List View ── */
.app-list {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.list-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 0.6fr 0.8fr 140px;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--paper);
    border-bottom: 1px solid var(--border);
}

.list-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 0.6fr 0.8fr 140px;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    align-items: center;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background var(--duration) var(--ease);
}

.list-row:last-child { border-bottom: none; }
.list-row:hover { background: var(--paper); }

.list-col-name { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }

.list-app-name { display: flex; flex-direction: column; min-width: 0; }
.list-app-name strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-app-summary { font-size: var(--font-size-xs); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.list-col-cats { display: flex; gap: 4px; flex-wrap: wrap; }
.list-col-status { display: flex; align-items: center; gap: 5px; font-size: var(--font-size-xs); color: var(--ink-secondary); }
.list-col-version { font-size: var(--font-size-xs); color: var(--ink-muted); font-weight: 500; }
.list-col-updated { font-size: var(--font-size-xs); color: var(--ink-muted); }
.list-col-actions { display: flex; align-items: center; gap: var(--space-xs); justify-content: flex-end; }

.list-sort-col { cursor: pointer; user-select: none; transition: color var(--duration) var(--ease); }
.list-sort-col:hover { color: var(--ink); }
.list-sort-col.sort-active { color: var(--accent); }

/* ── Status / Tags ── */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    background: var(--paper);
    color: var(--ink-secondary);
}

.tag {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 1px 8px;
    border-radius: var(--radius-full);
    background: var(--paper);
    color: var(--ink-secondary);
    line-height: 1.6;
}

/* ── App Detail ── */
.detail-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    color: var(--ink-muted);
    margin-bottom: var(--space-lg);
}

.detail-back:hover { color: var(--accent); text-decoration: none; }

.detail-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.detail-icon {
    width: 64px; height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.detail-title h1 { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: 4px; }

.detail-title .detail-cats {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.detail-title .detail-meta-row {
    display: flex;
    gap: var(--space-lg);
    font-size: var(--font-size-sm);
    color: var(--ink-muted);
}

.detail-actions {
    margin-left: auto;
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.detail-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--border);
    margin-bottom: var(--space-xl);
}

.detail-tab {
    padding: 0.6rem 1.2rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-family: var(--font);
    color: var(--ink-secondary);
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--duration) var(--ease);
}

.detail-tab:hover { color: var(--ink); }
.detail-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.detail-section { margin-bottom: var(--space-xl); }
.detail-section h2 { font-size: var(--font-size-lg); font-weight: 700; margin-bottom: var(--space-md); }
.detail-section h3 { font-size: var(--font-size-base); font-weight: 600; margin-bottom: var(--space-sm); }

.meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-md);
}

.meta-item { display: flex; flex-direction: column; gap: 2px; }
.meta-item label { font-size: var(--font-size-xs); font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.meta-item span { font-size: var(--font-size-sm); color: var(--ink); }

/* Version Timeline */
.version-timeline { display: flex; flex-direction: column; gap: var(--space-md); }
.version-item { padding: var(--space-lg); border-left: 3px solid var(--border); position: relative; }
.version-item.current { border-left-color: var(--accent); }
.version-item::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--border); position: absolute; left: -6.5px; top: var(--space-lg); }
.version-item.current::before { background: var(--accent); }
.version-item h4 { font-size: var(--font-size-base); font-weight: 700; margin-bottom: 2px; }
.version-item .version-date { font-size: var(--font-size-xs); color: var(--ink-muted); margin-bottom: var(--space-sm); }
.version-item p { font-size: var(--font-size-sm); color: var(--ink-secondary); line-height: 1.5; }

/* Documents */
.doc-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.doc-item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-md); }
.doc-item-type { font-size: var(--font-size-xs); font-weight: 600; color: var(--ink-muted); text-transform: uppercase; background: var(--paper); padding: 2px 8px; border-radius: var(--radius-sm); }
.doc-item-title { font-size: var(--font-size-sm); font-weight: 600; }
.doc-item-notes { font-size: var(--font-size-xs); color: var(--ink-muted); margin-left: auto; }

/* ── Modal ── */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; align-items: center; justify-content: center; padding: var(--space-lg); }
.modal-overlay.open { display: flex; }
.modal { background: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 600px; max-height: 85vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg); border-bottom: 1px solid var(--border); }
.modal-header h2 { font-size: var(--font-size-lg); font-weight: 700; }
.modal-body { padding: var(--space-lg); }
.modal-footer { padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: var(--space-sm); }

/* ── Form ── */
.form-group { margin-bottom: var(--space-md); }
.form-group label { display: block; font-size: var(--font-size-sm); font-weight: 600; margin-bottom: 4px; color: var(--ink); }
.form-input, .form-select, .form-textarea { width: 100%; padding: 0.5rem 0.75rem; font-family: var(--font); font-size: var(--font-size-sm); border: 1.5px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); outline: none; transition: border-color var(--duration) var(--ease); }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); }
.form-textarea { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.form-check { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.form-check input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.form-check label { font-size: var(--font-size-sm); margin-bottom: 0; }
.form-group .form-radio-group { display: flex; gap: var(--space-sm); }
.form-group label.form-radio-card { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--duration) var(--ease); flex: 1; font-weight: 400; margin-bottom: 0; }
.form-group label.form-radio-card:hover { border-color: var(--ink-muted); }
.form-group label.form-radio-card:has(input:checked) { border-color: var(--accent); background: rgba(59,130,246,0.06); }
.form-radio-card input[type="radio"] { display: none; }
.form-radio-dot { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid; flex-shrink: 0; transition: all var(--duration) var(--ease); }
.form-group label.form-radio-card:has(input:checked) .form-radio-dot { background: currentColor; border-color: currentColor !important; box-shadow: inset 0 0 0 2px var(--surface); }
.form-radio-label { font-size: var(--font-size-sm); font-weight: 500; }

/* ── Login ── */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--paper); }
.login-card { background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-2xl); width: 100%; max-width: 400px; box-shadow: var(--shadow-lg); text-align: center; }
.login-card .brand-icon { margin: 0 auto var(--space-md); }
.login-card h1 { font-size: var(--font-size-xl); margin-bottom: 4px; }
.login-card .tagline { color: var(--ink-muted); font-size: var(--font-size-sm); margin-bottom: var(--space-xl); }
.login-card .form-group { text-align: left; }
.login-error { background: #fef2f2; color: var(--error); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); font-size: var(--font-size-sm); margin-bottom: var(--space-md); }

/* ── Empty State ── */
.empty-state { text-align: center; padding: var(--space-2xl); color: var(--ink-muted); }
.empty-state svg { margin: 0 auto var(--space-md); opacity: 0.4; }
.empty-state h3 { font-size: var(--font-size-lg); color: var(--ink-secondary); margin-bottom: var(--space-sm); }
.empty-state p { font-size: var(--font-size-sm); margin-bottom: var(--space-lg); }

/* ── Toast ── */
.toast-container { position: fixed; bottom: var(--space-lg); right: var(--space-lg); z-index: 300; display: flex; flex-direction: column; gap: var(--space-sm); }
.toast { background: var(--ink); color: #fff; padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-md); font-size: var(--font-size-sm); box-shadow: var(--shadow-lg); animation: toast-in 300ms var(--ease); }
.toast.success { background: var(--success); }
.toast.error { background: var(--error); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .summary-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 300ms var(--ease);
        z-index: 200;
    }
    .sidebar.open { transform: translateX(0); }
    .layout-main { margin-left: 0; }
    .sidebar-mobile-toggle { display: flex; }
    .top-bar { padding: 0 var(--space-md); gap: var(--space-sm); }
    .content { padding: var(--space-lg) var(--space-md); }
    .view-switch-btn span { display: none; }
    .hero-banner { flex-direction: column; text-align: center; padding: var(--space-lg); }
    .hero-icon { width: 60px; height: 60px; }
    .stats-row { grid-template-columns: 1fr; }
    .info-banner { flex-direction: column; text-align: center; }
    .info-banner-graphic { display: none; }
    .app-grid { grid-template-columns: 1fr; }
    .detailed-toolbar { flex-direction: column; align-items: stretch; }
    .filter-tabs { overflow-x: auto; }
    .detail-header { flex-direction: column; }
    .detail-actions { margin-left: 0; }
    .form-row { grid-template-columns: 1fr; }
    .meta-grid { grid-template-columns: 1fr 1fr; }
    .list-header { display: none; }
    .list-row { grid-template-columns: 1fr; gap: var(--space-xs); padding: var(--space-md); }
    .list-col-actions { justify-content: flex-start; }
}

@media (max-width: 480px) {
    .meta-grid { grid-template-columns: 1fr; }
    .view-switch { flex-direction: column; }
}