:root { --ink:#07111f; --blue:#1d5cff; --paper:#f7f9fc; --white:#ffffff; --font:"DM Sans",Arial,sans-serif; --display:"Manrope",Arial,sans-serif; }
* { box-sizing:border-box; }
html { height:100%; }
body { min-height:100%; margin:0; background:var(--paper); color:var(--ink); font-family:var(--font); line-height:1.5; }
button,input,select,textarea { font:inherit; color:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none!important; }
.demo-shell { min-height:100vh; display:grid; grid-template-columns:250px 1fr; }
.sidebar { position:fixed; inset:0 auto 0 0; z-index:80; width:250px; display:flex; flex-direction:column; padding:18px 14px; background:var(--ink); color:var(--white); overflow-y:auto; }
.sidebar-head { display:flex; align-items:center; justify-content:space-between; padding:0 5px 18px; }
.demo-logo { display:flex; align-items:center; gap:10px; font:700 16px/1 var(--display); }
.demo-logo b { color:var(--blue); }
.demo-logo small { display:block; margin-top:4px; color:rgba(255,255,255,.45); font:500 10px/1 var(--font); }
.demo-logo-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--blue); color:var(--white); font-weight:800; }
.sidebar-close { display:none; border:0; background:transparent; color:var(--white); font-size:25px; }
.workspace-card { display:flex; align-items:center; gap:10px; padding:12px; margin-bottom:20px; border:1px solid rgba(255,255,255,.12); border-radius:11px; background:rgba(255,255,255,.05); }
.workspace-badge { display:grid; place-items:center; width:31px; height:31px; border-radius:8px; background:var(--white); color:var(--ink); font-size:10px; font-weight:800; }
.workspace-card b,.workspace-card small { display:block; }
.workspace-card b { font-size:12px; }
.workspace-card small { color:rgba(255,255,255,.46); font-size:9px; }
.demo-nav p { padding:0 11px; margin:16px 0 6px; color:rgba(255,255,255,.35); font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.nav-item { width:100%; display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:4px; min-height:42px; padding:0 11px; border:0; border-radius:8px; background:transparent; color:rgba(255,255,255,.62); text-align:left; cursor:pointer; font-size:12px; font-weight:600; transition:background .18s ease,color .18s ease; }
.nav-item:hover,.nav-item.active { background:rgba(29,92,255,.18); color:var(--white); }
.nav-item.active { box-shadow:inset 3px 0 0 var(--blue); }
.nav-item > span { font-size:16px; }
.nav-item em { min-width:21px; padding:2px 6px; border-radius:20px; background:rgba(255,255,255,.1); color:rgba(255,255,255,.7); font-size:9px; font-style:normal; text-align:center; }
.sidebar-bottom { display:grid; gap:8px; margin-top:auto; padding:18px 9px 2px; border-top:1px solid rgba(255,255,255,.1); }
.sidebar-bottom a { color:rgba(255,255,255,.55); font-size:10px; }
.sidebar-bottom a:first-child { color:var(--white); }
.app-area { grid-column:2; min-width:0; }
.app-header { position:sticky; top:0; z-index:60; height:66px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 28px; border-bottom:1px solid rgba(7,17,31,.09); background:rgba(255,255,255,.95); backdrop-filter:blur(14px); }
.mobile-nav-toggle { display:none; border:0; background:transparent; font-size:21px; }
.global-search { width:min(440px,50vw); display:flex; align-items:center; gap:9px; padding:0 13px; border:1px solid rgba(7,17,31,.12); border-radius:9px; background:var(--paper); }
.global-search input { width:100%; height:38px; border:0; outline:0; background:transparent; font-size:12px; }
.header-actions { display:flex; align-items:center; gap:14px; }
.icon-button { position:relative; width:39px; height:39px; border:1px solid rgba(7,17,31,.12); border-radius:9px; background:var(--white); cursor:pointer; }
.icon-button i { position:absolute; right:-3px; top:-4px; display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--blue); color:var(--white); font-size:8px; font-style:normal; }
.user-menu { display:flex; align-items:center; gap:8px; padding:0; border:0; background:transparent; cursor:pointer; text-align:left; }
.user-menu > span,.table-avatar { display:inline-grid; place-items:center; width:33px; height:33px; border-radius:9px; background:var(--blue); color:var(--white); font-size:9px; font-weight:800; }
.user-menu b,.user-menu small { display:block; }
.user-menu b { font-size:11px; }.user-menu small { color:rgba(7,17,31,.48); font-size:9px; }
.app-main { padding:31px 32px 60px; }
.app-view { display:none; animation:viewIn .28s ease; }
.app-view.active { display:block; }
@keyframes viewIn { from { opacity:0; transform:translateY(7px); } }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.page-head h1 { margin:0 0 4px; font:800 28px/1.15 var(--display); letter-spacing:-.035em; }
.page-head p { margin:0; color:rgba(7,17,31,.52); font-size:12px; }
.page-head .page-kicker { margin-bottom:6px; color:var(--blue); font-weight:800; font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
.head-actions { display:flex; gap:9px; }
.primary-action,.secondary-action { min-height:39px; padding:0 15px; border-radius:8px; cursor:pointer; font-weight:700; font-size:11px; transition:transform .18s ease; }
.primary-action:hover,.secondary-action:hover { transform:translateY(-1px); }
.primary-action { border:1px solid var(--blue); background:var(--blue); color:var(--white); }
.secondary-action { border:1px solid rgba(7,17,31,.15); background:var(--white); color:var(--ink); }
.demo-notice { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:10px 13px; margin-bottom:17px; border:1px solid rgba(29,92,255,.2); border-radius:9px; background:rgba(29,92,255,.06); }
.demo-notice span { color:var(--blue); font-size:10px; font-weight:800; }.demo-notice p { margin:0; font-size:10px;color:rgba(7,17,31,.58); }.demo-notice button { border:0;background:transparent;cursor:pointer; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:17px; }
.kpi-card { position:relative; min-height:134px; padding:18px; border:1px solid rgba(7,17,31,.1); border-radius:12px; background:var(--white); overflow:hidden; }
.kpi-card > span,.kpi-card small { display:block;color:rgba(7,17,31,.5);font-size:9px; }.kpi-card strong { display:block;margin:10px 0 6px;font:800 23px/1 var(--display); }.kpi-card small { color:var(--blue); }
.sparkline { position:absolute; right:16px; bottom:15px; left:16px; height:25px; display:flex; align-items:end; gap:4px; opacity:.55; }.sparkline i { flex:1;border-radius:2px 2px 0 0;background:var(--blue); }
.kpi-progress { position:absolute; right:18px; bottom:17px; left:18px; height:3px;border-radius:3px;background:rgba(7,17,31,.08); }.kpi-progress i { display:block;height:100%;border-radius:3px;background:var(--blue); }
.dashboard-grid { display:grid; grid-template-columns:1.35fr .9fr; gap:15px; }
.panel-card { border:1px solid rgba(7,17,31,.1); border-radius:12px; background:var(--white); overflow:hidden; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 18px; border-bottom:1px solid rgba(7,17,31,.08); }
.panel-head h2 { margin:0 0 2px;font:800 14px/1.2 var(--display); }.panel-head p { margin:0;color:rgba(7,17,31,.46);font-size:9px; }.panel-head button,.panel-head select { border:0;background:transparent;color:var(--blue);font-size:9px;font-weight:700;cursor:pointer; }
.priority-list { padding:3px 18px; }.priority-item { display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(7,17,31,.07); }.priority-item:last-child { border:0; }.priority-icon { display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:rgba(29,92,255,.09);color:var(--blue);font-size:12px;font-weight:800; }.priority-item b,.priority-item small { display:block; }.priority-item b { font-size:11px; }.priority-item small { color:rgba(7,17,31,.46);font-size:9px; }.priority-item button { border:0;background:transparent;color:var(--blue);font-size:9px;font-weight:700;cursor:pointer; }
.source-chart { display:grid;grid-template-columns:125px 1fr;gap:17px;align-items:center;padding:24px 18px; }.donut-chart { width:112px;height:112px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--blue) 0 38%,rgba(29,92,255,.75) 38% 62%,rgba(29,92,255,.52) 62% 78%,rgba(29,92,255,.3) 78% 90%,rgba(29,92,255,.14) 90%);position:relative; }.donut-chart::after { content:"";position:absolute;width:65px;height:65px;border-radius:50%;background:var(--white); }.donut-chart span { position:relative;z-index:1;font:800 18px/1 var(--display);text-align:center; }.donut-chart small { display:block;color:rgba(7,17,31,.45);font:500 8px var(--font); }.source-chart ul { padding:0;margin:0;list-style:none; }.source-chart li { display:grid;grid-template-columns:7px 1fr auto;gap:7px;align-items:center;margin:8px 0;font-size:9px; }.source-chart li i { width:7px;height:7px;border-radius:2px;background:rgba(29,92,255,var(--size)); }.source-chart li b { font-size:9px; }
.upcoming-panel > div:last-child { padding:3px 18px; }.move-row { display:grid;grid-template-columns:45px 1fr auto;gap:11px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(7,17,31,.07); }.move-row:last-child { border:0; }.move-date { padding:7px 5px;border-radius:8px;background:var(--ink);color:var(--white);text-align:center;font-size:8px; }.move-date b { display:block;font-size:15px; }.move-row b,.move-row small { display:block; }.move-row > div:nth-child(2) b { font-size:11px; }.move-row small { color:rgba(7,17,31,.46);font-size:9px; }.move-row strong { font-size:10px;color:var(--blue); }
.pipeline-bars { padding:17px 18px; }.pipeline-bars div,.conversion-list div { display:grid;grid-template-columns:90px 1fr 42px;gap:9px;align-items:center;margin:11px 0;font-size:9px; }.pipeline-bars i,.conversion-list i { height:6px;border-radius:8px;background:rgba(7,17,31,.08);overflow:hidden; }.pipeline-bars i b,.conversion-list i b { display:block;height:100%;border-radius:8px;background:var(--blue); }

.filter-bar { display:grid;grid-template-columns:1fr 190px 170px auto;gap:9px;margin-bottom:12px; }.filter-bar input,.filter-bar select,.filter-bar button,.table-search { min-height:40px;border:1px solid rgba(7,17,31,.12);border-radius:8px;background:var(--white);font-size:10px; }.table-search { display:flex;align-items:center;gap:7px;padding:0 11px; }.table-search input { width:100%;border:0;outline:0; }.filter-bar select { padding:0 10px; }.filter-bar button { padding:0 14px;cursor:pointer; }
.table-card { overflow-x:auto;border:1px solid rgba(7,17,31,.1);border-radius:12px;background:var(--white); }.data-table { width:100%;min-width:940px;border-collapse:collapse; }.data-table th { padding:12px 14px;background:var(--paper);color:rgba(7,17,31,.45);font-size:8px;letter-spacing:.05em;text-align:left;text-transform:uppercase; }.data-table td { padding:11px 14px;border-top:1px solid rgba(7,17,31,.07);font-size:10px;white-space:nowrap; }.customer-cell b,.customer-cell small { display:block; }.customer-cell small { color:rgba(7,17,31,.45);font-size:8px; }.source-tag,.status-tag { display:inline-flex;padding:4px 7px;border-radius:20px;background:rgba(29,92,255,.08);color:var(--blue);font-size:8px;font-weight:700; }.status-select { padding:5px 22px 5px 7px;border:1px solid rgba(7,17,31,.12);border-radius:6px;background:var(--white);font-size:9px; }.row-action { border:0;background:transparent;color:var(--blue);font-weight:700;font-size:9px;cursor:pointer; }.empty-state { padding:60px;text-align:center; }.empty-state b,.empty-state span { display:block; }.empty-state span { color:rgba(7,17,31,.5);font-size:11px; }

.followup-layout { display:grid;grid-template-columns:1fr 320px;gap:16px; }.followup-list { display:grid;gap:10px; }.followup-card { display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:17px;border:1px solid rgba(7,17,31,.1);border-radius:11px;background:var(--white); }.followup-date { width:43px;text-align:center;color:var(--blue);font-size:8px;font-weight:700; }.followup-date b { display:block;font:800 17px/1 var(--display); }.followup-card h3 { margin:0 0 3px;font:800 12px var(--display); }.followup-card p { margin:0;color:rgba(7,17,31,.48);font-size:9px; }.followup-actions { display:flex;gap:6px; }.followup-actions button { min-height:31px;padding:0 10px;border:1px solid rgba(7,17,31,.12);border-radius:7px;background:var(--white);font-size:8px;font-weight:700;cursor:pointer; }.followup-actions button:last-child { background:var(--blue);border-color:var(--blue);color:var(--white); }.automation-card { align-self:start;padding:24px;border-radius:12px;background:var(--ink);color:var(--white); }.automation-label { color:var(--blue);font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.1em; }.automation-card h2 { margin:12px 0 8px;font:800 18px var(--display); }.automation-card > p { margin:0;color:rgba(255,255,255,.52);font-size:10px; }.automation-card ol { padding:0;margin:25px 0;list-style:none;counter-reset:steps; }.automation-card li { position:relative;padding:0 0 20px 31px;counter-increment:steps; }.automation-card li::before { content:counter(steps);position:absolute;left:0;top:0;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--blue);font-size:8px;font-weight:800; }.automation-card li:not(:last-child)::after { content:"";position:absolute;left:9px;top:21px;bottom:0;width:1px;background:rgba(255,255,255,.18); }.automation-card li b,.automation-card li span { display:block; }.automation-card li b { font-size:10px; }.automation-card li span { color:rgba(255,255,255,.48);font-size:8px; }.automation-card button { width:100%;min-height:38px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(255,255,255,.07);color:var(--white);font-size:9px;font-weight:700;cursor:pointer; }

.calendar-card { border:1px solid rgba(7,17,31,.1);border-radius:12px;background:var(--white);overflow:hidden; }.calendar-toolbar { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:15px;border-bottom:1px solid rgba(7,17,31,.08); }.calendar-toolbar > div:first-child { display:flex;gap:6px; }.calendar-toolbar button { height:30px;padding:0 10px;border:1px solid rgba(7,17,31,.12);border-radius:6px;background:var(--white);font-size:9px;cursor:pointer; }.calendar-toolbar h2 { margin:0;font:800 16px var(--display); }.calendar-legend { display:flex;justify-content:flex-end;gap:12px;font-size:8px;color:rgba(7,17,31,.48); }.calendar-legend span::before { content:"";display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:2px;background:var(--blue); }.calendar-legend span:nth-child(2)::before { opacity:.55; }.calendar-legend span:nth-child(3)::before { opacity:.25; }.calendar-week,.calendar-grid { display:grid;grid-template-columns:repeat(7,1fr); }.calendar-week span { padding:9px;text-align:center;color:rgba(7,17,31,.42);font-size:8px;font-weight:700; }.calendar-day { min-height:115px;padding:8px;border-top:1px solid rgba(7,17,31,.08);border-right:1px solid rgba(7,17,31,.08); }.calendar-day:nth-child(7n) { border-right:0; }.calendar-day.other { background:var(--paper);color:rgba(7,17,31,.25); }.calendar-day.today > b { display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--blue);color:var(--white); }.calendar-day > b { display:block;font-size:9px; }.calendar-event { display:block;width:100%;margin-top:5px;padding:5px;border:0;border-radius:5px;background:rgba(29,92,255,.1);color:var(--blue);text-align:left;font-size:7px;line-height:1.25;cursor:pointer;overflow:hidden; }.calendar-event.survey { background:rgba(29,92,255,.2); }.calendar-event.reminder { background:var(--ink);color:var(--white); }

.schedule-summary,.invoice-kpis,.report-kpis { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:15px; }.schedule-summary div,.invoice-kpis div,.report-kpis article { padding:17px;border:1px solid rgba(7,17,31,.1);border-radius:10px;background:var(--white); }.schedule-summary span,.invoice-kpis span,.report-kpis span,.report-kpis small { display:block;color:rgba(7,17,31,.48);font-size:9px; }.schedule-summary b,.invoice-kpis b { display:block;margin-top:7px;font:800 17px var(--display); }.schedule-board { display:grid;grid-template-columns:300px 1fr;gap:14px; }.schedule-board > section { border:1px solid rgba(7,17,31,.1);border-radius:12px;background:var(--white);overflow:hidden; }.board-head { display:flex;align-items:center;justify-content:space-between;padding:15px;border-bottom:1px solid rgba(7,17,31,.08); }.board-head h2 { margin:0;font:800 13px var(--display); }.board-head span { color:rgba(7,17,31,.45);font-size:8px; }.job-stack,.vehicle-list { padding:12px; }.job-card { padding:12px;margin-bottom:8px;border:1px solid rgba(7,17,31,.1);border-radius:8px;background:var(--paper); }.job-card b,.job-card span,.job-card small { display:block; }.job-card b { font-size:10px; }.job-card span { margin:3px 0;color:rgba(7,17,31,.52);font-size:8px; }.job-card small { color:var(--blue);font-size:8px;font-weight:700; }.job-card button { width:100%;height:28px;margin-top:9px;border:0;border-radius:6px;background:var(--ink);color:var(--white);font-size:8px;cursor:pointer; }.vehicle-row { display:grid;grid-template-columns:130px 1fr;min-height:86px;border-bottom:1px solid rgba(7,17,31,.08); }.vehicle-row:last-child { border:0; }.vehicle-info { padding:11px;border-right:1px solid rgba(7,17,31,.08); }.vehicle-info b,.vehicle-info span { display:block; }.vehicle-info b { font-size:10px; }.vehicle-info span { color:rgba(7,17,31,.45);font-size:8px; }.vehicle-lane { display:flex;align-items:center;gap:8px;padding:10px; }.assigned-job { flex:1;padding:10px;border-left:3px solid var(--blue);border-radius:6px;background:rgba(29,92,255,.08); }.assigned-job b,.assigned-job small { display:block; }.assigned-job b { font-size:9px; }.assigned-job small { color:rgba(7,17,31,.5);font-size:7px; }.vehicle-empty { color:rgba(7,17,31,.35);font-size:9px; }

.status-paid,.status-sent,.status-overdue { display:inline-flex;padding:4px 8px;border-radius:20px;font-size:8px;font-weight:700; }.status-paid { background:rgba(29,92,255,.1);color:var(--blue); }.status-sent { background:var(--paper); }.status-overdue { background:var(--ink);color:var(--white); }
.report-kpis article strong { display:block;margin:8px 0 5px;font:800 21px var(--display); }.report-kpis article small { color:var(--blue); }.report-grid { display:grid;grid-template-columns:1.2fr .8fr;gap:14px; }.large-bars { height:250px;display:flex;align-items:end;gap:10px;padding:35px 22px 20px; }.large-bars div { flex:1;position:relative;height:var(--h);min-height:12px;border-radius:5px 5px 0 0;background:var(--blue);opacity:var(--o); }.large-bars div span { position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:7px; }.conversion-list { padding:22px; }.conversion-list div { grid-template-columns:105px 1fr 35px;margin:16px 0; }.team-report { grid-column:1/-1; }.team-report table { width:100%;border-collapse:collapse; }.team-report th,.team-report td { padding:12px 18px;border-top:1px solid rgba(7,17,31,.07);font-size:9px;text-align:left; }.team-report th { color:rgba(7,17,31,.45); }.table-avatar { width:26px;height:26px;margin-right:8px;border-radius:7px;font-size:7px; }

.template-layout { display:grid;grid-template-columns:300px 1fr;gap:14px; }.template-list,.template-editor { border:1px solid rgba(7,17,31,.1);border-radius:12px;background:var(--white);overflow:hidden; }.template-item { width:100%;padding:14px 16px;border:0;border-bottom:1px solid rgba(7,17,31,.08);background:transparent;text-align:left;cursor:pointer; }.template-item.active { background:rgba(29,92,255,.08);box-shadow:inset 3px 0 var(--blue); }.template-item b,.template-item span { display:block; }.template-item b { font-size:10px; }.template-item span { margin-top:3px;color:rgba(7,17,31,.45);font-size:8px; }.template-editor { padding:24px; }.editor-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:22px; }.editor-head span { color:var(--blue);font-size:8px;font-weight:800;text-transform:uppercase; }.editor-head h2 { margin:4px 0 0;font:800 18px var(--display); }.template-editor label,.modal form label,.settings-card > label:not(:has(input[type="checkbox"])) { display:grid;gap:6px;margin-bottom:15px;color:rgba(7,17,31,.62);font-size:9px;font-weight:700; }.template-editor input,.template-editor textarea,.modal input,.modal select,.modal textarea,.settings-card input:not([type="checkbox"]),.settings-card select { width:100%;padding:10px 11px;border:1px solid rgba(7,17,31,.13);border-radius:7px;background:var(--white);outline:0;font-size:10px; }.template-editor textarea,.modal textarea { resize:vertical;line-height:1.6; }.template-editor input:focus,.template-editor textarea:focus,.modal input:focus,.modal textarea:focus,.modal select:focus { border-color:var(--blue); }.merge-tags { display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:-3px 0 18px;font-size:8px; }.merge-tags button { padding:4px 7px;border:1px solid rgba(7,17,31,.1);border-radius:5px;background:var(--paper);color:var(--blue);font-size:7px;cursor:pointer; }
.settings-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px; }.settings-card { padding:24px;border:1px solid rgba(7,17,31,.1);border-radius:12px;background:var(--white); }.settings-card h2 { margin:0 0 5px;font:800 15px var(--display); }.settings-card > p { margin:0 0 20px;color:rgba(7,17,31,.5);font-size:9px; }.settings-card > label:has(input[type="checkbox"]) { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(7,17,31,.07);font-size:10px; }.settings-card input[type="checkbox"] { accent-color:var(--blue); }

.modal-backdrop { position:fixed;inset:0;z-index:100;background:rgba(7,17,31,.7);backdrop-filter:blur(4px); }.modal { position:fixed;z-index:110;top:50%;left:50%;width:min(620px,calc(100% - 28px));max-height:90vh;transform:translate(-50%,-50%);border-radius:14px;background:var(--white);box-shadow:0 30px 100px rgba(7,17,31,.38);overflow:auto; }.wide-modal { width:min(820px,calc(100% - 28px)); }.modal-head { display:flex;align-items:flex-start;justify-content:space-between;padding:20px 22px;border-bottom:1px solid rgba(7,17,31,.09); }.modal-head span { color:var(--blue);font-size:8px;font-weight:800;text-transform:uppercase; }.modal-head h2 { margin:3px 0 0;font:800 19px var(--display); }.modal-head p { margin:3px 0 0;color:rgba(7,17,31,.5);font-size:9px; }.modal-head > button { border:0;background:transparent;font-size:24px;cursor:pointer; }.modal form { padding:22px; }.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:0 12px; }.modal-actions { display:flex;justify-content:flex-end;gap:8px;padding:15px 22px;border-top:1px solid rgba(7,17,31,.09); }.modal form .modal-actions { margin:20px -22px -22px; }.record-tabs { display:flex;gap:3px;padding:0 22px;border-bottom:1px solid rgba(7,17,31,.09); }.record-tabs button { padding:12px 13px;border:0;border-bottom:2px solid transparent;background:transparent;color:rgba(7,17,31,.48);font-size:9px;font-weight:700;cursor:pointer; }.record-tabs button.active { border-color:var(--blue);color:var(--blue); }.record-content { min-height:300px;padding:22px; }.record-overview { display:grid;grid-template-columns:1fr 1fr;gap:12px; }.record-box { padding:14px;border:1px solid rgba(7,17,31,.1);border-radius:8px; }.record-box span,.record-box b { display:block; }.record-box span { color:rgba(7,17,31,.45);font-size:8px; }.record-box b { margin-top:4px;font-size:11px; }.message-timeline,.activity-timeline { display:grid;gap:10px; }.timeline-item { padding:13px;border-left:3px solid var(--blue);border-radius:0 7px 7px 0;background:var(--paper); }.timeline-item b,.timeline-item span { display:block; }.timeline-item b { font-size:10px; }.timeline-item span { color:rgba(7,17,31,.5);font-size:8px; }.pricing-box { display:grid;grid-template-columns:1fr 1fr;gap:12px; }.pricing-box label { display:grid;gap:5px;font-size:8px;font-weight:700; }.pricing-box input { padding:9px;border:1px solid rgba(7,17,31,.12);border-radius:6px; }.popover { position:fixed;right:28px;top:60px;z-index:90;width:280px;padding:12px;border:1px solid rgba(7,17,31,.1);border-radius:10px;background:var(--white);box-shadow:0 18px 50px rgba(7,17,31,.16); }.popover > b { display:block;padding:5px 7px 10px;font-size:11px; }.popover button,.popover a { width:100%;display:block;padding:10px 7px;border:0;border-top:1px solid rgba(7,17,31,.07);background:transparent;text-align:left;cursor:pointer;font-size:9px; }.popover button span,.popover button small { display:block; }.popover button small { color:rgba(7,17,31,.48); }.user-popover { width:190px; }.toast { position:fixed;right:24px;bottom:24px;z-index:130;max-width:330px;padding:12px 16px;border-radius:8px;background:var(--ink);color:var(--white);box-shadow:0 14px 40px rgba(7,17,31,.3);font-size:10px;opacity:0;transform:translateY(12px);pointer-events:none;transition:.25s ease; }.toast.show { opacity:1;transform:none; }

@media(max-width:1100px){ .kpi-grid,.schedule-summary,.invoice-kpis,.report-kpis{grid-template-columns:1fr 1fr}.dashboard-grid,.report-grid{grid-template-columns:1fr}.followup-layout{grid-template-columns:1fr}.automation-card{order:-1}.story-panel{grid-column:auto}.schedule-board{grid-template-columns:1fr}.template-layout{grid-template-columns:250px 1fr} }
@media(max-width:820px){ .demo-shell{display:block}.sidebar{transform:translateX(-100%);transition:transform .25s ease}.sidebar.open{transform:none}.sidebar-close,.mobile-nav-toggle{display:block}.app-area{grid-column:auto}.app-header{padding:0 15px}.global-search{width:100%}.user-menu div{display:none}.app-main{padding:24px 15px 50px}.page-head{align-items:flex-start}.filter-bar{grid-template-columns:1fr 1fr}.filter-bar .table-search{grid-column:1/-1}.calendar-day{min-height:90px}.calendar-event{font-size:0;min-height:7px;padding:0}.template-layout,.settings-grid{grid-template-columns:1fr}.template-list{max-height:250px;overflow:auto} }
@media(max-width:560px){ .page-head{display:grid}.head-actions{width:100%}.head-actions button{flex:1}.kpi-grid,.schedule-summary,.invoice-kpis,.report-kpis{grid-template-columns:1fr}.filter-bar{grid-template-columns:1fr}.filter-bar .table-search{grid-column:auto}.source-chart{grid-template-columns:1fr}.donut-chart{margin:auto}.calendar-toolbar{grid-template-columns:1fr auto}.calendar-toolbar h2{grid-row:1;grid-column:2}.calendar-legend{display:none}.calendar-day{min-height:63px;padding:5px}.followup-card{grid-template-columns:auto 1fr}.followup-actions{grid-column:1/-1}.form-grid,.record-overview,.pricing-box{grid-template-columns:1fr}.modal{max-height:94vh}.vehicle-row{grid-template-columns:95px 1fr}.template-editor{padding:17px}.editor-head{align-items:flex-start}.page-head h1{font-size:24px} }
@media print { .sidebar,.app-header,.head-actions,.demo-notice{display:none!important}.app-area{grid-column:1}.app-main{padding:0}.app-view{display:none!important}.app-view[data-view-panel="reports"]{display:block!important}.report-grid{grid-template-columns:1fr 1fr} }
@media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} }