#projects-page { min-height: 100%; overflow: auto; background: var(--page); }
.projects-shell { max-width: 1180px; margin: auto; padding: 46px 36px 100px; }
.projects-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-bottom: 1px solid var(--border); padding-bottom: 28px; }
.projects-brand { display: block; height: 44px; }
.projects-brand img { display: block; width: 210px; height: 44px; object-fit: contain; object-position: left center; }
.projects-header p { margin: 6px 0 0; color: var(--text-muted); }
.projects-user, #account-area { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--text-secondary); }
.new-project { min-height: 40px; border: 0; border-radius: 6px; background: var(--accent); color: var(--on-accent); padding: 10px 14px; font-weight: 600; cursor: pointer; }
.new-project:disabled { opacity: .6; cursor: wait; }
.section-heading { display: flex; align-items: center; gap: 9px; margin: 28px 0 16px; flex-wrap: wrap; }
.section-heading h1 { font-size: 20px; margin: 0; }
.section-heading span { font-size: 12px; color: var(--text-muted); }
#refresh-projects { margin-left: auto; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 14px; }
.project-card { min-width: 0; min-height: 165px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text); text-align: left; cursor: pointer; }
.project-card:hover { border-color: var(--border-strong); background: var(--surface-raised); }
.project-card h2 { font-size: 15px; margin: 18px 0 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-card p, .project-card small { color: var(--text-muted); margin: 0; font-size: 12px; }
.project-card small { display: block; margin-top: 22px; color: var(--text-secondary); }
.local-project-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.local-project-card:hover { border-color: var(--border-strong); }
.local-project-card .project-card { flex: 1; width: 100%; border: 0; border-radius: 0; font: inherit; }
.local-project-actions { display: flex; justify-content: flex-end; padding: 0 14px 12px; }
.empty-projects { grid-column: 1/-1; padding: 48px 20px; text-align: center; border: 1px dashed var(--border); border-radius: 9px; color: var(--text-muted); }
.empty-projects h2 { color: var(--text); }
.projects-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 22px; padding: 10px 16px; background: var(--surface-glass); border-top: 1px solid var(--border); backdrop-filter: blur(8px); }
.projects-footer a { display: inline-flex; align-items: center; gap: 7px; min-height: 24px; color: var(--text-secondary); text-decoration: none; font-size: 12px; }
.projects-footer a:hover { color: var(--text); text-decoration: underline; }
.linkedin-mark { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; background: #0a66c2; color: var(--on-accent); font-family: Arial,sans-serif; font-size: 13px; font-weight: 800; line-height: 1; }
@media (max-width: 760px) { .projects-shell { padding: 24px 20px 110px; } .projects-header { align-items: flex-start; flex-direction: column; } }