*{box-sizing:border-box}body{margin:0;background:#f4f6f8;color:#0b1118;font-family:Inter,Arial,sans-serif}button,input,select,textarea{font:inherit}.demo-banner{min-height:38px;background:#0b1118;color:#c5ced5;display:flex;justify-content:center;align-items:center;gap:30px;padding:5px 10px;font-size:11px}.demo-banner b{color:#3fc5f5}.demo-banner div{display:flex;gap:7px}.demo-banner button,.demo-banner a{background:#14202a;color:white;border:1px solid #2b3945;border-radius:7px;padding:5px 8px;text-decoration:none}.demo-app{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 38px)}.demo-sidebar{background:#0d131a;color:#fff;padding:16px 13px;display:flex;flex-direction:column}.demo-logo img{width:128px;filter:brightness(0) invert(1)}.demo-company{display:flex;align-items:center;gap:9px;background:#121b24;border:1px solid #222f3a;border-radius:11px;padding:10px;margin:17px 0}.company-mark{width:34px;height:34px;border-radius:8px;background:#14b4ee;color:#06131a;display:grid;place-items:center;font-weight:900}.demo-company b,.demo-company span,.demo-sidebar-foot b,.demo-sidebar-foot span{display:block}.demo-company b{font-size:12px}.demo-company span,.demo-sidebar-foot span{font-size:9px;color:#7d8994}.demo-nav{display:grid;gap:4px}.demo-nav button{border:0;background:transparent;color:#8997a3;padding:10px;border-radius:8px;text-align:left;font-size:12px;font-weight:800}.demo-nav button.active{background:#18232d;color:white;box-shadow:inset 3px 0 #17b7ef}.demo-sidebar-foot{margin-top:auto;border-top:1px solid #202b35;padding-top:13px;display:flex;gap:8px;align-items:center}.avatar{width:30px;height:30px;border-radius:50%;background:#26343f;display:grid;place-items:center;font-size:9px}.demo-sidebar-foot b{font-size:10px}.demo-topbar{height:62px;background:white;border-bottom:1px solid #e0e6eb;display:flex;justify-content:space-between;align-items:center;padding:0 22px;position:sticky;top:0;z-index:20}.top-actions{display:flex;gap:8px}.top-actions input,#customerSearch{border:1px solid #e0e6eb;background:#f8fafb;border-radius:8px;padding:9px 10px;font-size:11px}.primary,.secondary{border-radius:9px;padding:10px 13px;font-size:11px;font-weight:900}.primary{background:#0b1118;color:white;border:0}.secondary{background:white;border:1px solid #e0e6eb}.mobile-menu{display:none}.demo-view{display:none;padding:30px 26px 55px;max-width:1500px;margin:auto}.demo-view.active{display:block}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:20px}.eyebrow{font-size:9px;letter-spacing:.15em;color:#1598c8;font-weight:900}.page-head h1{font-size:33px;letter-spacing:-.04em;margin:6px 0 4px}.page-head p{font-size:11px;color:#7e8a95;margin:0}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.metric-grid article,.inventory-summary article,.invoice-summary article{background:white;border:1px solid #e0e6eb;border-radius:12px;padding:16px}.metric-grid span,.inventory-summary span,.invoice-summary span{font-size:9px;color:#83909b;text-transform:uppercase;font-weight:800}.metric-grid b,.inventory-summary b,.invoice-summary b{display:block;font-size:25px;margin-top:7px}.metric-grid em{display:block;font-size:9px;color:#4d986b;font-style:normal;margin-top:5px}.dashboard-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:11px;margin-top:11px}.panel{background:white;border:1px solid #e0e6eb;border-radius:13px;overflow:hidden}.panel-head{display:flex;justify-content:space-between;padding:15px 16px;border-bottom:1px solid #edf1f4}.panel-head h2{font-size:14px;margin:0 0 3px}.panel-head p{font-size:9px;color:#87939e;margin:0}.count{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#fff0ec;color:#bf4c3f;font-size:9px}.attention-list button{width:100%;display:grid;grid-template-columns:10px 1fr auto;gap:9px;align-items:center;border:0;border-bottom:1px solid #edf1f4;background:#fff;padding:11px 15px;text-align:left}.attention-list i{width:7px;height:7px;border-radius:50%}.danger-dot{background:#df5852}.warn-dot{background:#e6a62e}.attention-list b,.attention-list span,.timeline b,.timeline span{display:block}.attention-list b{font-size:10px}.attention-list span,.timeline span{font-size:8px;color:#87939e}.timeline{padding:8px 16px}.timeline>div{display:grid;grid-template-columns:37px 9px 1fr;gap:8px;padding:8px 0}.timeline time{font-size:8px;color:#8b97a1}.timeline i{width:6px;height:6px;border:2px solid #17b0e8;border-radius:50%}.timeline b{font-size:9px}.kanban{display:flex;gap:10px;overflow:auto}.kanban-col{width:255px;min-width:255px;background:#e9edf1;border-radius:12px;padding:9px;min-height:520px}.kanban-head{display:flex;justify-content:space-between;padding:4px 3px 9px}.kanban-head b{font-size:9px;text-transform:uppercase}.job-card{background:#fff;border:1px solid #dce3e8;border-radius:9px;padding:11px;margin-bottom:7px;cursor:grab}.job-card h3{font-size:11px;margin:8px 0 3px}.cust{font-size:8px;color:#7f8c97}.job-card-top,.job-card-foot{display:flex;justify-content:space-between;font-size:8px}.priority{background:#eef2f5;padding:3px 5px;border-radius:99px}.priority.High{background:#fff0ed;color:#bd4c40}.job-card.dragging{opacity:.45}.drop-hover{outline:2px dashed #1bb7ee}.calendar-nav{display:flex;gap:10px;align-items:center}.calendar-nav button{border:1px solid #e0e6eb;background:#fff;border-radius:8px;width:32px;height:32px}.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-shell{background:white;border:1px solid #e0e6eb;border-radius:12px;overflow:hidden}.calendar-weekdays span{text-align:center;padding:10px;font-size:8px;color:#87939e;border-bottom:1px solid #e0e6eb}.calendar-day{min-height:115px;padding:7px;border-right:1px solid #edf1f4;border-bottom:1px solid #edf1f4}.calendar-day.out{background:#fafbfc;color:#b2bac1}.calendar-day b{font-size:9px}.cal-event{display:block;margin-top:5px;padding:4px 5px;border-left:3px solid #16afea;background:#eef9fd;border-radius:4px;font-size:7px}.cal-event.install{border-left-color:#e5a12e;background:#fff8eb}.cal-event.follow{border-left-color:#8068ca;background:#f5f1ff}.table-panel{background:white;border:1px solid #e0e6eb;border-radius:12px;overflow:auto}table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:12px 14px;text-align:left;border-bottom:1px solid #edf1f4;font-size:9px}th{font-size:7px;text-transform:uppercase;color:#87939e}.status{display:inline-block;padding:4px 6px;border-radius:99px;font-size:7px;font-weight:900;background:#eef2f5}.status.active,.status.paid{background:#eaf8ef;color:#287448}.status.overdue{background:#fff0ed;color:#bd4c40}.status.pending{background:#fff6e4;color:#946a20}.production-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.prod-col{background:#e9edf1;border-radius:12px;padding:9px}.prod-col h3{font-size:9px;text-transform:uppercase}.prod-card{background:white;border:1px solid #dce3e8;border-radius:8px;padding:10px;margin-bottom:7px}.prod-card b,.prod-card span{display:block}.prod-card b{font-size:9px}.prod-card span{font-size:7px;color:#84909a}.prod-progress{height:4px;background:#edf1f4;border-radius:99px;margin-top:8px}.prod-progress i{display:block;height:100%;background:#14afe9;width:var(--p)}.inventory-summary,.invoice-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}.modal{position:fixed;inset:0;background:rgba(8,13,18,.5);display:none;place-items:center;padding:15px;z-index:100}.modal.open{display:grid}.modal-card{width:min(480px,100%);background:#fff;border-radius:15px;padding:18px}.modal-head{display:flex;justify-content:space-between}.modal-head h2{margin:0 0 12px}.modal-head button{border:0;background:none;font-size:23px}.modal form{display:grid;gap:10px}.modal label{display:grid;gap:5px;font-size:9px;font-weight:800}.modal input,.modal select,.modal textarea{border:1px solid #e0e6eb;border-radius:8px;padding:10px;font-size:14px}.form-grid,.job-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.job-detail{border:1px solid #e0e6eb;border-radius:8px;padding:10px}.job-detail span,.job-detail b{display:block}.job-detail span{font-size:7px;text-transform:uppercase;color:#87939e}.job-detail b{font-size:10px;margin-top:4px}.job-notes{margin-top:10px;background:#f7f9fb;border-radius:8px;padding:10px;font-size:9px;line-height:1.5}#toast{position:fixed;right:16px;bottom:16px;background:#0b1118;color:white;padding:9px 12px;border-radius:8px;font-size:9px;opacity:0;transition:.2s}#toast.show{opacity:1}@media(max-width:900px){.demo-app{grid-template-columns:1fr}.demo-sidebar{position:fixed;left:-235px;top:38px;width:220px;height:calc(100vh - 38px);z-index:60;transition:.2s}.demo-sidebar.open{left:0}.mobile-menu{display:block}.dashboard-grid{grid-template-columns:1fr}.production-grid{grid-template-columns:1fr 1fr}.metric-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.demo-banner{justify-content:space-between}.demo-banner a{display:none}.demo-topbar{padding:9px 10px;height:auto}.top-actions{flex:1}.top-actions input{width:100%;font-size:16px}.demo-view{padding:20px 11px 45px}.page-head{flex-direction:column;align-items:stretch}.page-head h1{font-size:28px}.kanban-col{width:82vw;min-width:82vw}.calendar-shell{overflow:auto}.calendar-weekdays,.calendar-grid{min-width:700px}.production-grid{grid-template-columns:1fr}.inventory-summary,.invoice-summary{grid-template-columns:1fr 1fr}.form-grid,.job-grid{grid-template-columns:1fr}}
/* Demo v2: clearer disclaimer + slightly larger UI */
.demo-banner{
  font-size:12px;
  padding:8px 14px;
  min-height:46px;
  line-height:1.35;
}
.demo-banner>span{max-width:980px}
.demo-app{min-height:calc(100vh - 46px)}
.demo-sidebar{font-size:1.04em}
.demo-sidebar{padding:19px 15px}
.demo-sidebar .demo-logo img{width:138px}
.demo-company{padding:12px}
.demo-nav button{padding:11px 12px;font-size:13px}
.demo-topbar{height:68px;padding:0 26px}
.demo-topbar>div:first-child>span{font-size:13px;font-weight:800}
.top-actions input{font-size:13px;padding:10px 12px}
.primary,.secondary{font-size:12px;padding:11px 15px}
.demo-view{padding:34px 32px 60px}
.page-head h1{font-size:36px}
.page-head p{font-size:12px}
.metric-grid article,.inventory-summary article,.invoice-summary article{padding:18px}
.metric-grid b,.inventory-summary b,.invoice-summary b{font-size:28px}
.panel-head{padding:17px 18px}
.panel-head h2{font-size:15px}
.attention-list button{padding:13px 17px}
.attention-list b{font-size:11px}
.attention-list span{font-size:9px}
.timeline{padding:10px 18px}
.timeline>div{padding:9px 0}
.timeline b{font-size:10px}
.timeline span{font-size:9px}
.kanban-col{width:280px;min-width:280px;padding:11px}
.job-card{padding:13px}
.job-card h3{font-size:12px}
.job-card .cust{font-size:9px}
.calendar-day{min-height:128px;padding:9px}
table{min-width:780px}
th,td{padding:14px 16px}
.production-grid{gap:12px}
.prod-col{padding:11px}
.prod-card{padding:12px}
.demo-notice{
  display:flex;align-items:flex-start;gap:12px;
  background:#eef9fd;border:1px solid #bfeafa;
  border-radius:12px;padding:14px 16px;margin-bottom:20px;
}
.notice-icon{
  flex:0 0 28px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:#13aef0;color:white;
  font-weight:900;font-size:13px;
}
.demo-notice b,.demo-notice span{display:block}
.demo-notice b{font-size:12px;margin-bottom:3px}
.demo-notice span{font-size:10px;line-height:1.55;color:#55707f}
@media(max-width:900px){
  .demo-sidebar{top:46px;height:calc(100vh - 46px)}
  .demo-topbar{padding:10px 14px}
  .demo-view{padding:26px 18px 52px}
}
@media(max-width:560px){
  .demo-banner{font-size:9px;min-height:54px;padding:7px 9px}
  .demo-banner>span{max-width:75%}
  .demo-sidebar{top:54px;height:calc(100vh - 54px)}
  .demo-view{padding:20px 12px 48px}
  .demo-notice{padding:12px}
  .demo-notice b{font-size:11px}
  .demo-notice span{font-size:9px}
  .page-head h1{font-size:30px}
  .metric-grid b{font-size:22px}
  .kanban-col{width:86vw;min-width:86vw}
}

.theme-toggle{width:38px;min-width:38px;border:1px solid #e0e6eb;background:#fff;border-radius:9px;cursor:pointer;font-weight:900}
.subscription-summary,.po-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.po-summary{grid-template-columns:repeat(3,1fr)}
.subscription-summary article,.po-summary article{background:#fff;border:1px solid #e0e6eb;border-radius:12px;padding:16px}
.subscription-summary span,.po-summary span{display:block;font-size:9px;color:#83909b;text-transform:uppercase;font-weight:800}
.subscription-summary b,.po-summary b{display:block;font-size:24px;margin-top:7px}
.subscription-summary em,.po-summary em{display:block;font-size:9px;color:#7d8994;font-style:normal;margin-top:5px}
.subscription-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.subscription-card{background:#fff;border:1px solid #e0e6eb;border-radius:12px;padding:15px}
.subscription-card-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.subscription-card-top>div>span{font-size:8px;color:#87939e;text-transform:uppercase;letter-spacing:.06em}
.subscription-card h3{margin:5px 0 0;font-size:13px}
.subscription-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:14px}
.subscription-meta div{background:#f7f9fb;border-radius:8px;padding:8px}
.subscription-meta span,.subscription-meta b{display:block}
.subscription-meta span{font-size:7px;color:#8a96a1;text-transform:uppercase}
.subscription-meta b{font-size:9px;margin-top:4px}
.subscription-foot{display:flex;justify-content:space-between;margin-top:11px;padding-top:10px;border-top:1px solid #edf1f4;font-size:9px}

/* Demo dark theme */
:root[data-demo-theme="dark"] body{background:#0d1319;color:#eef3f6}
:root[data-demo-theme="dark"] .demo-main{background:#0d1319}
:root[data-demo-theme="dark"] .demo-topbar,
:root[data-demo-theme="dark"] .panel,
:root[data-demo-theme="dark"] .metric-grid article,
:root[data-demo-theme="dark"] .inventory-summary article,
:root[data-demo-theme="dark"] .invoice-summary article,
:root[data-demo-theme="dark"] .subscription-summary article,
:root[data-demo-theme="dark"] .po-summary article,
:root[data-demo-theme="dark"] .subscription-card,
:root[data-demo-theme="dark"] .table-panel,
:root[data-demo-theme="dark"] .calendar-shell,
:root[data-demo-theme="dark"] .job-card,
:root[data-demo-theme="dark"] .prod-card,
:root[data-demo-theme="dark"] .modal-card{background:#141d25;color:#eef3f6;border-color:#28343e}
:root[data-demo-theme="dark"] .demo-view{background:#0d1319}
:root[data-demo-theme="dark"] .page-head p,
:root[data-demo-theme="dark"] .panel-head p,
:root[data-demo-theme="dark"] .attention-list span,
:root[data-demo-theme="dark"] .timeline span{color:#8d9aa6}
:root[data-demo-theme="dark"] .attention-list button{background:#141d25;color:#eef3f6;border-color:#26323b}
:root[data-demo-theme="dark"] .kanban-col,
:root[data-demo-theme="dark"] .prod-col{background:#111a22}
:root[data-demo-theme="dark"] .calendar-day{border-color:#25313a}
:root[data-demo-theme="dark"] .calendar-day.out{background:#10171e}
:root[data-demo-theme="dark"] th,
:root[data-demo-theme="dark"] td{border-color:#26313a}
:root[data-demo-theme="dark"] .subscription-meta div,
:root[data-demo-theme="dark"] .job-notes{background:#10171e}
:root[data-demo-theme="dark"] .theme-toggle,
:root[data-demo-theme="dark"] .secondary,
:root[data-demo-theme="dark"] input,
:root[data-demo-theme="dark"] select{background:#10171e;color:#eef3f6;border-color:#2a3640}

@media(max-width:900px){
  .subscription-summary{grid-template-columns:1fr 1fr}
  .subscription-board{grid-template-columns:1fr}
}
@media(max-width:560px){
  .subscription-meta{grid-template-columns:1fr 1fr}
  .po-summary{grid-template-columns:1fr 1fr}
  .theme-toggle{width:40px;min-width:40px}
}

/* v5 readability pass */
body{font-size:16px}
.demo-app{grid-template-columns:250px 1fr}
.demo-sidebar{padding:20px 16px}
.demo-logo img{width:150px}
.demo-company{padding:13px}
.demo-company b{font-size:13px}.demo-company span{font-size:10px}
.demo-nav button{font-size:14px;padding:12px 13px}
.demo-sidebar-foot b{font-size:12px}.demo-sidebar-foot span{font-size:10px}
.demo-topbar{height:72px;padding:0 30px}
.demo-topbar>div:first-child>span{font-size:14px}
.top-actions input{width:240px;font-size:14px;padding:11px 13px}
.primary,.secondary,.theme-toggle{font-size:13px}
.demo-view{padding:38px 36px 64px;max-width:1650px}
.page-head h1{font-size:40px}
.page-head p{font-size:14px}
.eyebrow{font-size:10px}
.metric-grid article,.inventory-summary article,.invoice-summary article,.subscription-summary article,.po-summary article{padding:20px}
.metric-grid span,.inventory-summary span,.invoice-summary span,.subscription-summary span,.po-summary span{font-size:10px}
.metric-grid b,.inventory-summary b,.invoice-summary b,.subscription-summary b,.po-summary b{font-size:30px}
.metric-grid em,.subscription-summary em,.po-summary em{font-size:10px}
.panel-head h2{font-size:17px}.panel-head p{font-size:11px}
.attention-list b{font-size:12px}.attention-list span{font-size:10px}
.timeline b{font-size:11px}.timeline span,.timeline time{font-size:10px}
.kanban-col{width:310px;min-width:310px}
.kanban-head b{font-size:10px}.job-card{padding:14px}.job-card h3{font-size:13px}.job-card .cust,.job-card-top,.job-card-foot{font-size:10px}
.calendar-day{min-height:145px;padding:10px}.calendar-day b{font-size:11px}.cal-event{font-size:9px;padding:6px}
th,td{font-size:11px;padding:15px 17px}th{font-size:9px}
.prod-card b{font-size:11px}.prod-card span{font-size:9px}.prod-col h3{font-size:10px}
.subscription-card h3{font-size:14px}.subscription-meta{grid-template-columns:repeat(5,1fr)}.subscription-meta span{font-size:8px}.subscription-meta b{font-size:10px}
.mobile-agenda{display:none}

/* phone-first rendering */
@media(max-width:700px){
  body{background:#f4f6f8}
  .demo-banner{
    min-height:64px;
    padding:8px 10px;
    align-items:flex-start;
    gap:8px;
    font-size:10px;
    line-height:1.45
  }
  .demo-banner>span{max-width:none;flex:1}
  .demo-banner div{flex-shrink:0}
  .demo-banner a{display:none}

  .demo-app{display:block;min-height:calc(100vh - 64px)}
  .demo-sidebar{
    top:64px;height:calc(100vh - 64px);
    width:278px;left:-292px;
    padding:18px 16px
  }
  .demo-sidebar.open{left:0}
  .demo-logo img{width:146px}
  .demo-nav button{font-size:15px;padding:13px 14px}

  .demo-topbar{
    top:0;
    min-height:66px;height:auto;
    padding:10px 12px;
    gap:8px
  }
  .demo-topbar>div:first-child{display:flex;align-items:center;gap:7px}
  .demo-topbar>div:first-child>span{font-size:13px}
  .mobile-menu{
    display:block;
    border:0;background:transparent;
    font-size:24px;line-height:1;padding:8px
  }
  .top-actions{gap:6px;align-items:center}
  .top-actions input{display:none}
  .theme-toggle{width:42px;height:42px;min-width:42px;font-size:16px}
  .top-actions .primary{height:42px;padding:0 12px;font-size:12px}

  .demo-view{
    padding:20px 12px 42px;
    max-width:none
  }
  .demo-notice{
    margin-bottom:16px;padding:13px;
    border-radius:12px
  }
  .notice-icon{width:30px;height:30px;flex-basis:30px}
  .demo-notice b{font-size:13px}
  .demo-notice span{font-size:11px;line-height:1.5}

  .page-head{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    margin-bottom:16px
  }
  .page-head h1{font-size:32px;margin-top:5px}
  .page-head p{font-size:13px;line-height:1.5}
  .eyebrow{font-size:9px}

  .metric-grid{grid-template-columns:1fr;gap:9px}
  .metric-grid article{padding:16px}
  .metric-grid span{font-size:10px}
  .metric-grid b{font-size:28px}
  .metric-grid em{font-size:10px}

  .dashboard-grid{grid-template-columns:1fr;gap:10px}
  .panel-head{padding:15px}
  .panel-head h2{font-size:16px}
  .panel-head p{font-size:11px}
  .attention-list button{
    grid-template-columns:12px 1fr 18px;
    padding:14px 15px
  }
  .attention-list b{font-size:12px;line-height:1.35}
  .attention-list span{font-size:10px;line-height:1.4}
  .timeline{padding:8px 15px 14px}
  .timeline>div{grid-template-columns:44px 10px 1fr;padding:11px 0}
  .timeline b{font-size:12px}.timeline span,.timeline time{font-size:10px}

  /* Workflow: big cards, one column visible at a time */
  .kanban{
    gap:10px;
    margin:0 -12px;
    padding:0 12px 15px;
    scroll-snap-type:x mandatory
  }
  .kanban-col{
    width:88vw;min-width:88vw;
    min-height:420px;
    scroll-snap-align:start;
    padding:11px
  }
  .kanban-head b{font-size:11px}
  .job-card{padding:14px}
  .job-card h3{font-size:14px}
  .job-card .cust,.job-card-top,.job-card-foot{font-size:10px}

  /* Calendar: hide tiny grid, show readable agenda */
  .calendar-shell{display:none}
  .mobile-agenda{display:grid;gap:10px}
  .calendar-nav{
    width:100%;
    justify-content:space-between;
    background:#fff;
    border:1px solid #e0e6eb;
    border-radius:11px;
    padding:7px
  }
  .calendar-nav b{font-size:14px}
  .calendar-nav button{width:42px;height:42px;font-size:18px}
  .agenda-card{
    display:grid;
    grid-template-columns:58px 1fr;
    gap:12px;
    background:#fff;
    border:1px solid #e0e6eb;
    border-radius:12px;
    padding:13px
  }
  .agenda-date{
    border-right:1px solid #e9eef2;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center
  }
  .agenda-date b{font-size:24px;line-height:1}
  .agenda-date span{font-size:10px;color:#7e8a95;text-transform:uppercase;margin-top:5px}
  .agenda-copy h3{font-size:14px;margin:6px 0 4px}
  .agenda-copy p{font-size:10px;color:#7e8a95;margin:0}
  .agenda-type{
    display:inline-block;
    font-size:8px;font-weight:900;
    text-transform:uppercase;letter-spacing:.06em;
    background:#eef9fd;color:#1685ae;
    border-radius:99px;padding:4px 7px
  }
  .agenda-type.install{background:#fff5df;color:#9b6a16}
  .agenda-type.follow{background:#f3efff;color:#7058b0}
  .agenda-empty{background:#fff;border:1px solid #e0e6eb;border-radius:12px;padding:18px;font-size:12px;color:#7e8a95}

  /* Tables become horizontally scrollable, but text stays readable */
  .table-panel{
    margin:0 -12px;
    border-radius:0;
    border-left:0;border-right:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch
  }
  table{min-width:840px}
  th,td{font-size:11px;padding:14px 13px;white-space:nowrap}
  th{font-size:9px}

  .production-grid{grid-template-columns:1fr}
  .prod-col{padding:11px}
  .prod-col h3{font-size:11px}
  .prod-card{padding:13px}
  .prod-card b{font-size:12px}.prod-card span{font-size:10px}

  .inventory-summary,.invoice-summary,.subscription-summary,.po-summary{
    grid-template-columns:1fr 1fr;
    gap:8px
  }
  .inventory-summary article,.invoice-summary article,.subscription-summary article,.po-summary article{padding:14px}
  .inventory-summary b,.invoice-summary b,.subscription-summary b,.po-summary b{font-size:23px}

  .subscription-board{grid-template-columns:1fr}
  .subscription-card{padding:14px}
  .subscription-card h3{font-size:14px}
  .subscription-meta{grid-template-columns:1fr 1fr}
  .subscription-meta div{padding:9px}
  .subscription-meta span{font-size:8px}
  .subscription-meta b{font-size:11px}
  .subscription-foot{font-size:10px}

  .form-grid,.job-grid{grid-template-columns:1fr}
  .modal{padding:10px}
  .modal-card{width:100%;max-height:92vh;overflow:auto}
  .modal input,.modal select,.modal textarea{font-size:16px}
}

/* Dark-theme agenda */
:root[data-demo-theme="dark"] .agenda-card,
:root[data-demo-theme="dark"] .calendar-nav{
  background:#141d25;color:#eef3f6;border-color:#28343e
}
:root[data-demo-theme="dark"] .agenda-date{border-color:#28343e}

/* v6 desktop readability pass */
@media(min-width:701px){
  .demo-app{grid-template-columns:270px 1fr}
  .demo-sidebar{padding:22px 18px}
  .demo-logo img{width:160px}
  .demo-company{padding:14px}
  .demo-company b{font-size:14px}
  .demo-company span{font-size:11px}
  .demo-nav button{font-size:15px;padding:13px 14px}
  .demo-sidebar-foot b{font-size:13px}
  .demo-sidebar-foot span{font-size:10px}

  .demo-topbar{height:76px;padding:0 34px}
  .demo-topbar>div:first-child>span{font-size:15px}
  .top-actions input{width:280px;font-size:15px;padding:12px 14px}
  .theme-toggle{width:42px;height:42px;min-width:42px;font-size:17px}
  .primary,.secondary{font-size:14px;padding:12px 16px}

  .demo-view{padding:42px 40px 70px;max-width:1750px}
  .page-head{margin-bottom:24px}
  .page-head h1{font-size:44px}
  .page-head p{font-size:15px}
  .eyebrow{font-size:11px}

  .demo-notice{padding:16px 18px}
  .demo-notice b{font-size:14px}
  .demo-notice span{font-size:12px}

  .metric-grid{gap:14px}
  .metric-grid article,
  .inventory-summary article,
  .invoice-summary article,
  .subscription-summary article,
  .po-summary article{padding:22px}
  .metric-grid span,
  .inventory-summary span,
  .invoice-summary span,
  .subscription-summary span,
  .po-summary span{font-size:11px}
  .metric-grid b,
  .inventory-summary b,
  .invoice-summary b,
  .subscription-summary b,
  .po-summary b{font-size:32px}
  .metric-grid em,
  .subscription-summary em,
  .po-summary em{font-size:11px}

  .dashboard-grid{gap:14px;margin-top:14px}
  .panel-head{padding:19px 20px}
  .panel-head h2{font-size:18px}
  .panel-head p{font-size:12px}
  .attention-list button{padding:15px 19px}
  .attention-list b{font-size:13px}
  .attention-list span{font-size:11px}
  .timeline{padding:10px 20px 18px}
  .timeline>div{padding:11px 0}
  .timeline time,.timeline span{font-size:11px}
  .timeline b{font-size:12px}

  .kanban{gap:14px}
  .kanban-col{width:335px;min-width:335px;padding:13px;min-height:600px}
  .kanban-head b{font-size:11px}
  .kanban-head span{font-size:10px}
  .job-card{padding:15px;margin-bottom:10px}
  .job-card h3{font-size:14px}
  .job-card .cust,.job-card-top,.job-card-foot{font-size:11px}

  .calendar-weekdays span{font-size:10px;padding:13px}
  .calendar-day{min-height:165px;padding:12px}
  .calendar-day b{font-size:12px}
  .cal-event{font-size:10px;padding:7px 8px;margin-top:7px}
  .calendar-nav b{font-size:14px}
  .calendar-nav button{width:38px;height:38px;font-size:16px}

  table{min-width:900px}
  th{font-size:10px}
  td{font-size:12px}
  th,td{padding:16px 18px}

  .production-grid{gap:14px}
  .prod-col{padding:13px}
  .prod-col h3{font-size:11px}
  .prod-card{padding:14px;margin-bottom:10px}
  .prod-card b{font-size:12px}
  .prod-card span{font-size:10px}

  .subscription-card{padding:18px}
  .subscription-card h3{font-size:15px}
  .subscription-card-top>div>span{font-size:9px}
  .subscription-meta{gap:9px;margin-top:16px}
  .subscription-meta div{padding:10px}
  .subscription-meta span{font-size:9px}
  .subscription-meta b{font-size:11px}
  .subscription-foot{font-size:11px}
}

/* extra-large desktop: keep content generous, not tiny */
@media(min-width:1400px){
  .demo-view{max-width:1880px}
  .calendar-day{min-height:175px}
  .kanban-col{width:350px;min-width:350px}
}

/* v7 calendar contrast fix */
.calendar-day{
  background:#fff;
  color:#0b1118;
}
.calendar-day>b{
  color:#0b1118;
}
.calendar-day.out{
  background:#f7f9fb;
  color:#9aa5ae;
}
.calendar-day.out>b{
  color:#9aa5ae;
}
.cal-event{
  color:#24596c !important;
  background:#eef9fd;
}
.cal-event.install{
  color:#7b5a18 !important;
  background:#fff7e6;
}
.cal-event.follow{
  color:#624f99 !important;
  background:#f4f0ff;
}

:root[data-demo-theme="dark"] .calendar-shell{
  background:#141d25;
  border-color:#28343e;
}
:root[data-demo-theme="dark"] .calendar-weekdays span{
  color:#aeb9c2;
  border-color:#28343e;
}
:root[data-demo-theme="dark"] .calendar-day{
  background:#141d25;
  color:#f3f6f8;
  border-color:#28343e;
}
:root[data-demo-theme="dark"] .calendar-day>b{
  color:#f3f6f8;
}
:root[data-demo-theme="dark"] .calendar-day.out{
  background:#10171e;
  color:#66737e;
}
:root[data-demo-theme="dark"] .calendar-day.out>b{
  color:#66737e;
}
:root[data-demo-theme="dark"] .cal-event{
  background:#153544;
  color:#c9f1ff !important;
  border-left-color:#34bdf3;
}
:root[data-demo-theme="dark"] .cal-event.install{
  background:#3d3017;
  color:#ffe2a1 !important;
  border-left-color:#e7a732;
}
:root[data-demo-theme="dark"] .cal-event.follow{
  background:#2b2442;
  color:#e0d6ff !important;
  border-left-color:#8c74d8;
}

/* v8 global readability / contrast sweep */
body{color:#0b1118}
.demo-notice{background:#eef9fd;color:#0b1118}
.demo-notice b{color:#0b1118 !important}
.demo-notice span{color:#4d6674 !important}
.panel,.metric-grid article,.inventory-summary article,.invoice-summary article,.subscription-summary article,.po-summary article,.quote-summary article,.task-summary article,.proof-summary article{color:#0b1118}
.panel h2,.panel b,.panel strong{color:#0b1118}
.attention-list button{color:#0b1118}
.timeline b{color:#0b1118}
.table-panel{color:#0b1118}
table{color:#0b1118}
.job-card{color:#0b1118}
.prod-card{color:#0b1118}
.subscription-card{color:#0b1118}
.modal-card{color:#0b1118}

/* New demo modules */
.quote-summary,.task-summary,.proof-summary{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px
}
.quote-summary article,.task-summary article,.proof-summary article{
  background:#fff;border:1px solid #e0e6eb;border-radius:12px;padding:18px
}
.quote-summary span,.task-summary span,.proof-summary span{
  display:block;font-size:10px;color:#83909b;text-transform:uppercase;font-weight:800
}
.quote-summary b,.task-summary b,.proof-summary b{
  display:block;font-size:27px;margin-top:7px
}
.quote-summary em,.task-summary em,.proof-summary em{
  display:block;font-size:10px;color:#7d8994;font-style:normal;margin-top:5px
}
.task-list{display:grid;gap:9px}
.task-card{
  display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;
  background:#fff;border:1px solid #e0e6eb;border-radius:12px;padding:14px 16px
}
.task-card.done{opacity:.55}
.task-check{
  width:32px;height:32px;border-radius:9px;border:1px solid #ccd6de;background:#fff;
  font-weight:900;cursor:pointer
}
.task-card.done .task-check{background:#e8f7ee;color:#2f7b4a}
.task-card-top{display:flex;gap:8px;align-items:center}
.task-card-top small{font-size:9px;color:#81909b}
.task-copy h3{font-size:13px;margin:6px 0 3px}
.task-copy p{font-size:10px;color:#7d8994;margin:0}
.task-due{font-size:10px;color:#65737f;font-weight:800}
.overdue-text{color:#c14d42}
.proof-grid{display:grid;gap:9px}
.proof-card{
  display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:center;
  background:#fff;border:1px solid #e0e6eb;border-radius:12px;padding:14px 16px
}
.proof-file-icon{
  width:48px;height:48px;border-radius:10px;background:#eef3f6;color:#3c5666;
  display:grid;place-items:center;font-size:10px;font-weight:900
}
.proof-copy>span{font-size:9px;color:#7f8c97}
.proof-copy h3{font-size:13px;margin:5px 0 3px}
.proof-copy p{font-size:10px;color:#7f8c97;margin:0}
.proof-side{display:grid;justify-items:end;gap:7px}
.proof-side small{font-size:9px;color:#7f8c97}
.proof-open{border:1px solid #dce3e8;background:#fff;border-radius:7px;padding:6px 9px;font-size:9px;font-weight:800}
.activity-feed-large{background:#fff;border:1px solid #e0e6eb;border-radius:12px;overflow:hidden}
.activity-row{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:15px 17px;border-bottom:1px solid #edf1f4}
.activity-row:last-child{border-bottom:0}
.activity-icon{
  width:30px;height:30px;border-radius:9px;background:#eef9fd;color:#168eb9;display:grid;place-items:center;font-size:20px
}
.activity-icon.payment{background:#e9f8ef;color:#2e7d4b}
.activity-icon.proof{background:#f4f0ff;color:#7059ae}
.activity-icon.stock{background:#fff4df;color:#9b6b1a}
.activity-icon.po{background:#eef3f6;color:#536774}
.activity-icon.quote{background:#eaf6ff;color:#317ca4}
.activity-main>div{display:flex;justify-content:space-between;gap:12px}
.activity-main b{font-size:12px}
.activity-main span{font-size:9px;color:#84919c}
.activity-main p{font-size:10px;color:#65737e;margin:4px 0}
.activity-main small{font-size:9px;color:#8a96a1}

/* Dark theme: explicit opposite contrast */
:root[data-demo-theme="dark"] body{color:#eef3f6}
:root[data-demo-theme="dark"] .demo-notice{
  background:#15313e;color:#f3f8fb;border-color:#2e6378
}
:root[data-demo-theme="dark"] .demo-notice b{color:#fff !important}
:root[data-demo-theme="dark"] .demo-notice span{color:#c0d8e3 !important}
:root[data-demo-theme="dark"] .panel,
:root[data-demo-theme="dark"] .metric-grid article,
:root[data-demo-theme="dark"] .inventory-summary article,
:root[data-demo-theme="dark"] .invoice-summary article,
:root[data-demo-theme="dark"] .subscription-summary article,
:root[data-demo-theme="dark"] .po-summary article,
:root[data-demo-theme="dark"] .quote-summary article,
:root[data-demo-theme="dark"] .task-summary article,
:root[data-demo-theme="dark"] .proof-summary article,
:root[data-demo-theme="dark"] .task-card,
:root[data-demo-theme="dark"] .proof-card,
:root[data-demo-theme="dark"] .activity-feed-large{
  background:#141d25;color:#eef3f6;border-color:#28343e
}
:root[data-demo-theme="dark"] .panel h2,
:root[data-demo-theme="dark"] .panel b,
:root[data-demo-theme="dark"] .panel strong,
:root[data-demo-theme="dark"] .attention-list button,
:root[data-demo-theme="dark"] .timeline b,
:root[data-demo-theme="dark"] table,
:root[data-demo-theme="dark"] .job-card,
:root[data-demo-theme="dark"] .prod-card,
:root[data-demo-theme="dark"] .subscription-card,
:root[data-demo-theme="dark"] .modal-card,
:root[data-demo-theme="dark"] .task-copy h3,
:root[data-demo-theme="dark"] .proof-copy h3,
:root[data-demo-theme="dark"] .activity-main b{
  color:#eef3f6 !important
}
:root[data-demo-theme="dark"] .quote-summary span,
:root[data-demo-theme="dark"] .task-summary span,
:root[data-demo-theme="dark"] .proof-summary span,
:root[data-demo-theme="dark"] .quote-summary em,
:root[data-demo-theme="dark"] .task-summary em,
:root[data-demo-theme="dark"] .proof-summary em,
:root[data-demo-theme="dark"] .task-copy p,
:root[data-demo-theme="dark"] .proof-copy>span,
:root[data-demo-theme="dark"] .proof-copy p,
:root[data-demo-theme="dark"] .proof-side small,
:root[data-demo-theme="dark"] .activity-main span,
:root[data-demo-theme="dark"] .activity-main p,
:root[data-demo-theme="dark"] .activity-main small{
  color:#9eabb6 !important
}
:root[data-demo-theme="dark"] .task-check,
:root[data-demo-theme="dark"] .proof-open{
  background:#10171e;color:#eef3f6;border-color:#33414c
}
:root[data-demo-theme="dark"] .proof-file-icon{
  background:#10171e;color:#c6d2da
}
:root[data-demo-theme="dark"] .activity-row{border-color:#28343e}

@media(max-width:700px){
  .quote-summary,.task-summary,.proof-summary{grid-template-columns:1fr 1fr}
  .task-card{grid-template-columns:38px 1fr}
  .task-due{grid-column:2}
  .proof-card{grid-template-columns:48px 1fr}
  .proof-side{grid-column:2;justify-items:start}
  .activity-main>div{display:block}
  .activity-main span{display:block;margin-top:3px}
}

/* v9 feature expansion — deliberately simple */
.demo-nav{overflow:auto;padding-bottom:10px}.demo-nav button{flex-shrink:0}
.timesheet-summary,.report-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.report-metrics{grid-template-columns:repeat(4,1fr)}
.timesheet-summary article,.report-metrics article{background:#fff;border:1px solid #e0e6eb;border-radius:12px;padding:18px;color:#0b1118}
.timesheet-summary span,.report-metrics span{display:block;font-size:10px;color:#83909b;text-transform:uppercase;font-weight:800}
.timesheet-summary b,.report-metrics b{display:block;font-size:27px;margin-top:7px}.timesheet-summary em,.report-metrics em{display:block;font-size:10px;color:#7d8994;font-style:normal;margin-top:5px}
.staff-grid,.supplier-grid,.integration-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.staff-card,.supplier-card,.integration-grid article,.automation-card,.report-card{background:#fff;border:1px solid #e0e6eb;border-radius:12px;padding:16px;color:#0b1118}
.staff-card{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center}.staff-avatar,.integration-mark{width:44px;height:44px;border-radius:10px;background:#0e1720;color:#fff;display:grid;place-items:center;font-weight:900}.staff-copy h3,.supplier-card h3,.integration-grid h3{font-size:13px;margin:0 0 4px}.staff-copy p,.supplier-card p,.integration-grid p{font-size:10px;color:#7c8994;margin:0}.staff-copy>div{display:flex;gap:14px;margin-top:8px}.staff-copy span{font-size:8px;color:#89959f}.staff-copy span b{color:#26333d}
.supplier-card dl{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;margin:14px 0 0}.supplier-card dt{font-size:8px;color:#89959f;text-transform:uppercase}.supplier-card dd{font-size:10px;font-weight:800;margin:4px 0 0}
.automation-list{display:grid;gap:9px}.automation-card{display:flex;justify-content:space-between;align-items:center;gap:15px}.automation-flow{display:grid;grid-template-columns:auto minmax(180px,1fr) auto auto minmax(220px,1.3fr);gap:10px;align-items:center}.automation-flow span{font-size:8px;color:#1598c8;font-weight:900}.automation-flow b{font-size:11px}.automation-flow i{font-style:normal;color:#8b98a2}.switch{width:44px;height:24px;border:0;border-radius:99px;background:#cbd3d9;padding:3px}.switch i{display:block;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}.switch.on{background:#18aee6}.switch.on i{transform:translateX(20px)}
.report-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.report-card h3{font-size:13px;margin:0 0 18px}.bar-chart{height:180px;display:flex;align-items:end;gap:12px;border-bottom:1px solid #dce3e8;padding:0 12px}.bar-chart i{flex:1;height:var(--h);background:#16afe9;border-radius:6px 6px 0 0}.chart-labels{display:flex;justify-content:space-around;font-size:8px;color:#83909b;padding-top:7px}.profit-list{display:grid;gap:10px}.profit-list div{display:flex;justify-content:space-between;border-bottom:1px solid #edf1f4;padding:9px 0;font-size:11px}
.integration-grid{grid-template-columns:repeat(3,1fr)}.integration-grid article{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center}
.customer-row{cursor:pointer}.customer-row:hover{background:#f7fafb}.tiny-action{border:1px solid #dce3e8;background:#fff;border-radius:6px;padding:5px 7px;font-size:9px}
.profile-contact{display:flex;justify-content:space-between;align-items:center;background:#f7f9fb;border-radius:9px;padding:12px;margin-bottom:10px}.profile-contact span,.profile-contact b,.profile-contact small{display:block}.profile-contact span{font-size:8px;color:#84919b}.profile-contact b{font-size:12px;margin:4px 0}.profile-contact small{font-size:9px;color:#75828d}.profile-tabs,.job-tabs{display:flex;gap:5px;overflow:auto;margin-bottom:10px}.profile-tabs button,.job-tabs button{border:1px solid #dfe5e9;background:#fff;border-radius:7px;padding:7px 9px;font-size:9px;white-space:nowrap}.profile-tabs button.active,.job-tabs button.active{background:#0d151c;color:#fff}
.costing-box{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:10px}.costing-box>div{background:#f7f9fb;border-radius:8px;padding:9px}.costing-box span,.costing-box b,.costing-box small{display:block}.costing-box span{font-size:7px;color:#84919b;text-transform:uppercase}.costing-box b{font-size:11px;margin-top:4px}.costing-box .profit{background:#eaf8ef}.costing-box small{font-size:7px;color:#39805a;margin-top:2px}.job-check-demo{display:grid;gap:7px;margin-top:10px;border:1px solid #e0e6eb;border-radius:8px;padding:10px;font-size:9px}.job-check-demo>b{margin-bottom:3px}.job-actions-demo{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
:root[data-demo-theme="dark"] .timesheet-summary article,:root[data-demo-theme="dark"] .report-metrics article,:root[data-demo-theme="dark"] .staff-card,:root[data-demo-theme="dark"] .supplier-card,:root[data-demo-theme="dark"] .integration-grid article,:root[data-demo-theme="dark"] .automation-card,:root[data-demo-theme="dark"] .report-card{background:#141d25;color:#eef3f6;border-color:#28343e}:root[data-demo-theme="dark"] .staff-copy span b,:root[data-demo-theme="dark"] .automation-flow b,:root[data-demo-theme="dark"] .supplier-card dd,:root[data-demo-theme="dark"] .report-card b{color:#eef3f6}:root[data-demo-theme="dark"] .profile-contact,:root[data-demo-theme="dark"] .costing-box>div{background:#10171e}:root[data-demo-theme="dark"] .profile-tabs button,:root[data-demo-theme="dark"] .job-tabs button,:root[data-demo-theme="dark"] .tiny-action{background:#10171e;color:#eef3f6;border-color:#33414c}:root[data-demo-theme="dark"] .customer-row:hover{background:#18232c}:root[data-demo-theme="dark"] .costing-box .profit{background:#153522}
@media(max-width:700px){.timesheet-summary,.report-metrics{grid-template-columns:1fr 1fr}.staff-grid,.supplier-grid,.integration-grid,.report-grid{grid-template-columns:1fr}.staff-card{grid-template-columns:45px 1fr}.staff-card>.status{grid-column:2}.supplier-card dl{grid-template-columns:1fr 1fr}.automation-flow{grid-template-columns:1fr}.automation-flow i{display:none}.automation-card{align-items:flex-start}.costing-box{grid-template-columns:1fr 1fr}.costing-box .profit{grid-column:1/-1}.integration-grid article{grid-template-columns:45px 1fr}.integration-grid article>.status{grid-column:2}}

/* v10 final sales-demo polish */
.demo-story{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#0e1720;color:#fff;border-radius:14px;padding:17px 19px;margin-bottom:14px;box-shadow:0 10px 28px rgba(13,22,30,.08)}
.demo-story span{font-size:8px;color:#25b9ef;font-weight:900;letter-spacing:.12em}.demo-story b{display:block;font-size:14px;margin:4px 0}.demo-story p{font-size:10px;color:#aebbc5;margin:0}.demo-story .secondary{background:#fff;color:#0b1118;border-color:#fff;white-space:nowrap}
.tour-button{border:1px solid #d8e0e6;background:#fff;border-radius:9px;padding:10px 13px;font-size:11px;font-weight:850;color:#18242d;cursor:pointer}
.tour-overlay{position:fixed;inset:0;background:rgba(4,10,15,.62);backdrop-filter:blur(5px);z-index:5000;display:none;align-items:center;justify-content:center;padding:18px}.tour-overlay.open{display:flex}.tour-card{position:relative;width:min(500px,100%);background:#fff;color:#0b1118;border-radius:18px;padding:28px;box-shadow:0 30px 100px rgba(0,0,0,.28)}.tour-progress{font-size:9px;font-weight:900;color:#84919b;margin-bottom:18px}.tour-close{position:absolute;right:15px;top:14px;border:0;background:#f0f3f5;width:32px;height:32px;border-radius:50%;font-size:18px}.tour-icon{width:48px;height:48px;border-radius:13px;background:#0e1720;color:#25b9ef;display:grid;place-items:center;font-size:13px;font-weight:900;margin-bottom:17px}.tour-card h2{font-size:25px;margin:7px 0 10px}.tour-card>p{font-size:12px;line-height:1.65;color:#5f6f7b}.tour-actions{display:flex;justify-content:space-between;margin-top:24px}
.demo-nav button.active{box-shadow:inset 3px 0 #20b7ee}
.job-card,.attention-list button,.customer-row,.proof-card,.task-card,.subscription-card,.staff-card,.supplier-card{transition:transform .15s ease,box-shadow .15s ease}.job-card:hover,.proof-card:hover,.task-card:hover,.subscription-card:hover,.staff-card:hover,.supplier-card:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(12,25,35,.07)}
.tiny-action{cursor:pointer;font-weight:800}.tiny-action:hover{border-color:#1aaee4;color:#087fa9}
:root[data-demo-theme="dark"] .tour-button{background:#141d25;color:#eef3f6;border-color:#33414c}:root[data-demo-theme="dark"] .tour-card{background:#141d25;color:#eef3f6}:root[data-demo-theme="dark"] .tour-card>p{color:#aab6c0}:root[data-demo-theme="dark"] .tour-close{background:#25313b;color:#fff}
@media(max-width:700px){.demo-story{display:block}.demo-story .secondary{width:100%;margin-top:13px}.tour-button{display:none}.tour-card{padding:22px}.tour-card h2{font-size:22px}}


/* v12 — Radova Intelligence */
.intelligence-nav{position:relative}.intelligence-nav span{font-size:6px;letter-spacing:.08em;background:#17b8ef;color:#071017;border-radius:999px;padding:3px 5px;margin-left:auto;font-weight:950}
.pulse-strip{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px;padding:13px 15px;margin-bottom:14px;border-radius:13px;background:linear-gradient(105deg,#0e1921,#122733);border:1px solid #214354;color:#f2f8fb;cursor:pointer}
.pulse-ring-small{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#25b9ef 82%,#24343f 0);position:relative}.pulse-ring-small:after{content:"";position:absolute;inset:5px;background:#101b23;border-radius:50%}.pulse-ring-small b,.pulse-ring-small span{position:relative;z-index:1}.pulse-ring-small b{font-size:17px}.pulse-ring-small span{font-size:6px;color:#91a5b2;margin-left:-8px;margin-top:17px}.pulse-strip-copy span{display:block;color:#25b9ef;font-size:7px;font-weight:900;letter-spacing:.14em}.pulse-strip-copy b{display:block;font-size:12px;margin:3px 0}.pulse-strip-copy small{font-size:9px;color:#9eb0bc}.pulse-strip-trend{font-size:16px;font-weight:900;color:#83e0a4}.pulse-strip-trend span{display:block;font-size:7px;color:#8ea1ad;font-weight:700}.pulse-strip>strong{font-size:18px}
.intelligence-head{align-items:center}.intel-live{display:flex;align-items:center;gap:7px;border:1px solid #29404d;background:#111c24;border-radius:999px;padding:8px 11px;font-size:8px;color:#9eb0bc;font-weight:750}.intel-live i{width:7px;height:7px;background:#64d98b;border-radius:50%;box-shadow:0 0 0 4px rgba(100,217,139,.08)}
.intel-hero-grid,.intel-two-col{display:grid;grid-template-columns:1.25fr .75fr;gap:12px;margin-bottom:12px}.intel-two-col{grid-template-columns:1fr 1fr}
.intel-card{background:#141d25;border:1px solid #283741;border-radius:14px;padding:19px;color:#eef3f6}.intel-card-label{font-size:7px;font-weight:950;color:#25b9ef;letter-spacing:.15em;margin-bottom:8px}.intel-card h2{font-size:17px;line-height:1.18;margin:0 0 7px}.intel-card p{color:#9eafba;font-size:10px;line-height:1.55}.pulse-main{display:flex;align-items:center;gap:20px;margin-top:13px}.pulse-ring{width:124px;height:124px;min-width:124px;border-radius:50%;background:conic-gradient(#22b8ef 82%,#26343e 0);display:grid;place-items:center;position:relative}.pulse-ring:after{content:"";position:absolute;inset:10px;border-radius:50%;background:#141d25}.pulse-ring>div{z-index:1;text-align:center}.pulse-ring b{font-size:40px;line-height:1}.pulse-ring span{display:block;font-size:8px;color:#81949f}.pulse-copy h2{font-size:20px}.pulse-copy p{max-width:420px}.pulse-change{color:#76dc9b;font-size:9px;font-weight:850}.pulse-change span{color:#7e909b;font-weight:650}
.pulse-factors{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:18px}.pulse-factors div{background:#101820;border:1px solid #24333d;border-radius:9px;padding:10px}.pulse-factors span{font-size:7px;color:#83949f;text-transform:uppercase;font-weight:800}.pulse-factors b{float:right;font-size:10px}.pulse-factors i{display:block;clear:both;height:4px;border-radius:9px;background:linear-gradient(90deg,#25b9ef var(--score),#293842 var(--score));margin-top:8px}
.twin-summary{display:flex;flex-direction:column}.twin-summary>p{max-width:470px}.twin-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0 14px}.twin-stat-grid div{background:#101820;border:1px solid #263640;border-radius:9px;padding:10px}.twin-stat-grid span{display:block;font-size:7px;color:#7f929e;text-transform:uppercase;font-weight:800}.twin-stat-grid b{font-size:17px;display:block;margin-top:4px}.twin-summary .intel-jump{margin-top:auto}
.twin-detail,.replay-card{margin-bottom:12px}.intel-section-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.intel-section-head h2{margin-bottom:0}.confidence,.risk-pill,.learned-pill{font-size:7px;color:#8fa2ad;border:1px solid #31414c;border-radius:999px;padding:7px 9px;white-space:nowrap}.risk-pill{color:#ff9a99;border-color:#653b3d;background:#2a1a1d}.learned-pill{color:#7bdca0;border-color:#315a41;background:#16251c}
.twin-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;gap:7px;align-items:center;margin:18px 0}.twin-flow>i{font-style:normal;color:#566975}.twin-step{background:#101820;border:1px solid #293943;border-radius:10px;padding:12px}.twin-step span,.twin-step small{display:block;font-size:7px;color:#8396a2}.twin-step b{display:block;font-size:18px;margin:4px 0}.twin-step.good{border-top:2px solid #5fd889}.twin-step.warning{border-top:2px solid #f0b94f}.twin-step.danger{border-top:2px solid #f26d70}
.twin-findings{display:grid;gap:7px}.finding{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;background:#101820;border:1px solid #253540;border-radius:10px;padding:11px}.finding-icon{font-style:normal;width:30px;height:30px;border-radius:8px;background:#192832;display:grid;place-items:center;font-size:7px;color:#25b9ef;font-weight:900}.finding b{font-size:10px}.finding p{font-size:8px;margin:3px 0 0}.finding button{min-width:88px}
.intel-intro{margin-top:0}.leak-list{display:grid;gap:7px;margin-top:12px}.leak-row{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:10px;text-align:left;align-items:center;border:1px solid #2b3943;background:#101820;color:#eef3f6;border-radius:10px;padding:10px;cursor:pointer}.leak-score{font-size:6px;font-weight:950;border-radius:6px;padding:5px}.leak-score.high{background:#3b2023;color:#ff8e91}.leak-score.medium{background:#332a18;color:#f5c568}.leak-row b{font-size:9px}.leak-row span,.leak-row small{display:block;color:#82949f;font-size:7px;margin-top:2px}.leak-row strong{font-size:11px;color:#ff898c}.leak-learning{margin-top:11px;background:#172832;border:1px solid #285063;border-radius:10px;padding:11px}.leak-learning>span{font-size:6px;font-weight:900;color:#25b9ef;letter-spacing:.12em}.leak-learning p{margin:4px 0 9px;color:#bed0da}.leak-learning p b{color:#fff}
.autopilot-list{display:grid;gap:7px;margin-top:12px}.autopilot-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:#101820;border:1px solid #293842;border-radius:10px;padding:11px}.repeat-count{font-size:8px;font-weight:900;background:#172a35;color:#25b9ef;border-radius:999px;padding:5px 7px}.autopilot-row b{font-size:9px}.autopilot-row p{font-size:7px;margin:3px 0}.autopilot-row button{min-width:92px}.applied{background:#183524!important;color:#87e5a9!important;border-color:#315c40!important}
.replay-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:15px 0}.replay-summary div{background:#101820;border:1px solid #293943;border-radius:9px;padding:10px}.replay-summary span{display:block;color:#80939f;font-size:7px;text-transform:uppercase;font-weight:800}.replay-summary b{display:block;font-size:16px;margin-top:4px}.replay-summary .waiting b{color:#f5bd59}
.replay-stage{display:grid;grid-template-columns:110px 44px 1fr;gap:13px;align-items:center;background:#0d161d;border:1px solid #2a3a44;border-radius:12px;padding:15px}.replay-time{font-size:8px;color:#7f939f;font-weight:850}.replay-event-icon{width:42px;height:42px;border-radius:12px;background:#172a35;color:#25b9ef;display:grid;place-items:center;font-weight:900}.replay-event-copy span{font-size:6px;color:#25b9ef;font-weight:950;letter-spacing:.12em}.replay-event-copy h3{font-size:14px;margin:3px 0}.replay-event-copy p{font-size:8px;margin:0}.replay-slider{width:100%;accent-color:#25b9ef;margin:15px 0 8px}.replay-track{display:grid;grid-template-columns:repeat(8,1fr);position:relative}.replay-track:before{content:"";position:absolute;left:4%;right:4%;top:7px;height:2px;background:#2d3d47}.replay-track button{position:relative;z-index:1;border:0;background:none;color:#748691;font-size:7px;display:grid;place-items:center;gap:5px;cursor:pointer}.replay-track i{width:14px;height:14px;border-radius:50%;border:2px solid #42535e;background:#141d25}.replay-track button.active i{background:#25b9ef;border-color:#25b9ef}.replay-track button.active{color:#d5e3ea}.replay-insight{margin-top:13px;background:#152732;border-left:3px solid #25b9ef;padding:10px 12px;border-radius:7px;font-size:8px;color:#9eb3bf}.replay-insight b{color:#fff}
:root:not([data-demo-theme="dark"]) .intel-card{background:#fff;color:#0b1118;border-color:#dfe6eb}:root:not([data-demo-theme="dark"]) .intel-card p{color:#62727e}:root:not([data-demo-theme="dark"]) .pulse-ring:after{background:#fff}:root:not([data-demo-theme="dark"]) .twin-stat-grid div,:root:not([data-demo-theme="dark"]) .pulse-factors div,:root:not([data-demo-theme="dark"]) .twin-step,:root:not([data-demo-theme="dark"]) .finding,:root:not([data-demo-theme="dark"]) .leak-row,:root:not([data-demo-theme="dark"]) .leak-learning,:root:not([data-demo-theme="dark"]) .autopilot-row,:root:not([data-demo-theme="dark"]) .replay-summary div,:root:not([data-demo-theme="dark"]) .replay-stage{background:#f7f9fa;color:#0b1118;border-color:#dfe6eb}:root:not([data-demo-theme="dark"]) .leak-row{color:#0b1118}:root:not([data-demo-theme="dark"]) .replay-track i{background:#fff}:root:not([data-demo-theme="dark"]) .replay-insight{background:#edf7fb;color:#49606d}:root:not([data-demo-theme="dark"]) .replay-insight b{color:#0b1118}
@media(max-width:900px){.intel-hero-grid,.intel-two-col{grid-template-columns:1fr}.twin-flow{grid-template-columns:1fr}.twin-flow>i{transform:rotate(90deg);text-align:center}.pulse-factors{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.pulse-strip{grid-template-columns:auto 1fr auto}.pulse-strip-trend{display:none}.pulse-strip-copy b{font-size:11px}.intel-live{display:none}.intel-card{padding:14px}.pulse-main{align-items:flex-start}.pulse-ring{width:94px;height:94px;min-width:94px}.pulse-ring b{font-size:30px}.pulse-copy h2{font-size:16px}.pulse-factors{grid-template-columns:1fr 1fr}.finding,.leak-row,.autopilot-row{grid-template-columns:auto 1fr}.finding button,.autopilot-row button{grid-column:1/-1;width:100%}.leak-row strong{grid-column:2}.replay-summary{grid-template-columns:1fr 1fr}.replay-stage{grid-template-columns:1fr auto}.replay-time{grid-column:1/-1}.replay-event-copy{min-width:0}.replay-track{overflow-x:auto;grid-template-columns:repeat(8,72px);padding-bottom:5px}.intel-section-head{display:block}.intel-section-head>.confidence,.intel-section-head>.risk-pill,.intel-section-head>.learned-pill{display:inline-block;margin-top:8px}}


/* v13 — grouped navigation + readability/mobile polish */

.demo-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.demo-nav > button,
.nav-group-toggle,
.nav-submenu button{
  width:100%;
  min-height:40px;
  text-align:left;
  border:0;
  border-radius:9px;
  padding:10px 11px;
  font-size:11px;
  line-height:1.2;
}
.nav-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-group{
  display:grid;
  gap:4px;
}
.nav-group-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:transparent;
  color:inherit;
  cursor:pointer;
  font-weight:850;
}
.nav-group-toggle i{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:rgba(255,255,255,.05);
  font-style:normal;
  font-size:14px;
  transition:transform .18s ease;
}
.nav-group.open .nav-group-toggle i{
  transform:rotate(45deg);
}
.nav-submenu{
  display:none;
  gap:3px;
  padding:0 0 2px 8px;
}
.nav-group.open .nav-submenu{
  display:grid;
}
.nav-submenu button{
  min-height:36px;
  padding:9px 10px;
  font-size:10px;
  color:#9fb0bb;
  background:transparent;
}
.nav-submenu button:hover,
.nav-submenu button.active{
  color:#fff;
  background:#17242d;
}
.nav-main.active{
  background:#17242d;
  color:#fff;
  box-shadow:inset 3px 0 #20b7ee;
}

.pulse-ring-small{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
.pulse-ring-small:after{
  z-index:0;
}
.pulse-ring-small b,
.pulse-ring-small span{
  position:relative;
  z-index:1;
  margin:0 !important;
}
.pulse-ring-small b{
  font-size:16px !important;
  line-height:1 !important;
}
.pulse-ring-small span{
  font-size:6px !important;
  line-height:1 !important;
  align-self:flex-end;
  margin:0 0 12px -3px !important;
}

.demo-main,
.demo-view,
.intel-card,
.metric-card,
.table-card,
.production-card,
.staff-card,
.supplier-card,
.subscription-card,
.task-card,
.proof-card,
.job-card{
  min-width:0;
}
.demo-view h1{
  font-size:clamp(22px,2.3vw,32px);
  line-height:1.1;
}
.demo-view h2{
  line-height:1.2;
}
.demo-view p,
.demo-view td,
.demo-view th,
.demo-view label,
.demo-view button{
  text-rendering:optimizeLegibility;
}
.demo-view p{
  max-width:70ch;
}
.metric-card b,
.metric-card strong{
  line-height:1.05;
}
.pulse-strip-copy b{
  line-height:1.25;
}
.pulse-strip-copy small{
  line-height:1.35;
}
.intel-card p,
.twin-step span,
.twin-step small,
.finding p,
.leak-row span,
.leak-row small,
.autopilot-row p,
.replay-event-copy p,
.replay-insight{
  font-size:9px !important;
  line-height:1.45 !important;
}
.finding b,
.leak-row b,
.autopilot-row b{
  font-size:10px !important;
  line-height:1.35;
}

@media(max-width:900px){
  .demo-sidebar{
    width:220px;
  }
}

@media(max-width:700px){
  .demo-sidebar{
    width:min(88vw,300px);
    padding:14px;
  }

  .demo-nav{
    gap:7px;
  }
  .demo-nav > button,
  .nav-group-toggle{
    min-height:46px;
    font-size:13px;
    padding:12px 13px;
  }
  .nav-submenu{
    padding-left:8px;
  }
  .nav-submenu button{
    min-height:44px;
    font-size:12px;
    padding:11px 12px;
  }

  .demo-main{
    padding:14px !important;
  }
  .page-head{
    gap:10px;
  }
  .page-head h1{
    font-size:24px !important;
  }
  .page-head p{
    font-size:12px !important;
    line-height:1.5 !important;
  }

  .pulse-strip{
    grid-template-columns:54px 1fr auto !important;
    gap:10px !important;
    padding:12px !important;
  }
  .pulse-ring-small{
    width:54px !important;
    height:54px !important;
  }
  .pulse-ring-small b{
    font-size:17px !important;
  }
  .pulse-strip-copy span{
    font-size:8px !important;
  }
  .pulse-strip-copy b{
    font-size:12px !important;
  }
  .pulse-strip-copy small{
    font-size:9px !important;
  }

  .intel-card{
    padding:14px !important;
  }
  .intel-card h2{
    font-size:18px !important;
  }
  .intel-card p,
  .finding p,
  .leak-row span,
  .leak-row small,
  .autopilot-row p,
  .replay-event-copy p,
  .replay-insight{
    font-size:11px !important;
    line-height:1.5 !important;
  }
  .finding b,
  .leak-row b,
  .autopilot-row b{
    font-size:12px !important;
  }
  .intel-card-label,
  .pulse-factors span,
  .twin-stat-grid span,
  .replay-summary span{
    font-size:8px !important;
  }

  .pulse-main{
    gap:14px !important;
  }
  .pulse-ring{
    width:88px !important;
    height:88px !important;
    min-width:88px !important;
  }
  .pulse-ring b{
    font-size:28px !important;
  }
  .pulse-copy h2{
    font-size:17px !important;
  }

  .twin-flow{
    gap:8px !important;
  }
  .twin-step{
    padding:12px !important;
  }
  .twin-step b{
    font-size:18px !important;
  }

  .replay-stage{
    padding:13px !important;
  }
  .replay-event-copy h3{
    font-size:15px !important;
  }

  .table-wrap,
  .table-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  table{
    min-width:700px;
  }
}

/* v15 SAFE readability pass — no structural DOM edits */

/* Hide the extra "Try this" dashboard card without removing HTML */
.demo-story{display:none !important}

/* Give desktop content breathing room */
@media(min-width:701px){
  .demo-view{
    padding:40px 42px 72px !important;
    max-width:1600px !important;
  }
  .page-head{
    margin-bottom:26px !important;
  }
  .page-head h1{
    font-size:34px !important;
    line-height:1.08 !important;
  }
  .page-head p{
    font-size:15px !important;
    line-height:1.6 !important;
    color:#b8c5cd !important;
    max-width:760px !important;
  }

  /* General desktop readability */
  .panel-head h2{font-size:17px !important}
  .panel-head p{font-size:12px !important;line-height:1.45 !important}
  .metric-grid span,.inventory-summary span,.invoice-summary span{
    font-size:11px !important;
  }
  .metric-grid b,.inventory-summary b,.invoice-summary b{
    font-size:28px !important;
  }
  th{font-size:10px !important}
  td{font-size:12px !important;line-height:1.45 !important}
  .job-card h3{font-size:13px !important}
  .cust,.job-card-top,.job-card-foot{font-size:10px !important}
  .prod-card b{font-size:12px !important}
  .prod-card span{font-size:10px !important}
  .status{font-size:9px !important}
}

/* Dashboard pulse number — true visual centering */
.pulse-ring-small{
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  text-align:center !important;
}
.pulse-ring-small b{
  position:relative !important;
  z-index:2 !important;
  margin:0 !important;
  transform:translateY(-2px) !important;
  line-height:1 !important;
}
.pulse-ring-small span{
  position:absolute !important;
  z-index:2 !important;
  left:50% !important;
  bottom:9px !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  line-height:1 !important;
}

/* Radova Intelligence: make ALL body copy comfortably readable on PC */
@media(min-width:701px){
  .intel-card{
    padding:25px !important;
  }
  .intel-card h2{
    font-size:22px !important;
    line-height:1.25 !important;
    margin-bottom:11px !important;
  }
  .intel-card-label{
    font-size:10px !important;
  }
  .intel-card p,
  .intel-intro,
  .finding p,
  .leak-row span,
  .leak-row small,
  .autopilot-row p,
  .replay-event-copy p,
  .replay-insight{
    font-size:14px !important;
    line-height:1.62 !important;
    color:#bbc7ce !important;
  }
  .autopilot-card > .intel-intro{
    font-size:15px !important;
    line-height:1.65 !important;
    color:#d0d8dd !important;
    max-width:760px !important;
    margin-bottom:20px !important;
  }
  .finding b,
  .leak-row b,
  .autopilot-row b{
    font-size:14px !important;
    line-height:1.4 !important;
  }
  .finding,.leak-row,.autopilot-row{
    padding:16px !important;
    gap:15px !important;
  }
  .twin-step span,.twin-step small{
    font-size:11px !important;
    line-height:1.45 !important;
  }
  .pulse-copy p{
    font-size:14px !important;
    line-height:1.6 !important;
  }
  .confidence,.risk-pill,.learned-pill,.intel-live{
    font-size:10px !important;
  }
  .replay-time{font-size:11px !important}
  .replay-event-copy h3{font-size:18px !important}
  .replay-event-copy span{font-size:9px !important}
  .replay-track button{font-size:10px !important}
}

/* More separation to reduce the clogged feeling */
.intel-hero-grid,.intel-two-col{
  gap:20px !important;
  margin-bottom:20px !important;
}
.twin-detail,.replay-card{
  margin-bottom:20px !important;
}
.twin-findings,.autopilot-list,.leak-list{
  gap:12px !important;
}
.pulse-factors{
  gap:12px !important;
}

/* Mobile remains readable and stable */
@media(max-width:700px){
  .demo-view{padding:22px 14px 52px !important}
  .page-head h1{font-size:26px !important}
  .page-head p{font-size:13px !important;line-height:1.55 !important}
  .intel-card p,.intel-intro,.finding p,.leak-row span,.leak-row small,
  .autopilot-row p,.replay-event-copy p,.replay-insight{
    font-size:12px !important;
    line-height:1.55 !important;
  }
  .finding b,.leak-row b,.autopilot-row b{
    font-size:13px !important;
  }
}

/* v17 live demo Pulse cleanup */
.pulse-ring-small{
  position:relative !important;
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  overflow:hidden !important;
}
.pulse-ring-small:after{
  content:"" !important;
  position:absolute !important;
  inset:6px !important;
  border-radius:50% !important;
  background:#101b23 !important;
  z-index:0 !important;
}
.pulse-ring-small b{
  position:relative !important;
  z-index:2 !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  transform:translateY(-4px) !important;
  font-size:18px !important;
  line-height:1 !important;
  letter-spacing:-.04em !important;
}
.pulse-ring-small span{
  position:absolute !important;
  z-index:2 !important;
  left:50% !important;
  bottom:11px !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  padding:0 !important;
  font-size:6px !important;
  line-height:1 !important;
  letter-spacing:.02em !important;
  white-space:nowrap !important;
}
.pulse-ring{
  display:grid !important;
  place-items:center !important;
}
.pulse-ring>div{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  text-align:center !important;
  transform:none !important;
}
.pulse-ring b{
  margin:0 !important;
  line-height:.9 !important;
}
.pulse-ring span{
  margin:0 !important;
  line-height:1 !important;
}

/* v20 — complete visual redesign of the live demo shell */
body{
  background:
    radial-gradient(circle at 0% 0%,rgba(27,184,238,.12),transparent 28rem),
    #091016 !important;
}
.demo-banner{display:none!important}
.demo-app{
  width:100%;
  min-height:100vh;
  display:grid!important;
  grid-template-columns:252px minmax(0,1fr)!important;
  gap:14px!important;
  padding:14px!important;
  background:transparent!important;
}
.demo-sidebar{
  position:sticky!important;
  top:14px!important;
  height:calc(100vh - 28px)!important;
  border-radius:20px!important;
  border:1px solid #1e303a!important;
  background:
    radial-gradient(circle at 50% -5%,rgba(34,186,238,.12),transparent 16rem),
    linear-gradient(180deg,#0d171e,#0b1319)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.26)!important;
  padding:18px 13px!important;
  overflow:auto!important;
}
.demo-logo{
  display:flex!important;
  width:126px!important;
  margin:2px 8px 20px!important;
}
.demo-logo img{
  filter:brightness(0) invert(1)!important;
}
.demo-company{
  border:1px solid #20323c!important;
  background:rgba(255,255,255,.025)!important;
  border-radius:13px!important;
  padding:11px!important;
  margin-bottom:20px!important;
}
.company-mark{
  background:linear-gradient(145deg,#1eb8ed,#54d4ff)!important;
  color:#06202a!important;
}
.demo-nav{gap:6px!important}
.demo-nav > button,.nav-group-toggle{
  min-height:42px!important;
  border-radius:10px!important;
  padding:0 11px!important;
  font-size:11px!important;
}
.nav-main.active,.nav-submenu button.active{
  background:linear-gradient(90deg,#17313e,#14242e)!important;
  box-shadow:inset 3px 0 #25b9ef!important;
}
.nav-group-toggle{
  border:1px solid transparent!important;
}
.nav-group-toggle:hover{border-color:#263943!important}
.nav-submenu{
  margin:4px 0 6px!important;
  border-left:1px solid #233640!important;
}
.nav-submenu button{
  font-size:10px!important;
  min-height:36px!important;
}
.demo-sidebar-foot{
  border-top:1px solid #1e3039!important;
  margin-top:24px!important;
  padding-top:16px!important;
}
.demo-main{
  min-width:0!important;
  border-radius:20px!important;
  overflow:hidden!important;
  background:#eef3f5!important;
  box-shadow:0 22px 70px rgba(0,0,0,.18)!important;
}
.demo-topbar{
  position:sticky!important;
  top:0!important;
  z-index:80!important;
  min-height:74px!important;
  padding:0 22px!important;
  background:rgba(255,255,255,.92)!important;
  backdrop-filter:blur(15px)!important;
  border-bottom:1px solid #dbe4e8!important;
}
.demo-top-left{display:flex;align-items:center;gap:12px}
.demo-breadcrumb{display:grid;gap:4px}
.demo-breadcrumb small{
  font-size:8px!important;
  letter-spacing:.12em!important;
  color:#7f919c!important;
  font-weight:900!important;
}
.demo-breadcrumb span{
  font-size:17px!important;
  line-height:1!important;
  color:#0c151b!important;
  font-weight:900!important;
}
.top-actions input{
  min-width:240px!important;
  height:40px!important;
  border-radius:11px!important;
  background:#f4f7f8!important;
  border:1px solid #dce5e9!important;
}
.top-actions button{
  min-height:40px!important;
  border-radius:11px!important;
}
.demo-view{
  padding:30px 30px 70px!important;
  max-width:1480px!important;
  margin:0 auto!important;
}
.page-head{
  margin-bottom:24px!important;
}
.page-head h1{
  font-size:32px!important;
  letter-spacing:-.035em!important;
}
.page-head p{
  font-size:13px!important;
  line-height:1.55!important;
}
.demo-notice{
  border-radius:14px!important;
  padding:13px 15px!important;
  background:#fff!important;
  border:1px solid #dce5e9!important;
}
.pulse-strip{
  border-radius:16px!important;
  padding:16px 18px!important;
  background:
    radial-gradient(circle at 85% 0%,rgba(38,190,240,.18),transparent 12rem),
    linear-gradient(135deg,#0d1920,#132a35)!important;
  box-shadow:0 12px 30px rgba(12,31,42,.1)!important;
}
.metric-grid article,
.panel,
.table-panel,
.invoice-summary article,
.subscription-summary article,
.staff-card,
.supplier-card,
.proof-card,
.task-card{
  border-radius:15px!important;
  border:1px solid #dce5e9!important;
  box-shadow:0 7px 24px rgba(18,38,50,.04)!important;
}
.dashboard-grid{
  gap:16px!important;
}
.intel-card{
  border-radius:17px!important;
}
.demo-mobile-nav{display:none}
@media(max-width:900px){
  body{background:#eef3f5!important}
  .demo-app{
    display:block!important;
    padding:0!important;
  }
  .demo-main{
    border-radius:0!important;
    min-height:100vh!important;
    box-shadow:none!important;
    padding-bottom:72px!important;
  }
  .demo-sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    height:100vh!important;
    width:min(86vw,310px)!important;
    border-radius:0 20px 20px 0!important;
    z-index:300!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
  }
  .demo-sidebar.open{transform:translateX(0)!important}
  .demo-topbar{
    min-height:66px!important;
    padding:0 12px!important;
  }
  .demo-breadcrumb small{display:none}
  .demo-breadcrumb span{font-size:16px!important}
  .top-actions input{display:none!important}
  .demo-view{padding:18px 13px 38px!important}
  .page-head h1{font-size:26px!important}
  .demo-mobile-nav{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    position:fixed;
    left:0;right:0;bottom:0;
    height:66px;
    z-index:260;
    background:#0b141a;
    border-top:1px solid #20313b;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .demo-mobile-nav button{
    border:0;background:transparent;color:#7f929e;
    display:grid;place-items:center;align-content:center;gap:3px;
  }
  .demo-mobile-nav button span{font-size:16px}
  .demo-mobile-nav button b{font-size:8px}
  .demo-mobile-nav button.active{color:#48ccfa}
}

/* v21 — black edge-to-edge demo, readable notice, mobile polish */
html,body{
  background:#05080b !important;
}
.demo-app{
  background:#05080b !important;
  padding:0 !important;
  gap:0 !important;
  grid-template-columns:252px minmax(0,1fr) !important;
}
.demo-sidebar{
  top:0 !important;
  height:100vh !important;
  border-radius:0 !important;
  border:0 !important;
  border-right:1px solid #162229 !important;
  box-shadow:none !important;
  background:#080d11 !important;
}
.demo-main{
  background:#05080b !important;
  border-radius:0 !important;
  border:0 !important;
  box-shadow:none !important;
}
.demo-topbar{
  background:#080d11 !important;
  border-bottom:1px solid #162229 !important;
}
.demo-view{
  background:transparent !important;
}
.demo-banner{
  display:none !important;
}

/* Keep content cards dark instead of light-framed */
.demo-main .panel,
.demo-main .table-panel,
.demo-main .metric-grid article,
.demo-main .invoice-summary article,
.demo-main .subscription-summary article,
.demo-main .staff-card,
.demo-main .supplier-card,
.demo-main .proof-card,
.demo-main .task-card,
.demo-main .job-card,
.demo-main .demo-notice{
  background:#0c1318 !important;
  color:#eef4f7 !important;
  border:1px solid #1d2b34 !important;
  box-shadow:none !important;
}

/* Make the example-workspace notice properly readable */
.demo-notice{
  padding:16px 18px !important;
  border-radius:14px !important;
}
.demo-notice b,
.demo-notice strong{
  display:block !important;
  color:#ffffff !important;
  font-size:14px !important;
  line-height:1.35 !important;
  margin-bottom:5px !important;
}
.demo-notice span,
.demo-notice p{
  color:#b9c6cd !important;
  font-size:12px !important;
  line-height:1.55 !important;
}

/* Readability across dark demo */
.demo-main .page-head h1,
.demo-main h1,
.demo-main h2,
.demo-main h3,
.demo-main b,
.demo-main strong{
  color:#f4f8fa;
}
.demo-main p,
.demo-main small,
.demo-main td,
.demo-main th,
.demo-main label,
.demo-main span{
  color:#b3c0c7;
}
.demo-main th{
  color:#8fa1ac !important;
}
.demo-main td{
  color:#d6e0e5 !important;
}
.demo-main input,
.demo-main select,
.demo-main textarea{
  background:#0a1015 !important;
  color:#f3f7f9 !important;
  border-color:#23313a !important;
}
.demo-main input::placeholder,
.demo-main textarea::placeholder{
  color:#6f828e !important;
}

/* Pulse stays clean on black */
.pulse-strip{
  background:linear-gradient(135deg,#0b151c,#11242e) !important;
  border:1px solid #1c3340 !important;
}
.pulse-ring-small:after{
  background:#0b151c !important;
}

/* Functional search result banner */
.job-search-empty{
  margin:0 0 12px;
  padding:10px 12px;
  border-radius:10px;
  background:#0d1820;
  border:1px solid #20323c;
  color:#9fc0cf;
  font-size:11px;
  font-weight:800;
}
.job-search-empty.no-results{
  color:#d5a0a0;
  border-color:#4e2a2c;
  background:#1a1012;
}

/* mobile */
@media(max-width:900px){
  html,body{
    background:#05080b !important;
  }
  .demo-app{
    display:block !important;
    padding:0 !important;
  }
  .demo-main{
    min-height:100vh !important;
    padding-bottom:72px !important;
    background:#05080b !important;
  }
  .demo-sidebar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:min(86vw,310px) !important;
    height:100vh !important;
    transform:translateX(-105%) !important;
    transition:transform .22s ease !important;
    z-index:300 !important;
    border-right:1px solid #17232b !important;
    background:#080d11 !important;
  }
  .demo-sidebar.open{
    transform:translateX(0) !important;
  }
  .demo-topbar{
    min-height:66px !important;
    padding:0 12px !important;
  }
  .demo-view{
    padding:18px 13px 38px !important;
  }
  .page-head h1{
    font-size:26px !important;
  }
  .page-head p{
    font-size:13px !important;
    line-height:1.55 !important;
  }
  .demo-notice{
    padding:14px !important;
  }
  .demo-notice b,
  .demo-notice strong{
    font-size:14px !important;
  }
  .demo-notice span,
  .demo-notice p{
    font-size:12px !important;
  }
  .top-actions input{
    display:none !important;
  }
  .demo-mobile-nav{
    background:#080d11 !important;
    border-top:1px solid #18262f !important;
  }
}

/* v27 — mobile demo usability + proper light/dark themes */
:root{
  --demo-bg:#f1f4f6;
  --demo-panel:#ffffff;
  --demo-panel-2:#f7f9fa;
  --demo-line:#dbe4e8;
  --demo-text:#0c151b;
  --demo-muted:#6f818c;
  --demo-sidebar:#0b1117;
  --demo-sidebar-2:#0f171e;
  --demo-sidebar-text:#f1f5f7;
  --demo-sidebar-muted:#8fa2ad;
}

body.demo-light,
body:not(.demo-dark){
  background:var(--demo-bg) !important;
}

body.demo-light .demo-app,
body:not(.demo-dark) .demo-app{
  background:var(--demo-bg) !important;
}

body.demo-light .demo-main,
body:not(.demo-dark) .demo-main{
  background:var(--demo-bg) !important;
}

body.demo-light .demo-topbar,
body:not(.demo-dark) .demo-topbar{
  background:rgba(255,255,255,.96) !important;
  border-bottom:1px solid var(--demo-line) !important;
}

body.demo-light .demo-breadcrumb small,
body:not(.demo-dark) .demo-breadcrumb small{
  color:#758792 !important;
}
body.demo-light .demo-breadcrumb span,
body:not(.demo-dark) .demo-breadcrumb span{
  color:#0c151b !important;
}

body.demo-light .demo-main .panel,
body.demo-light .demo-main .table-panel,
body.demo-light .demo-main .metric-grid article,
body.demo-light .demo-main .invoice-summary article,
body.demo-light .demo-main .subscription-summary article,
body.demo-light .demo-main .staff-card,
body.demo-light .demo-main .supplier-card,
body.demo-light .demo-main .proof-card,
body.demo-light .demo-main .task-card,
body.demo-light .demo-main .job-card,
body.demo-light .demo-main .demo-notice,
body:not(.demo-dark) .demo-main .panel,
body:not(.demo-dark) .demo-main .table-panel,
body:not(.demo-dark) .demo-main .metric-grid article,
body:not(.demo-dark) .demo-main .invoice-summary article,
body:not(.demo-dark) .demo-main .subscription-summary article,
body:not(.demo-dark) .demo-main .staff-card,
body:not(.demo-dark) .demo-main .supplier-card,
body:not(.demo-dark) .demo-main .proof-card,
body:not(.demo-dark) .demo-main .task-card,
body:not(.demo-dark) .demo-main .job-card,
body:not(.demo-dark) .demo-main .demo-notice{
  background:#fff !important;
  color:#0c151b !important;
  border-color:#dbe4e8 !important;
}

body.demo-light .demo-main h1,
body.demo-light .demo-main h2,
body.demo-light .demo-main h3,
body.demo-light .demo-main b,
body.demo-light .demo-main strong,
body:not(.demo-dark) .demo-main h1,
body:not(.demo-dark) .demo-main h2,
body:not(.demo-dark) .demo-main h3,
body:not(.demo-dark) .demo-main b,
body:not(.demo-dark) .demo-main strong{
  color:#0c151b !important;
}

body.demo-light .demo-main p,
body.demo-light .demo-main small,
body.demo-light .demo-main span,
body.demo-light .demo-main td,
body.demo-light .demo-main th,
body.demo-light .demo-main label,
body:not(.demo-dark) .demo-main p,
body:not(.demo-dark) .demo-main small,
body:not(.demo-dark) .demo-main span,
body:not(.demo-dark) .demo-main td,
body:not(.demo-dark) .demo-main th,
body:not(.demo-dark) .demo-main label{
  color:#657781 !important;
}

body.demo-light .demo-main input,
body.demo-light .demo-main select,
body.demo-light .demo-main textarea,
body:not(.demo-dark) .demo-main input,
body:not(.demo-dark) .demo-main select,
body:not(.demo-dark) .demo-main textarea{
  background:#fff !important;
  color:#0c151b !important;
  border-color:#d7e0e5 !important;
}

/* Dark theme */
body.demo-dark,
body.demo-dark .demo-app,
body.demo-dark .demo-main{
  background:#05080b !important;
}
body.demo-dark .demo-topbar{
  background:#080d11 !important;
  border-bottom:1px solid #162229 !important;
}
body.demo-dark .demo-breadcrumb small{color:#70838e !important}
body.demo-dark .demo-breadcrumb span{color:#f2f7f9 !important}
body.demo-dark .demo-main .panel,
body.demo-dark .demo-main .table-panel,
body.demo-dark .demo-main .metric-grid article,
body.demo-dark .demo-main .invoice-summary article,
body.demo-dark .demo-main .subscription-summary article,
body.demo-dark .demo-main .staff-card,
body.demo-dark .demo-main .supplier-card,
body.demo-dark .demo-main .proof-card,
body.demo-dark .demo-main .task-card,
body.demo-dark .demo-main .job-card,
body.demo-dark .demo-main .demo-notice{
  background:#0c1318 !important;
  color:#eef4f7 !important;
  border-color:#1d2b34 !important;
}
body.demo-dark .demo-main h1,
body.demo-dark .demo-main h2,
body.demo-dark .demo-main h3,
body.demo-dark .demo-main b,
body.demo-dark .demo-main strong{color:#f4f8fa !important}
body.demo-dark .demo-main p,
body.demo-dark .demo-main small,
body.demo-dark .demo-main span,
body.demo-dark .demo-main td,
body.demo-dark .demo-main th,
body.demo-dark .demo-main label{color:#b3c0c7 !important}
body.demo-dark .demo-main input,
body.demo-dark .demo-main select,
body.demo-dark .demo-main textarea{
  background:#0a1015 !important;
  color:#f3f7f9 !important;
  border-color:#23313a !important;
}

/* Sidebar stays dark in both themes for strong contrast */
.demo-sidebar{
  background:#080d11 !important;
  color:#eef3f6 !important;
}
.demo-sidebar *{
  color:inherit;
}
.demo-sidebar .nav-main,
.demo-sidebar .nav-group-toggle,
.demo-sidebar .nav-submenu button{
  color:#9fb0ba !important;
}
.demo-sidebar .nav-main.active,
.demo-sidebar .nav-submenu button.active{
  color:#fff !important;
}

/* Mobile fixes */
.demo-sidebar-backdrop{display:none}
@media(max-width:900px){
  .demo-topbar{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  /* Move the menu/dashboard label a bit right and keep readable */
  .demo-top-left{
    gap:14px !important;
    margin-left:4px !important;
    min-width:0;
  }
  .mobile-menu{
    flex:0 0 42px !important;
    width:42px !important;
    height:42px !important;
    border-radius:10px !important;
    display:grid !important;
    place-items:center !important;
    background:#111a21 !important;
    color:#fff !important;
    border:1px solid #22313a !important;
    font-size:20px !important;
  }
  .demo-breadcrumb{
    min-width:0 !important;
    padding-left:2px !important;
  }
  .demo-breadcrumb span{
    display:block !important;
    font-size:16px !important;
    font-weight:900 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:150px !important;
  }

  /* Work/New Lead toolbar wraps instead of clipping */
  #view-workflow .page-head,
  #view-workflow .page-actions,
  #view-workflow .workflow-head,
  #view-workflow .toolbar,
  #view-workflow .top-actions{
    min-width:0 !important;
    max-width:100% !important;
  }
  #view-workflow .page-actions,
  #view-workflow .workflow-head,
  #view-workflow .toolbar{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    align-items:center !important;
  }
  #view-workflow button,
  #view-workflow .btn,
  #view-workflow .cta{
    min-height:44px !important;
    max-width:100% !important;
  }

  /* Kanban horizontal scrolling so columns never get cut in half */
  #view-workflow .kanban,
  #view-workflow .kanban-board{
    display:flex !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    gap:12px !important;
    width:100% !important;
    max-width:100% !important;
    padding:2px 2px 14px !important;
    scroll-snap-type:x proximity !important;
    -webkit-overflow-scrolling:touch !important;
  }
  #view-workflow .kanban-col,
  #view-workflow .kanban-column{
    flex:0 0 min(84vw,320px) !important;
    width:min(84vw,320px) !important;
    min-width:min(84vw,320px) !important;
    max-width:min(84vw,320px) !important;
    scroll-snap-align:start !important;
  }

  /* Job detail/drawer/modal should fit viewport and scroll */
  .job-modal,
  .job-drawer,
  .modal,
  .drawer,
  .sheet,
  .job-detail{
    max-width:100vw !important;
  }
  .job-modal .modal-card,
  .job-modal .modal-content,
  .job-drawer,
  .drawer-panel,
  .modal-card{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    max-height:calc(100vh - 24px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    margin:8px !important;
    border-radius:16px !important;
  }

  /* Side nav overlay */
  .demo-sidebar.open + .demo-sidebar-backdrop,
  .demo-sidebar-backdrop.open{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    background:rgba(0,0,0,.48) !important;
    z-index:250 !important;
  }

  /* Theme toggle visible and shifted right */
  #themeToggle,
  .theme-toggle{
    margin-left:auto !important;
    flex:0 0 42px !important;
    width:42px !important;
    height:42px !important;
    border-radius:10px !important;
  }

  /* Light mobile background really becomes light */
  body.demo-light,
  body:not(.demo-dark),
  body.demo-light .demo-main,
  body:not(.demo-dark) .demo-main{
    background:#f1f4f6 !important;
  }
  body.demo-dark,
  body.demo-dark .demo-main{
    background:#05080b !important;
  }
}

/* v28 — full theme readability pass */
body.demo-light .pulse-strip,
body:not(.demo-dark) .pulse-strip{
  background:linear-gradient(135deg,#ffffff,#eef7fa) !important;
  border:1px solid #d8e6ec !important;
  color:#0b151b !important;
}

body.demo-light .pulse-strip *,
body:not(.demo-dark) .pulse-strip *{
  color:#0b151b !important;
}

body.demo-light .pulse-strip small,
body.demo-light .pulse-strip p,
body.demo-light .pulse-strip span,
body:not(.demo-dark) .pulse-strip small,
body:not(.demo-dark) .pulse-strip p,
body:not(.demo-dark) .pulse-strip span{
  color:#5f7380 !important;
}

body.demo-light .pulse-ring-small,
body:not(.demo-dark) .pulse-ring-small{
  background:conic-gradient(#16aee4 82%,#d8e5eb 0) !important;
}

body.demo-light .pulse-ring-small:after,
body:not(.demo-dark) .pulse-ring-small:after{
  background:#ffffff !important;
}

body.demo-light .pulse-ring-small b,
body:not(.demo-dark) .pulse-ring-small b{
  color:#0b151b !important;
}

/* Intelligence cards */
body.demo-light .intel-card,
body:not(.demo-dark) .intel-card{
  background:#ffffff !important;
  border-color:#dbe5ea !important;
  color:#0d151b !important;
}
body.demo-light .intel-card h3,
body.demo-light .intel-card h4,
body.demo-light .intel-card b,
body.demo-light .intel-card strong,
body:not(.demo-dark) .intel-card h3,
body:not(.demo-dark) .intel-card h4,
body:not(.demo-dark) .intel-card b,
body:not(.demo-dark) .intel-card strong{
  color:#0d151b !important;
}
body.demo-light .intel-card p,
body.demo-light .intel-card span,
body.demo-light .intel-card small,
body:not(.demo-dark) .intel-card p,
body:not(.demo-dark) .intel-card span,
body:not(.demo-dark) .intel-card small{
  color:#647782 !important;
}

/* Dark mode counterpart */
body.demo-dark .pulse-strip{
  background:linear-gradient(135deg,#0b151c,#11242e) !important;
  border:1px solid #1c3340 !important;
}
body.demo-dark .pulse-strip h1,
body.demo-dark .pulse-strip h2,
body.demo-dark .pulse-strip h3,
body.demo-dark .pulse-strip b,
body.demo-dark .pulse-strip strong{
  color:#f4f8fa !important;
}
body.demo-dark .pulse-strip p,
body.demo-dark .pulse-strip span,
body.demo-dark .pulse-strip small{
  color:#aebec7 !important;
}
body.demo-dark .pulse-ring-small{
  background:conic-gradient(#25b9ef 82%,#24353f 0) !important;
}
body.demo-dark .pulse-ring-small:after{
  background:#0b151c !important;
}
body.demo-dark .pulse-ring-small b{
  color:#ffffff !important;
}

/* Buttons / chips / badges in both modes */
body.demo-light .status-chip,
body:not(.demo-dark) .status-chip{
  color:#1c7b4b !important;
}
body.demo-light .attention-chip,
body:not(.demo-dark) .attention-chip{
  color:#8b5b13 !important;
}
body.demo-light .demo-main button,
body:not(.demo-dark) .demo-main button{
  color:#17242c;
}
body.demo-dark .demo-main button{
  color:#eaf1f5;
}

/* Ensure no inherited low-contrast text remains */
body.demo-light .demo-main [class*="muted"],
body:not(.demo-dark) .demo-main [class*="muted"]{
  color:#697c87 !important;
}
body.demo-dark .demo-main [class*="muted"]{
  color:#9fb0ba !important;
}

/* Sidebar/footer labels remain readable */
body.demo-light .demo-sidebar-foot,
body:not(.demo-dark) .demo-sidebar-foot,
body.demo-dark .demo-sidebar-foot{
  color:#9eafb9 !important;
}
body.demo-light .demo-sidebar-foot *,
body:not(.demo-dark) .demo-sidebar-foot *,
body.demo-dark .demo-sidebar-foot *{
  color:inherit !important;
}

/* v30 — exhaustive light/dark text contrast fix
   Goal: every interactive label, badge, button, card and helper text remains readable. */

/* ---------- LIGHT MODE ---------- */
body.demo-light,
body:not(.demo-dark){
  --ui-bg:#f2f5f7;
  --ui-panel:#ffffff;
  --ui-panel-soft:#f7f9fa;
  --ui-line:#d8e2e7;
  --ui-text:#0b151b;
  --ui-text-2:#31444f;
  --ui-muted:#647782;
  --ui-muted-2:#7e909b;
  --ui-cyan:#0e8fbd;
  --ui-primary:#0d171f;
  --ui-primary-text:#ffffff;
}

/* Main text */
body.demo-light .demo-main,
body:not(.demo-dark) .demo-main{
  color:var(--ui-text) !important;
}

body.demo-light .demo-main h1,
body.demo-light .demo-main h2,
body.demo-light .demo-main h3,
body.demo-light .demo-main h4,
body.demo-light .demo-main h5,
body.demo-light .demo-main h6,
body.demo-light .demo-main strong,
body.demo-light .demo-main b,
body:not(.demo-dark) .demo-main h1,
body:not(.demo-dark) .demo-main h2,
body:not(.demo-dark) .demo-main h3,
body:not(.demo-dark) .demo-main h4,
body:not(.demo-dark) .demo-main h5,
body:not(.demo-dark) .demo-main h6,
body:not(.demo-dark) .demo-main strong,
body:not(.demo-dark) .demo-main b{
  color:var(--ui-text) !important;
}

body.demo-light .demo-main p,
body.demo-light .demo-main span,
body.demo-light .demo-main small,
body.demo-light .demo-main label,
body.demo-light .demo-main td,
body.demo-light .demo-main th,
body.demo-light .demo-main li,
body:not(.demo-dark) .demo-main p,
body:not(.demo-dark) .demo-main span,
body:not(.demo-dark) .demo-main small,
body:not(.demo-dark) .demo-main label,
body:not(.demo-dark) .demo-main td,
body:not(.demo-dark) .demo-main th,
body:not(.demo-dark) .demo-main li{
  color:var(--ui-text-2) !important;
}

/* Cards / panels */
body.demo-light .demo-main .panel,
body.demo-light .demo-main .table-panel,
body.demo-light .demo-main .metric-grid article,
body.demo-light .demo-main .job-card,
body.demo-light .demo-main .intel-card,
body.demo-light .demo-main .task-card,
body.demo-light .demo-main .proof-card,
body.demo-light .demo-main .staff-card,
body.demo-light .demo-main .supplier-card,
body.demo-light .demo-main .invoice-summary article,
body.demo-light .demo-main .subscription-summary article,
body:not(.demo-dark) .demo-main .panel,
body:not(.demo-dark) .demo-main .table-panel,
body:not(.demo-dark) .demo-main .metric-grid article,
body:not(.demo-dark) .demo-main .job-card,
body:not(.demo-dark) .demo-main .intel-card,
body:not(.demo-dark) .demo-main .task-card,
body:not(.demo-dark) .demo-main .proof-card,
body:not(.demo-dark) .demo-main .staff-card,
body:not(.demo-dark) .demo-main .supplier-card,
body:not(.demo-dark) .demo-main .invoice-summary article,
body:not(.demo-dark) .demo-main .subscription-summary article{
  background:var(--ui-panel) !important;
  color:var(--ui-text) !important;
  border-color:var(--ui-line) !important;
}

/* All standard buttons */
body.demo-light .demo-main button,
body.demo-light .demo-main .btn,
body.demo-light .demo-main .button,
body.demo-light .demo-main [role="button"],
body:not(.demo-dark) .demo-main button,
body:not(.demo-dark) .demo-main .btn,
body:not(.demo-dark) .demo-main .button,
body:not(.demo-dark) .demo-main [role="button"]{
  color:#172832 !important;
}

/* Primary / filled action buttons — New Lead, Apply Fix, etc. */
body.demo-light .demo-main .primary,
body.demo-light .demo-main .btn-primary,
body.demo-light .demo-main .primary-btn,
body.demo-light .demo-main .new-lead,
body.demo-light .demo-main .new-lead-btn,
body.demo-light .demo-main .apply-fix,
body.demo-light .demo-main .apply-fix-btn,
body.demo-light .demo-main button[class*="primary"],
body.demo-light .demo-main button[class*="apply"],
body.demo-light .demo-main button[class*="lead"],
body:not(.demo-dark) .demo-main .primary,
body:not(.demo-dark) .demo-main .btn-primary,
body:not(.demo-dark) .demo-main .primary-btn,
body:not(.demo-dark) .demo-main .new-lead,
body:not(.demo-dark) .demo-main .new-lead-btn,
body:not(.demo-dark) .demo-main .apply-fix,
body:not(.demo-dark) .demo-main .apply-fix-btn,
body:not(.demo-dark) .demo-main button[class*="primary"],
body:not(.demo-dark) .demo-main button[class*="apply"],
body:not(.demo-dark) .demo-main button[class*="lead"]{
  background:#0d171f !important;
  color:#ffffff !important;
  border-color:#0d171f !important;
}

/* Ensure nested spans/icons inside filled buttons inherit readable text */
body.demo-light .demo-main .primary *,
body.demo-light .demo-main .btn-primary *,
body.demo-light .demo-main .primary-btn *,
body.demo-light .demo-main .new-lead *,
body.demo-light .demo-main .new-lead-btn *,
body.demo-light .demo-main .apply-fix *,
body.demo-light .demo-main .apply-fix-btn *,
body.demo-light .demo-main button[class*="primary"] *,
body.demo-light .demo-main button[class*="apply"] *,
body.demo-light .demo-main button[class*="lead"] *,
body:not(.demo-dark) .demo-main .primary *,
body:not(.demo-dark) .demo-main .btn-primary *,
body:not(.demo-dark) .demo-main .primary-btn *,
body:not(.demo-dark) .demo-main .new-lead *,
body:not(.demo-dark) .demo-main .new-lead-btn *,
body:not(.demo-dark) .demo-main .apply-fix *,
body:not(.demo-dark) .demo-main .apply-fix-btn *,
body:not(.demo-dark) .demo-main button[class*="primary"] *,
body:not(.demo-dark) .demo-main button[class*="apply"] *,
body:not(.demo-dark) .demo-main button[class*="lead"] *{
  color:#ffffff !important;
}

/* Accent/cyan buttons */
body.demo-light .demo-main .cyan,
body.demo-light .demo-main .accent-btn,
body:not(.demo-dark) .demo-main .cyan,
body:not(.demo-dark) .demo-main .accent-btn{
  background:#19afe3 !important;
  color:#06202a !important;
  border-color:#19afe3 !important;
}
body.demo-light .demo-main .cyan *,
body.demo-light .demo-main .accent-btn *,
body:not(.demo-dark) .demo-main .cyan *,
body:not(.demo-dark) .demo-main .accent-btn *{
  color:#06202a !important;
}

/* Ghost / secondary buttons */
body.demo-light .demo-main .ghost,
body.demo-light .demo-main .secondary,
body.demo-light .demo-main .btn-secondary,
body:not(.demo-dark) .demo-main .ghost,
body:not(.demo-dark) .demo-main .secondary,
body:not(.demo-dark) .demo-main .btn-secondary{
  background:#ffffff !important;
  color:#172832 !important;
  border-color:#cfdbe1 !important;
}
body.demo-light .demo-main .ghost *,
body.demo-light .demo-main .secondary *,
body.demo-light .demo-main .btn-secondary *,
body:not(.demo-dark) .demo-main .ghost *,
body:not(.demo-dark) .demo-main .secondary *,
body:not(.demo-dark) .demo-main .btn-secondary *{
  color:#172832 !important;
}

/* Inputs */
body.demo-light .demo-main input,
body.demo-light .demo-main textarea,
body.demo-light .demo-main select,
body:not(.demo-dark) .demo-main input,
body:not(.demo-dark) .demo-main textarea,
body:not(.demo-dark) .demo-main select{
  background:#ffffff !important;
  color:#0b151b !important;
  border-color:#d2dde3 !important;
}
body.demo-light .demo-main input::placeholder,
body.demo-light .demo-main textarea::placeholder,
body:not(.demo-dark) .demo-main input::placeholder,
body:not(.demo-dark) .demo-main textarea::placeholder{
  color:#7a8d98 !important;
  opacity:1 !important;
}

/* Chips / tags / pills */
body.demo-light .demo-main .chip,
body.demo-light .demo-main .badge,
body.demo-light .demo-main .pill,
body.demo-light .demo-main [class*="chip"],
body.demo-light .demo-main [class*="badge"],
body.demo-light .demo-main [class*="pill"],
body:not(.demo-dark) .demo-main .chip,
body:not(.demo-dark) .demo-main .badge,
body:not(.demo-dark) .demo-main .pill,
body:not(.demo-dark) .demo-main [class*="chip"],
body:not(.demo-dark) .demo-main [class*="badge"],
body:not(.demo-dark) .demo-main [class*="pill"]{
  color:#27404c !important;
}

/* Explicit semantic colours */
body.demo-light .demo-main [class*="success"],
body:not(.demo-dark) .demo-main [class*="success"]{
  color:#176b42 !important;
}
body.demo-light .demo-main [class*="warning"],
body.demo-light .demo-main [class*="attention"],
body:not(.demo-dark) .demo-main [class*="warning"],
body:not(.demo-dark) .demo-main [class*="attention"]{
  color:#8a5b13 !important;
}
body.demo-light .demo-main [class*="danger"],
body.demo-light .demo-main [class*="overdue"],
body:not(.demo-dark) .demo-main [class*="danger"],
body:not(.demo-dark) .demo-main [class*="overdue"]{
  color:#9b2d35 !important;
}

/* Radova Pulse / Intelligence */
body.demo-light .pulse-strip,
body:not(.demo-dark) .pulse-strip{
  background:linear-gradient(135deg,#ffffff,#edf7fa) !important;
  border-color:#d5e6ec !important;
}
body.demo-light .pulse-strip h1,
body.demo-light .pulse-strip h2,
body.demo-light .pulse-strip h3,
body.demo-light .pulse-strip h4,
body.demo-light .pulse-strip b,
body.demo-light .pulse-strip strong,
body:not(.demo-dark) .pulse-strip h1,
body:not(.demo-dark) .pulse-strip h2,
body:not(.demo-dark) .pulse-strip h3,
body:not(.demo-dark) .pulse-strip h4,
body:not(.demo-dark) .pulse-strip b,
body:not(.demo-dark) .pulse-strip strong{
  color:#0b151b !important;
}
body.demo-light .pulse-strip p,
body.demo-light .pulse-strip span,
body.demo-light .pulse-strip small,
body:not(.demo-dark) .pulse-strip p,
body:not(.demo-dark) .pulse-strip span,
body:not(.demo-dark) .pulse-strip small{
  color:#526875 !important;
}
body.demo-light .pulse-strip button,
body:not(.demo-dark) .pulse-strip button{
  background:#0d171f !important;
  color:#fff !important;
  border-color:#0d171f !important;
}
body.demo-light .pulse-strip button *,
body:not(.demo-dark) .pulse-strip button *{
  color:#fff !important;
}

/* Tables */
body.demo-light .demo-main thead th,
body:not(.demo-dark) .demo-main thead th{
  color:#5b6f7a !important;
  background:#f6f9fa !important;
}
body.demo-light .demo-main tbody td,
body:not(.demo-dark) .demo-main tbody td{
  color:#223740 !important;
}

/* ---------- DARK MODE ---------- */
body.demo-dark{
  --ui-dark-bg:#05080b;
  --ui-dark-panel:#0c1318;
  --ui-dark-panel-2:#111a21;
  --ui-dark-line:#1f2d36;
  --ui-dark-text:#f3f7f9;
  --ui-dark-text-2:#d2dde2;
  --ui-dark-muted:#9eafb8;
}

/* Main text */
body.demo-dark .demo-main{
  color:var(--ui-dark-text) !important;
}
body.demo-dark .demo-main h1,
body.demo-dark .demo-main h2,
body.demo-dark .demo-main h3,
body.demo-dark .demo-main h4,
body.demo-dark .demo-main h5,
body.demo-dark .demo-main h6,
body.demo-dark .demo-main b,
body.demo-dark .demo-main strong{
  color:var(--ui-dark-text) !important;
}
body.demo-dark .demo-main p,
body.demo-dark .demo-main span,
body.demo-dark .demo-main small,
body.demo-dark .demo-main label,
body.demo-dark .demo-main td,
body.demo-dark .demo-main th,
body.demo-dark .demo-main li{
  color:var(--ui-dark-text-2) !important;
}

/* Primary buttons */
body.demo-dark .demo-main .primary,
body.demo-dark .demo-main .btn-primary,
body.demo-dark .demo-main .primary-btn,
body.demo-dark .demo-main .new-lead,
body.demo-dark .demo-main .new-lead-btn,
body.demo-dark .demo-main .apply-fix,
body.demo-dark .demo-main .apply-fix-btn,
body.demo-dark .demo-main button[class*="primary"],
body.demo-dark .demo-main button[class*="apply"],
body.demo-dark .demo-main button[class*="lead"]{
  background:#20b7eb !important;
  color:#06202a !important;
  border-color:#20b7eb !important;
}
body.demo-dark .demo-main .primary *,
body.demo-dark .demo-main .btn-primary *,
body.demo-dark .demo-main .primary-btn *,
body.demo-dark .demo-main .new-lead *,
body.demo-dark .demo-main .new-lead-btn *,
body.demo-dark .demo-main .apply-fix *,
body.demo-dark .demo-main .apply-fix-btn *,
body.demo-dark .demo-main button[class*="primary"] *,
body.demo-dark .demo-main button[class*="apply"] *,
body.demo-dark .demo-main button[class*="lead"] *{
  color:#06202a !important;
}

/* Secondary buttons */
body.demo-dark .demo-main .ghost,
body.demo-dark .demo-main .secondary,
body.demo-dark .demo-main .btn-secondary{
  background:#111a21 !important;
  color:#eef4f7 !important;
  border-color:#2a3943 !important;
}
body.demo-dark .demo-main .ghost *,
body.demo-dark .demo-main .secondary *,
body.demo-dark .demo-main .btn-secondary *{
  color:#eef4f7 !important;
}

/* Inputs */
body.demo-dark .demo-main input,
body.demo-dark .demo-main textarea,
body.demo-dark .demo-main select{
  background:#0a1015 !important;
  color:#f3f7f9 !important;
  border-color:#263640 !important;
}
body.demo-dark .demo-main input::placeholder,
body.demo-dark .demo-main textarea::placeholder{
  color:#8296a1 !important;
  opacity:1 !important;
}

/* Dark pulse */
body.demo-dark .pulse-strip{
  background:linear-gradient(135deg,#0b151c,#11242e) !important;
  border-color:#1c3340 !important;
}
body.demo-dark .pulse-strip h1,
body.demo-dark .pulse-strip h2,
body.demo-dark .pulse-strip h3,
body.demo-dark .pulse-strip h4,
body.demo-dark .pulse-strip b,
body.demo-dark .pulse-strip strong{
  color:#ffffff !important;
}
body.demo-dark .pulse-strip p,
body.demo-dark .pulse-strip span,
body.demo-dark .pulse-strip small{
  color:#b5c5cd !important;
}
body.demo-dark .pulse-strip button{
  background:#20b7eb !important;
  color:#06202a !important;
  border-color:#20b7eb !important;
}
body.demo-dark .pulse-strip button *{
  color:#06202a !important;
}

/* Force any low-opacity text back to readable */
body.demo-light .demo-main [style*="opacity"],
body:not(.demo-dark) .demo-main [style*="opacity"]{
  opacity:1 !important;
}
body.demo-dark .demo-main [style*="opacity"]{
  opacity:1 !important;
}

/* Mobile menu/header text */
@media(max-width:900px){
  body.demo-light .demo-breadcrumb span,
  body:not(.demo-dark) .demo-breadcrumb span{
    color:#0b151b !important;
  }
  body.demo-dark .demo-breadcrumb span{
    color:#ffffff !important;
  }
}

/* v38 — mobile theme contrast hardening */
@media(max-width:900px){
  /* Hamburger must stay visible in both themes */
  body.demo-light .mobile-menu,
  body:not(.demo-dark) .mobile-menu{
    background:#ffffff !important;
    color:#0b151b !important;
    border:1px solid #cfd8de !important;
    box-shadow:0 1px 3px rgba(11,21,27,.08) !important;
  }
  body.demo-dark .mobile-menu{
    background:#111a21 !important;
    color:#ffffff !important;
    border:1px solid #2a3943 !important;
    box-shadow:none !important;
  }

  /* Top bar + breadcrumb */
  body.demo-light .demo-topbar,
  body:not(.demo-dark) .demo-topbar{
    background:#ffffff !important;
    color:#0b151b !important;
    border-bottom-color:#dfe6ea !important;
  }
  body.demo-dark .demo-topbar{
    background:#0d141a !important;
    color:#f5f8fa !important;
    border-bottom-color:#26343d !important;
  }
  body.demo-light .demo-breadcrumb small,
  body:not(.demo-dark) .demo-breadcrumb small{color:#60717c !important;}
  body.demo-dark .demo-breadcrumb small{color:#91a5b0 !important;}

  /* Theme toggle */
  body.demo-light .theme-toggle,
  body:not(.demo-dark) .theme-toggle{
    background:#ffffff !important;
    color:#0b151b !important;
    border:1px solid #cfd8de !important;
  }
  body.demo-dark .theme-toggle{
    background:#111a21 !important;
    color:#ffffff !important;
    border:1px solid #2a3943 !important;
  }

  /* Sidebar keeps strong contrast regardless of page theme */
  body.demo-light .demo-sidebar,
  body:not(.demo-dark) .demo-sidebar,
  body.demo-dark .demo-sidebar{
    background:#080d11 !important;
    color:#eef3f6 !important;
  }
  body.demo-light .demo-sidebar .nav-main,
  body.demo-light .demo-sidebar .nav-group-toggle,
  body.demo-light .demo-sidebar .nav-submenu button,
  body:not(.demo-dark) .demo-sidebar .nav-main,
  body:not(.demo-dark) .demo-sidebar .nav-group-toggle,
  body:not(.demo-dark) .demo-sidebar .nav-submenu button{
    color:#a7b6bf !important;
  }
  body.demo-light .demo-sidebar .nav-main.active,
  body.demo-light .demo-sidebar .nav-submenu button.active,
  body:not(.demo-dark) .demo-sidebar .nav-main.active,
  body:not(.demo-dark) .demo-sidebar .nav-submenu button.active{
    color:#ffffff !important;
  }

  /* Bottom nav */
  body.demo-light .demo-mobile-nav,
  body:not(.demo-dark) .demo-mobile-nav{
    background:#ffffff !important;
    border-top-color:#dfe6ea !important;
  }
  body.demo-light .demo-mobile-nav button,
  body:not(.demo-dark) .demo-mobile-nav button{color:#5f707a !important;}
  body.demo-light .demo-mobile-nav button.active,
  body:not(.demo-dark) .demo-mobile-nav button.active{color:#087eab !important;}
  body.demo-dark .demo-mobile-nav{
    background:#0d141a !important;
    border-top-color:#26343d !important;
  }
  body.demo-dark .demo-mobile-nav button{color:#9fb0ba !important;}
  body.demo-dark .demo-mobile-nav button.active{color:#35c5f5 !important;}

  /* Modal/drawer close and generic icon buttons */
  body.demo-light .modal-head button,
  body:not(.demo-dark) .modal-head button{
    color:#0b151b !important;
  }
  body.demo-dark .modal-head button{color:#ffffff !important;}
}
\n\n/* v40 — dashboard timeline + Pulse alignment + Radova Route */\n.timeline>div{\n  grid-template-columns:44px 14px 1fr !important;\n  gap:10px !important;\n  align-items:start !important;\n}\n.timeline i{\n  width:8px !important;\n  height:8px !important;\n  min-width:8px !important;\n  border:0 !important;\n  border-radius:50% !important;\n  background:#20bdf2 !important;\n  margin-top:3px !important;\n  box-shadow:0 0 0 3px rgba(32,189,242,.12) !important;\n}\nbody.demo-light .timeline i,body:not(.demo-dark) .timeline i{background:#087eab !important;box-shadow:0 0 0 3px rgba(8,126,171,.12) !important}\n\n.pulse-ring-small{position:relative !important}\n.pulse-ring-small .pulse-score-wrap{\n  position:absolute !important;\n  inset:0 !important;\n  z-index:2 !important;\n  display:flex !important;\n  flex-direction:column !important;\n  align-items:center !important;\n  justify-content:center !important;\n  gap:2px !important;\n  transform:none !important;\n}\n.pulse-ring-small .pulse-score-wrap b,\n.pulse-ring-small .pulse-score-wrap span{\n  position:static !important;\n  inset:auto !important;\n  transform:none !important;\n  margin:0 !important;\n  padding:0 !important;\n  text-align:center !important;\n}\n.pulse-ring-small .pulse-score-wrap b{font-size:18px !important;line-height:.95 !important}\n.pulse-ring-small .pulse-score-wrap span{font-size:7px !important;line-height:1 !important;opacity:.8}\n\n.route-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:11px}\n.route-summary article{background:#101920;border:1px solid #26343d;border-radius:13px;padding:16px}\n.route-summary span,.route-summary b,.route-summary em{display:block}\n.route-summary span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#80919c;font-weight:900}\n.route-summary b{font-size:24px;margin-top:6px;color:#f4f8fa}\n.route-summary em{font-size:9px;color:#82929d;font-style:normal;margin-top:4px}\n.route-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:11px}\n.route-live{font-size:8px;font-weight:900;letter-spacing:.12em;color:#26c889;border:1px solid rgba(38,200,137,.35);background:rgba(38,200,137,.08);padding:5px 8px;border-radius:99px}\n.route-stop-list{padding:8px}\n.route-stop{width:100%;display:grid;grid-template-columns:30px 1fr auto;gap:11px;align-items:center;text-align:left;border:1px solid transparent;border-radius:10px;background:transparent;color:inherit;padding:11px;cursor:pointer}\n.route-stop:hover,.route-stop.active{background:#121f27;border-color:#283a45}\n.route-index{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#172a35;color:#36c8f7;font-size:10px;font-weight:900}\n.route-stop b,.route-stop span,.route-stop small{display:block}\n.route-stop b{font-size:11px;color:#f4f8fa}\n.route-stop span{font-size:9px;color:#9aacb7;margin-top:2px}\n.route-stop small{font-size:8px;color:#6f828f;margin-top:4px}\n.route-stop strong{font-size:9px;color:#36c8f7;white-space:nowrap}\n.route-phone{overflow:hidden}\n.route-phone-screen{margin:16px auto 20px;max-width:330px;border:1px solid #2d3c46;border-radius:24px;background:#081117;padding:18px;box-shadow:0 20px 55px rgba(0,0,0,.22)}\n.route-phone-top span,.route-phone-top b,.route-phone-top small{display:block}\n.route-phone-top span{font-size:8px;color:#32c8f6;font-weight:900;letter-spacing:.1em}\n.route-phone-top b{font-size:20px;margin-top:6px}\n.route-phone-top small{font-size:10px;color:#91a1ab;margin-top:3px}\n.route-address{margin:16px 0;background:#101d25;border:1px solid #23323c;border-radius:10px;padding:11px;font-size:10px;color:#b6c4cc}\n.route-actions,.route-capture{display:grid;grid-template-columns:1fr 1fr;gap:8px}\n.route-actions button,.route-capture button{border:1px solid #2a3a44;background:#101b22;color:#eaf1f5;border-radius:9px;padding:10px;font-size:9px;font-weight:800}\n.route-actions button:first-child{background:#1eb9ee;color:#061117;border-color:#1eb9ee}\n.route-checklist{display:grid;gap:8px;margin:17px 0}\n.route-checklist>b{font-size:10px}\n.route-checklist label{display:flex;align-items:center;gap:8px;font-size:9px;color:#a9bac4}\n.route-checklist input{accent-color:#24bff2}\n.route-capture{grid-template-columns:1fr;margin-top:10px}\n.route-done{border-color:#2d8a67 !important;color:#65d9ad !important}\n.route-proof{margin-top:14px;padding-top:13px;border-top:1px solid #20303a}\n.route-proof span,.route-proof b{display:block}\n.route-proof span{font-size:8px;color:#6f818d;text-transform:uppercase;letter-spacing:.08em}\n.route-proof b{font-size:9px;line-height:1.5;color:#9fb0ba;margin-top:4px}\n\nbody.demo-light .route-summary article,body:not(.demo-dark) .route-summary article{background:#fff;border-color:#dfe7eb}\nbody.demo-light .route-summary b,body:not(.demo-dark) .route-summary b{color:#10202a}\nbody.demo-light .route-stop:hover,body.demo-light .route-stop.active,body:not(.demo-dark) .route-stop:hover,body:not(.demo-dark) .route-stop.active{background:#f1f8fb;border-color:#d5e6ee}\nbody.demo-light .route-stop b,body:not(.demo-dark) .route-stop b{color:#12212a}\nbody.demo-light .route-phone-screen,body:not(.demo-dark) .route-phone-screen{background:#f8fbfc;border-color:#d9e4e9;box-shadow:0 18px 45px rgba(20,40,50,.10)}\nbody.demo-light .route-address,body:not(.demo-dark) .route-address{background:#fff;border-color:#dce7ec;color:#334750}\nbody.demo-light .route-actions button,body.demo-light .route-capture button,body:not(.demo-dark) .route-actions button,body:not(.demo-dark) .route-capture button{background:#fff;color:#1c313b;border-color:#d8e4e9}\nbody.demo-light .route-actions button:first-child,body:not(.demo-dark) .route-actions button:first-child{background:#0f9ed0;color:#fff;border-color:#0f9ed0}\nbody.demo-light .route-phone-top b,body:not(.demo-dark) .route-phone-top b{color:#0f1d25}\nbody.demo-light .route-checklist label,body:not(.demo-dark) .route-checklist label{color:#526773}\nbody.demo-light .route-proof b,body:not(.demo-dark) .route-proof b{color:#526773}\n\n@media(max-width:900px){\n  .route-summary{grid-template-columns:1fr 1fr}\n  .route-layout{grid-template-columns:1fr}\n}\n@media(max-width:560px){\n  .timeline>div{grid-template-columns:42px 12px 1fr !important;gap:9px !important}\n  .route-summary{grid-template-columns:1fr 1fr}\n  .route-summary article{padding:13px}\n  .route-summary b{font-size:20px}\n  .route-stop{grid-template-columns:28px 1fr;padding:10px}\n  .route-stop strong{grid-column:2;margin-top:2px}\n  .route-phone-screen{max-width:none;margin:12px 10px 18px;border-radius:18px}\n}\n

/* v41 — route demo readability + pulse score centering */
.pulse-strip{
  grid-template-columns:72px minmax(0,1fr) auto auto !important;
  gap:16px !important;
}
.pulse-strip-copy{min-width:0}
.pulse-strip-copy b{font-size:13px !important; line-height:1.3 !important}
.pulse-strip-copy small{display:block; font-size:10px !important; line-height:1.45 !important}
.pulse-ring-small{
  width:62px !important;
  height:62px !important;
  background:conic-gradient(#25b9ef 82%,#24343f 0) !important;
  overflow:visible !important;
}
.pulse-ring-small:after{inset:7px !important}
.pulse-ring-small .pulse-score-wrap{
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:column !important;
  gap:2px !important;
}
.pulse-ring-small .pulse-score-wrap b,
.pulse-ring-small .pulse-score-wrap span{
  position:static !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
}
.pulse-ring-small .pulse-score-wrap b{font-size:20px !important}
.pulse-ring-small .pulse-score-wrap span{font-size:8px !important; opacity:.86 !important}
body.demo-light .pulse-ring-small, body:not(.demo-dark) .pulse-ring-small{background:conic-gradient(#1696c7 82%,#d8e4ea 0) !important}
body.demo-light .pulse-ring-small:after, body:not(.demo-dark) .pulse-ring-small:after{background:#ffffff !important}
body.demo-light .pulse-ring-small .pulse-score-wrap b, body:not(.demo-dark) .pulse-ring-small .pulse-score-wrap b{color:#0c1d26 !important}
body.demo-light .pulse-strip, body:not(.demo-dark) .pulse-strip{background:linear-gradient(105deg,#f6fbfd,#edf7fb) !important;border-color:#d7e8ef !important;color:#0d1e26 !important}
body.demo-light .pulse-strip-copy small, body:not(.demo-dark) .pulse-strip-copy small{color:#58707c !important}
body.demo-light .pulse-strip-trend span, body:not(.demo-dark) .pulse-strip-trend span{color:#58707c !important}

.route-layout{grid-template-columns:minmax(340px,.95fr) minmax(380px,1.05fr) !important;align-items:start !important}
.route-summary{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:12px !important}
.route-summary article{padding:18px !important}
.route-summary span{font-size:10px !important}
.route-summary b{font-size:26px !important;line-height:1.05 !important}
.route-summary em{font-size:10px !important;line-height:1.4 !important}
.route-panel-head h2{font-size:18px !important}
.route-panel-head p{font-size:11px !important;line-height:1.4 !important}
.route-stops-panel,.route-driver-panel{overflow:hidden !important}
.route-stop-list{display:grid !important;gap:10px !important;padding:14px !important}
.route-stop{
  display:grid !important;
  grid-template-columns:36px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:12px !important;
  width:100% !important;
  border-radius:14px !important;
  padding:14px !important;
  border:1px solid var(--route-border, #d8e4ea) !important;
  background:var(--route-stop-bg, #ffffff) !important;
  color:var(--route-text, #0f1d25) !important;
  cursor:pointer !important;
  box-shadow:none !important;
}
.route-stop div{min-width:0}
.route-stop b,.route-stop span,.route-stop small,.route-stop strong{display:block !important}
.route-stop b{font-size:14px !important;line-height:1.25 !important;color:inherit !important}
.route-stop span{font-size:11px !important;line-height:1.45 !important;color:var(--route-subtle, #566d79) !important;margin-top:2px !important}
.route-stop small{font-size:10px !important;line-height:1.35 !important;color:var(--route-muted, #738793) !important;margin-top:4px !important}
.route-stop strong{font-size:11px !important;line-height:1 !important;color:var(--route-accent, #1195c7) !important;white-space:nowrap !important}
.route-index{
  width:36px !important;height:36px !important;min-width:36px !important;
  border-radius:50% !important;display:grid !important;place-items:center !important;
  font-size:11px !important;font-weight:900 !important;
  background:var(--route-index-bg, #edf7fb) !important; color:var(--route-accent, #1195c7) !important;
}
.route-stop:hover,.route-stop.active{background:var(--route-stop-active, #eef8fc) !important;border-color:var(--route-active-border, #b9dceb) !important}
.route-stop.active{box-shadow:inset 0 0 0 1px var(--route-active-border, #b9dceb) !important}
.route-driver-card{padding:18px !important;display:grid !important;gap:14px !important}
.route-driver-top{display:flex !important;justify-content:space-between !important;gap:12px !important;align-items:flex-start !important}
.route-driver-top span{display:block;font-size:10px;font-weight:900;letter-spacing:.12em;color:#1598c8;margin-bottom:6px}
.route-driver-top h3{margin:0;font-size:24px;line-height:1.1;color:var(--route-text, #0f1d25)}
.route-driver-top p{margin:6px 0 0;font-size:12px;line-height:1.45;color:var(--route-subtle, #566d79)}
.route-status-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.route-status-pills span{padding:8px 10px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:normal;background:var(--route-pill-bg, #edf7fb);color:var(--route-accent, #1195c7);margin:0}
#routeStatusPill{background:var(--route-status-bg, #eaf8ef);color:var(--route-status-text, #287448)}
.route-location-card,.route-checklist-card,.route-proof-card,.route-notes-card{border:1px solid var(--route-border, #d8e4ea);border-radius:14px;padding:15px;background:var(--route-surface, #ffffff)}
.route-location-card b{display:block;font-size:14px;line-height:1.4;color:var(--route-text, #0f1d25)}
.route-location-card span{display:block;font-size:11px;color:var(--route-subtle, #566d79);margin-top:5px}
.route-action-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.route-action-row button,.route-tool-btn{min-height:44px !important;font-size:12px !important;font-weight:800 !important}
.route-checklist-card label{display:flex !important;align-items:center !important;gap:10px !important;font-size:12px !important;line-height:1.4 !important;color:var(--route-text, #0f1d25) !important;margin-top:10px !important}
.route-checklist-card input{accent-color:#17a7d9}
.route-proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.route-card-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;margin-bottom:10px}
.route-card-head b{font-size:13px;color:var(--route-text, #0f1d25)}
.route-card-head span{font-size:10px;line-height:1.4;color:var(--route-subtle, #566d79)}
.route-photo-list,.route-signature-box{
  margin-top:12px;
  min-height:92px;
  border:1px dashed var(--route-border, #d8e4ea);
  border-radius:12px;
  padding:12px;
  font-size:11px;
  line-height:1.45;
  color:var(--route-subtle, #566d79);
  background:var(--route-soft, #f8fbfc);
}
.route-photo-list.has-items,.route-signature-box.has-signature{border-style:solid;background:var(--route-surface, #ffffff)}
.route-photo-item{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--route-border, #d8e4ea)}
.route-photo-item:last-child{border-bottom:0;padding-bottom:0}
.route-photo-item b{font-size:11px;color:var(--route-text, #0f1d25)}
.route-photo-item span{font-size:10px;color:var(--route-subtle, #566d79)}
.route-signature-box img{display:block;max-width:100%;max-height:130px;margin:0 auto}
.route-notes-card textarea{width:100%;min-height:96px;resize:vertical;border:1px solid var(--route-border, #d8e4ea);border-radius:12px;padding:12px;font:inherit;font-size:12px;line-height:1.5;background:var(--route-soft, #f8fbfc);color:var(--route-text, #0f1d25)}
.signature-modal-card{width:min(660px,100%) !important}
.signature-help{font-size:12px;line-height:1.5;color:#62727e;margin:0 0 14px}
#signatureCanvas{width:100%;height:auto;display:block;border:1px solid #d9e5ea;border-radius:12px;background:#fff;touch-action:none;cursor:crosshair}
.signature-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}

body.demo-dark{--route-surface:#0f181f;--route-soft:#0a1218;--route-text:#f2f7fa;--route-subtle:#a8bac5;--route-muted:#8da0ab;--route-border:#243640;--route-stop-bg:#0f181f;--route-stop-active:#12212a;--route-active-border:#24556a;--route-index-bg:#142530;--route-accent:#36c8f7;--route-pill-bg:#12303d;--route-status-bg:#173126;--route-status-text:#78dfaa}
body.demo-light,body:not(.demo-dark){--route-surface:#ffffff;--route-soft:#f8fbfc;--route-text:#0f1d25;--route-subtle:#586f7b;--route-muted:#738793;--route-border:#d8e4ea;--route-stop-bg:#ffffff;--route-stop-active:#eef8fc;--route-active-border:#b9dceb;--route-index-bg:#edf7fb;--route-accent:#1195c7;--route-pill-bg:#edf7fb;--route-status-bg:#eaf8ef;--route-status-text:#287448}
body.demo-dark .route-summary article,body.demo-dark .route-stops-panel,body.demo-dark .route-driver-panel{background:#101920 !important;border-color:#243640 !important}
body.demo-dark .route-summary b,body.demo-dark .route-panel-head h2,body.demo-dark .route-driver-top h3,body.demo-dark .route-card-head b,body.demo-dark .route-location-card b,body.demo-dark .route-checklist-card label,body.demo-dark .route-notes-card textarea{color:#f2f7fa !important}
body.demo-dark .route-summary span,body.demo-dark .route-summary em,body.demo-dark .route-panel-head p,body.demo-dark .route-location-card span,body.demo-dark .route-card-head span,body.demo-dark .route-driver-top p,body.demo-dark .route-photo-list,body.demo-dark .route-signature-box{color:#a8bac5 !important}
body.demo-dark .route-action-row .secondary,body.demo-dark .route-tool-btn{background:#101b22 !important;border-color:#2a3a44 !important;color:#edf4f8 !important}
body.demo-dark .route-action-primary{background:#1eb9ee !important;border-color:#1eb9ee !important;color:#051219 !important}
body.demo-dark .signature-help{color:#a8bac5 !important}
body.demo-dark #signatureCanvas{background:#fff !important}
body.demo-light .route-summary article,body:not(.demo-dark) .route-summary article{background:#fff !important;border-color:#dfe7eb !important}
body.demo-light .route-action-primary,body:not(.demo-dark) .route-action-primary{background:#1195c7 !important;border-color:#1195c7 !important;color:#fff !important}

@media(max-width:1100px){
  .route-layout{grid-template-columns:1fr !important}
}
@media(max-width:760px){
  .pulse-strip{grid-template-columns:62px minmax(0,1fr) auto !important}
  .pulse-strip>strong{display:none !important}
  .route-summary{grid-template-columns:1fr 1fr !important}
  .route-proof-grid{grid-template-columns:1fr !important}
}
@media(max-width:560px){
  .pulse-strip{grid-template-columns:1fr !important;gap:12px !important}
  .pulse-ring-small{margin:0 auto !important}
  .pulse-strip-copy,.pulse-strip-trend{text-align:center !important}
  .route-summary{grid-template-columns:1fr !important}
  .route-stop{grid-template-columns:34px minmax(0,1fr) !important}
  .route-stop strong{grid-column:2 !important;margin-top:6px !important}
  .route-driver-top,.route-status-pills{display:block !important}
  .route-status-pills{margin-top:12px !important}
  .route-action-row{grid-template-columns:1fr !important}
  .signature-actions{flex-direction:column !important}
  .signature-actions button{width:100% !important}
}


/* v42 — simpler Route + clean Pulse + aligned timeline */
.timeline{padding:10px 18px !important}
.timeline>div{
  display:grid !important;
  grid-template-columns:48px 12px minmax(0,1fr) !important;
  column-gap:10px !important;
  align-items:start !important;
  padding:12px 0 !important;
}
.timeline time{font-size:10px !important;line-height:1.25 !important;padding-top:1px !important}
.timeline i{
  display:block !important;
  width:6px !important;
  height:6px !important;
  min-width:6px !important;
  border:2px solid #18b8ef !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:50% !important;
  margin:2px 0 0 1px !important;
  align-self:start !important;
}
.timeline p{margin:0 !important}
.timeline b{font-size:11px !important;line-height:1.25 !important}
.timeline span{font-size:9px !important;line-height:1.3 !important;margin-top:2px !important}
body.demo-light .timeline i,body:not(.demo-dark) .timeline i{border-color:#0f94c7 !important;background:transparent !important;box-shadow:none !important}

.pulse-ring-small{
  width:64px !important;
  height:64px !important;
  min-width:64px !important;
  border-radius:50% !important;
  background:conic-gradient(#25b9ef 82%,#263944 0) !important;
  position:relative !important;
  display:block !important;
}
.pulse-ring-small:after{
  content:"" !important;
  position:absolute !important;
  inset:7px !important;
  border-radius:50% !important;
  background:#101b23 !important;
  z-index:0 !important;
}
.pulse-ring-small .pulse-score-wrap{
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  transform:none !important;
  gap:2px !important;
}
.pulse-ring-small .pulse-score-wrap b{
  position:static !important;
  margin:0 !important;
  padding:0 !important;
  font-size:20px !important;
  line-height:1 !important;
  color:#fff !important;
}
.pulse-ring-small .pulse-score-wrap span{
  position:static !important;
  margin:0 !important;
  padding:0 !important;
  font-size:6.5px !important;
  line-height:1 !important;
  color:#9db0bb !important;
  white-space:nowrap !important;
}
body.demo-light .pulse-ring-small,body:not(.demo-dark) .pulse-ring-small{background:conic-gradient(#1696c7 82%,#d8e4ea 0) !important}
body.demo-light .pulse-ring-small:after,body:not(.demo-dark) .pulse-ring-small:after{background:#fff !important}
body.demo-light .pulse-ring-small .pulse-score-wrap b,body:not(.demo-dark) .pulse-ring-small .pulse-score-wrap b{color:#0c1d26 !important}
body.demo-light .pulse-ring-small .pulse-score-wrap span,body:not(.demo-dark) .pulse-ring-small .pulse-score-wrap span{color:#667d89 !important}

.route-layout,.route-driver-panel,.route-driver-card,.route-phone,.route-phone-screen,.route-proof-grid,.route-checklist-card,.route-location-card,.route-action-row,.route-signature-box{display:none !important}
.route-stops-panel{margin-bottom:12px !important}
.route-simple-bottom{display:grid !important;grid-template-columns:1fr 1fr !important;gap:12px !important}
.route-simple-body{padding:16px !important}
.route-simple-body textarea{width:100% !important;min-height:130px !important;resize:vertical !important;border-radius:12px !important;padding:12px !important;font:inherit !important;font-size:12px !important;line-height:1.5 !important;border:1px solid var(--route-border,#d8e4ea) !important;background:var(--route-soft,#f8fbfc) !important;color:var(--route-text,#0f1d25) !important;margin-bottom:10px !important}
.route-tool-btn{width:100% !important;min-height:44px !important;font-size:12px !important}
.route-photo-list{margin-top:12px !important}
.route-stop{grid-template-columns:38px minmax(0,1fr) auto !important}
.route-stop b{font-size:13px !important}
.route-stop span{font-size:11px !important}
.route-stop small{font-size:10px !important}
.route-stop strong{font-size:10px !important}
@media(max-width:760px){.route-simple-bottom{grid-template-columns:1fr !important}}
@media(max-width:560px){
  .timeline>div{grid-template-columns:44px 10px minmax(0,1fr) !important;column-gap:8px !important}
  .route-stop{grid-template-columns:34px minmax(0,1fr) !important}
  .route-stop strong{grid-column:2 !important;margin-top:5px !important}
}