:root {
  --bg: #f6f8fc;
  --card: rgba(255,255,255,.82);
  --card-solid: #ffffff;
  --text: #111827;
  --muted: #667085;
  --line: #e7ebf3;
  --blue: #3457ff;
  --blue-soft: #eef3ff;
  --green: #0ea56b;
  --orange: #f59e0b;
  --red: #ef4444;
  --shadow: 0 20px 60px rgba(22,34,66,.08);
  --radius: 28px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 10%, rgba(88,116,255,.15), transparent 28%),
    radial-gradient(circle at 90% 0%, rgba(20,184,166,.13), transparent 26%),
    linear-gradient(180deg, #fbfcff 0%, var(--bg) 100%);
  min-height: 100vh;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: linear-gradient(#e9edf5 1px, transparent 1px), linear-gradient(90deg,#e9edf5 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: .55;
  pointer-events: none;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.app-shell { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; position: relative; }
.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 24px;
  background: rgba(255,255,255,.68); backdrop-filter: blur(22px);
  border-right: 1px solid rgba(226,232,240,.9);
}
.brand { display: flex; gap: 14px; align-items: center; margin-bottom: 34px; }
.brand-mark {
  width: 52px; height: 52px; border-radius: 18px;
  display: grid; place-items: center; color: white; font-weight: 900;
  background: linear-gradient(135deg, #111827, #3457ff 55%, #12b981);
  box-shadow: 0 16px 30px rgba(52,87,255,.22);
}
.brand-title { font-weight: 900; font-size: 20px; letter-spacing: -.03em; }
.brand-subtitle { color: var(--muted); font-size: 13px; margin-top: 2px; }
.nav { display: grid; gap: 8px; }
.nav-item {
  border: 0; width: 100%; text-align: left; padding: 14px 16px; border-radius: 16px;
  background: transparent; color: #344054; font-weight: 750;
  transition: .18s ease;
}
.nav-item:hover { background: #f0f4ff; transform: translateX(2px); }
.nav-item.active { background: #111827; color: white; box-shadow: 0 14px 28px rgba(17,24,39,.13); }
.sidebar-note {
  position: absolute; left: 24px; right: 24px; bottom: 24px;
  padding: 14px; border-radius: 18px; background: #f8fafc; color: var(--muted); font-size: 13px;
  border: 1px solid var(--line);
}
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#12b981; margin-right:8px; }
.main { padding: 28px 32px 56px; position: relative; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:28px; }
.save-toast {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: min(420px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 50px rgba(16,24,40,.18);
  color: #344054;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -12px);
  transition: opacity .18s ease, transform .18s ease;
}
.save-toast.show { opacity: 1; transform: translate(-50%, 0); }
.save-toast b { display: block; color: #111827; font-size: 14px; line-height: 1.2; }
.save-toast span { display: block; color: #667085; font-size: 13px; line-height: 1.3; margin-top: 2px; }
.save-toast-dot { width: 10px; height: 10px; border-radius: 50%; background: #3457ff; flex: 0 0 auto; box-shadow: 0 0 0 5px #eef3ff; }
.save-toast.saving .save-toast-dot { background: #3457ff; box-shadow: 0 0 0 5px #eef3ff; }
.save-toast.success .save-toast-dot { background: #12b981; box-shadow: 0 0 0 5px #ecfdf3; }
.save-toast.error { border-color: #fecdd3; background: #fff7f7; }
.save-toast.error .save-toast-dot { background: #ef4444; box-shadow: 0 0 0 5px #fff1f2; }
h1 { font-size: 44px; line-height: 1; margin: 0 0 10px; letter-spacing: -.055em; }
p { margin: 0; }
#pageSubtitle { color: var(--muted); font-size: 17px; }
.top-actions { display:flex; gap:10px; }
.primary-btn, .ghost-btn, .soft-btn, .danger-btn {
  border: 0; border-radius: 16px; padding: 12px 16px; font-weight: 850; transition: .18s ease;
}
.primary-btn { background: #111827; color: white; box-shadow: 0 14px 28px rgba(17,24,39,.14); }
.ghost-btn { background: rgba(255,255,255,.78); color: #344054; border: 1px solid var(--line); }
.soft-btn { background: var(--blue-soft); color: #2242d8; border: 1px solid #dce5ff; }
.danger-btn { background: #fff1f2; color: #e11d48; border: 1px solid #ffe4e6; }
.primary-btn:hover, .ghost-btn:hover, .soft-btn:hover, .danger-btn:hover { transform: translateY(-1px); }
.grid { display:grid; gap:20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card {
  background: var(--card); backdrop-filter: blur(20px); border: 1px solid rgba(226,232,240,.9);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
  transition: .2s ease; overflow: hidden; position: relative;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 26px 70px rgba(22,34,66,.11); }
.project-card:before {
  content:""; position:absolute; left:0; right:0; top:0; height:5px;
  background: linear-gradient(90deg, var(--project-color, #3457ff), #14b8a6);
}
.card-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.card-title { font-size: 28px; font-weight: 900; letter-spacing: -.04em; }
.card-text { color: var(--muted); line-height: 1.45; font-size: 17px; }
.avatar, .project-avatar {
  width: 58px; height:58px; border-radius:20px; object-fit:cover; display:grid; place-items:center;
  font-size: 24px; font-weight:900; color:white; background: linear-gradient(135deg, #111827, #3457ff);
  box-shadow: 0 14px 30px rgba(52,87,255,.16); flex: 0 0 auto;
}
.project-avatar.large { width:72px; height:72px; border-radius:24px; font-size:30px; }
.row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.space-between { justify-content:space-between; }
.tags { display:flex; gap:8px; flex-wrap:wrap; margin: 18px 0; }
.tag { padding: 8px 12px; border-radius:999px; background:#f1f5f9; color:#475467; font-weight:800; font-size:14px; }
.tag.dev { background:#eef3ff; color:#2242d8; }
.tag.teach { background:#ecfdf3; color:#067647; }
.avatars { display:flex; margin: 14px 0; }
.mini-avatar { width:36px; height:36px; margin-right:-9px; border:3px solid white; border-radius:50%; display:grid; place-items:center; color:white; font-weight:900; background: #111827; font-size:12px; overflow:hidden; }
.mini-avatar img { width:100%; height:100%; object-fit:cover; }
.icon-btn {
  width: 44px; height:44px; border-radius:16px; border:1px solid var(--line); background:white;
  display:grid; place-items:center; color:#111827; font-weight:900; transition:.18s ease; text-decoration:none;
}
.icon-btn:hover { transform: translateY(-1px); background:#f8fafc; }
.tg-btn { background:#eff6ff; border-color:#dbeafe; color:#229ED9; }
.tg-btn svg, .service-logo svg { width:22px; height:22px; display:block; }
.project-actions { display:flex; gap:8px; align-items:center; }
.stat-card { padding: 22px; }
.stat-num { font-size: 38px; font-weight: 950; letter-spacing:-.05em; }
.stat-label { color: var(--muted); margin-top: 4px; }
.section-title { font-size: 26px; font-weight: 950; letter-spacing: -.04em; margin: 28px 0 16px; }
.filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.filter-btn { border:1px solid var(--line); background:white; color:#344054; border-radius:999px; padding:10px 14px; font-weight:850; }
.filter-btn.active { background:#111827; color:white; border-color:#111827; }
.person-card { cursor: pointer; }
.person-role { color:var(--muted); font-weight:700; margin-top:4px; }
.task-pill { padding: 5px 9px; border-radius: 999px; font-weight: 850; font-size: 12px; background:#f1f5f9; color:#475467; }
.task-pill.todo { background:#f1f5f9; }
.task-pill.progress { background:#fff7ed; color:#c2410c; }
.task-pill.done { background:#ecfdf3; color:#067647; }
.kanban { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kanban-col { background: rgba(255,255,255,.62); border:1px solid var(--line); border-radius: 24px; padding: 14px; min-height: 360px; }
.kanban-title { font-weight: 950; margin: 6px 6px 14px; display:flex; justify-content:space-between; }
.task-card { background:white; border:1px solid var(--line); border-radius:18px; padding:14px; margin-bottom:12px; box-shadow:0 10px 28px rgba(16,24,40,.06); }
.task-title { font-weight:900; margin-bottom:8px; }
.task-meta { color:var(--muted); font-size:13px; display:grid; gap:4px; }
.service-card { display:flex; align-items:center; gap:14px; }
.service-logo { width:56px; height:56px; border-radius:20px; background:#f8fafc; border:1px solid var(--line); display:grid; place-items:center; font-size:24px; }
.doc-list { display:grid; gap:12px; }
.doc-row { display:flex; justify-content:space-between; align-items:center; gap:14px; background:white; border:1px solid var(--line); border-radius:18px; padding:14px 16px; }
.muted { color: var(--muted); }
.form { display:grid; gap:14px; }
.field { display:grid; gap:7px; }
label { font-size:13px; color:#475467; font-weight:850; }
input, textarea, select {
  width:100%; border:1px solid var(--line); background:#fff; border-radius:16px; padding:12px 14px; outline:none;
}
textarea { min-height: 92px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color:#b7c5ff; box-shadow:0 0 0 4px #eef3ff; }
.form-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }
.modal-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.45); backdrop-filter: blur(8px); display:none; align-items:center; justify-content:center; padding:20px; z-index:50; }
.modal-backdrop.show { display:flex; }
.modal { width:min(760px, 100%); max-height:90vh; overflow:auto; background:white; border-radius:30px; box-shadow:0 30px 100px rgba(0,0,0,.22); padding:24px; }
.modal-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px; }
.modal h2 { margin:0 0 6px; font-size:28px; letter-spacing:-.04em; }
.modal p { color:var(--muted); }
.check-list { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; padding: 8px 0; }
.check-item { display:flex; align-items:center; gap:8px; padding:10px; border:1px solid var(--line); border-radius:14px; }
.check-item input { width:auto; }
.empty { text-align:center; padding:40px 20px; color:var(--muted); background:white; border:1px dashed #cbd5e1; border-radius:24px; }
@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position:relative; height:auto; }
  .sidebar-note { position:static; margin-top:18px; }
  .grid-2, .grid-3, .grid-4, .kanban { grid-template-columns: 1fr; }
  .topbar { flex-direction:column; }
  h1 { font-size:34px; }
}

/* Calendar */
.calendar-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:22px; }
.calendar-summary { display:flex; gap:12px; flex-wrap:wrap; }
.calendar-summary-item { min-width:150px; background:rgba(255,255,255,.82); border:1px solid var(--line); border-radius:22px; padding:14px 16px; box-shadow:0 14px 40px rgba(22,34,66,.06); }
.calendar-summary-item b { display:block; font-size:26px; letter-spacing:-.04em; }
.calendar-summary-item span { color:var(--muted); font-size:13px; font-weight:750; }
.calendar-summary-item.warning b { color:#c2410c; }
.calendar-summary-item.danger b { color:#e11d48; }
.calendar-grid { display:grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap:12px; }
.calendar-day { background:rgba(255,255,255,.78); border:1px solid var(--line); border-radius:24px; min-height:210px; padding:14px; box-shadow:0 14px 38px rgba(22,34,66,.06); }
.calendar-day.today { border-color:#b7c5ff; box-shadow:0 18px 46px rgba(52,87,255,.12); }
.calendar-day-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.calendar-day-head span { text-transform:capitalize; color:var(--muted); font-weight:850; font-size:13px; }
.calendar-day-head b { font-size:15px; }
.calendar-day-body { display:grid; gap:8px; }
.calendar-task { background:white; border:1px solid var(--line); border-radius:16px; padding:10px; cursor:pointer; transition:.16s ease; }
.calendar-task:hover { transform:translateY(-1px); box-shadow:0 12px 24px rgba(16,24,40,.08); }
.calendar-task.soon { border-color:#fed7aa; background:#fff7ed; }
.calendar-task.overdue { border-color:#fecdd3; background:#fff1f2; }
.calendar-task-title { font-size:13px; font-weight:900; line-height:1.25; }
.calendar-task-meta { display:grid; gap:4px; margin-top:8px; color:var(--muted); font-size:12px; }
.calendar-empty { color:#98a2b3; font-size:13px; padding:14px 4px; }
.calendar-overdue { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.due-inline.overdue { color:#e11d48; }
.due-inline.soon { color:#c2410c; }
@media (max-width: 1180px) { .calendar-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .calendar-overdue { grid-template-columns:1fr; } }
@media (max-width: 680px) { .calendar-grid { grid-template-columns:1fr; } .calendar-toolbar { align-items:stretch; flex-direction:column; } }
.work-row { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 4px; color:#475467; font-size:14px; font-weight:850; }
.work-row span { background:#f8fafc; border:1px solid var(--line); border-radius:999px; padding:8px 10px; }
.work-row.big { margin:18px 0; }
.procurement-card:before { content:""; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg,#0ea5e9,#12b981); }
.proc-price { font-size:28px; font-weight:950; letter-spacing:-.04em; margin:16px 0 4px; }

/* Procurement margin and contractor */
.proc-metrics { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin:14px 0 16px; }
.proc-metrics div, .margin-preview { background:#f8fafc; border:1px solid var(--line); border-radius:18px; padding:12px; }
.proc-metrics span, .margin-preview span { display:block; color:#667085; font-size:12px; font-weight:850; margin-bottom:5px; }
.proc-metrics b, .margin-preview b { font-size:15px; }
.positive { color:#059669; }
.negative { color:#e11d48; }
.margin-preview { display:flex; align-items:center; justify-content:space-between; }
.margin-preview span { margin:0; }
.margin-preview b { font-size:22px; letter-spacing:-.04em; }

/* Year calendar */
.year-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:14px; }
.year-month { background:rgba(255,255,255,.82); border:1px solid var(--line); border-radius:24px; padding:14px; min-height:220px; box-shadow:0 14px 38px rgba(22,34,66,.06); }
.year-month-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; text-transform:capitalize; }
.year-month-head span { min-width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:#eef3ff; color:#3457ff; font-weight:950; }
.year-month-body { display:grid; gap:8px; }
.year-task { display:grid; grid-template-columns:32px 1fr; gap:9px; align-items:start; background:#fff; border:1px solid var(--line); border-radius:16px; padding:9px; cursor:pointer; transition:.16s ease; }
.year-task:hover { transform:translateY(-1px); box-shadow:0 12px 24px rgba(16,24,40,.08); }
.year-task.soon { border-color:#fed7aa; background:#fff7ed; }
.year-task.overdue { border-color:#fecdd3; background:#fff1f2; }
.year-task span { width:28px; height:28px; border-radius:10px; background:#f1f5f9; display:flex; align-items:center; justify-content:center; font-weight:950; font-size:13px; }
.year-task b { display:block; font-size:13px; line-height:1.2; }
.year-task small { display:block; color:var(--muted); margin-top:4px; font-weight:750; }
@media (max-width: 1180px) { .year-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .proc-metrics { grid-template-columns:1fr; } }
@media (max-width: 680px) { .year-grid { grid-template-columns:1fr; } }

/* Server section */
.server-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; overflow:hidden; position:relative; }
.server-hero:before { content:""; position:absolute; inset:-80px -120px auto auto; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(52,87,255,.14), transparent 62%); pointer-events:none; }
.server-hero h2 { margin:10px 0 8px; font-size:34px; letter-spacing:-.05em; }
.server-hero p { color:var(--muted); max-width:680px; line-height:1.55; }
.server-icon { width:64px; height:64px; border-radius:24px; display:grid; place-items:center; background:#eef3ff; border:1px solid #dbe5ff; font-size:28px; box-shadow:0 18px 42px rgba(52,87,255,.12); }
.server-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; position:relative; z-index:1; }
.server-grid { margin-bottom:16px; }
.server-metric { background:rgba(255,255,255,.84); border:1px solid var(--line); border-radius:24px; padding:18px; box-shadow:0 14px 38px rgba(22,34,66,.06); }
.server-metric span { display:block; color:#667085; font-size:13px; font-weight:850; margin-bottom:10px; }
.server-metric b { display:block; font-size:24px; letter-spacing:-.04em; overflow-wrap:anywhere; }
.server-list { display:grid; gap:12px; margin-top:14px; }
.server-list div { background:#f8fafc; border:1px solid var(--line); border-radius:16px; padding:12px; }
.server-list span { display:block; color:#667085; font-size:12px; font-weight:850; margin-bottom:5px; }
.server-list b { overflow-wrap:anywhere; }
@media (max-width: 760px) { .server-hero { flex-direction:column; align-items:flex-start; } .server-hero h2 { font-size:28px; } }

/* Auth */
body.locked { overflow: hidden; }
.login-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 10%, rgba(52,87,255,.18), transparent 28%), radial-gradient(circle at 80% 0%, rgba(18,185,129,.16), transparent 28%), #f8fafc; }
.login-card { width: min(460px, 100%); background: rgba(255,255,255,.86); border: 1px solid rgba(226,232,240,.95); border-radius: 34px; padding: 34px; box-shadow: 0 30px 90px rgba(22,34,66,.14); backdrop-filter: blur(24px); }
.brand-mark.big { width: 64px; height: 64px; border-radius: 22px; margin-bottom: 20px; }
.login-card h1 { font-size: 38px; margin-bottom: 10px; }
.login-card p { color: var(--muted); margin-bottom: 22px; }
.login-form { display: grid; gap: 14px; }
.login-error { color: #e11d48; min-height: 20px; font-weight: 800; font-size: 14px; }
.login-hint { margin-top: 18px; padding: 14px; border-radius: 18px; background: #f8fafc; border: 1px solid var(--line); color: #667085; line-height: 1.5; font-size: 14px; }
.role-chip { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.78); border-radius: 16px; color: #667085; font-size: 13px; }
.role-chip b { color: #111827; }
.viewer-mode .admin-only { display: none !important; }
.readonly-notice { padding: 18px; border-radius: 20px; background: #f8fafc; border: 1px solid var(--line); }
.readonly-notice b { display: block; font-size: 18px; margin-bottom: 6px; }
.readonly-notice p { color: var(--muted); line-height: 1.5; }

.nav-bottom{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid rgba(148,163,184,.22);
}
.access-card{
  max-width:720px;
}
.salary-main{
  font-size:34px;
  font-weight:900;
  letter-spacing:-.04em;
  margin:18px 0;
  color:#111827;
}
.salary-card,
.vacation-card{
  position:relative;
  overflow:hidden;
}
.salary-card:before,
.vacation-card:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,#111827,#6366f1,#06b6d4);
}
.vacation-date{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:20px;
  font-weight:850;
  margin:14px 0;
  color:#111827;
}
.vacation-alert{
  margin:10px 0;
  padding:10px 12px;
  border-radius:16px;
  background:#fff7ed;
  border:1px solid #fed7aa;
  color:#9a3412;
  font-weight:750;
}
.soon-vacation:before{
  background:linear-gradient(90deg,#f97316,#facc15);
}
.tag.danger-soft{
  background:#fff7ed;
  color:#9a3412;
  border-color:#fed7aa;
}
.calendar-task.vacation,
.year-task.vacation{
  background:#fff7ed;
  border-color:#fed7aa;
  color:#9a3412;
}
.contract-links{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.hint-card{border:1px solid #e5e7eb;border-radius:18px;padding:14px 16px;background:#f8fafc;color:#64748b;font-weight:700;line-height:1.45}
.gitlab-btn { background:#fff7ed; border-color:#fed7aa; color:#FC6D26; }
.gitlab-btn svg { width:23px; height:23px; display:block; }
.gitlab-tag { background:#fff7ed; color:#c2410c; }
.form-error{
  padding:14px 16px;
  border-radius:18px;
  background:#fff1f2;
  border:1px solid #fecdd3;
  color:#be123c;
  font-weight:800;
}
.field small.muted{
  display:block;
  margin-top:8px;
  font-size:13px;
}
.person-bottom { justify-content: flex-start; }
.person-tg { margin-left: auto; flex: 0 0 auto; }
.section-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin: 28px 0 16px; }
.section-row .section-title { margin:0; }
.mini-project-dot { width:28px; height:28px; border-radius:10px; display:inline-grid; place-items:center; color:white; font-size:11px; font-weight:900; margin-right:6px; }
.key-projects-list .check-item { align-items:center; }

.log-list{display:grid;gap:12px}
.log-row{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:16px;border:1px solid rgba(15,23,42,.08);border-radius:20px;background:rgba(255,255,255,.86);box-shadow:0 12px 30px rgba(15,23,42,.05)}
.log-main{display:grid;gap:6px;min-width:0}
.log-main b{font-size:14px;color:#0f172a}
.log-main span{font-size:13px;color:#64748b;line-height:1.45}
.log-meta{display:grid;gap:6px;text-align:right;white-space:nowrap;font-size:12px;color:#64748b}
.log-meta span:last-child{display:inline-flex;align-items:center;justify-content:flex-end;padding:6px 10px;border-radius:999px;background:#f1f5f9;color:#334155;font-weight:700}
@media (max-width:760px){.log-row{display:grid}.log-meta{text-align:left;white-space:normal}.log-meta span:last-child{justify-content:flex-start}}
.landing-btn { background:#ecfeff; border-color:#a5f3fc; color:#0891b2; }
.landing-btn svg { width:22px; height:22px; display:block; }
.landing-tag { background:#ecfeff; color:#0e7490; }

/* Form leads */
.lead-table{display:grid;gap:8px}
.lead-table-head{display:grid;grid-template-columns:132px minmax(130px,1fr) 150px minmax(190px,1.2fr) minmax(240px,1.4fr) 132px 94px;gap:12px;align-items:center;padding:0 14px;color:#667085;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.03em}
.lead-list{display:grid;gap:6px}
.leads-filters{margin-top:22px}
.lead-row{display:grid;grid-template-columns:132px minmax(130px,1fr) 150px minmax(190px,1.2fr) minmax(240px,1.4fr) 132px 94px;gap:12px;align-items:center;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:14px;padding:10px 14px;box-shadow:0 6px 18px rgba(22,34,66,.04)}
.lead-row:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:999px;background:#3457ff}
.lead-row.lead-status-in_work:before{background:#f59e0b}
.lead-row.lead-status-done:before{background:#12b981}
.lead-state,.lead-person,.lead-subject,.lead-date{display:grid;gap:4px;min-width:0}
.lead-cell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#344054;font-size:14px;font-weight:800}
.lead-cell b,.lead-subject b{font-size:14px;line-height:1.2;color:#111827;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lead-phone{font-variant-numeric:tabular-nums}
.lead-person span,.lead-subject span,.lead-subject a,.lead-date span,.lead-date small{color:#667085;font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lead-subject a{color:#475467;text-decoration:underline}
.lead-date{justify-items:end;text-align:right}
.lead-open-btn{padding:9px 12px;border-radius:12px}
.lead-main{display:grid;gap:8px;min-width:0}
.lead-main b{font-size:20px;line-height:1.18}
.lead-main span,.lead-main a{color:#667085;line-height:1.35;overflow-wrap:anywhere}
.lead-meta{display:grid;gap:10px;justify-items:end;color:#667085;font-size:13px;white-space:nowrap}
.lead-kicker{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lead-type,.lead-status{display:inline-flex;align-items:center;justify-content:center;width:max-content;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:900}
.lead-type{background:#eef3ff;color:#2242d8}
.lead-status{background:#f1f5f9;color:#475467}
.lead-status-in_work .lead-status{background:#fff7ed;color:#c2410c}
.lead-status-done .lead-status{background:#ecfdf3;color:#067647}
.lead-detail{display:grid;gap:18px}
.lead-detail h3{font-size:28px;line-height:1.08;margin:8px 0 0;letter-spacing:-.04em}
.lead-detail-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.lead-status-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.lead-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lead-fields div,.lead-box{background:#f8fafc;border:1px solid var(--line);border-radius:18px;padding:14px}
.lead-fields span{display:block;color:#667085;font-size:12px;font-weight:900;margin-bottom:5px}
.lead-fields b{overflow-wrap:anywhere}
.lead-box{display:grid;gap:10px}
.lead-box p{color:#475467;line-height:1.45}
.lead-raw{border:1px solid var(--line);border-radius:18px;padding:14px;background:#fff}
.lead-raw summary{font-weight:900;cursor:pointer}
.lead-raw pre{white-space:pre-wrap;overflow:auto;margin:12px 0 0;color:#475467;font-size:13px;line-height:1.45}
@media (max-width:1180px){.lead-table-head,.lead-row{grid-template-columns:120px minmax(130px,1fr) 145px minmax(180px,1fr) auto}.lead-date{display:none}.lead-table-head span:nth-child(6){display:none}}
@media (max-width:860px){.lead-table-head{display:none}.lead-row,.lead-detail-head{display:grid;grid-template-columns:1fr}.lead-date,.lead-meta{display:grid;justify-items:start;text-align:left;white-space:normal}.lead-cell,.lead-subject b,.lead-subject span,.lead-subject a,.lead-date span,.lead-date small{white-space:normal}.lead-fields{grid-template-columns:1fr}.lead-status-actions{justify-content:flex-start}}

/* Priority-first task cards */
.task-card { position: relative; overflow: hidden; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.task-card:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(16,24,40,.10); }
.task-priority-strip { position:absolute; left:0; top:0; bottom:0; width:5px; }
.task-card.priority-high { border-color:#fecaca; background:linear-gradient(135deg,#fff 0%,#fff7f7 100%); }
.task-card.priority-medium { border-color:#fde68a; background:linear-gradient(135deg,#fff 0%,#fffbeb 100%); }
.task-card.priority-low { border-color:#bbf7d0; background:linear-gradient(135deg,#fff 0%,#f0fdf4 100%); }
.task-card.priority-high .task-priority-strip { background:#ef4444; }
.task-card.priority-medium .task-priority-strip { background:#f59e0b; }
.task-card.priority-low .task-priority-strip { background:#22c55e; }
.task-top { margin-bottom:10px; }
.priority-badge { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; font-size:12px; font-weight:950; border:1px solid transparent; letter-spacing:-.01em; }
.priority-badge.priority-high { color:#b42318; background:#fee4e2; border-color:#fecdca; }
.priority-badge.priority-medium { color:#b54708; background:#fef0c7; border-color:#fedf89; }
.priority-badge.priority-low { color:#027a48; background:#dcfae6; border-color:#abefc6; }
.task-card.priority-high .task-title { color:#7a271a; }
.task-card.priority-medium .task-title { color:#7a2e0e; }
.task-card.priority-low .task-title { color:#054f31; }