.project-centre { min-height: 100vh; padding: clamp(24px, 4vw, 64px); background: var(--yuqi-canvas); }
.centre-header, .centre-toolbar, .project-card footer, .project-card-top, .dialog-card header, .dialog-card footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.centre-header { align-items: flex-end; }
.centre-header h1 { max-width: 720px; margin: 6px 0; font-size: clamp(32px, 4vw, 54px); letter-spacing: -.045em; text-wrap: balance; }
.centre-header > p { max-width: 48ch; color: var(--yuqi-muted); line-height: 1.7; }
.centre-toolbar { margin: 42px 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--yuqi-line); }
.centre-toolbar label { display: grid; gap: 8px; color: var(--yuqi-muted); font-size: 13px; font-weight: 700; }
.centre-toolbar input { width: min(420px, 70vw); height: 44px; border: 1px solid var(--yuqi-line-strong); border-radius: 10px; padding: 0 12px; background: var(--yuqi-surface); color: var(--yuqi-ink); }
.centre-toolbar input::placeholder { color: var(--yuqi-dim); }
[data-project-count] { padding: 7px 10px; border: 1px solid var(--yuqi-line); border-radius: 999px; color: var(--yuqi-muted); background: var(--yuqi-surface-muted); font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); align-items: stretch; gap: 18px; }
.project-card, .empty-card { padding: 20px; border: 1px solid var(--yuqi-line); border-radius: 16px; background: var(--yuqi-surface); box-shadow: 0 8px 22px rgba(27, 39, 50, .04); }
.project-card { position: relative; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease; }
.project-card:hover { border-color: var(--yuqi-line-strong); box-shadow: var(--yuqi-shadow); }
.project-card h3 { margin: 16px 0 8px; font-size: 21px; letter-spacing: -.02em; }
.project-card p, .project-card dt, .project-card-top { color: var(--yuqi-muted); }
.project-card p { min-height: 3.2em; line-height: 1.6; }
.project-card dl { display: grid; gap: 10px; margin: 20px 0 0; padding-top: 15px; border-top: 1px solid var(--yuqi-line); }
.project-card dl div { display: flex; justify-content: space-between; gap: 12px; }
.project-card dd { max-width: 58%; margin: 0; overflow: hidden; color: var(--yuqi-ink); text-align: right; text-overflow: ellipsis; }
.project-card footer { flex-wrap: wrap; margin-top: 20px; }
.project-kind { color: var(--yuqi-signal); font-size: 12px; font-weight: 800; letter-spacing: .05em; }

button { min-height: 40px; padding: 10px 14px; border: 1px solid var(--yuqi-signal); border-radius: 10px; background: var(--yuqi-signal); color: var(--yuqi-surface); font-weight: 800; transition: border-color .18s ease, background .18s ease, color .18s ease; }
button:hover:not(:disabled) { border-color: var(--yuqi-signal-strong); background: var(--yuqi-signal-strong); }
button:disabled { opacity: .52; }
.button-secondary { border-color: var(--yuqi-line-strong); background: var(--yuqi-surface); color: var(--yuqi-ink); }
.button-secondary:hover:not(:disabled) { border-color: var(--yuqi-signal); background: var(--yuqi-signal-soft); color: var(--yuqi-signal-strong); }
.button-danger { border-color: #dfb7bd; background: var(--yuqi-surface); color: var(--yuqi-danger); }
.button-danger:hover:not(:disabled) { border-color: var(--yuqi-danger); background: var(--yuqi-danger-soft); }

.project-dialog { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(27, 39, 50, .38); }
.dialog-card { width: min(980px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: 28px; border: 1px solid var(--yuqi-line-strong); border-radius: 18px; background: var(--yuqi-surface); box-shadow: 0 24px 58px rgba(27, 39, 50, .18); }
.dialog-card h2 { margin: 0; }
.icon-button { min-height: auto; padding: 0 8px; border: 0; background: transparent; color: var(--yuqi-muted); font-size: 28px; }
.icon-button:hover:not(:disabled) { background: transparent; color: var(--yuqi-ink); }
.project-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.project-form-grid label { display: grid; gap: 7px; color: var(--yuqi-muted); }
.project-form-grid input, .project-form-grid select, .project-form-grid textarea { padding: 10px; border: 1px solid var(--yuqi-line-strong); border-radius: 10px; background: var(--yuqi-surface); color: var(--yuqi-ink); }
.project-form-grid .full { grid-column: 1 / -1; }
.dialog-card footer { justify-content: flex-end; }
.nav-link { display: inline-flex; align-items: center; color: var(--yuqi-signal-strong); text-decoration: none; }
.centre-actions { display: flex; align-items: center; gap: 12px; }

@media (max-width: 680px) { .centre-header, .centre-toolbar { align-items: flex-start; flex-direction: column; }.project-form-grid { grid-template-columns: 1fr; }.project-form-grid .full { grid-column: auto; } }