.projects-hub {
    --hub-border: #e2e8f0;
    --hub-muted: #64748b;
    --hub-ink: #172033;
    min-height: calc(100vh - var(--topbar-height));
    color: var(--hub-ink);
}

.projects-command {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.35rem 1.5rem;
    border-radius: 1.15rem;
    background: linear-gradient(125deg, #0f172a, #172554 52%, #3730a3 78%, #6d28d9);
    color: #fff;
    box-shadow: 0 18px 40px rgba(30,41,59,.16);
}

.projects-command::before,
.projects-command::after { content:""; position:absolute; border-radius:50%; pointer-events:none; }
.projects-command::before { width:260px; height:260px; right:10%; top:-180px; background:rgba(56,189,248,.22); }
.projects-command::after { width:180px; height:180px; left:35%; bottom:-150px; background:rgba(232,121,249,.18); }
.projects-command-copy, .projects-command-actions { position:relative; z-index:1; }
.projects-command-copy { min-width:0; }
.projects-command-kicker { display:flex; align-items:center; gap:.4rem; margin-bottom:.35rem; color:#bfdbfe; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.projects-command h1 { margin:0; font-size:clamp(1.45rem,2.2vw,2.1rem); font-weight:850; letter-spacing:-.035em; }
.projects-command p { margin:.35rem 0 0; max-width:670px; color:#cbd5e1; font-size:.8rem; }
.projects-command-actions { display:flex; align-items:center; gap:.55rem; flex:0 0 auto; }
.projects-command .btn { white-space:nowrap; }

.projects-overview {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.75rem;
    margin:.85rem 0;
}

.project-metric { display:flex; align-items:center; gap:.7rem; min-width:0; padding:.75rem .85rem; border:1px solid var(--hub-border); border-radius:.85rem; background:#fff; box-shadow:0 2px 8px rgba(15,23,42,.025); }
.project-metric-icon { width:2.2rem; height:2.2rem; display:grid; place-items:center; flex:0 0 auto; border-radius:.7rem; font-size:1rem; }
.project-metric.blue .project-metric-icon { color:#2563eb; background:#eff6ff; }
.project-metric.violet .project-metric-icon { color:#7c3aed; background:#f5f3ff; }
.project-metric.green .project-metric-icon { color:#059669; background:#ecfdf5; }
.project-metric.slate .project-metric-icon { color:#475569; background:#f1f5f9; }
.project-metric-copy { min-width:0; display:flex; flex-direction:column; }
.project-metric-copy strong { font-size:1rem; line-height:1.1; }
.project-metric-copy span { margin-top:.12rem; color:var(--hub-muted); font-size:.66rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.projects-toolbar { display:flex; align-items:center; gap:.6rem; padding:.65rem; border:1px solid var(--hub-border); border-radius:.9rem; background:#fff; }
.projects-search { position:relative; min-width:220px; flex:1 1 320px; }
.projects-search > i { position:absolute; left:.78rem; top:50%; transform:translateY(-50%); color:#94a3b8; pointer-events:none; }
.projects-search .form-control { min-height:2.4rem; padding-left:2.25rem; border-color:#e2e8f0; background:#f8fafc; font-size:.78rem; }
.projects-toolbar .form-select { width:auto; min-width:132px; min-height:2.4rem; border-color:#e2e8f0; background-color:#f8fafc; font-size:.72rem; font-weight:650; }
.projects-view-switch { display:flex; padding:.2rem; border:1px solid #e2e8f0; border-radius:.65rem; background:#f8fafc; }
.projects-view-switch button { width:2rem; height:1.95rem; display:grid; place-items:center; border:0; border-radius:.45rem; background:transparent; color:#64748b; }
.projects-view-switch button.active { background:#fff; color:#2563eb; box-shadow:0 1px 4px rgba(15,23,42,.12); }

.projects-tabs { display:flex; align-items:center; gap:.25rem; margin:.85rem 0 .65rem; border-bottom:1px solid #dfe6ef; }
.projects-tabs button { display:flex; align-items:center; gap:.38rem; border:0; border-bottom:2px solid transparent; background:transparent; color:#64748b; padding:.55rem .72rem; font-size:.72rem; font-weight:750; }
.projects-tabs button span { min-width:1.25rem; padding:.08rem .34rem; border-radius:999px; background:#eef2f7; color:#64748b; font-size:.6rem; }
.projects-tabs button.active { border-bottom-color:#4f46e5; color:#3730a3; }
.projects-tabs button.active span { background:#e0e7ff; color:#4338ca; }
.projects-result-count { margin-left:auto; color:#94a3b8; font-size:.68rem; }

.projects-collection { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:.78rem; }
.project-hub-card { --project-accent:#4f46e5; position:relative; min-width:0; display:flex; flex-direction:column; min-height:225px; border:1px solid #dfe6ef; border-radius:1rem; background:#fff; box-shadow:0 4px 14px rgba(15,23,42,.045); transition:transform .16s,border-color .16s,box-shadow .16s; }
.project-hub-card::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; border-radius:1rem 0 0 1rem; background:var(--project-accent); }
.project-hub-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--project-accent) 40%,#dfe6ef); box-shadow:0 12px 26px rgba(15,23,42,.09); }
.project-hub-card.is-archived { opacity:.72; background:#f8fafc; }
.project-card-main { display:flex; flex:1; flex-direction:column; padding:1rem 1rem .75rem 1.15rem; }
.project-card-header { display:flex; align-items:flex-start; gap:.7rem; }
.project-card-mark { width:2.6rem; height:2.6rem; display:grid; place-items:center; flex:0 0 auto; border-radius:.8rem; color:#fff; background:var(--project-accent); font-size:1.15rem; box-shadow:0 7px 16px color-mix(in srgb,var(--project-accent) 24%,transparent); }
.project-card-heading { min-width:0; flex:1; }
.project-card-heading h2 { margin:.03rem 0 .12rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.94rem; font-weight:820; }
.project-card-slug { color:#94a3b8; font-size:.61rem; }
.project-card-menu { display:flex; align-items:center; gap:.15rem; }
.project-pin, .project-menu-toggle { width:2rem; height:2rem; display:grid; place-items:center; border:0; border-radius:.55rem; background:transparent; color:#94a3b8; }
.project-pin:hover, .project-menu-toggle:hover { color:#334155; background:#f1f5f9; }
.project-pin.active { color:#f59e0b; }
.project-card-description { display:-webkit-box; min-height:2.25rem; margin:.7rem 0; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; color:#64748b; font-size:.72rem; line-height:1.5; }
.project-badges { display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; }
.project-chip { display:inline-flex; align-items:center; gap:.3rem; max-width:100%; padding:.24rem .48rem; border-radius:999px; background:#f1f5f9; color:#475569; font-size:.61rem; font-weight:750; }
.project-chip.database { color:#1d4ed8; background:#eff6ff; }
.project-chip.health-ready { color:#047857; background:#ecfdf5; }
.project-chip.health-setup { color:#a16207; background:#fffbeb; }
.project-chip.health-attention { color:#b91c1c; background:#fef2f2; }
.project-chip.owner { color:#6d28d9; background:#f5f3ff; max-width:12rem; overflow:hidden; text-overflow:ellipsis; }
.project-chip.owner i { flex:0 0 auto; }
.project-readiness { margin-top:auto; padding-top:.75rem; }
.project-readiness-copy { display:flex; align-items:center; justify-content:space-between; margin-bottom:.3rem; color:#64748b; font-size:.61rem; }
.project-readiness-copy strong { color:#334155; }
.project-progress { height:4px; overflow:hidden; border-radius:999px; background:#e9eef5; }
.project-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--project-accent),#38bdf8); }
.project-card-footer { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.65rem .85rem .65rem 1.15rem; border-top:1px solid #edf1f5; background:#fbfdff; border-radius:0 0 1rem 1rem; }
.project-activity { min-width:0; display:flex; align-items:center; gap:.35rem; color:#7b8798; font-size:.61rem; }
.project-card-actions { display:flex; align-items:center; gap:.4rem; }
.project-card-actions .btn { padding:.28rem .55rem; font-size:.66rem; font-weight:750; }
.project-hub-card[hidden] { display:none!important; }

.projects-collection.view-list { display:flex; flex-direction:column; gap:.42rem; }
.view-list .project-hub-card { min-height:0; display:grid; grid-template-columns:minmax(0,1fr) auto; }
.view-list .project-hub-card::before { width:3px; }
.view-list .project-card-main { display:grid; grid-template-columns:minmax(220px,1.1fr) minmax(190px,.8fr) minmax(180px,.75fr); align-items:center; gap:1rem; padding:.7rem .8rem .7rem 1rem; }
.view-list .project-card-header { align-items:center; }
.view-list .project-card-mark { width:2.2rem; height:2.2rem; font-size:.95rem; }
.view-list .project-card-description { min-height:0; margin:0; -webkit-line-clamp:1; }
.view-list .project-readiness { margin:0; padding:0; }
.view-list .project-card-footer { min-width:225px; border-top:0; border-left:1px solid #edf1f5; border-radius:0 1rem 1rem 0; }
.view-list .project-card-menu { margin-left:auto; }
.view-list .project-card-heading h2 { font-size:.82rem; }
.view-list .project-badges { justify-content:flex-start; }

.projects-empty { display:none; padding:3.5rem 1rem; border:1px dashed #cbd5e1; border-radius:1rem; background:#fff; text-align:center; }
.projects-empty.show { display:block; }
.projects-empty i { width:3.2rem; height:3.2rem; display:grid; place-items:center; margin:0 auto .8rem; border-radius:1rem; background:#eef2ff; color:#4f46e5; font-size:1.35rem; }
.projects-empty h3 { margin:0 0 .3rem; font-size:.95rem; }
.projects-empty p { margin:0; color:#64748b; font-size:.72rem; }

.project-settings-modal .modal-content { border:0; border-radius:1.05rem; overflow:hidden; box-shadow:0 24px 70px rgba(15,23,42,.28); }
.project-settings-header { border:0; background:linear-gradient(125deg,#0f172a,#1e3a8a 60%,#6d28d9); color:#fff; padding:.9rem 1.05rem; }
.project-settings-kicker { color:#bfdbfe; font-size:.58rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.project-settings-mark { width:2.45rem; height:2.45rem; display:grid; place-items:center; flex:0 0 auto; border-radius:.72rem; background:#4f46e5; color:#fff; border:1px solid rgba(255,255,255,.22); }
.project-settings-layout { min-height:390px; display:grid; grid-template-columns:12rem minmax(0,1fr); background:#f8fafc; }
.project-settings-nav { display:flex; flex-direction:column; gap:.28rem; padding:.8rem; border-right:1px solid #e2e8f0; background:#fff; }
.project-settings-nav button { display:flex; align-items:center; gap:.55rem; border:0; border-radius:.65rem; background:transparent; color:#64748b; padding:.65rem .7rem; text-align:left; font-size:.72rem; font-weight:750; }
.project-settings-nav button.active { background:#eef2ff; color:#4338ca; }
.project-settings-panels { min-width:0; padding:1rem 1.15rem 1.25rem; }
.project-settings-panel { display:none; }
.project-settings-panel.active { display:block; }
.settings-section-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; }
.settings-section-heading span, .settings-card-label { color:#6366f1; font-size:.57rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.settings-section-heading h6 { margin:.12rem 0 0; font-size:.88rem; }
.project-settings-modal .form-label { margin-bottom:.28rem; color:#475569; font-size:.68rem; font-weight:800; }
.project-settings-modal .form-control, .project-settings-modal .input-group-text { border-color:#dbe3ec; font-size:.78rem; }
.settings-divider { height:1px; margin:1rem 0; background:#e2e8f0; }
.settings-picker-row { display:flex; align-items:flex-start; gap:1.2rem; }
.project-color-picker, .project-icon-picker { display:flex; flex-wrap:wrap; gap:.4rem; }
.project-color-picker button { width:1.65rem; height:1.65rem; border:2px solid #fff; border-radius:50%; background:var(--choice-color); box-shadow:0 0 0 1px #cbd5e1; }
.project-color-picker button.active { box-shadow:0 0 0 3px #c7d2fe; transform:scale(1.08); }
.project-icon-picker button { width:2rem; height:2rem; display:grid; place-items:center; border:1px solid #dbe3ec; border-radius:.55rem; background:#fff; color:#475569; }
.project-icon-picker button.active { border-color:#6366f1; background:#eef2ff; color:#4338ca; }
.settings-feature-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.85rem; border:1px solid #e2e8f0; border-radius:.85rem; background:#fff; padding:1rem; }
.settings-feature-card .feature-icon { width:2.8rem; height:2.8rem; display:grid; place-items:center; border-radius:.8rem; font-size:1.15rem; }
.settings-feature-card.database .feature-icon { color:#2563eb; background:#eff6ff; }
.settings-feature-card.archive .feature-icon { color:#475569; background:#f1f5f9; }
.settings-feature-card h6 { margin:.12rem 0 .22rem; font-size:.88rem; }
.settings-feature-card p, .settings-danger-zone p { margin:0; color:#64748b; font-size:.68rem; line-height:1.45; }
.settings-callout { display:flex; align-items:flex-start; gap:.55rem; margin-top:.75rem; border:1px solid #bfdbfe; border-radius:.7rem; background:#eff6ff; color:#1e40af; padding:.65rem .75rem; font-size:.68rem; }
.settings-danger-zone { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; border:1px solid #fecaca; border-radius:.85rem; background:#fff7f7; padding:1rem; }
.settings-danger-zone > div > span { color:#dc2626; font-size:.57rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.settings-danger-zone h6 { margin:.12rem 0 .2rem; font-size:.84rem; }
.project-settings-footer { border-top:1px solid #e2e8f0; background:#fff; padding:.75rem 1rem; }
.settings-save-status { color:#64748b; font-size:.65rem; }
.min-w-0 { min-width:0; }

@media (max-width:1199.98px) {
    .projects-overview { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .view-list .project-card-main { grid-template-columns:minmax(210px,1fr) minmax(180px,.75fr); }
    .view-list .project-card-description { display:none; }
}
@media (max-width:767.98px) {
    .projects-command { align-items:flex-start; flex-direction:column; padding:1.15rem; }
    .projects-command-actions { width:100%; }
    .projects-command-actions .btn { flex:1; }
    .projects-toolbar { align-items:stretch; flex-wrap:wrap; }
    .projects-search { flex-basis:100%; }
    .projects-toolbar .form-select { flex:1; }
    .projects-result-count { display:none; }
    .projects-collection, .projects-collection.view-list { display:grid; grid-template-columns:1fr; }
    .view-list .project-hub-card { display:flex; }
    .view-list .project-card-main { display:flex; }
    .view-list .project-card-description { display:-webkit-box; }
    .view-list .project-card-footer { border-left:0; border-top:1px solid #edf1f5; border-radius:0 0 1rem 1rem; }
    .project-settings-layout { grid-template-columns:1fr; }
    .project-settings-nav { flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid #e2e8f0; }
    .project-settings-nav button { white-space:nowrap; }
    .settings-feature-card { grid-template-columns:auto minmax(0,1fr); }
    .settings-feature-card > .btn { grid-column:1 / -1; }
}
@media (max-width:480px) {
    .projects-overview { grid-template-columns:1fr 1fr; gap:.5rem; }
    .project-metric { padding:.62rem; }
    .project-metric-icon { display:none; }
    .projects-tabs { overflow-x:auto; }
    .projects-tabs button { white-space:nowrap; }
    .settings-picker-row, .settings-danger-zone { align-items:flex-start; flex-direction:column; }
    .settings-danger-zone .btn { width:100%; }
}

/* Sandbox test-database expiry chips (Use Test Database) */
.project-chip.sandbox { color:#b45309; background:#fffbeb; }
.project-chip.sandbox-soon { color:#b45309; background:#fef3c7; }
.project-chip.sandbox-expired { color:#b91c1c; background:#fee2e2; }
