/* ============================================================
   NexPAI CRM — Style (modernistyczny + animacje)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #F8F9FC; --surface: #FFFFFF; --border: #E8EAF0; --border2: #D1D5E0;
  --accent: #7C3AED; --accent2: #6D28D9; --accent-bg: #F3EFFE;
  --ok: #059669; --ok-bg: #ECFDF5; --warn: #D97706; --warn-bg: #FFFBEB;
  --danger: #DC2626; --danger-bg: #FEF2F2; --info: #2563EB; --info-bg: #EFF6FF;
  --text: #0F172A; --text-dim: #64748B; --text-xdim: #94A3B8;
  --sidebar-w: 240px; --radius: 10px; --radius-sm: 7px;
  --shadow: 0 1px 4px rgba(0,0,0,.08); --shadow-md: 0 8px 30px rgba(0,0,0,.14);
  --shadow-card: 0 2px 8px rgba(0,0,0,.06);
}
html, body { height: 100%; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text); background: var(--bg); }

/* ── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes fadeInUp  { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn    { from { opacity:0; } to { opacity:1; } }
@keyframes slideInLeft { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:translateX(0); } }
@keyframes cardIn    { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes modalIn   { from { opacity:0; transform:scale(.95) translateY(-12px); } to { opacity:1; transform:none; } }
@keyframes spin      { to { transform:rotate(360deg); } }
@keyframes pulseRing { 0%,100% { box-shadow:0 0 0 0 rgba(124,58,237,.3); } 50% { box-shadow:0 0 0 8px rgba(124,58,237,0); } }
@keyframes shimmer   { 0% { background-position:-400px 0; } 100% { background-position:400px 0; } }

.view-anim { animation: fadeInUp .28s cubic-bezier(.4,0,.2,1) both; }

.card { animation: cardIn .22s cubic-bezier(.4,0,.2,1) both; }
.card:nth-child(1) { animation-delay:.03s; }
.card:nth-child(2) { animation-delay:.07s; }
.card:nth-child(3) { animation-delay:.11s; }
.card:nth-child(4) { animation-delay:.15s; }

/* ── AUTH ──────────────────────────────────────────────────── */
.auth-overlay { position:fixed; inset:0; background:linear-gradient(135deg,#0F172A,#1E1B4B 50%,#312E81); display:flex; align-items:center; justify-content:center; z-index:1000; animation:fadeIn .3s ease; }
.auth-box { background:#fff; border-radius:20px; padding:40px 36px; width:100%; max-width:420px; box-shadow:0 30px 70px rgba(0,0,0,.35); animation:modalIn .3s cubic-bezier(.4,0,.2,1); }
.auth-logo { display:flex; align-items:center; gap:10px; margin-bottom:28px; }
.auth-logo-icon { width:40px; height:40px; background:linear-gradient(135deg,#7C3AED,#4F46E5); border-radius:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(124,58,237,.4); }
.auth-logo-text { font-size:20px; font-weight:800; letter-spacing:-.5px; }
.auth-logo-sub { font-size:11px; font-weight:600; background:var(--accent-bg); color:var(--accent); border-radius:4px; padding:2px 6px; }
.auth-title { font-size:22px; font-weight:700; margin-bottom:4px; }
.auth-sub { font-size:13px; color:var(--text-dim); margin-bottom:24px; }
.auth-spinner { width:32px; height:32px; border:3px solid rgba(124,58,237,.2); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; margin:0 auto; }

/* ── LAYOUT ────────────────────────────────────────────────── */
#app { display:flex; height:100vh; overflow:hidden; }
aside { width:var(--sidebar-w); background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; overflow-y:auto; animation:slideInLeft .3s ease; }
main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.topbar { padding:14px 24px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; box-shadow:0 1px 0 var(--border); }
.topbar h1 { font-size:17px; font-weight:700; }
.subtitle { font-size:12px; color:var(--text-dim); margin-top:1px; }
#topbar-actions { display:flex; gap:8px; align-items:center; }
#views { flex:1; overflow-y:auto; padding:20px 24px; }

/* ── LOGO ──────────────────────────────────────────────────── */
.logo { padding:16px 18px 10px; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:800; letter-spacing:-.5px; }
.logo-sub { font-size:10px; font-weight:600; background:var(--accent-bg); color:var(--accent); border-radius:4px; padding:1px 6px; }

/* ── NAV ───────────────────────────────────────────────────── */
nav { padding:6px 10px; flex:1; }
.nav-group { font-size:10px; font-weight:700; color:var(--text-xdim); letter-spacing:.06em; text-transform:uppercase; padding:14px 8px 4px; }
#nav a { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--radius-sm); color:var(--text-dim); font-size:13px; font-weight:500; cursor:pointer; text-decoration:none; transition:all .18s cubic-bezier(.4,0,.2,1); margin-bottom:2px; white-space:nowrap; position:relative; }
#nav a:hover { background:var(--bg); color:var(--text); transform:translateX(2px); }
#nav a.active { background:linear-gradient(135deg,var(--accent-bg),#EDE9FE); color:var(--accent); font-weight:600; box-shadow:inset 3px 0 0 var(--accent); }
#nav a.active .nav-icon { color:var(--accent); }
.nav-icon { width:15px; height:15px; flex-shrink:0; transition:transform .18s; }
#nav a:hover .nav-icon { transform:scale(1.1); }
.nav-badge { background:var(--danger); color:#fff; font-size:10px; font-weight:700; border-radius:9px; padding:1px 6px; margin-left:auto; min-width:18px; text-align:center; animation:pulseRing 2s infinite; }

/* ── USER BLOCK ────────────────────────────────────────────── */
.user-block { padding:12px 14px; border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; flex-shrink:0; background:var(--bg); }
.avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--accent),#4F46E5); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.avatar-lg { width:46px; height:46px; font-size:15px; }
.user-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role-lbl { font-size:11px; color:var(--text-dim); }
.btn-icon-sm { background:none; border:none; cursor:pointer; color:var(--text-dim); border-radius:6px; padding:4px; display:flex; align-items:center; transition:all .15s; }
.btn-icon-sm:hover { background:var(--border); color:var(--text); }

/* ── CARDS ─────────────────────────────────────────────────── */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-card); transition:box-shadow .2s, border-color .2s; }
.card:hover { box-shadow:0 4px 16px rgba(0,0,0,.09); }
.card h3 { font-size:11px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.card-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; transition:transform .2s; }
.card:hover .card-icon { transform:scale(1.05); }
.card-icon.purple { background:var(--accent-bg); color:var(--accent); }
.card-icon.green  { background:var(--ok-bg);     color:var(--ok); }
.card-icon.warn   { background:var(--warn-bg);   color:var(--warn); }
.card-icon.red    { background:var(--danger-bg); color:var(--danger); }
.card-icon.blue   { background:var(--info-bg);   color:var(--info); }
.stat-card { cursor:default; }
.stat-value { font-size:28px; font-weight:800; line-height:1.1; letter-spacing:-.5px; }
.stat-sub { font-size:12px; color:var(--text-dim); margin-top:4px; }
.stat-sub.ok { color:var(--ok); }
.stat-sub.warn { color:var(--warn); }

/* ── GRID ──────────────────────────────────────────────────── */
.grid { display:grid; gap:16px; }
.grid-4   { grid-template-columns:repeat(4,1fr); }
.grid-3   { grid-template-columns:repeat(3,1fr); }
.grid-2   { grid-template-columns:1.4fr 1fr; }
.grid-eq2 { grid-template-columns:1fr 1fr; }

/* ── TABLE ─────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead th { padding:10px 14px; font-size:11px; font-weight:600; color:var(--text-dim); text-align:left; border-bottom:1px solid var(--border); background:#FAFBFD; white-space:nowrap; }
tbody td { padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
tbody tr:last-child td { border-bottom:none; }
tbody tr { transition:background .12s; }
tbody tr:hover td { background:#FAFBFD; }
.num { text-align:right; }
.actions-cell { display:flex; gap:4px; align-items:center; white-space:nowrap; }

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:var(--radius-sm); font-size:13px; font-weight:600; cursor:pointer; border:1px solid var(--accent); background:var(--accent); color:#fff; transition:all .18s cubic-bezier(.4,0,.2,1); white-space:nowrap; }
.btn:hover { background:var(--accent2); border-color:var(--accent2); transform:translateY(-1px); box-shadow:0 4px 14px rgba(124,58,237,.3); }
.btn:active { transform:translateY(0); box-shadow:none; }
.btn-ghost { background:var(--surface); color:var(--text); border-color:var(--border2); box-shadow:none; }
.btn-ghost:hover { background:var(--bg); box-shadow:none; transform:translateY(-1px); }
.btn-danger { background:var(--danger-bg); color:var(--danger); border-color:#FECACA; box-shadow:none; }
.btn-danger:hover { background:#FEE2E2; transform:translateY(-1px); box-shadow:none; }
.btn-ok { background:var(--ok-bg); color:var(--ok); border-color:#A7F3D0; }
.btn-sm { padding:6px 13px; font-size:12px; }
.btn-xs { padding:3px 9px; font-size:11px; border-radius:5px; }
.btn-link { background:none; border:none; color:var(--accent); font-size:12px; font-weight:600; cursor:pointer; padding:0; transition:color .15s; }
.btn-link:hover { text-decoration:underline; }

/* ── FORMS ─────────────────────────────────────────────────── */
.form-row { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.form-row label { font-size:12px; font-weight:600; color:var(--text-dim); }
input, select, textarea { width:100%; padding:9px 12px; border:1.5px solid var(--border2); border-radius:var(--radius-sm); font-size:13px; font-family:inherit; color:var(--text); background:var(--surface); outline:none; transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,58,237,.1); }
textarea { resize:vertical; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.form-row.full { grid-column:1/-1; }
.filter-bar { display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }

/* ── MODAL ─────────────────────────────────────────────────── */
.modal-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.5); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:500; padding:20px; }
.modal-backdrop.show { display:flex; }
.modal { background:var(--surface); border-radius:16px; width:100%; max-width:580px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-md); animation:modalIn .22s cubic-bezier(.4,0,.2,1); }
.modal-lg { max-width:780px; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); }
.modal-header h2 { font-size:16px; font-weight:700; }
.modal-close { background:none; border:none; cursor:pointer; color:var(--text-dim); border-radius:6px; padding:4px; display:flex; align-items:center; transition:all .15s; }
.modal-close:hover { background:var(--bg); color:var(--text); }
.modal-body { padding:20px; }

/* ── TOAST ─────────────────────────────────────────────────── */
#toast { position:fixed; bottom:24px; right:24px; padding:12px 20px; border-radius:10px; font-size:13px; font-weight:600; z-index:9999; opacity:0; transform:translateY(12px) scale(.96); transition:all .25s cubic-bezier(.4,0,.2,1); pointer-events:none; box-shadow:0 8px 24px rgba(0,0,0,.2); }
#toast.show { opacity:1; transform:translateY(0) scale(1); }
#toast.ok { background:var(--ok); color:#fff; }
#toast.warn { background:var(--warn); color:#fff; }
#toast.danger { background:var(--danger); color:#fff; }

/* ── BADGES ────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap; }
.badge-muted  { background:var(--bg);         color:var(--text-dim); }
.badge-ok     { background:var(--ok-bg);      color:var(--ok); }
.badge-warn   { background:var(--warn-bg);    color:var(--warn); }
.badge-danger { background:var(--danger-bg);  color:var(--danger); }
.badge-info   { background:var(--info-bg);    color:var(--info); }
.badge-purple { background:var(--accent-bg);  color:var(--accent); }

/* ── PIPELINE / KANBAN ─────────────────────────────────────── */
.crm-board, .kanban-board { display:flex; gap:14px; overflow-x:auto; padding-bottom:14px; min-height:55vh; }
.crm-column, .kanban-col { flex-shrink:0; width:230px; background:var(--bg); border-radius:var(--radius); padding:12px; display:flex; flex-direction:column; gap:8px; border:1px solid var(--border); }
.kanban-col { width:250px; }
.crm-col-header { margin-bottom:4px; }
.crm-col-title { display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.crm-col-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.crm-col-name { font-size:12px; font-weight:700; }
.crm-col-count { font-size:11px; background:var(--border); color:var(--text-dim); border-radius:9px; padding:1px 6px; }
.crm-col-value { font-size:11px; color:var(--text-dim); }
.crm-cards, .kanban-cards { display:flex; flex-direction:column; gap:8px; flex:1; min-height:60px; }
.crm-card, .kanban-card { background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:11px 13px; cursor:pointer; transition:all .2s cubic-bezier(.4,0,.2,1); position:relative; }
.crm-card:hover, .kanban-card:hover { border-color:var(--accent); box-shadow:0 4px 14px rgba(124,58,237,.14); transform:translateY(-2px); }
.crm-card-name { font-size:13px; font-weight:600; margin-bottom:2px; }
.crm-card-company { font-size:11px; color:var(--text-dim); margin-bottom:6px; }
.crm-card-value { font-size:12px; font-weight:700; color:var(--accent); }
.crm-card-date { font-size:10px; color:var(--text-xdim); margin-top:4px; }
.crm-card-score { position:absolute; top:8px; right:8px; font-size:10px; font-weight:700; border-radius:5px; padding:2px 5px; }
.crm-add-btn { width:100%; padding:8px; border:1.5px dashed var(--border2); border-radius:8px; background:none; color:var(--text-dim); font-size:12px; cursor:pointer; transition:all .15s; margin-top:4px; }
.crm-add-btn:hover { background:var(--surface); color:var(--accent); border-color:var(--accent); border-style:solid; }
.kanban-card-title { font-size:13px; font-weight:600; margin-bottom:4px; }
.kanban-card-meta { font-size:11px; color:var(--text-dim); display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }

/* ── TASKS ─────────────────────────────────────────────────── */
.task-item { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); transition:background .1s; }
.task-item:last-child { border-bottom:none; }
.task-check { width:19px; height:19px; border:2px solid var(--border2); border-radius:50%; flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .18s; margin-top:2px; }
.task-check.done { background:var(--ok); border-color:var(--ok); }
.task-check:hover { border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,58,237,.1); }
.task-body { flex:1; min-width:0; }
.task-title { font-size:13px; font-weight:500; }
.task-title.done { text-decoration:line-through; color:var(--text-dim); }
.task-meta { font-size:11px; color:var(--text-xdim); margin-top:2px; }
.task-prio { font-size:10px; font-weight:700; border-radius:4px; padding:2px 7px; flex-shrink:0; }
.prio-high   { background:var(--danger-bg); color:var(--danger); }
.prio-medium { background:var(--warn-bg);   color:var(--warn); }
.prio-low    { background:var(--bg);        color:var(--text-dim); }

/* ── GANTT ─────────────────────────────────────────────────── */
.gantt-hdr { display:flex; border-bottom:2px solid var(--border); }
.gantt-label-hdr { width:200px; flex-shrink:0; font-size:11px; font-weight:700; color:var(--text-dim); padding:8px 12px; }
.gantt-months { flex:1; display:flex; overflow:hidden; }
.gantt-month { flex:1; font-size:11px; font-weight:700; color:var(--text-dim); padding:8px 6px; border-left:1px solid var(--border); text-align:center; }
.gantt-row { display:flex; align-items:center; border-bottom:1px solid var(--border); transition:background .1s; }
.gantt-row:hover { background:var(--bg); }
.gantt-label { width:200px; flex-shrink:0; font-size:12px; padding:8px 12px; color:var(--text); font-weight:500; }
.gantt-track { flex:1; position:relative; height:36px; min-width:400px; }
.gantt-bar { position:absolute; height:24px; top:6px; border-radius:6px; display:flex; align-items:center; padding:0 10px; font-size:11px; font-weight:600; color:#fff; cursor:pointer; overflow:hidden; white-space:nowrap; min-width:30px; transition:filter .15s; }
.gantt-bar:hover { filter:brightness(1.1); }

/* ── CALENDAR ──────────────────────────────────────────────── */
.cal-nav { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.cal-nav h2 { font-size:16px; font-weight:700; flex:1; text-align:center; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.cal-day-hdr { background:#FAFBFD; padding:8px 4px; font-size:11px; font-weight:700; color:var(--text-dim); text-align:center; text-transform:uppercase; }
.cal-day { background:var(--surface); padding:6px; min-height:90px; cursor:pointer; transition:background .12s; }
.cal-day:hover { background:var(--accent-bg); }
.cal-day.today { background:linear-gradient(135deg,#F0EBFF,#EDE9FE); }
.cal-day-num { font-size:12px; font-weight:600; color:var(--text-dim); margin-bottom:4px; }
.cal-day.today .cal-day-num { color:var(--accent); font-weight:800; }
.cal-day.other-month .cal-day-num { color:var(--border2); }
.cal-event { font-size:10px; background:var(--accent); color:#fff; border-radius:4px; padding:2px 5px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; transition:opacity .1s; }
.cal-event:hover { opacity:.85; }

/* ── CHAT ──────────────────────────────────────────────────── */
.chat-layout { display:flex; height:68vh; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-card); }
.chat-sidebar { width:210px; border-right:1px solid var(--border); overflow-y:auto; flex-shrink:0; }
.chat-sidebar-hdr { padding:13px 14px; font-size:12px; font-weight:700; color:var(--text-dim); border-bottom:1px solid var(--border); background:var(--bg); text-transform:uppercase; letter-spacing:.04em; }
.chat-room { padding:11px 13px; cursor:pointer; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:9px; transition:background .12s; }
.chat-room:hover, .chat-room.active { background:var(--accent-bg); }
.chat-room.active { border-left:3px solid var(--accent); }
.chat-room-name { font-size:13px; font-weight:600; }
.chat-room-last { font-size:11px; color:var(--text-xdim); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px; }
.chat-main { flex:1; display:flex; flex-direction:column; min-width:0; }
.chat-main-hdr { padding:13px 16px; border-bottom:1px solid var(--border); font-size:14px; font-weight:700; background:var(--bg); }
.chat-msgs { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.chat-msg { display:flex; gap:8px; align-items:flex-end; }
.chat-msg.mine { flex-direction:row-reverse; }
.chat-avatar { width:28px; height:28px; font-size:10px; flex-shrink:0; }
/* CHAT BUBBLE FIX — word wrap + proper max width */
.chat-bubble-wrap { max-width:68%; min-width:0; }
.chat-sender { font-size:11px; font-weight:600; color:var(--text-dim); margin-bottom:3px; }
.chat-bubble {
  padding:10px 14px; border-radius:14px; font-size:13px; line-height:1.6;
  word-break: break-word; overflow-wrap: break-word; white-space: pre-wrap;
}
.chat-msg:not(.mine) .chat-bubble { background:var(--bg); border:1px solid var(--border); border-radius:4px 14px 14px 14px; }
.chat-msg.mine .chat-bubble { background:linear-gradient(135deg,var(--accent),#6D28D9); color:#fff; border-radius:14px 4px 14px 14px; box-shadow:0 2px 8px rgba(124,58,237,.25); }
.chat-time { font-size:10px; color:var(--text-xdim); margin-top:4px; }
.chat-input-row { padding:12px 14px; border-top:1px solid var(--border); display:flex; gap:8px; background:var(--bg); }
.chat-input-row input { flex:1; border-radius:20px; }

/* ── HR ────────────────────────────────────────────────────── */
.emp-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); transition:background .1s; }
.emp-row:last-child { border-bottom:none; }
.emp-info { flex:1; }
.emp-name { font-size:14px; font-weight:600; }
.emp-role-lbl { font-size:12px; color:var(--text-dim); }
.clock-display { font-size:34px; font-weight:800; color:var(--accent); text-align:center; padding:14px; font-variant-numeric:tabular-nums; }

/* ── REPORTS ───────────────────────────────────────────────── */
.report-bar { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.report-bar-bg { flex:1; height:9px; background:var(--border); border-radius:9px; overflow:hidden; }
.report-bar-fill { height:100%; border-radius:9px; transition:width .6s cubic-bezier(.4,0,.2,1); }
.report-bar-label { font-size:12px; font-weight:700; min-width:70px; text-align:right; }

/* ── EMAIL ─────────────────────────────────────────────────── */
.email-compose { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-card); }
.email-toolbar { padding:10px 14px; background:var(--bg); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.email-field { display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--border); }
.email-field label { font-size:11px; font-weight:700; color:var(--text-dim); width:50px; flex-shrink:0; }
.email-field input, .email-field select { border:none; outline:none; flex:1; font-family:inherit; font-size:13px; background:none; box-shadow:none; }
.email-body textarea { width:100%; border:none; outline:none; font-family:inherit; font-size:13px; padding:14px; min-height:200px; resize:vertical; box-shadow:none; }

/* ── AI TIP ────────────────────────────────────────────────── */
.ai-tip { display:flex; align-items:flex-start; gap:10px; background:linear-gradient(135deg,#F5F3FF,#EDE9FE); border:1px solid #DDD6FE; border-radius:10px; padding:12px 14px; margin-bottom:16px; font-size:13px; color:#4C1D95; animation:fadeIn .4s ease; }
.ai-tip button { background:none; border:none; cursor:pointer; color:#6D28D9; font-size:18px; margin-left:auto; opacity:.7; transition:opacity .15s; }
.ai-tip button:hover { opacity:1; }

/* ── MISC ──────────────────────────────────────────────────── */
.empty-state { display:flex; flex-direction:column; align-items:center; padding:48px 20px; text-align:center; color:var(--text-dim); }
.empty-icon { font-size:40px; margin-bottom:12px; }
.empty-state h3 { font-size:15px; font-weight:700; color:var(--text); margin-bottom:6px; }
.row-link { color:var(--accent); cursor:pointer; font-weight:600; text-decoration:none; }
.row-link:hover { text-decoration:underline; }
.pill-list .row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; }
.pill-list .row:last-child { border-bottom:none; }
.section-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.section-hdr h2 { font-size:15px; font-weight:700; }
.progress-bar { height:7px; background:var(--border); border-radius:9px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--accent),#8B5CF6); border-radius:9px; transition:width .5s ease; }
.color-dot { width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0; }
.sprint-hdr { background:var(--accent); color:#fff; padding:9px 13px; border-radius:8px; font-size:12px; font-weight:700; margin-bottom:8px; box-shadow:0 2px 8px rgba(124,58,237,.25); }
.sprint-card { background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:11px 13px; margin-bottom:8px; cursor:pointer; transition:all .18s; }
.sprint-card:hover { border-color:var(--accent); transform:translateY(-1px); box-shadow:0 3px 10px rgba(124,58,237,.1); }
.sprint-pts { font-size:10px; background:var(--accent-bg); color:var(--accent); border-radius:4px; padding:1px 5px; float:right; font-weight:700; }

/* ── ROLE RIBBON ───────────────────────────────────────────── */
.role-ribbon { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; padding:2px 8px; border-radius:99px; }

@media (max-width: 900px) {
  aside { display:none; }
  .grid-4 { grid-template-columns:1fr 1fr; }
  .grid-2, .grid-eq2 { grid-template-columns:1fr; }
  #views { padding:14px; }
  .chat-sidebar { width:160px; }
}