/* ================================================
   Client Portal -- Frontend Styles
   ================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.cp-portal-body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #f1f5f9; color: #1e293b; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }
.cp-hidden { display: none !important; }
.cp-text-muted { color: #64748b; font-size: 0.875rem; }
.cp-text-center { text-align: center; }
.cp-clickable { cursor: pointer; }

/* == LOGIN == */
.cp-login-wrapper { min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,#1e293b 0%,#334155 100%); }
.cp-login-card { background:#fff;border-radius:16px;width:100%;max-width:440px;padding:48px 40px;box-shadow:0 25px 60px rgba(0,0,0,.25); }
.cp-login-header { text-align:center;margin-bottom:32px; }
.cp-login-icon { display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:16px;background:#eff6ff;color:#2563eb;margin-bottom:20px; }
.cp-login-header h1 { font-size:1.5rem;font-weight:700;margin-bottom:8px; }
.cp-login-header p { color:#64748b;font-size:.95rem; }
.cp-form-group { margin-bottom:20px; }
.cp-form-group label { display:block;font-weight:600;font-size:.875rem;margin-bottom:6px;color:#374151; }
.cp-form-group input { width:100%;padding:12px 16px;border:2px solid #e2e8f0;border-radius:10px;font-size:1rem;transition:border-color .2s,box-shadow .2s;outline:none; }
.cp-form-group input:focus { border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.15); }

/* == BUTTONS == */
.cp-btn { display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:none;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .15s;text-decoration:none; }
.cp-btn:hover { text-decoration:none; }
.cp-btn-primary { background:#2563eb;color:#fff; }
.cp-btn-primary:hover { background:#1d4ed8; }
.cp-btn-primary:disabled { background:#93c5fd;cursor:not-allowed; }
.cp-btn-outline { background:transparent;border:1.5px solid #cbd5e1;color:#475569; }
.cp-btn-outline:hover { background:#f8fafc;border-color:#94a3b8; }
.cp-btn-block { width:100%; }
.cp-btn-sm { padding:6px 14px;font-size:.8125rem;border-radius:8px; }
.cp-btn-approve { background:#16a34a;color:#fff;padding:10px 24px;border-radius:10px;font-size:.9375rem; }
.cp-btn-approve:hover { background:#15803d; }
.cp-btn-approve:disabled { background:#86efac;cursor:not-allowed; }

/* == ALERTS == */
.cp-alert { padding:14px 18px;border-radius:10px;font-size:.9rem;margin-bottom:20px;display:flex;align-items:center;gap:10px; }
.cp-alert-error { background:#fef2f2;color:#991b1b;border:1px solid #fecaca; }
.cp-alert-success { background:#f0fdf4;color:#166534;border:1px solid #bbf7d0; }

/* == TOPBAR == */
.cp-topbar { background:#1e293b;color:#fff;padding:0 32px;height:64px;display:flex;align-items:center;justify-content:space-between; }
.cp-topbar-left { display:flex;align-items:center;gap:16px; }
.cp-topbar-brand { font-size:1.125rem;font-weight:700;color:#fff; }
.cp-topbar-project { font-size:.875rem;background:rgba(255,255,255,.12);padding:4px 12px;border-radius:6px; }
.cp-topbar-right { display:flex;align-items:center;gap:16px; }
.cp-topbar-user { font-size:.8125rem;color:#94a3b8; }
.cp-topbar-right .cp-btn-outline { border-color:rgba(255,255,255,.2);color:#cbd5e1; }
.cp-topbar-right .cp-btn-outline:hover { background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3); }

/* == TABS == */
.cp-tabs { background:#fff;border-bottom:1px solid #e2e8f0;display:flex;padding:0 32px;gap:4px;overflow-x:auto; }
.cp-tab { display:inline-flex;align-items:center;gap:8px;padding:16px 20px;font-size:.875rem;font-weight:500;color:#64748b;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .15s;white-space:nowrap; }
.cp-tab:hover { color:#fff; }
.cp-tab-active { color:#2563eb;border-bottom-color:#2563eb; }

/* == CONTAINER == */
.cp-container { max-width:1280px;margin:0 auto;padding:32px; }
.cp-tab-panel { display:none; }
.cp-tab-panel-active { display:block; }
.cp-panel-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:16px; }
.cp-panel-header h2 { font-size:1.375rem;font-weight:700; }
.cp-site-url-link { display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;color:#2563eb;text-decoration:none;font-weight:500;background:#eff6ff;padding:6px 14px;border-radius:8px;transition:background .15s,color .15s; }
.cp-site-url-link:hover { background:#dbeafe;color:#1d4ed8; }

/* == DASHBOARD == */
.cp-dash-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px; }
.cp-dash-stat { background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px; }
.cp-dash-stat-value { font-size:1.75rem;font-weight:700;color:#1e293b; }
.cp-dash-stat-label { font-size:.8125rem;color:#64748b;margin-top:4px; }
@media (max-width:768px) { .cp-dash-grid { grid-template-columns:repeat(2,1fr); } }

.cp-dash-cols { display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:32px; }
@media (max-width:900px) { .cp-dash-cols { grid-template-columns:1fr; } }

.cp-dash-card { background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden; }
.cp-dash-card-header { padding:16px 20px;border-bottom:1px solid #f1f5f9;font-weight:700;font-size:.9375rem; }
.cp-dash-card-body { padding:16px 20px;max-height:400px;overflow-y:auto; }

.cp-dash-task-row { display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f1f5f9; }
.cp-dash-task-row:last-child { border-bottom:none; }
.cp-dash-task-title { font-weight:600;font-size:.875rem;flex:1;min-width:0; }
.cp-dash-task-due { font-size:.75rem;color:#64748b;white-space:nowrap; }

.cp-dash-comment { padding:10px 0;border-bottom:1px solid #f1f5f9; }
.cp-dash-comment:last-child { border-bottom:none; }
.cp-dash-comment-meta { font-size:.75rem;color:#64748b;margin-bottom:2px; }
.cp-dash-comment-meta strong { color:#1e293b; }
.cp-dash-comment-text { font-size:.8125rem;color:#374151; }
.cp-dash-comment-task { font-size:.6875rem;color:#94a3b8;margin-top:2px; }

.cp-dash-upcoming { padding:10px 0;border-bottom:1px solid #f1f5f9;display:flex;justify-content:space-between;align-items:center; }
.cp-dash-upcoming:last-child { border-bottom:none; }

.cp-dash-empty { text-align:center;padding:24px;color:#94a3b8;font-size:.8125rem; }

/* == KANBAN == */
/* == KANBAN FILTERS == */
.cp-kanban-filters { display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px; }
.cp-kanban-filter-group { display:flex;align-items:center;gap:6px; }
.cp-kanban-filter-label { font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.03em; }
.cp-kanban-filter-select { appearance:none;-webkit-appearance:none;padding:6px 28px 6px 10px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:.8125rem;font-family:inherit;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center;color:#374151;cursor:pointer;transition:border-color .2s; }
.cp-kanban-filter-select:focus { outline:none;border-color:#2563eb; }
.cp-kanban-filter-reset { padding:6px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:.75rem;font-weight:600;background:#fff;color:#64748b;cursor:pointer;transition:all .15s; }
.cp-kanban-filter-reset:hover { border-color:#cbd5e1;color:#374151; }
.cp-category-badge { display:inline-block;font-size:.6875rem;font-weight:600;padding:2px 8px;border-radius:6px;background:#ede9fe;color:#7c3aed;white-space:nowrap; }

.cp-kanban-scroll { overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px; }
.cp-kanban { display:grid;gap:20px; }
@media (max-width:600px) { .cp-kanban { gap:12px; } }
.cp-kanban-col { background:#f8fafc;border-radius:12px;overflow:hidden;border:1px solid #e2e8f0; }
.cp-kanban-col-header { padding:14px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;background:#fff; }
.cp-kanban-col-title { font-weight:600;font-size:.875rem; }
.cp-kanban-col-count { background:#e2e8f0;color:#475569;font-size:.75rem;font-weight:700;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center; }
.cp-kanban-col-body { padding:12px;min-height:120px;display:flex;flex-direction:column;gap:10px; }
.cp-kanban-card { background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:14px 16px;transition:box-shadow .15s,border-color .15s;cursor:pointer; }
.cp-kanban-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.08);border-color:#cbd5e1; }
.cp-kanban-card-title { font-weight:600;font-size:.875rem;margin-bottom:4px; }
.cp-kanban-card-desc { font-size:.8125rem;color:#64748b;margin-bottom:8px; }
.cp-kanban-card-footer { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.cp-kanban-card-due { display:inline-flex;align-items:center;gap:4px;font-size:.75rem;color:#64748b;background:#f1f5f9;padding:3px 8px;border-radius:6px; }
.cp-kanban-card-due.cp-overdue { background:#fef2f2;color:#dc2626; }
.cp-kanban-card-comments { display:inline-flex;align-items:center;gap:3px;font-size:.75rem;color:#64748b; }
.cp-kanban-empty { color:#94a3b8;font-size:.8125rem;text-align:center;padding:24px 0; }

/* == ASSIGNEE BADGE == */
.cp-assignee-badge { display:inline-flex;align-items:center;gap:4px;font-size:.6875rem;padding:2px 8px;border-radius:999px;background:#ede9fe;color:#5b21b6;font-weight:600;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cp-modal-assignee { display:inline-flex;align-items:center;gap:4px;font-size:.8125rem;color:#5b21b6;background:#ede9fe;padding:4px 12px;border-radius:999px;margin-left:8px; }

/* == VIEW TOGGLE == */
.cp-view-toggle { display:flex;background:#f1f5f9;border-radius:8px;padding:3px; }
.cp-view-btn { padding:6px 16px;font-size:.8125rem;font-weight:500;border:none;background:none;border-radius:6px;cursor:pointer;color:#64748b;transition:all .15s; }
.cp-view-btn-active { background:#fff;color:#1e293b;box-shadow:0 1px 3px rgba(0,0,0,.1); }

/* == TABLE == */
.cp-table { width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e2e8f0; }
.cp-table th { text-align:left;padding:14px 18px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;background:#f8fafc;border-bottom:1px solid #e2e8f0; }
.cp-table td { padding:14px 18px;border-bottom:1px solid #f1f5f9;font-size:.875rem; }
.cp-table tbody tr:last-child td { border-bottom:none; }
.cp-table tbody tr:hover { background:#f8fafc; }

/* == STATUS BADGES == */
.cp-status-badge { display:inline-block;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:600;white-space:nowrap; }
.cp-status-todo { background:#f1f5f9;color:#475569; }
.cp-status-in-progress { background:#dbeafe;color:#1e40af; }
.cp-status-review { background:#fef3c7;color:#92400e; }
.cp-status-done { background:#dcfce7;color:#166534; }

/* == MODAL == */
.cp-modal-overlay { position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:24px;animation:cpFadeIn .15s ease; }
@keyframes cpFadeIn { from{opacity:0}to{opacity:1} }
.cp-modal { background:#fff;border-radius:16px;width:100%;max-width:640px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 25px 60px rgba(0,0,0,.25);animation:cpSlideUp .2s ease; }
@keyframes cpSlideUp { from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1} }
.cp-modal-header { display:flex;align-items:flex-start;justify-content:space-between;padding:24px 28px 16px;border-bottom:1px solid #f1f5f9; }
.cp-modal-header > div { flex:1;min-width:0; }
.cp-modal-title { font-size:1.25rem;font-weight:700;margin-bottom:8px; }
.cp-modal-meta { display:flex;align-items:center;flex-wrap:wrap;gap:6px; }
.cp-modal-close { width:36px;height:36px;border:none;background:#f1f5f9;border-radius:8px;font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#64748b;transition:all .15s;flex-shrink:0;margin-left:16px; }
.cp-modal-close:hover { background:#e2e8f0;color:#1e293b; }
.cp-modal-body { padding:24px 28px;overflow-y:auto;flex:1; }
.cp-modal-section { margin-bottom:24px; }
.cp-modal-section:last-child { margin-bottom:0; }
.cp-modal-section h4 { font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;margin-bottom:10px; }
.cp-modal-section p { font-size:.9375rem;color:#374151; }

/* == MODAL DESCRIPTION (rendered HTML with images) == */
/* == MODAL DESCRIPTION RICH CONTENT == */
.cp-modal-desc-content { font-size:.9375rem;color:#374151;line-height:1.7; }
.cp-modal-desc-content p { margin:0 0 12px; }
.cp-modal-desc-content p:last-child { margin-bottom:0; }
.cp-modal-desc-content h1,.cp-modal-desc-content h2,.cp-modal-desc-content h3,.cp-modal-desc-content h4,.cp-modal-desc-content h5,.cp-modal-desc-content h6 { margin:20px 0 8px;font-weight:700;line-height:1.3;color:#111827; }
.cp-modal-desc-content h1 { font-size:1.5rem; }
.cp-modal-desc-content h2 { font-size:1.25rem; }
.cp-modal-desc-content h3 { font-size:1.125rem; }
.cp-modal-desc-content h4 { font-size:1rem; }
.cp-modal-desc-content h5,.cp-modal-desc-content h6 { font-size:.875rem; }
.cp-modal-desc-content strong,.cp-modal-desc-content b { font-weight:700; }
.cp-modal-desc-content em,.cp-modal-desc-content i { font-style:italic; }
.cp-modal-desc-content u { text-decoration:underline; }
.cp-modal-desc-content s,.cp-modal-desc-content del { text-decoration:line-through; }
.cp-modal-desc-content a { color:#2563eb;text-decoration:underline; }
.cp-modal-desc-content a:hover { color:#1d4ed8; }
.cp-modal-desc-content img { max-width:100%;height:auto;border-radius:8px;cursor:pointer;transition:opacity .15s;margin:8px 0;display:block; }
.cp-modal-desc-content img:hover { opacity:.85; }
.cp-modal-desc-content figure { margin:12px 0; }
.cp-modal-desc-content figcaption { font-size:.8125rem;color:#64748b;margin-top:6px;text-align:center; }
.cp-modal-desc-content ul,.cp-modal-desc-content ol { margin:8px 0 12px 24px;padding:0; }
.cp-modal-desc-content ul { list-style:disc; }
.cp-modal-desc-content ol { list-style:decimal; }
.cp-modal-desc-content li { margin-bottom:4px;padding-left:4px; }
.cp-modal-desc-content li > ul,.cp-modal-desc-content li > ol { margin-top:4px;margin-bottom:4px; }
.cp-modal-desc-content blockquote { margin:12px 0;padding:12px 20px;border-left:4px solid #2563eb;background:#f8fafc;color:#475569;font-style:italic;border-radius:0 8px 8px 0; }
.cp-modal-desc-content blockquote p:last-child { margin-bottom:0; }
.cp-modal-desc-content pre { margin:12px 0;padding:16px;background:#1e293b;color:#e2e8f0;border-radius:8px;overflow-x:auto;font-family:'SFMono-Regular',Consolas,monospace;font-size:.8125rem;line-height:1.6; }
.cp-modal-desc-content code { font-family:'SFMono-Regular',Consolas,monospace;font-size:.8125rem;background:#f1f5f9;padding:2px 6px;border-radius:4px;color:#e11d48; }
.cp-modal-desc-content pre code { background:none;padding:0;color:inherit;border-radius:0; }
.cp-modal-desc-content hr { border:none;border-top:1px solid #e2e8f0;margin:20px 0; }
.cp-modal-desc-content table { width:100%;border-collapse:collapse;margin:12px 0;font-size:.875rem; }
.cp-modal-desc-content th,.cp-modal-desc-content td { padding:8px 12px;border:1px solid #e2e8f0;text-align:left; }
.cp-modal-desc-content th { background:#f8fafc;font-weight:600; }
.cp-modal-desc-content mark { background:#fef08a;padding:1px 3px;border-radius:2px; }
.cp-modal-desc-content dl { margin:12px 0; }
.cp-modal-desc-content dt { font-weight:700;margin-top:8px; }
.cp-modal-desc-content dd { margin:0 0 4px 20px;color:#475569; }

/* == COMMENTS == */
.cp-comments-thread { display:flex;flex-direction:column;gap:12px;margin-bottom:16px; }
.cp-comment { display:flex;gap:12px;padding:12px 14px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0; }
.cp-comment-admin { background:#eff6ff;border-color:#dbeafe; }
.cp-comment-avatar { flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#94a3b8;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem; }
.cp-comment-admin .cp-comment-avatar { background:#2563eb; }
.cp-comment-body { flex:1;min-width:0; }
.cp-comment-meta { font-size:.75rem;color:#64748b;margin-bottom:4px; }
.cp-comment-meta strong { color:#1e293b; }
.cp-comment-text { font-size:.875rem;color:#374151;white-space:pre-wrap;word-break:break-word; }
.cp-comments-empty { text-align:center;color:#94a3b8;font-size:.8125rem;padding:16px 0; }
.cp-comment-form textarea { width:100%;padding:12px 14px;border:2px solid #e2e8f0;border-radius:10px;font-size:.875rem;font-family:inherit;resize:vertical;outline:none;transition:border-color .2s;min-height:80px; }
.cp-comment-form textarea:focus { border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.cp-comment-form-actions { display:flex;align-items:center;justify-content:space-between;margin-top:8px; }
.cp-comment-charcount { font-size:.75rem;color:#94a3b8; }

/* == LIGHTBOX == */
.cp-lightbox { position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;animation:cpFadeIn .15s ease; }
.cp-lightbox-backdrop { position:absolute;inset:0;background:rgba(0,0,0,.85); }
.cp-lightbox-content { position:relative;max-width:90vw;max-height:90vh; }
.cp-lightbox-content img { max-width:90vw;max-height:90vh;object-fit:contain;border-radius:4px;box-shadow:0 8px 32px rgba(0,0,0,.4); }
.cp-lightbox-close { position:absolute;top:-12px;right:-12px;width:36px;height:36px;border-radius:50%;background:#fff;border:none;font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.3);transition:transform .15s; }
.cp-lightbox-close:hover { transform:scale(1.1); }

/* == CALENDAR == */
.cp-calendar-nav { display:flex;align-items:center;gap:12px; }
#cp-cal-month-label { font-weight:600;font-size:1rem;min-width:160px;text-align:center; }
.cp-timeline-bar { background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:14px 20px;display:flex;gap:32px;margin-bottom:24px;font-size:.875rem; }
.cp-calendar { background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden; }
.cp-cal-header { display:grid;grid-template-columns:repeat(7,1fr);background:#f8fafc;border-bottom:1px solid #e2e8f0; }
.cp-cal-header-cell { padding:10px;text-align:center;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b; }
.cp-cal-body { display:grid;grid-template-columns:repeat(7,1fr); }
.cp-cal-cell { min-height:100px;border-right:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9;padding:8px;position:relative; }
.cp-cal-cell:nth-child(7n) { border-right:none; }
.cp-cal-cell-other { background:#f8fafc; }
.cp-cal-cell-today { background:#eff6ff; }
.cp-cal-day { font-size:.8125rem;font-weight:600;color:#374151;margin-bottom:4px; }
.cp-cal-cell-other .cp-cal-day { color:#cbd5e1; }
.cp-cal-cell-today .cp-cal-day { background:#2563eb;color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center; }
.cp-cal-event { font-size:.6875rem;padding:2px 6px;border-radius:4px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default; }
.cp-cal-event-todo { background:#f1f5f9;color:#475569; } .cp-cal-event-in-progress { background:#dbeafe;color:#1e40af; }
.cp-cal-event-review { background:#fef3c7;color:#92400e; } .cp-cal-event-done { background:#dcfce7;color:#166534; }
.cp-cal-event-milestone { background:#ede9fe;color:#5b21b6; }
@media (max-width:768px) { .cp-cal-cell { min-height:60px;padding:4px; } .cp-cal-event { font-size:.625rem; } }

/* == FILES == */
.cp-file-upload-zone { border:2px dashed #cbd5e1;border-radius:16px;padding:40px 24px;text-align:center;margin-bottom:24px;transition:all .2s;color:#64748b;cursor:pointer; }
.cp-file-upload-zone.cp-drag-over { border-color:#2563eb;background:#eff6ff;color:#2563eb; }
.cp-file-upload-zone:hover { border-color:#94a3b8; }
.cp-file-upload-inner svg { margin-bottom:12px;color:#94a3b8; }
.cp-drag-over .cp-file-upload-inner svg { color:#2563eb; }
.cp-file-upload-label { font-size:1rem;font-weight:500;color:#374151;margin:0; }
.cp-file-upload-browse { color:#2563eb;cursor:pointer;font-weight:600;text-decoration:underline; }

/* File staging */
.cp-file-staging { background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:24px;margin-bottom:24px; }
.cp-file-staging-header { margin-bottom:16px; }
.cp-file-staging-header h3 { font-size:1rem;font-weight:700;margin-bottom:4px; }
.cp-file-staging-list { display:flex;flex-direction:column;gap:12px;margin-bottom:16px; }
.cp-staging-item { display:flex;align-items:center;gap:14px;padding:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px; }
.cp-staging-preview { flex-shrink:0;width:56px;height:56px;border-radius:8px;overflow:hidden;background:#e2e8f0;display:flex;align-items:center;justify-content:center; }
.cp-staging-thumb { width:100%;height:100%;object-fit:cover; }
.cp-staging-icon { display:flex;align-items:center;justify-content:center;width:100%;height:100%; }
.cp-staging-fields { flex:1;min-width:0;display:flex;flex-direction:column;gap:6px; }
.cp-staging-fields input { width:100%;padding:7px 10px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:.8125rem;font-family:inherit;outline:none;transition:border-color .2s; }
.cp-staging-fields input:focus { border-color:#2563eb; }
.cp-staging-file-info { font-size:.6875rem;color:#94a3b8; }
.cp-staging-remove { flex-shrink:0;width:28px;height:28px;border:none;background:#fee2e2;color:#dc2626;border-radius:50%;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s; }
.cp-staging-remove:hover { background:#fca5a5; }
.cp-file-staging-actions { display:flex;gap:10px;align-items:center; }

/* File grid */
.cp-file-grid-header { margin-bottom:16px; }
.cp-file-grid-header h3 { font-size:1.125rem;font-weight:700; }
.cp-file-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:32px; }
@media (max-width:640px) { .cp-file-grid { grid-template-columns:1fr; } }
.cp-file-card { display:flex;align-items:flex-start;gap:14px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;transition:box-shadow .15s; }
.cp-file-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.06); }
.cp-file-card-thumb { flex-shrink:0;width:72px;height:72px;border-radius:10px;overflow:hidden;background:#f1f5f9;display:flex;align-items:center;justify-content:center; }
.cp-file-card-img { width:100%;height:100%;object-fit:cover;cursor:pointer;transition:opacity .15s; }
.cp-file-card-img:hover { opacity:.8; }
.cp-file-card-icon { display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#94a3b8; }
.cp-file-card-info { flex:1;min-width:0; }
.cp-file-card-name { font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.cp-file-card-desc { font-size:.8125rem;color:#64748b;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.cp-file-card-meta { display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:.6875rem;color:#94a3b8; }
.cp-file-card-meta span { white-space:nowrap; }
.cp-file-card-actions { flex-shrink:0;display:flex;flex-direction:column;gap:6px; }
.cp-btn-danger { border-color:#fecaca;color:#dc2626; }
.cp-btn-danger:hover { background:#fef2f2;border-color:#fca5a5; }

/* Upload progress (reused by staging) */
.cp-upload-progress { display:flex;align-items:center;gap:10px;width:100%;margin-top:12px; }
.cp-upload-progress-bar { flex:1;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden; }
.cp-upload-progress-fill { height:100%;background:#2563eb;border-radius:3px;width:0%;transition:width .3s; }
.cp-upload-progress-text { font-size:.75rem;color:#64748b;white-space:nowrap; }

/* Progress sections (dashboard etc) */
.cp-progress-section { margin-top:8px; }
.cp-progress-label { font-size:.875rem;font-weight:500;margin-bottom:8px;color:#475569; }
.cp-progress-bar { height:10px;background:#e2e8f0;border-radius:999px;overflow:hidden; }
.cp-progress-fill { height:100%;background:linear-gradient(90deg,#22c55e,#16a34a);border-radius:999px;transition:width .4s ease; }

/* == CONTACTS == */
.cp-contacts-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px; }
.cp-contact-card { display:flex;gap:18px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:24px;transition:box-shadow .15s; }
.cp-contact-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.06); }
.cp-contact-avatar { flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem; }
.cp-contact-info { flex:1;min-width:0; }
.cp-contact-name { font-weight:700;font-size:1rem; }
.cp-contact-role { font-size:.8125rem;color:#64748b;margin-bottom:10px; }
.cp-contact-link { display:flex;align-items:center;gap:6px;font-size:.8125rem;margin-top:4px; }

/* == LIVE UPDATE INDICATOR == */
.cp-live-indicator { position:fixed;bottom:24px;right:24px;background:#1e293b;color:#fff;padding:8px 16px;border-radius:999px;font-size:.75rem;font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:0 4px 12px rgba(0,0,0,.2);z-index:9990;animation:cpFadeIn .3s ease; }
.cp-live-dot { width:8px;height:8px;border-radius:50%;background:#22c55e;animation:cpPulse 2s infinite; }
@keyframes cpPulse { 0%,100%{opacity:1}50%{opacity:.4} }

/* == EMPTY STATE == */
.cp-empty-state { text-align:center;padding:48px 24px;color:#64748b; }

/* == RESPONSIVE == */
@media (max-width:768px) {
    .cp-topbar { padding:0 16px; } .cp-topbar-project,.cp-topbar-user { display:none; }
    .cp-tabs { padding:0 16px; } .cp-container { padding:20px 16px; }
    .cp-panel-header { flex-direction:column;align-items:flex-start; }
    .cp-login-card { padding:32px 24px; } .cp-timeline-bar { flex-direction:column;gap:8px; }
    .cp-calendar-nav { flex-wrap:wrap; }
    .cp-modal { max-height:95vh;margin:8px;border-radius:12px; }
    .cp-modal-header { padding:16px 20px 12px; } .cp-modal-body { padding:16px 20px; }
}

/* ═══════════════════════════════════════════════
   CLIENT SETTINGS (Notification Preferences)
   ═══════════════════════════════════════════════ */

.cp-settings-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 28px;
    max-width: 640px;
}
.cp-settings-loading {
    font-size: .875rem;
    color: #64748b;
    padding: 16px 0;
}
.cp-settings-group {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f1f5f9;
}
.cp-settings-group:last-of-type {
    border-bottom: none;
    margin-bottom: 20px;
    padding-bottom: 0;
}
.cp-settings-label {
    font-size: .9375rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px 0;
}
.cp-settings-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cp-settings-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.cp-settings-option:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}
.cp-settings-option input[type="radio"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: #2563eb;
}
.cp-settings-option-label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.3;
}
.cp-settings-option-desc {
    display: block;
    font-size: .75rem;
    color: #64748b;
    margin-top: 2px;
    line-height: 1.4;
}
.cp-settings-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}
.cp-settings-status {
    font-size: .8125rem;
    font-weight: 600;
}
.cp-settings-success { color: #10b981; }
.cp-settings-error { color: #ef4444; }