:root {
  --ink: #17202a;
  --muted: #6e7884;
  --muted-2: #909aa4;
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f8fafb;
  --line: #e3e7eb;
  --line-strong: #d6dce2;
  --nav: #101820;
  --nav-2: #17232e;
  --gold: #c9a55d;
  --gold-soft: #f8f0df;
  --blue: #256fae;
  --blue-dark: #1c5a8d;
  --blue-soft: #eaf3fb;
  --green: #28744a;
  --green-soft: #eaf6ef;
  --amber: #956516;
  --amber-soft: #fff5dc;
  --red: #a53d3d;
  --red-soft: #fff0f0;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 8px 30px rgba(15, 24, 32, .06);
  --sidebar: 260px;
}

* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); }
body { margin: 0; min-height: 100vh; background: var(--bg); }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; background: linear-gradient(180deg, var(--nav) 0%, #0d141b 100%); color: #fff; padding: 22px 16px; display: flex; flex-direction: column; gap: 22px; overflow-y: auto; }
.brand-block { display: flex; align-items: center; gap: 12px; padding: 4px 6px 16px; border-bottom: 1px solid rgba(255,255,255,.10); }
.brand-mark { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(201,165,93,.55); display: grid; place-items: center; color: var(--gold); font-weight: 900; letter-spacing: -.04em; background: rgba(201,165,93,.07); }
.brand-text { min-width: 0; }
.brand-text strong { display: block; font-size: 15px; letter-spacing: .01em; }
.brand-text span { display: block; margin-top: 2px; color: rgba(255,255,255,.52); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.nav-label { padding: 0 10px; margin: 6px 0 2px; color: rgba(255,255,255,.38); font-size: 10px; text-transform: uppercase; letter-spacing: .11em; font-weight: 800; }
.nav { display: grid; gap: 4px; }
.nav a { min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 9px 10px; text-decoration: none; color: rgba(255,255,255,.72); border-radius: 9px; font-size: 13px; font-weight: 680; position: relative; }
.nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav a.active { background: rgba(255,255,255,.09); color: #fff; }
.nav a.active::before { content: ""; position: absolute; left: -16px; width: 3px; height: 22px; background: var(--gold); border-radius: 0 3px 3px 0; }
.nav-icon { width: 18px; height: 18px; flex: 0 0 18px; opacity: .86; }
.sidebar-spacer { flex: 1; }
.sidebar-user { padding: 14px 10px 4px; border-top: 1px solid rgba(255,255,255,.10); display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: #263440; color: #fff; border: 1px solid rgba(255,255,255,.10); }
.sidebar-user strong { display: block; font-size: 12px; }
.sidebar-user span { display: block; font-size: 10px; color: rgba(255,255,255,.48); margin-top: 2px; }

.main { min-width: 0; }
.topbar { height: 66px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 30; backdrop-filter: blur(12px); }
.crumbs { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.crumbs a { color: var(--blue); text-decoration: none; font-weight: 700; }
.crumbs strong { color: var(--ink); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.current-time { display: grid; text-align: right; gap: 1px; margin-right: 4px; }
.current-time strong { font-size: 12px; color: var(--ink); }
.current-time span { font-size: 10px; color: var(--muted); }
.mobile-menu { display: none; }

.page { max-width: 1480px; margin: 0 auto; padding: 28px; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.page-heading h1 { margin: 0; font-size: clamp(24px, 2vw, 32px); letter-spacing: -.025em; color: #13202b; }
.page-heading p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.heading-actions { display: flex; gap: 9px; flex-wrap: wrap; }

.button { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 14px; border-radius: 9px; border: 1px solid transparent; font-size: 12.5px; font-weight: 780; text-decoration: none; line-height: 1; white-space: nowrap; transition: .16s ease; }
.button svg { width: 15px; height: 15px; }
.button.primary { background: var(--blue); color: #fff; box-shadow: 0 3px 9px rgba(37,111,174,.16); }
.button.primary:hover { background: var(--blue-dark); }
.button.dark { background: var(--nav); color: #fff; }
.button.secondary { background: #fff; border-color: var(--line-strong); color: #25313c; }
.button.secondary:hover { background: #f7f9fa; border-color: #cbd2d9; }
.button.gold { background: var(--gold-soft); border-color: #ead8b2; color: #71571f; }
.button.danger { background: #fff; border-color: #e9c7c7; color: var(--red); }
.button.small { min-height: 34px; padding: 7px 10px; font-size: 11.5px; }
.button.block { width: 100%; }
.icon-button { width: 38px; height: 38px; border-radius: 9px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; color: #475460; }
.icon-button svg { width: 17px; height: 17px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-head { min-height: 55px; padding: 14px 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.card-head h2 { margin: 0; font-size: 14px; color: #17242f; letter-spacing: -.01em; }
.card-head p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.card-body { padding: 17px; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.kpi-card { position: relative; min-height: 126px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; text-decoration: none; box-shadow: var(--shadow); overflow: hidden; }
.kpi-card::after { content: ""; position: absolute; top: 0; right: 0; width: 54px; height: 54px; border-radius: 0 0 0 54px; background: #f3f6f8; }
.kpi-card.overdue::after { background: var(--red-soft); }
.kpi-card.action::after { background: var(--gold-soft); }
.kpi-card.waiting::after { background: var(--amber-soft); }
.kpi-card .kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-label { font-size: 11px; color: var(--muted); font-weight: 760; }
.kpi-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); position: relative; z-index: 2; }
.kpi-icon svg { width: 14px; height: 14px; }
.kpi-card.overdue .kpi-icon { background: var(--red-soft); color: var(--red); }
.kpi-card.waiting .kpi-icon { background: var(--amber-soft); color: var(--amber); }
.kpi-value { margin-top: 11px; font-size: 30px; font-weight: 850; letter-spacing: -.035em; color: #14212c; }
.kpi-card.overdue .kpi-value { color: var(--red); }
.kpi-card.action .kpi-value { color: #71571f; }
.kpi-card.waiting .kpi-value { color: var(--amber); }
.kpi-sub { margin-top: 5px; color: var(--muted); font-size: 11px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .55fr); gap: 18px; }
.queue { display: grid; }
.queue-row { display: grid; grid-template-columns: minmax(160px, 1.2fr) 170px 130px 150px 100px; gap: 12px; align-items: center; min-height: 72px; padding: 11px 16px; border-bottom: 1px solid #edf0f2; }
.queue-row:last-child { border-bottom: 0; }
.queue-row:hover { background: #fbfcfd; }
.queue-client strong { display: block; font-size: 12.5px; color: #15232e; }
.queue-client span { display: block; margin-top: 3px; font-size: 10.5px; color: var(--muted); }
.queue-date { font-size: 11px; color: var(--muted); }
.queue-date strong { display: block; color: var(--ink); font-size: 12px; margin-top: 2px; }
.queue-date.overdue strong { color: var(--red); }
.queue-service { font-size: 11.5px; color: #45515c; }
.queue-action { text-align: right; }

.signal-list { display: grid; gap: 10px; }
.signal { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.signal-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #f2f5f7; color: #5c6873; }
.signal-icon svg { width: 16px; height: 16px; }
.signal.warn .signal-icon { background: var(--amber-soft); color: var(--amber); }
.signal.danger .signal-icon { background: var(--red-soft); color: var(--red); }
.signal strong { display: block; font-size: 11.5px; color: #1c2832; }
.signal p { margin: 4px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.45; }

.badge { display: inline-flex; align-items: center; min-height: 23px; padding: 4px 8px; border-radius: 999px; background: #f0f3f5; color: #56616c; font-size: 10px; font-weight: 780; white-space: nowrap; }
.badge.blue { background: var(--blue-soft); color: var(--blue-dark); }
.badge.amber { background: var(--amber-soft); color: var(--amber); }
.badge.red { background: var(--red-soft); color: var(--red); }
.badge.green { background: var(--green-soft); color: var(--green); }
.badge.gold { background: var(--gold-soft); color: #7a5c20; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 5px; }

.toolbar { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.search-wrap { flex: 1 1 280px; position: relative; }
.search-wrap svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); }
.input, .select, .textarea { width: 100%; border: 1px solid var(--line-strong); background: #fff; border-radius: 9px; min-height: 39px; padding: 9px 11px; color: var(--ink); outline: none; font-size: 12px; }
.search-wrap .input { padding-left: 34px; }
.input:focus, .select:focus, .textarea:focus { border-color: #7faed2; box-shadow: 0 0 0 3px rgba(37,111,174,.09); }
.select { min-width: 145px; }
.textarea { min-height: 105px; resize: vertical; line-height: 1.5; }
.field { display: grid; gap: 6px; }
.field label { font-size: 10.5px; font-weight: 780; color: #5f6a75; }
.field-help { color: var(--muted); font-size: 10px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 920px; }
th { padding: 10px 13px; text-align: left; color: #7b858f; font-size: 9.5px; font-weight: 820; text-transform: uppercase; letter-spacing: .07em; background: #fafbfc; border-bottom: 1px solid var(--line); }
td { padding: 13px; border-bottom: 1px solid #edf0f2; vertical-align: middle; font-size: 11.5px; color: #3f4b56; }
tbody tr:hover { background: #fbfcfd; }
tbody tr:last-child td { border-bottom: 0; }
.client-name { font-weight: 800; color: #16232e; font-size: 12.5px; }
.company { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.text-red { color: var(--red) !important; }
.text-amber { color: var(--amber) !important; }
.text-green { color: var(--green) !important; }
.link { color: var(--blue); text-decoration: none; font-weight: 760; }
.link:hover { text-decoration: underline; }

.client-hero { padding: 18px; margin-bottom: 18px; }
.client-hero-top { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 20px; align-items: start; }
.client-identity { display: flex; gap: 14px; align-items: flex-start; }
.client-monogram { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: #182632; color: #fff; font-weight: 850; font-size: 16px; }
.client-identity h1 { margin: 0; font-size: 26px; letter-spacing: -.025em; color: #14212b; }
.client-company { margin-top: 3px; color: var(--muted); font-size: 12px; }
.client-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.client-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.client-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--line); }
.summary-cell { min-height: 62px; padding: 10px 11px; border-radius: 10px; background: var(--surface-2); border: 1px solid #edf0f2; }
.summary-cell label { display: block; color: var(--muted); font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.summary-cell strong { display: block; margin-top: 5px; color: #1c2933; font-size: 12px; }
.summary-cell strong.overdue { color: var(--red); }

.client-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(310px,.65fr); gap: 18px; align-items: start; }
.timeline { position: relative; padding: 4px 0; }
.timeline::before { content: ""; position: absolute; left: 30px; top: 20px; bottom: 20px; width: 1px; background: #e1e6ea; }
.timeline-item { display: grid; grid-template-columns: 61px minmax(0,1fr); gap: 13px; padding: 13px 0; position: relative; }
.timeline-marker { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.timeline-dot { width: 15px; height: 15px; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); background: #73808b; }
.timeline-dot.blue { background: var(--blue); }
.timeline-dot.amber { background: #b98221; }
.timeline-dot.green { background: var(--green); }
.timeline-date { margin-top: 6px; color: var(--muted); font-size: 9.5px; text-align: center; line-height: 1.3; }
.timeline-content { border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px; background: #fff; }
.timeline-content-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.timeline-content-top strong { font-size: 11.5px; color: #17242e; }
.timeline-content p { margin: 7px 0 0; font-size: 11.5px; line-height: 1.55; color: #4a5661; }
.next-followup { display: inline-flex; align-items: center; margin-top: 9px; padding: 6px 8px; background: var(--amber-soft); color: #765013; border-radius: 7px; font-size: 9.8px; font-weight: 780; }

.side-stack { display: grid; gap: 18px; }
.proposal-list { display: grid; gap: 10px; }
.proposal-card { border: 1px solid var(--line); border-radius: 11px; padding: 12px; background: #fff; }
.proposal-main { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: start; }
.file-tile { width: 36px; height: 42px; border-radius: 8px; background: #f1f4f6; color: #48545f; display: grid; place-items: center; font-size: 9px; font-weight: 850; }
.proposal-title { font-size: 11.5px; font-weight: 800; color: #17242e; }
.proposal-meta { margin-top: 4px; color: var(--muted); font-size: 9.8px; line-height: 1.4; }
.proposal-actions { display: flex; gap: 7px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #edf0f2; }
.detail-list { display: grid; gap: 0; }
.detail-row { display: grid; grid-template-columns: 125px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid #edf0f2; }
.detail-row:last-child { border-bottom: 0; }
.detail-row label { color: var(--muted); font-size: 9.8px; font-weight: 760; }
.detail-row div { color: #2d3944; font-size: 11.5px; font-weight: 650; }

.mobile-client-cards { display: none; }
.mobile-sticky-actions { display: none; }

.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(430px,.7fr); background: #fff; }
.login-brand-panel { background: radial-gradient(circle at 78% 25%, rgba(201,165,93,.10), transparent 28%), linear-gradient(145deg, #101820 0%, #162430 100%); color: #fff; display: flex; align-items: center; padding: clamp(48px, 7vw, 100px); position: relative; overflow: hidden; }
.login-brand-panel::after { content: ""; position: absolute; width: 420px; height: 420px; right: -180px; bottom: -180px; border: 1px solid rgba(201,165,93,.18); border-radius: 50%; box-shadow: 0 0 0 70px rgba(201,165,93,.025), 0 0 0 140px rgba(201,165,93,.015); }
.login-brand-inner { max-width: 600px; position: relative; z-index: 1; }
.login-lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 52px; }
.login-lockup .brand-mark { width: 44px; height: 44px; }
.login-lockup strong { display: block; font-size: 17px; }
.login-lockup span { display: block; margin-top: 2px; font-size: 11px; color: rgba(255,255,255,.50); }
.login-eyebrow { color: var(--gold); font-size: 10px; text-transform: uppercase; letter-spacing: .13em; font-weight: 850; }
.login-brand-panel h1 { margin: 12px 0 16px; font-size: clamp(38px, 5vw, 66px); line-height: .98; letter-spacing: -.04em; max-width: 620px; }
.login-brand-panel p { margin: 0; max-width: 520px; color: rgba(255,255,255,.64); font-size: 14px; line-height: 1.65; }
.login-feature-list { margin-top: 34px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; max-width: 560px; }
.login-feature { min-height: 76px; padding: 12px; border: 1px solid rgba(255,255,255,.10); border-radius: 10px; background: rgba(255,255,255,.035); }
.login-feature strong { display: block; font-size: 11px; }
.login-feature span { display: block; margin-top: 4px; color: rgba(255,255,255,.48); font-size: 9.8px; line-height: 1.4; }
.login-form-panel { background: #f7f8fa; display: flex; align-items: center; justify-content: center; padding: 36px; }
.login-card { width: min(430px,100%); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 45px rgba(15,24,32,.07); padding: 28px; }
.login-card h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; color: #15222c; }
.login-card > p { margin: 6px 0 24px; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.form-stack { display: grid; gap: 15px; }
.login-meta { margin-top: 13px; display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; }
.login-meta a { color: var(--blue); text-decoration: none; font-weight: 750; }
.security-note { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-size: 9.8px; line-height: 1.45; }
.security-note svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 1px; color: var(--green); }

.overlay { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(8,14,20,.48); align-items: center; justify-content: center; padding: 20px; }
.overlay.open { display: flex; }
.modal { width: min(620px,100%); max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 15px; border: 1px solid var(--line); box-shadow: 0 25px 70px rgba(0,0,0,.20); }
.modal-head { padding: 16px 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 15px; }
.modal-head p { margin: 4px 0 0; color: var(--muted); font-size: 10.5px; }
.modal-body { padding: 18px; }
.modal-actions { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }

.toast { position: fixed; right: 20px; bottom: 20px; z-index: 200; background: #13202b; color: #fff; border-radius: 10px; padding: 11px 13px; font-size: 11px; box-shadow: 0 12px 35px rgba(0,0,0,.18); opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1180px) {
  :root { --sidebar: 230px; }
  .kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-grid, .client-layout { grid-template-columns: 1fr; }
  .client-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 820px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .topbar { padding: 0 16px; height: 60px; }
  .mobile-menu { display: grid; }
  .current-time { display: none; }
  .page { padding: 16px; padding-bottom: 82px; }
  .page-heading { flex-direction: column; margin-bottom: 16px; }
  .heading-actions { width: 100%; }
  .heading-actions .button { flex: 1 1 auto; }
  .client-hero-top { grid-template-columns: 1fr; }
  .client-actions { justify-content: flex-start; }
  .login-page { grid-template-columns: 1fr; }
  .login-brand-panel { display: none; }
  .login-form-panel { min-height: 100vh; padding: 22px; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .kpi-card { min-height: 112px; padding: 13px; }
  .kpi-label { font-size: 10px; }
  .kpi-value { font-size: 26px; }
  .kpi-sub { font-size: 9.8px; }
  .queue { display: none; }
  .mobile-client-cards { display: grid; gap: 9px; padding: 12px; }
  .mobile-client { border: 1px solid var(--line); border-radius: 11px; padding: 12px; background: #fff; display: grid; gap: 10px; }
  .mobile-client-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
  .mobile-client-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .mobile-client-meta label { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; font-weight: 800; }
  .mobile-client-meta strong { display: block; margin-top: 3px; font-size: 10.8px; }
  .client-summary { grid-template-columns: 1fr 1fr; }
  .client-actions { display: none; }
  .client-identity { gap: 10px; }
  .client-monogram { width: 42px; height: 42px; }
  .client-identity h1 { font-size: 22px; }
  .timeline::before { left: 9px; }
  .timeline-item { grid-template-columns: 20px minmax(0,1fr); gap: 9px; }
  .timeline-marker { align-items: flex-start; }
  .timeline-date { display: none; }
  .timeline-dot { width: 13px; height: 13px; border-width: 3px; }
  .detail-row { grid-template-columns: 105px 1fr; }
  .mobile-sticky-actions { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; padding: 10px 12px; background: rgba(255,255,255,.96); border-top: 1px solid var(--line); backdrop-filter: blur(10px); }
  .mobile-sticky-actions .button { width: 100%; }
  .toolbar { padding: 11px; }
  .toolbar .select { flex: 1 1 calc(50% - 6px); min-width: 0; }
}


/* Stage 2 live application additions */
.eyebrow{color:var(--gold);font-size:10px;font-weight:850;letter-spacing:.12em;margin-bottom:7px}.top-user-label{font-size:11px;color:var(--muted);font-weight:700}.sidebar-logout{margin:0 4px}.sidebar-logout-button{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.72)}.sidebar-logout-button:hover{background:rgba(255,255,255,.1);color:#fff}.flash{padding:12px 14px;border-radius:10px;margin:0 0 18px;font-size:12px;font-weight:650;border:1px solid}.flash.success{background:var(--green-soft);border-color:#cce7d7;color:var(--green)}.flash.error{background:var(--red-soft);border-color:#edcccc;color:var(--red)}.empty-state{padding:42px 20px;text-align:center;display:grid;gap:5px;color:var(--muted)}.empty-state strong{color:#26333e;font-size:13px}.empty-state span{font-size:11px}.empty-state.compact{padding:24px 10px}.signal-link{text-decoration:none}.filter-form{align-items:center}.desktop-table{display:block}.mobile-client-card{display:grid;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;gap:9px}.mobile-client-card>div:first-child strong{display:block;font-size:13px}.mobile-client-card>div:first-child span{display:block;color:var(--muted);font-size:10.5px;margin-top:3px}.mobile-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:10px;border-top:1px solid var(--line);padding-top:9px}.client-form-stack{display:grid;gap:18px}.form-card{overflow:hidden}.field-span-2{grid-column:1/-1}.check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.check-option{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:11px!important;font-weight:650!important;color:#3c4853!important;margin:0!important}.check-option input{width:15px;height:15px;margin:0}.form-actions{display:flex;justify-content:flex-end;gap:9px;padding-bottom:20px}.note-copy{font-size:11.5px;color:#4a5661;line-height:1.6}.admin-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:18px;align-items:start}.compact-form{display:grid;gap:13px}.compact-form .field label{margin:0}.compact-form .button{margin-top:4px}.admin-table form{margin:0}.optional-section{display:block}.setup-box{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:4px;font-size:11px}.setup-box a{color:var(--blue);font-weight:750;text-decoration:none}.login-brand-inner h1{font-size:clamp(36px,5vw,62px);line-height:1.02;letter-spacing:-.045em;margin:0 0 20px;max-width:560px}.login-brand-inner>p{max-width:500px;color:rgba(255,255,255,.62);font-size:14px;line-height:1.65}.login-form-panel{display:grid;place-items:center;padding:35px;background:#fff}.login-card{width:min(390px,100%)}.login-card h2{font-size:28px;margin:0 0 7px;letter-spacing:-.03em;color:#14212c}.login-card>p{margin:0 0 24px;color:var(--muted);font-size:12px}.login-card form{display:grid;gap:15px}.login-card .field label{margin:0}.login-card .button{margin-top:3px}.client-hero .button{white-space:nowrap}
@media(max-width:1100px){.dashboard-grid,.client-layout,.admin-grid{grid-template-columns:1fr}.client-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:780px){.app-shell{display:block}.sidebar{position:fixed;left:-280px;z-index:100;width:260px;transition:left .18s ease;box-shadow:20px 0 50px rgba(0,0,0,.18)}.sidebar.open{left:0}.topbar{height:58px;padding:0 16px}.mobile-menu{display:inline-flex;border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 10px;font-size:11px;font-weight:750}.page{padding:18px}.page-heading{align-items:flex-start}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.queue-row{grid-template-columns:1fr auto;gap:8px}.queue-service,.queue-row>.badge,.queue-row>div:nth-child(2){display:none}.queue-date{grid-column:1}.queue-action{grid-column:2;grid-row:1/3}.desktop-table{display:none}.mobile-client-cards{display:grid;gap:10px;padding:12px}.form-grid{grid-template-columns:1fr}.field-span-2{grid-column:auto}.check-grid{grid-template-columns:1fr 1fr}.client-hero-top{grid-template-columns:1fr}.client-actions{justify-content:flex-start}.client-summary{grid-template-columns:1fr 1fr}.login-page{grid-template-columns:1fr}.login-brand-panel{min-height:310px;padding:38px 26px}.login-lockup{margin-bottom:35px}.login-form-panel{padding:32px 22px}.login-brand-inner h1{font-size:38px}.admin-grid{grid-template-columns:1fr}}
@media(max-width:500px){.kpi-grid,.client-summary,.check-grid{grid-template-columns:1fr}.page-heading{display:grid}.heading-actions{width:100%}.heading-actions .button{width:100%}.client-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.client-actions .button{width:100%}.client-identity h1{font-size:22px}.top-user-label{display:none}.filter-form .select,.filter-form .button{width:100%;min-width:0}.search-wrap{flex-basis:100%}}


/* Stage 3: follow-ups and activity timeline */
.narrow-form-card{max-width:860px}.textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 12px;font:inherit;color:var(--ink);background:#fff;resize:vertical;min-height:120px}.textarea:focus{outline:none;border-color:#7fb1db;box-shadow:0 0 0 3px rgba(36,109,169,.09)}.field small{display:block;color:var(--muted);font-size:9.5px;margin-top:5px;line-height:1.4}.activity-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.activity-type-option{margin:0!important;border:1px solid var(--line);background:#fff;border-radius:9px;padding:10px 12px;cursor:pointer;font-size:10.8px!important;color:#44515c!important;font-weight:750!important;display:flex!important;align-items:center;gap:8px}.activity-type-option:hover{border-color:#a9bdcd}.activity-type-option.selected{border-color:#77a8cf;background:#f1f7fc;color:var(--blue)!important}.activity-type-option input{width:14px;height:14px;margin:0}.current-followup-note{padding:11px 13px;border-radius:9px;background:var(--amber-soft);color:#765212;font-size:10.5px;border:1px solid #ead7a8}.form-actions-left{justify-content:flex-start}.activity-foot{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;color:var(--muted);font-size:9.8px;margin-top:8px}.timeline-content p{white-space:normal}.timeline-dot.green{border-color:var(--green)}.timeline-dot.red{border-color:var(--red)}.timeline-dot.amber{border-color:var(--amber)}.timeline-dot.gold{border-color:var(--gold)}.followup-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}.followup-tabs a{text-decoration:none;color:#4b5964;font-size:10.5px;font-weight:750;padding:8px 11px;border-radius:8px;border:1px solid var(--line);background:#fff}.followup-tabs a.active{background:var(--navy);border-color:var(--navy);color:#fff}.followup-list{display:grid}.followup-row{display:grid;grid-template-columns:95px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}.followup-row:last-child{border-bottom:0}.followup-row.is-overdue{background:#fffafa}.followup-date-block{display:grid;gap:2px}.followup-date-block span{text-transform:uppercase;color:var(--muted);font-size:8.5px;font-weight:850;letter-spacing:.08em}.followup-date-block strong{font-size:14px;color:#26333e}.followup-date-block small{font-size:9.5px;color:var(--muted)}.is-overdue .followup-date-block span,.is-overdue .followup-date-block strong{color:var(--red)}.followup-main{min-width:0}.followup-client-line{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.followup-client-line>div>a{display:block;color:#1e2c37;font-size:12.5px;font-weight:800;text-decoration:none}.followup-client-line>div>a:hover{color:var(--blue)}.followup-client-line>div>span{display:block;color:var(--muted);font-size:9.8px;margin-top:2px}.followup-last-note{margin-top:8px;color:#4a5863;font-size:10.6px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.followup-meta{display:flex;flex-wrap:wrap;gap:7px 16px;color:var(--muted);font-size:9px;margin-top:7px}.followup-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;min-width:210px}.followup-actions .button{text-align:center}.mobile-sticky-actions{display:none}
@media(max-width:900px){.followup-row{grid-template-columns:80px minmax(0,1fr)}.followup-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;min-width:0}.followup-actions .button{flex:1 1 auto}.activity-type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.activity-type-grid{grid-template-columns:1fr 1fr}.followup-row{grid-template-columns:1fr;padding:14px}.followup-date-block{display:flex;align-items:center;gap:7px}.followup-date-block strong{font-size:12px}.followup-date-block small{font-size:9px}.followup-client-line{align-items:flex-start}.followup-last-note{white-space:normal}.followup-actions{display:grid;grid-template-columns:1fr 1fr}.mobile-sticky-actions{display:grid}.client-layout{margin-bottom:55px}}


/* Stage 4: proposals */
.proposal-form-card{max-width:940px}.field-span-2{grid-column:1/-1}.service-check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.service-check{display:flex!important;align-items:center;gap:8px;margin:0!important;border:1px solid var(--line);border-radius:9px;padding:9px 10px;background:#fff;color:#45515c!important;font-size:10.5px!important;font-weight:700!important}.service-check input{width:14px;height:14px;margin:0}.file-input{padding:7px 9px}.proposal-security-note{display:grid;gap:3px;padding:12px 13px;border:1px solid #dbe6ef;background:#f4f8fb;border-radius:10px;color:#4d6170;font-size:10.5px;line-height:1.5}.proposal-security-note strong{color:#24445d;font-size:10.8px}.proposal-list{display:grid;gap:9px}.proposal-card{border:1px solid var(--line);border-radius:10px;background:#fff;padding:11px}.proposal-main{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center}.proposal-copy{min-width:0}.file-tile{width:42px;height:42px;border-radius:8px;display:grid;place-items:center;background:#f0f4f7;color:#60707d;font-size:9px;font-weight:850;border:1px solid #e0e6ea}.proposal-title{font-size:11.5px;font-weight:800;color:#1b2934}.proposal-meta,.proposal-services{font-size:9.5px;color:var(--muted);margin-top:3px;line-height:1.4}.proposal-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:9px;padding-top:9px;border-top:1px solid #eef1f3}.table-actions{display:flex;gap:6px;white-space:nowrap}
@media(max-width:760px){.service-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.proposal-main{grid-template-columns:42px minmax(0,1fr)}.proposal-main>.badge{grid-column:2;justify-self:start}.proposal-actions{justify-content:flex-start}.table-actions{display:table-cell}}
@media(max-width:480px){.service-check-grid{grid-template-columns:1fr}}


/* Final v1 production polish */
.sidebar-user-link{text-decoration:none;color:inherit}.sidebar-user-link:hover{background:rgba(255,255,255,.055)}.sidebar-user-link.active{background:rgba(255,255,255,.075)}.row-actions{display:flex;flex-wrap:wrap;gap:5px;align-items:center}.row-actions form{margin:0}.account-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px}.account-grid .card{min-width:0}.login-card .flash{margin-bottom:13px}
@media(max-width:760px){.account-grid{grid-template-columns:1fr}.row-actions{min-width:180px}}


/* Mobile navigation v8: dedicated dropdown, independent from desktop sidebar */
.mobile-nav-panel{display:none}

@media(max-width:820px){
  .sidebar{display:none!important}

  .mobile-menu{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink);
    border-radius:8px;
    padding:7px 11px;
    font-size:11px;
    font-weight:750;
    cursor:pointer;
  }

  .mobile-nav-panel{
    position:fixed;
    top:66px;
    left:12px;
    right:12px;
    z-index:500;
    display:none;
    background:linear-gradient(180deg,var(--nav) 0%,#0d141b 100%);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    box-shadow:0 18px 55px rgba(0,0,0,.28);
    padding:10px;
    max-height:calc(100vh - 82px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  .mobile-nav-panel.open{display:block}

  .mobile-nav-panel>a{
    display:flex;
    align-items:center;
    min-height:44px;
    padding:10px 12px;
    border-radius:8px;
    text-decoration:none;
    color:rgba(255,255,255,.82);
    font-size:13px;
    font-weight:700;
  }

  .mobile-nav-panel>a:active,
  .mobile-nav-panel>a.active{
    background:rgba(255,255,255,.10);
    color:#fff;
  }

  .mobile-nav-divider{
    height:1px;
    background:rgba(255,255,255,.10);
    margin:7px 4px;
  }

  .mobile-nav-logout{margin:0}

  .mobile-nav-logout button{
    width:100%;
    min-height:44px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:rgba(255,255,255,.72);
    text-align:left;
    padding:10px 12px;
    font:inherit;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
  }

  body.mobile-nav-open{overflow:hidden}
}

@media(max-width:780px){
  .mobile-nav-panel{top:58px}
}

/* Universal CSV importer v1.1 */
.import-upload-card,.import-batch-card,.import-history-card{margin-bottom:16px}.import-upload-form{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.8fr) auto;gap:14px;align-items:end}.import-upload-action{padding-bottom:1px}.import-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fafbfc}.import-kpis>div{padding:14px 16px;border-right:1px solid var(--line);display:grid;gap:4px}.import-kpis>div:last-child{border-right:0}.import-kpis span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}.import-kpis strong{font-size:20px;color:var(--ink)}.import-batch-head{align-items:center}.import-confirm-bar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 16px;background:#f4f8fb;border-bottom:1px solid var(--line)}.import-confirm-bar>div{display:grid;gap:3px}.import-confirm-bar strong{font-size:11.5px}.import-confirm-bar span{font-size:9.8px;color:var(--muted)}.import-row-list{display:grid}.import-row{padding:16px 18px;border-bottom:1px solid var(--line)}.import-row:last-child{border-bottom:0}.import-row-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.import-row-number{font-size:8.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:850}.import-row h3{margin:3px 0 2px;font-size:13px;color:var(--ink)}.import-row-top p{margin:0;color:var(--muted);font-size:9.8px}.import-row-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px;margin-top:12px}.import-row-grid>div{min-width:0}.import-row-grid label{display:block;font-size:8.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800;margin-bottom:3px}.import-row-grid span{display:block;font-size:10.3px;color:#374651;white-space:normal;overflow-wrap:anywhere}.import-message{margin-top:12px;padding:10px 12px;border-radius:8px;font-size:10px;line-height:1.5}.warning-copy{background:var(--amber-soft);border:1px solid #ead7a8;color:#765212}.error-copy{background:#fff1f1;border:1px solid #efc9c9;color:#8a2e2e}.import-resolution{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}.import-match-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.import-resolution-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}.import-resolution-actions form{margin:0}.section-mini-label{font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding-top:4px;border-top:1px solid var(--line)}.client-role{font-size:10px;color:#52616c;font-weight:700;margin-top:-2px;margin-bottom:2px}.activity-source-subject{font-size:10px;font-weight:800;color:#324759;margin:4px 0 6px;padding-left:9px;border-left:2px solid #c8d8e5}.import-history-card .company{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1000px){.import-upload-form{grid-template-columns:1fr 1fr}.import-upload-action{grid-column:1/-1}.import-upload-action .button{width:100%}.import-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.import-kpis>div:nth-child(3){border-right:0}.import-row-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.import-upload-form{grid-template-columns:1fr}.import-upload-action{grid-column:auto}.import-kpis{grid-template-columns:1fr 1fr}.import-kpis>div{border-bottom:1px solid var(--line)}.import-kpis>div:nth-child(odd){border-right:1px solid var(--line)}.import-kpis>div:nth-child(even){border-right:0}.import-confirm-bar{display:grid}.import-confirm-bar .button{width:100%}.import-row-grid{grid-template-columns:1fr}.import-match-form{grid-template-columns:1fr}.import-match-form .button{width:100%}.import-resolution-actions{display:grid}.import-resolution-actions .button{width:100%}}


/* v1.1.2 client-list discard action */
.client-list-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;white-space:nowrap}
.mobile-client-actions{display:flex;gap:7px;padding-top:2px}
.mobile-client-actions .button{flex:1;text-align:center}


/* v1.2 recurring commission model */
.sales-incentive-section{margin:18px 0 22px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:10px}
.section-heading h2{margin:0;color:var(--navy);font-size:18px;letter-spacing:-.025em}
.section-heading p{margin:4px 0 0;color:var(--muted);font-size:10.5px}
.sales-incentive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.incentive-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px;min-width:0;box-shadow:0 6px 18px rgba(18,34,48,.035)}
.incentive-card.commission{background:#fffdf8;border-color:#eadfbe}
.incentive-card.monthly{box-shadow:inset 0 3px 0 rgba(28,104,173,.16)}
.incentive-card.earned-recurring{background:#f8fcf9;border-color:#cfe5d6;box-shadow:inset 0 3px 0 rgba(39,130,76,.18)}
.incentive-label{display:block;min-height:28px;color:var(--muted);font-size:9.5px;font-weight:850;text-transform:uppercase;letter-spacing:.055em;line-height:1.35}
.incentive-money{display:flex;align-items:baseline;gap:7px;margin-top:7px}
.incentive-money>span{color:var(--muted);font-size:10px;font-weight:850;letter-spacing:.04em}
.incentive-money>strong{color:#14212c;font-size:25px;line-height:1;font-weight:850;letter-spacing:-.04em}
.incentive-card.commission .incentive-money>strong{color:#71571f}
.incentive-card.earned-recurring .incentive-money>strong{color:#23643b}
.incentive-money em{font-style:normal;font-size:10px;font-weight:750;letter-spacing:0;color:var(--muted);margin-left:3px}
.incentive-empty{display:block;font-size:25px;margin-top:7px;color:#88939c}
.incentive-card small{display:block;margin-top:9px;color:var(--muted);font-size:9.5px;line-height:1.4}

@media(max-width:1050px){.sales-incentive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.sales-incentive-grid{grid-template-columns:1fr}.incentive-label{min-height:0}}


/* v1.2.2 - visually separate Titan pipeline from salesperson commission */
.pipeline-commission-shell{display:grid;gap:14px}
.financial-group{border-radius:14px;padding:14px;border:1px solid var(--line)}
.titan-pipeline-group{background:#f7fbff;border-color:#d6e4f1}
.commission-group{background:#fffaf0;border-color:#eadab0}

.financial-group-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:10px}
.financial-group-head h2{margin:2px 0 0;color:var(--navy);font-size:17px;letter-spacing:-.025em}
.financial-group-head p{margin:4px 0 0;color:var(--muted);font-size:10.5px;line-height:1.45;max-width:760px}
.financial-eyebrow{display:block;font-size:8.5px;font-weight:900;letter-spacing:.12em;color:#57748e}
.commission-group .financial-eyebrow{color:#8a6a24}

.financial-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

.incentive-card.titan-value{
  background:#fff;
  border-color:#cfdeeb;
  box-shadow:inset 0 3px 0 rgba(28,104,173,.17),0 5px 16px rgba(18,34,48,.025)
}
.incentive-card.titan-value .incentive-money>strong{color:#143c63}

.commission-group .incentive-card{
  background:#fffdf8;
  border-color:#eadfbe;
}
.commission-group .incentive-card.commission .incentive-money>strong{color:#795a16}
.commission-group .incentive-card.earned-recurring{
  background:#f7fcf8;
  border-color:#c9e1d1;
}
.commission-group .incentive-card.earned-recurring .incentive-money>strong{color:#23643b}

@media(max-width:1050px){
  .financial-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .financial-group{padding:11px}
  .financial-card-grid{grid-template-columns:1fr}
}