:root { --ink: #202124; --muted: #687078; --paper: #fff; --canvas: #f7f8f8; --red: #a64032; --green: #315b4e; --line: #e1e3e3; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: 'DM Sans', Arial, sans-serif; }
.documents-header { min-height: 78px; display: flex; align-items: center; gap: 15px; padding: 14px max(18px, calc((100% - 1120px) / 2)); background: rgba(255,255,255,.82); border-bottom: 1px solid rgba(225,227,227,.85); backdrop-filter: blur(14px); }.back-link { width: 32px; height: 32px; flex: 0 0 auto; }.back-link img { width: 100%; height: 100%; display: block; }.eyebrow { margin: 0 0 3px; color: var(--red); font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.documents-header h1 { margin: 0; font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; }.profile-link { margin-left: auto; padding: 9px 13px; color: #fff; background: #202124; border-radius: 7px; font-size: .75rem; font-weight: 600; text-decoration: none; }
.documents-main { width: min(100% - 32px, 1120px); margin: 0 auto; padding: 26px 0 70px; }.documents-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); }.tab { position: relative; padding: 0 0 13px; color: var(--muted); background: none; border: 0; font-size: .82rem; font-weight: 600; }.tab.active { color: var(--ink); }.tab.active::after { content: ''; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--red); }.tab span { margin-left: 5px; padding: 2px 6px; color: var(--muted); background: #eceeed; border-radius: 10px; font-size: .65rem; }
.documents-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 34px 0 24px; }.documents-toolbar h2 { margin: 0 0 6px; font-size: 1.45rem; font-weight: 600; }.documents-toolbar p { margin: 0; color: var(--muted); font-size: .8rem; }.add-document, .empty-action { display: inline-flex; align-items: center; gap: 7px; padding: 10px 13px; color: #fff; background: var(--green); border-radius: 5px; cursor: pointer; font-size: .75rem; font-weight: 600; }.add-document span { font-size: 1.1rem; line-height: .8; }
.empty-documents { display: grid; justify-items: center; padding: 72px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; text-align: center; }.empty-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; background: #fff1ed; border: 1px solid #f0d4ce; border-radius: 50%; }.empty-icon img { width: 38px; height: 38px; }.empty-documents h2 { margin: 0 0 8px; font-size: 1.15rem; }.empty-documents p { max-width: 390px; margin: 0 0 22px; color: var(--muted); font-size: .8rem; line-height: 1.55; }.document-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.document-card { padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }.document-card strong, .document-card small { display: block; }.document-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }.document-card small { margin-top: 6px; color: var(--muted); font-size: .7rem; }
@media (max-width: 640px) { .documents-header { min-height: 64px; padding: 10px 14px; background: #fff; border-bottom-color: #e5e5e5; backdrop-filter: none; }.documents-header h1 { font-size: 1.05rem; }.profile-link { padding: 7px 9px; font-size: .65rem; }.documents-main { width: min(100% - 24px, 1120px); padding-top: 18px; }.documents-toolbar { display: block; padding: 27px 0 18px; }.documents-toolbar p { line-height: 1.45; }.add-document { margin-top: 16px; }.empty-documents { padding: 55px 17px; }.document-grid { grid-template-columns: 1fr; } }