:root{
  --ivory:#FAF8F3;--paper:#FFFFFF;--ink:#191919;--charcoal:#343434;--muted:#706D66;
  --yellow:#F2D85B;--blue:#DDEBFA;--blue-strong:#BFD9F5;--line:#E5E0D7;--green:#DDF3E5;
  --red:#FBE3E0;--shadow:0 18px 50px rgba(25,25,25,.07);--radius:24px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--ivory);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input{font:inherit}
button{cursor:pointer}
.app-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:26px 20px;background:#F6F2EA;border-right:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column}
.brand-row{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.brand-mark{width:42px;height:42px;border-radius:14px;background:var(--ink);color:var(--yellow);display:grid;place-items:center;font-weight:900}
.brand-name{font-weight:900;letter-spacing:-.02em}
.brand-sub{font-size:13px;color:var(--muted);margin-top:2px}
.workspace-chip{width:100%;border:1px solid var(--line);background:rgba(255,255,255,.72);border-radius:18px;padding:12px;display:flex;align-items:center;gap:10px;text-align:left;margin-bottom:18px}
.workspace-chip span:last-child{display:grid;gap:2px}
.workspace-chip small{color:var(--muted)}
.workspace-avatar{width:38px;height:38px;border-radius:12px;background:var(--blue);display:grid;place-items:center;font-weight:900}
.nav-list{display:grid;gap:5px;overflow-y:auto;min-height:0;flex:1;padding-right:2px;overscroll-behavior:contain}
.nav-label{font-size:10px;letter-spacing:.16em;font-weight:900;color:#99948C;margin:18px 10px 6px}
.nav-item{border:0;background:transparent;border-radius:12px;padding:11px 12px;display:flex;justify-content:space-between;align-items:center;color:#4C4944;text-align:left;font-weight:700}
.nav-item:hover,.nav-item.active{background:var(--paper);color:var(--ink);box-shadow:0 5px 18px rgba(25,25,25,.04)}
.nav-item span{font-size:12px;color:#8C877F}
.trial-card{
  margin-top:24px;
  padding:16px;
  background:#FFFDF5;
  color:#191919;
  border:2px solid #191919;
  border-radius:18px;
  transition:background-color .8s ease,border-color .8s ease,box-shadow .8s ease;
  will-change:background-color,border-color,box-shadow;
}
@keyframes trialCardTenMinuteCycle{
  0%,24.999%{
    background-color:#FFFDF5;
    border-color:#191919;
    box-shadow:0 0 0 rgba(25,25,25,0);
  }
  25%,49.999%{
    background-color:#EAF4FF;
    border-color:#8DB6DC;
    box-shadow:0 8px 24px rgba(141,182,220,.16);
  }
  50%,74.999%{
    background-color:#FFF3A8;
    border-color:#D4BC3E;
    box-shadow:0 8px 24px rgba(242,216,91,.18);
  }
  75%,99.999%{
    background-color:#F2F0FF;
    border-color:#B7B1DE;
    box-shadow:0 8px 24px rgba(183,177,222,.16);
  }
  100%{
    background-color:#FFFDF5;
    border-color:#191919;
    box-shadow:0 0 0 rgba(25,25,25,0);
  }
}
.trial-card strong{
  display:block;
  margin:12px 0 6px;
  color:#191919;
  font-size:14px;
  line-height:1.3;
}
.trial-card p{
  margin:0;
  color:#5F5A51;
  font-size:12px;
  line-height:1.45;
}
.trial-days-pill{
  background:#191919!important;
  color:#F2D85B!important;
  border:2px solid #191919!important;
  box-shadow:none!important;
  font-size:13px!important;
  font-weight:950!important;
  padding:9px 13px!important;
  letter-spacing:.01em;
}
.sidebar-session-actions{
  position:static;
  z-index:3;
  flex:0 0 auto;
  margin-top:12px;
  padding:12px 0 max(2px,env(safe-area-inset-bottom));
  background:#F6F2EA;
}
.sidebar-logout-btn{
  display:block!important;
  visibility:visible!important;
  width:100%;
  margin:0;
  border:2px solid #191919;
  background:#191919;
  color:#FFFFFF;
  border-radius:13px;
  padding:12px 14px;
  font-size:13px;
  font-weight:900;
}
.sidebar-logout-btn:active{transform:translateY(1px)}
.main{padding:0 34px 64px;min-width:0}
.topbar{position:sticky;top:0;z-index:20;background:rgba(250,248,243,.94);backdrop-filter:blur(12px);display:flex;justify-content:space-between;align-items:center;padding:24px 0 18px;border-bottom:1px solid rgba(229,224,215,.8);margin-bottom:26px}
.topbar h1{margin:2px 0 0;font-size:30px;letter-spacing:-.035em}
.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:900;color:#807B73;margin:0 0 6px}
.top-actions{display:flex;gap:10px}
.primary-btn,.dark-btn,.ghost-btn,.text-btn{border-radius:999px;padding:11px 16px;border:1px solid var(--ink);font-weight:800}
.primary-btn,.dark-btn{background:var(--ink);color:white}
.ghost-btn{background:transparent;color:var(--ink);border-color:var(--line)}
.text-btn{border:0;background:transparent;padding:8px;color:var(--ink)}
.menu-toggle{display:none;border:0;background:transparent;font-size:22px}
.view{display:none}
.view.active{display:block}
.hero-card{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;background:var(--blue);border-radius:30px;padding:34px;margin-bottom:20px}
.hero-card h2{font-size:clamp(32px,4vw,52px);margin:14px 0 8px;letter-spacing:-.045em}
.hero-card p{margin:0;color:#4E5A65;font-size:17px}
.pill{display:inline-flex;align-items:center;border-radius:999px;padding:7px 11px;font-size:11px;font-weight:900}
.pill.yellow{background:var(--yellow)}.pill.blue{background:var(--blue)}
.metric-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:20px}
.metric-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
.metric-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:20px;min-width:0}
.metric-card span{display:block;color:var(--muted);font-size:13px;font-weight:700}
.metric-card strong{display:block;font-size:30px;letter-spacing:-.04em;margin:10px 0 5px}
.metric-card small{color:#8A857D}
.dashboard-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:20px;margin-bottom:20px}
.dashboard-grid.lower{grid-template-columns:1fr .65fr}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 8px 28px rgba(25,25,25,.025)}
.panel h3{margin:0;font-size:22px;letter-spacing:-.025em}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}
.timeline{display:grid;gap:9px}
.timeline-item{display:grid;grid-template-columns:78px 1fr auto;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:16px}
.timeline-item.done{opacity:.7}
.timeline-item time{font-weight:900}
.timeline-item div{display:grid;gap:3px}.timeline-item div span{font-size:13px;color:var(--muted)}
.travel-row,.buffer-block{font-size:12px;color:var(--muted);padding-left:92px}
.status{display:inline-flex;width:max-content;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:900;font-style:normal}
.status.success{background:var(--green)}.status.warning{background:#FFF1C4}.status.neutral{background:#F0EEE9}.status.blue{background:var(--blue)}.status.danger{background:var(--red)}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick-card{min-height:94px;border:1px solid var(--line);background:#FCFBF8;border-radius:18px;padding:16px;text-align:left;font-size:22px;font-weight:900}
.quick-card span{display:block;font-size:13px;margin-top:20px}
.attention-list{display:grid;gap:8px}
.attention-list button{display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);background:#FCFBF8;border-radius:14px;padding:13px;text-align:left}
.attention-list small{color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%}.dot.red{background:#D8685D}.dot.yellow{background:#D5AA1E}.dot.blue{background:#7AA9D6}
.accent-panel{background:var(--yellow)}
.accent-panel p{color:#615A3A}
.section-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:10px 0 24px}
.section-intro h2{font-size:clamp(32px,4vw,48px);margin:0 0 7px;letter-spacing:-.045em}
.section-intro p:not(.eyebrow){margin:0;color:var(--muted);max-width:720px}
.booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.booking-grid .full{grid-column:1/-1}
.field-label{display:block;font-size:12px;font-weight:800;color:var(--muted);margin:16px 0 7px}
.link-box{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:#F8F6F1;border:1px solid var(--line);border-radius:14px;padding:11px 12px;overflow:hidden}
.link-box span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.link-box button,.setting-row button{border:0;background:transparent;font-weight:900}
.setting-row{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.setting-row:first-of-type{border-top:0}.setting-row span:first-child{display:grid;gap:3px}.setting-row small{color:var(--muted)}
.control-chip{padding:7px 10px;background:#F4F1EB;border-radius:10px;font-size:12px;font-weight:800}
.flow-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.flow-row span{padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:#FCFBF8;font-size:13px;font-weight:800}
.mini-settings{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}.mini-settings div{padding:16px;background:#F9F7F2;border-radius:16px}.mini-settings strong,.mini-settings span{display:block}.mini-settings span{font-size:12px;color:var(--muted);margin-top:5px}
.table-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.table-row{display:grid;grid-template-columns:1.1fr 1fr 1fr .8fr 1.2fr;gap:12px;padding:15px 18px;border-top:1px solid var(--line);align-items:center;font-size:14px}
.table-row:first-child{border-top:0}.table-head{background:#F4F1EA;color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.client-grid,.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.client-card,.service-grid article{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:20px;display:grid;gap:7px}
.client-card span,.client-card small,.service-grid span{color:var(--muted)}
.client-avatar{width:44px;height:44px;border-radius:14px;background:var(--blue);display:grid;place-items:center;font-weight:900;margin-bottom:8px}
.add-card{border-style:dashed!important;cursor:pointer}.add-card div{font-size:28px}
.calendar-layout,.route-layout{display:grid;grid-template-columns:1.4fr .6fr;gap:18px}
.week-row{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-bottom:20px}.week-row span{padding:10px;border:1px solid var(--line);border-radius:12px;text-align:center;color:var(--muted);font-size:10px;font-weight:900}.week-row strong{display:block;font-size:20px;color:var(--ink);margin-top:3px}.week-row .selected{background:var(--yellow)}
.job-block{display:grid;grid-template-columns:60px 1fr auto;gap:12px;align-items:center;padding:15px;border-radius:14px;border:1px solid var(--line)}.job-block div{display:grid;gap:3px}.job-block div span{font-size:12px;color:var(--muted)}
.buffer-block{padding:8px 0 8px 76px}
.recurring-item{padding:14px 0;border-top:1px solid var(--line);display:grid;gap:4px}.recurring-item span{font-size:13px;color:var(--muted)}
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.kanban-col{background:#F1EEE7;border-radius:20px;padding:14px}.kanban-col h3{font-size:14px;margin:2px 0 14px}.kanban-col h3 span{float:right;background:white;border-radius:999px;padding:2px 7px}.kanban-col article{background:white;border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:6px;margin-top:8px}.kanban-col article small{color:var(--muted)}.kanban-col article b{font-size:11px;color:#7C776E}.kanban-col article.accepted{border-color:#A9D2B6}
.map-placeholder{min-height:430px;position:relative;background:linear-gradient(0deg,#F5F3EE,#F5F3EE);overflow:hidden}.map-placeholder:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#DEDAD1 1px,transparent 1px),linear-gradient(90deg,#DEDAD1 1px,transparent 1px);background-size:38px 38px;opacity:.55}.route-line{position:absolute;width:52%;height:58%;border:5px solid #8DB6DC;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(19deg);left:24%;top:18%}.route-pin{position:absolute;width:38px;height:38px;border-radius:50%;background:var(--ink);color:white;display:grid;place-items:center;font-weight:900}.route-pin.p1{left:24%;top:62%}.route-pin.p2{left:54%;top:38%}.route-pin.p3{left:76%;top:19%}.map-label{position:absolute;left:18px;bottom:18px;background:white;padding:9px 12px;border-radius:10px;font-size:12px;font-weight:900}
.route-stop{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center}.route-stop>b{width:34px;height:34px;border-radius:50%;background:var(--ink);color:white;display:grid;place-items:center}.route-stop div{display:grid;gap:3px}.route-stop span,.route-stop small{color:var(--muted);font-size:12px}.route-stop em{font-size:11px;font-style:normal;font-weight:900}.route-drive{margin:12px 0 12px 16px;padding-left:34px;border-left:1px dashed #BBB4A9;color:var(--muted);font-size:12px}
.timer-card{background:var(--blue);border-radius:28px;padding:30px;margin-bottom:18px;text-align:center}.timer-card span{font-size:12px;color:#66717D}.timer-card h3{margin:8px 0}.timer-card>strong{font-size:48px;letter-spacing:.04em;display:block;margin:22px}.timer-card div{display:flex;justify-content:center;gap:10px}
.report-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.report-grid .panel>span{color:var(--muted);font-size:13px}.report-grid .panel>strong{display:block;font-size:38px;margin:10px 0}.report-grid .panel>p{color:var(--muted)}
.bar-chart{height:110px;display:flex;align-items:end;gap:7px;margin-top:18px}.bar-chart i{flex:1;background:var(--blue-strong);border-radius:7px 7px 2px 2px}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.toast{position:fixed;right:24px;bottom:24px;background:var(--ink);color:white;padding:12px 16px;border-radius:12px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translateY(0)}
.modal-backdrop{position:fixed;inset:0;background:rgba(25,25,25,.38);z-index:50;display:grid;place-items:center;padding:20px}.modal-backdrop[hidden]{display:none}.modal{width:min(480px,100%);background:var(--ivory);border-radius:26px;padding:30px;position:relative;box-shadow:var(--shadow)}.modal h2{font-size:34px;margin:5px 0 10px}.modal p{color:var(--muted);line-height:1.55}.modal-close{position:absolute;right:18px;top:18px;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:white;font-size:20px}.modal-actions{margin-top:22px}

@media(max-width:1100px){
  .metric-grid{grid-template-columns:repeat(3,1fr)}
  .client-grid,.service-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .app-shell{display:block}.sidebar{position:fixed;left:-310px;z-index:40;width:280px;transition:.25s;box-shadow:var(--shadow)}.sidebar.open{left:0}
  .main{padding:0 18px 40px}.menu-toggle{display:block}.topbar{gap:12px}.topbar>div:nth-child(2){flex:1}.top-actions .ghost-btn{display:none}
  .metric-grid,.metric-grid.compact{grid-template-columns:1fr 1fr}.dashboard-grid,.dashboard-grid.lower,.booking-grid,.calendar-layout,.route-layout,.settings-grid{grid-template-columns:1fr}
  .booking-grid .full{grid-column:auto}.mini-settings{grid-template-columns:1fr}.kanban{grid-template-columns:1fr}.report-grid{grid-template-columns:1fr}
  .table-card{overflow:auto}.table-row{min-width:760px}.client-grid,.service-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .main{padding:0 12px 30px}.topbar{padding-top:16px}.topbar h1{font-size:23px}.top-actions .primary-btn{padding:10px 12px;font-size:12px}
  .hero-card{padding:24px;display:grid}.metric-grid,.metric-grid.compact{grid-template-columns:1fr 1fr}.metric-card strong{font-size:25px}
  .dashboard-grid,.client-grid,.service-grid{grid-template-columns:1fr}.section-intro{align-items:flex-start;display:grid}.section-intro h2{font-size:34px}
  .timeline-item{grid-template-columns:62px 1fr}.timeline-item .status{grid-column:2}.travel-row{padding-left:74px}.quick-grid{grid-template-columns:1fr 1fr}
  .flow-row b{display:none}.flow-row span{width:100%}.week-row{overflow:auto;grid-template-columns:repeat(6,70px)}
}


/* Auth + real-data CRUD */
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:
  radial-gradient(circle at 15% 15%,rgba(221,235,250,.9),transparent 34%),
  radial-gradient(circle at 85% 80%,rgba(242,216,91,.3),transparent 30%),
  var(--ivory)}
.auth-card{width:min(470px,100%);background:var(--paper);border:1px solid var(--line);border-radius:30px;padding:32px;box-shadow:var(--shadow)}
.auth-brand{margin-bottom:34px}
.auth-card h1{font-size:38px;letter-spacing:-.045em;margin:5px 0 8px}
.auth-copy{color:var(--muted);margin:0 0 22px;line-height:1.55}
.auth-form{display:grid;gap:14px}
.auth-form label,.entity-form label{display:grid;gap:6px;font-size:12px;font-weight:800;color:#5D5952}
.auth-form input,.entity-form input,.entity-form select,.entity-form textarea{
  width:100%;border:1px solid var(--line);border-radius:13px;background:#fff;padding:11px 12px;color:var(--ink);outline:none
}
.auth-form input:focus,.entity-form input:focus,.entity-form select:focus,.entity-form textarea:focus{border-color:#9EB9D6;box-shadow:0 0 0 3px rgba(191,217,245,.38)}
.auth-form .primary-btn{margin-top:4px}
.auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:16px}
.auth-links button{border:0;background:transparent;color:var(--ink);font-size:12px;font-weight:800;padding:0}
.entity-form{margin-top:18px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form-grid .full{grid-column:1/-1}
.entity-form textarea{min-height:92px;resize:vertical}
.check-field{display:flex!important;grid-column:1/-1!important;grid-template-columns:auto 1fr!important;align-items:center}
.check-field input{width:auto}
.form-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.card-actions{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.card-actions button,.record-actions button{border:0;background:#F3F0EA;border-radius:999px;padding:6px 10px;font-size:10px;font-weight:900;color:var(--ink)}
.card-actions .danger-link,.record-actions .danger-link{background:var(--red);color:#833C35}
.card-actions .accept-btn{background:var(--green);color:#245A36}
.inactive-card{opacity:.5}
.empty-card{grid-column:1/-1;background:var(--paper);border:1px dashed #BBB4AA;border-radius:20px;padding:28px;display:grid;justify-items:start;gap:8px}
.empty-card span,.empty-inline span{color:var(--muted);font-size:13px}
.empty-inline{padding:24px;border:1px dashed var(--line);border-radius:16px;display:grid;justify-items:start;gap:8px;color:var(--muted)}
.jobs-list{display:grid;gap:10px}
.record-actions{display:flex;align-items:center;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.kanban-empty{font-size:12px;color:var(--muted);padding:14px 5px}
.modal{max-height:min(88vh,820px);overflow:auto}
button:disabled{opacity:.55;cursor:not-allowed}
[hidden]{display:none!important}

@media(max-width:560px){
  .auth-card{padding:24px;border-radius:24px}
  .auth-card h1{font-size:32px}
  .form-grid{grid-template-columns:1fr}
  .form-grid .full{grid-column:auto}
  .form-footer{position:sticky;bottom:-1px;background:var(--ivory);padding-bottom:4px}
  .record-actions{grid-column:2;justify-content:flex-start}
}


/* Owner Admin + team access */
.owner-admin-link{margin-top:8px;background:#FFF8D7!important;border:1px solid #E8DCA1!important}
.admin-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.admin-grid>.panel:first-child{grid-row:span 2}
.role-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 18px}
.role-legend div{background:#F8F6F1;border:1px solid var(--line);border-radius:14px;padding:12px}
.role-legend strong,.role-legend span{display:block}
.role-legend span{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.45}
.members-list{display:grid;gap:8px}
.member-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:#FCFBF8}
.member-row.pending{background:#FFFDF2}
.member-avatar{width:38px;height:38px;border-radius:12px;background:var(--blue);display:grid;place-items:center;font-weight:900;font-size:11px}
.member-row>div:nth-child(2){display:grid;gap:3px;min-width:0}
.member-row small{color:var(--muted);font-size:10px;overflow:hidden;text-overflow:ellipsis}
.member-row select{border:1px solid var(--line);border-radius:10px;background:white;padding:7px 9px;font-size:11px;font-weight:800}
.member-row button{border:0;background:#F1EEE8;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:900}
.permission-note{margin-top:14px;background:#FFF8D7;border:1px solid #E8DCA1;border-radius:14px;padding:12px;font-size:11px;line-height:1.5;color:#5F5835}
.workspace-chip small{text-transform:capitalize}

@media(max-width:900px){
  .admin-grid{grid-template-columns:1fr}
  .admin-grid>.panel:first-child{grid-row:auto}
}
@media(max-width:620px){
  .role-legend{grid-template-columns:1fr}
  .member-row{grid-template-columns:38px 1fr}
  .member-row>select,.member-row>button,.member-row>.status{grid-column:2}
}


/* Sharing, Help & install guidance */
.section-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.share-access-card{display:flex;justify-content:space-between;gap:20px;align-items:center;background:var(--blue);border:1px solid var(--blue-strong);border-radius:22px;padding:20px;margin-bottom:18px}
.share-access-card h3{margin:9px 0 5px;font-size:21px}
.share-access-card p{margin:0;color:#566675;max-width:680px;line-height:1.5}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.help-grid .full-help{grid-column:1/-1}
.install-card h3{margin:14px 0 10px;font-size:22px}
.steps-list{margin:0;padding-left:22px;display:grid;gap:10px;color:#4E4A44}
.steps-list li{padding-left:3px;line-height:1.5}
.share-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.share-steps>div{display:flex;gap:10px;background:#F8F6F1;border:1px solid var(--line);border-radius:14px;padding:13px}
.share-steps b{width:26px;height:26px;min-width:26px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:10px}
.share-steps span{display:grid;gap:3px}
.share-steps small{color:var(--muted);font-size:10px;line-height:1.4}
.faq-list{display:grid;margin-top:12px}
.faq-list details{border-top:1px solid var(--line);padding:14px 0}
.faq-list details:first-child{border-top:0}
.faq-list summary{cursor:pointer;font-weight:850;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:"＋";float:right;color:var(--muted)}
.faq-list details[open] summary:after{content:"−"}
.faq-list p{margin:9px 28px 0 0;color:var(--muted);line-height:1.55}
.quick-add-menu{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick-add-menu button{border:1px solid var(--line);background:#FCFBF8;border-radius:16px;padding:14px;text-align:left;display:grid;gap:4px}
.quick-add-menu button>span{font-size:21px}
.quick-add-menu button>strong{font-size:13px}
.quick-add-menu button>small{font-size:10px;color:var(--muted)}
@media(max-width:760px){
  .help-grid{grid-template-columns:1fr}
  .help-grid .full-help{grid-column:auto}
  .share-steps{grid-template-columns:1fr 1fr}
  .share-access-card{align-items:flex-start;flex-direction:column}
}
@media(max-width:520px){
  .section-actions{width:100%}
  .section-actions button{flex:1}
  .share-steps{grid-template-columns:1fr}
  .quick-add-menu{grid-template-columns:1fr}
}


/* Services add-ons + Supplies */
.service-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:20px;display:grid;gap:8px}
.service-card>span{color:var(--muted)}
.addon-list{display:grid;gap:7px;margin:10px 0 4px;padding-top:10px;border-top:1px solid var(--line)}
.addon-row{display:flex;justify-content:space-between;gap:10px;align-items:center;background:#F8F6F1;border-radius:12px;padding:9px 10px}
.addon-row>span:first-child{display:grid;gap:2px}
.addon-row small,.muted-line{color:var(--muted);font-size:10px}
.supplies-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.supply-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:18px;display:grid;gap:12px}
.supply-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.supply-head>span:first-child{display:grid;gap:3px}
.supply-head small{color:var(--muted);font-size:10px}
.supply-qty{display:flex;align-items:baseline;gap:7px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.supply-qty strong{font-size:34px;letter-spacing:-.04em}.supply-qty span{color:var(--muted)}
.supply-meta{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted)}
@media(max-width:1000px){.supplies-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.supplies-grid{grid-template-columns:1fr}.addon-row{align-items:flex-start;flex-direction:column}}


/* Data-driven booking, leads and invoices */
.empty-table{padding:28px;display:grid;justify-items:start;gap:7px;color:var(--muted)}
.empty-table strong{color:var(--ink)}
.booking-services-list{display:grid;gap:9px}
.booking-service-row{display:grid;grid-template-columns:minmax(180px,.7fr) 1.3fr;gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--line)}
.booking-service-row:first-child{border-top:0}
.booking-service-row>span:first-child{display:grid;gap:3px}
.booking-service-row small{color:var(--muted);font-size:10px}
.booking-addon-chips{display:flex;gap:6px;flex-wrap:wrap}
.booking-addon-chips i{font-style:normal;font-size:10px;background:#F5F2EC;border:1px solid var(--line);padding:6px 8px;border-radius:999px}
@media(max-width:620px){.booking-service-row{grid-template-columns:1fr}}

.back-btn{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:9px 12px;font-size:12px;font-weight:850;white-space:nowrap}
.back-btn:hover{background:#F4F1EA}
@media(max-width:860px){.back-btn{display:inline-flex;align-items:center}.topbar{gap:8px}}
@media(min-width:861px){.back-btn{margin-left:4px}}


/* Production public request pages + Platform Admin */
.platform-admin-link{background:#F1E9FF!important;border:1px solid #D8C5F5!important}
.platform-table,.platform-visits,.booking-requests-list{display:grid;gap:8px}
.platform-customer-row{display:grid;grid-template-columns:minmax(220px,1.4fr) .8fr .7fr auto auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:#FCFBF8}
.platform-customer-row>div{display:grid;gap:3px}.platform-customer-row small{color:var(--muted);font-size:10px}
.platform-customer-row select{border:1px solid var(--line);border-radius:10px;background:#fff;padding:8px;font-size:11px;font-weight:800}
.visit-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.visit-row:first-child{border-top:0}.visit-row>span{display:grid;gap:3px}.visit-row small,.visit-row time{font-size:10px;color:var(--muted)}
.booking-request-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:#FCFBF8}
.booking-request-row>div{display:grid;gap:3px}.booking-request-row small{color:var(--muted);font-size:10px}
.link-box{grid-template-columns:minmax(0,1fr) auto auto}
.link-box a{color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.link-box button{border:0;background:var(--ink);color:#fff;border-radius:8px;padding:7px 10px;font-size:10px;font-weight:800}
.route-map-empty{min-height:260px;display:grid;place-items:center;position:relative;background:#F5F3EE}
.route-visual-empty{color:var(--muted);font-size:13px;text-align:center;max-width:280px}
.timer-empty{margin-bottom:18px}

.public-shell{min-height:100vh;background:var(--ivory)}
.public-header{display:flex;justify-content:space-between;align-items:center;padding:20px max(18px,calc((100vw - 920px)/2));border-bottom:1px solid var(--line);background:rgba(250,248,243,.96);position:sticky;top:0;z-index:10}
.public-main{width:min(760px,calc(100% - 28px));margin:0 auto;padding:26px 0 60px}
.public-back{margin-bottom:16px}
.public-card{background:#fff;border:1px solid var(--line);border-radius:30px;padding:clamp(22px,5vw,38px);box-shadow:var(--shadow)}
.public-card h1{font-size:clamp(32px,6vw,48px);letter-spacing:-.045em;margin:5px 0 8px}
.public-copy{color:var(--muted);margin:0 0 24px;line-height:1.55}
.public-addons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:7px}
.addon-choice{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:9px!important;border:1px solid var(--line);border-radius:13px;padding:10px;background:#FCFBF8}
.addon-choice input{width:auto!important;margin:0}
.addon-choice span{display:grid;gap:2px}.addon-choice small{color:var(--muted);font-size:10px}
.public-summary{display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--blue);border-radius:15px;padding:13px;margin:17px 0}
.public-summary span{font-size:11px;color:#526270}
.public-submit{width:100%;border-radius:14px;padding:13px}
.public-success{text-align:center;padding:30px 0 10px}.public-success h2{font-size:30px;margin:12px 0 7px}.public-success p{color:var(--muted)}
.success-mark{width:56px;height:56px;border-radius:50%;background:var(--green);display:grid;place-items:center;font-size:26px;font-weight:900;margin:0 auto}
.field-label{font-size:12px;font-weight:800;color:#5D5952}

@media(max-width:900px){
  .platform-customer-row{grid-template-columns:1fr 1fr}
  .platform-customer-row>div:first-child{grid-column:1/-1}
}
@media(max-width:620px){
  .public-addons{grid-template-columns:1fr}
  .platform-customer-row{grid-template-columns:1fr}
  .platform-customer-row>div:first-child{grid-column:auto}
  .booking-request-row{align-items:flex-start;flex-direction:column}
  .link-box{grid-template-columns:minmax(0,1fr) auto}
  .link-box button:first-of-type{display:none}
}


/* iPhone installed-app stability */
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior-x:none;
  -webkit-overflow-scrolling:touch;
}
*{box-sizing:border-box}
button,a,input,select,textarea,[role="button"]{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.passwordless-btn{
  width:100%;
  margin-top:10px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:13px;
  padding:11px 12px;
  font-weight:850;
}
.passwordless-btn.admin-shortcut{
  background:#FFF8D7;
  border-color:#E8DCA1;
}
@media(max-width:860px){
  input,select,textarea{
    font-size:16px!important;
    line-height:1.25;
  }
  .app-shell,.main,.view,.panel,.hero-card,.table-card,.public-shell,.public-main,.public-card{
    max-width:100%;
    min-width:0;
  }
  .main{
    width:100%;
    overflow-x:hidden;
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
    padding-bottom:max(30px,env(safe-area-inset-bottom));
  }
  .topbar{
    top:0;
    padding-top:max(16px,env(safe-area-inset-top));
    background:var(--ivory);
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .sidebar{
    height:100dvh;
    padding-top:max(24px,calc(env(safe-area-inset-top) + 18px));
    padding-bottom:max(24px,env(safe-area-inset-bottom));
  }
  .modal-backdrop{
    padding-top:max(12px,env(safe-area-inset-top));
    padding-bottom:max(12px,env(safe-area-inset-bottom));
  }
  .modal{
    width:min(100%,calc(100vw - 20px));
    max-width:calc(100vw - 20px);
  }
  .table-card{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}


/* Passwordless worker portal */
.worker-shell{min-height:100vh;background:var(--ivory);color:var(--ink)}
.worker-header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:16px max(16px,calc((100vw - 860px)/2));background:rgba(250,248,243,.96);border-bottom:1px solid var(--line)}
.worker-main{width:min(860px,calc(100% - 28px));margin:0 auto;padding:28px 0 60px}
.worker-hero{margin-bottom:18px}
.worker-hero h1{font-size:clamp(34px,7vw,52px);letter-spacing:-.05em;margin:5px 0 7px}
.worker-hero p:last-child{color:var(--muted)}
.worker-panel{margin-top:16px}
.worker-jobs-list{display:grid;gap:12px}
.worker-job-card{border:1px solid var(--line);background:#FCFBF8;border-radius:18px;padding:16px;display:grid;gap:12px}
.worker-job-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.worker-job-top>span:first-child{display:grid;gap:3px}
.worker-job-top small{font-size:10px;color:var(--muted)}
.worker-job-address{font-weight:800;line-height:1.4}
.worker-phone{display:inline-flex;width:max-content;text-decoration:none;color:var(--ink);font-size:11px;font-weight:850;border:1px solid var(--line);border-radius:999px;padding:7px 10px;background:#fff}
.worker-job-notes{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.worker-job-actions{display:flex;gap:7px;flex-wrap:wrap}
.worker-job-actions button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px;font-size:10px;font-weight:850}
.worker-job-actions .primary-btn{background:var(--ink);color:#fff}
.worker-permissions{display:flex;gap:8px;flex-wrap:wrap}
.worker-permissions>span{font-size:10px;font-weight:850;background:#F3F0E8;border:1px solid var(--line);border-radius:999px;padding:7px 9px}
.worker-permissions small{width:100%;color:var(--muted);line-height:1.5;margin-top:4px}
.worker-link-box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.worker-link-box input{min-width:0;font-size:12px}
@media(max-width:620px){
  .worker-main{width:min(100% - 20px,860px);padding-top:18px}
  .worker-header{padding-top:max(14px,env(safe-area-inset-top));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .worker-job-top{flex-direction:column}
  .worker-job-actions{display:grid;grid-template-columns:1fr 1fr}
  .worker-job-actions button{width:100%;min-height:42px}
  .worker-link-box{grid-template-columns:1fr}
}

.auth-secondary-btn{width:100%;margin-top:8px;border:0;background:transparent;color:var(--muted);padding:8px;font-size:11px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.passwordless-primary{width:100%;margin-top:10px}


/* Real booking slots + availability editor */
.public-slots-wrap{display:grid;gap:8px}
.public-slots{display:flex;flex-wrap:wrap;gap:8px}
.slot-btn{
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:999px;
  padding:9px 12px;
  font-size:11px;
  font-weight:850;
  min-width:78px;
}
.slot-btn.selected{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}
.availability-settings{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:14px;
}
.availability-settings label{
  display:grid;
  gap:6px;
  font-size:11px;
  font-weight:800;
  color:#5D5952;
}
.availability-settings select{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:10px 11px;
  font-size:12px;
  color:var(--ink);
}
.availability-week{display:grid;gap:8px}
.availability-day{
  display:grid;
  grid-template-columns:110px 1fr 1fr;
  gap:8px;
  align-items:center;
  padding:9px 0;
  border-top:1px solid var(--line);
}
.availability-day:first-child{border-top:0}
.availability-day .day-toggle{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  font-weight:850;
}
.availability-day input[type="time"]{
  width:100%;
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 9px;
  font-size:12px;
  background:#fff;
}
.availability-day.off input[type="time"]{opacity:.4}
@media(max-width:620px){
  .availability-settings{grid-template-columns:1fr}
  .availability-day{grid-template-columns:95px 1fr 1fr}
}


/* Public invoice */
.public-invoice-view{display:grid;gap:18px}
.invoice-totals{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.invoice-totals>div{display:flex;justify-content:space-between;gap:16px;align-items:center}
.invoice-totals span{color:var(--muted);font-size:13px}
.invoice-totals strong{font-size:18px}
.invoice-totals .invoice-balance{padding-top:10px;margin-top:2px;border-top:1px solid var(--line)}
.invoice-totals .invoice-balance strong{font-size:28px;letter-spacing:-.035em}
.invoice-payment-note{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#FCFBF8}
.invoice-payment-note>span{font-size:12px;color:var(--muted)}
.invoice-payment-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.invoice-payment-choices button{min-height:46px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;font-weight:900}
.invoice-payment-choices button.selected{background:var(--ink);color:#fff;border-color:var(--ink)}
.invoice-payment-choices button:disabled{cursor:default}
.invoice-payment-status{margin:0!important;font-size:12px;line-height:1.45;color:var(--muted)!important}
.payment-choice-note{display:block;margin-top:4px;color:#5F5835!important;font-weight:800}
@media(max-width:520px){.invoice-payment-choices{grid-template-columns:1fr 1fr 1fr}}

/* Customer quote review */
.public-quote-review{display:grid;gap:18px}
.quote-review-head h2{font-size:clamp(28px,5vw,40px);letter-spacing:-.04em;margin:10px 0 6px}
.quote-review-head p{margin:0;color:var(--muted);line-height:1.5}
.quote-review-items{display:grid;gap:8px}
.quote-review-item{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:#FCFBF8}
.quote-review-item>span{display:grid;gap:3px}
.quote-review-item small{font-size:10px;color:var(--muted)}
.quote-review-total{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:14px}
.quote-review-total strong{font-size:30px;letter-spacing:-.04em}
.quote-review-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quote-review-actions button{min-height:46px}
@media(max-width:520px){.quote-review-actions{grid-template-columns:1fr}}


/* Two-week calendar */
.calendar-panel{min-width:0}
.calendar-range-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:14px}
.calendar-range-head h3{margin:3px 0 0;font-size:21px;letter-spacing:-.025em}
.calendar-range-pill{display:inline-flex;align-items:center;background:#F3F0E8;border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-size:10px;font-weight:900;color:var(--muted)}
.two-week-calendar{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:7px;
  margin-bottom:20px;
  overflow:visible;
}
.two-week-calendar>span{
  min-width:0;
  min-height:88px;
  padding:9px 6px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#FCFBF8;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
}
.two-week-calendar>span em{font-style:normal;font-size:9px;font-weight:900;letter-spacing:.04em}
.two-week-calendar>span strong{font-size:21px;color:var(--ink);margin:3px 0 4px;line-height:1}
.two-week-calendar>span.has-jobs{background:var(--blue);border-color:var(--blue-strong)}
.two-week-calendar>span.selected{background:var(--yellow);border-color:#D9BF32}
.calendar-job-count{font-size:8px!important;font-weight:850;color:#4E5A65!important;white-space:nowrap}
.calendar-job-count.empty{color:#AAA49A!important;font-weight:700}
.calendar-jobs-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-top:4px;margin-bottom:9px}
.calendar-jobs-heading>span{font-size:10px;color:var(--muted)}
@media(max-width:620px){
  .two-week-calendar{
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:4px;
    overflow:visible!important;
  }
  .two-week-calendar>span{
    min-height:72px;
    padding:7px 2px;
    border-radius:10px;
  }
  .two-week-calendar>span em{font-size:7px}
  .two-week-calendar>span strong{font-size:18px}
  .calendar-job-count{font-size:7px!important}
  .calendar-range-head{align-items:center}
  .calendar-range-head h3{font-size:18px}
  .calendar-jobs-heading{align-items:flex-start;flex-direction:column;gap:3px}
}


/* Customer disputes */
.dispute-btn{
  min-height:46px;
  border:1px solid #191919;
  background:#FFF8D7;
  color:#191919;
  border-radius:12px;
  padding:10px 14px;
  font-weight:900;
}
.public-dispute-block{display:grid;gap:10px}
.public-dispute-form{
  display:grid;
  gap:12px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#FCFBF8;
}
.public-dispute-form label{
  display:grid;
  gap:7px;
  font-size:12px;
  font-weight:850;
  color:#5D5952;
}
.public-dispute-form textarea{
  width:100%;
  resize:vertical;
  min-height:96px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:11px 12px;
  background:#fff;
  color:var(--ink);
}
.public-dispute-actions{display:flex;gap:8px;justify-content:flex-end}
.dispute-status{margin:0!important}
.dispute-alert{
  display:block;
  margin-top:6px;
  padding:7px 9px;
  border-radius:10px;
  background:#FFF3C4;
  color:#5F4A00!important;
  font-size:10px!important;
  font-weight:850;
  line-height:1.4;
}
.quote-review-actions{grid-template-columns:1fr 1fr 1fr}
@media(max-width:520px){
  .quote-review-actions{grid-template-columns:1fr}
  .public-dispute-actions{display:grid;grid-template-columns:1fr 1fr}
}


/* Google review setting */
.review-settings-card{display:grid;gap:14px}
.settings-link-field{display:grid;gap:7px}
.settings-link-field>span{font-size:11px;font-weight:850;color:#5D5952}
.settings-link-field input{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:12px;
  padding:11px 12px;
  font-size:13px;
}
.settings-link-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:520px){
  .settings-link-actions{display:grid;grid-template-columns:1fr}
  .settings-link-actions button{width:100%}
}


/* Free access ending banner */
.trial-expiry-banner{
  position:relative;
  margin:0 0 18px;
  padding:15px 52px 15px 18px;
  border:1px solid #D8BE35;
  border-radius:16px;
  background:#FFF7C9;
  color:var(--ink);
  box-shadow:0 8px 22px rgba(25,25,25,.05);
}
.trial-expiry-banner>div{display:grid;gap:4px}
.trial-expiry-close{
  position:absolute;
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  border:0;
  border-radius:50%;
  background:rgba(25,25,25,.08);
  color:#191919;
  display:grid;
  place-items:center;
  padding:0;
  font-size:22px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
}
.trial-expiry-close:active{transform:scale(.96)}

.trial-expiry-kicker{
  font-size:10px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.08em;
  color:#6A5700;
}
.trial-expiry-banner strong{
  font-size:16px;
  line-height:1.3;
}
.trial-expiry-banner p{
  margin:0;
  color:#5E5643;
  font-size:13px;
  line-height:1.5;
}
@media(max-width:620px){
  .trial-expiry-banner{
    margin-bottom:14px;
    padding:13px 48px 13px 14px;
    border-radius:14px;
  }
  .trial-expiry-banner strong{font-size:15px}
  .trial-expiry-banner p{font-size:12px}
}

.auth-card{position:relative}
.auth-language-toggle{
  position:absolute;top:20px;right:20px;z-index:2;
  min-width:48px;height:42px;border:1.5px solid var(--ink);
  background:transparent;color:var(--ink);border-radius:999px;
  font-size:12px;font-weight:900;letter-spacing:.08em
}
@media(max-width:600px){
  .auth-language-toggle{top:16px;right:16px;min-width:46px;height:40px}
}

/* Stable logout transition */
body.tle-signing-out .sidebar,
body.tle-signing-out .app-shell,
body.tle-signing-out .auth-shell{transition:none!important;animation:none!important}
body.tle-signing-out .sidebar-logout-btn:active{transform:none}
.sidebar-logout-btn:disabled{opacity:.72;transform:none!important}

/* Keep logout anchored to the sidebar, independent of dashboard scrolling */
.sidebar>.brand-row,.sidebar>.workspace-chip,.sidebar>.trial-card,.sidebar>.sidebar-session-actions{flex-shrink:0}
@media(max-width:860px){
  .sidebar{overflow:hidden}
  .nav-list{overflow-y:auto;-webkit-overflow-scrolling:touch}
}

.owner-code-panel{display:grid;gap:14px;margin-top:8px}
.owner-code-panel[hidden]{display:none!important}
.owner-code-copy{margin:0;color:var(--muted);line-height:1.55}
.owner-code-panel .pill{justify-self:start}
#ownerAccessCode{
  text-align:center;
  font-size:28px;
  font-weight:900;
  letter-spacing:.22em;
  padding-left:calc(16px + .22em);
}
.owner-code-different{justify-self:center}

/* First-use guided onboarding */
.onboarding-layer{
  position:fixed;
  inset:0;
  z-index:9998;
  pointer-events:none;
}
.onboarding-layer[hidden]{display:none!important}
.onboarding-layer.welcome{
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(25,25,25,.18);
  pointer-events:auto;
}
.onboarding-card{
  position:fixed;
  right:18px;
  bottom:18px;
  width:min(390px,calc(100vw - 28px));
  padding:18px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface,#fff);
  box-shadow:0 18px 60px rgba(25,25,25,.16);
  pointer-events:auto;
}
.onboarding-layer.welcome .onboarding-card{
  position:relative;
  right:auto;
  bottom:auto;
  width:min(430px,100%);
}
.onboarding-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.onboarding-close{
  width:34px;
  height:34px;
  border:0;
  border-radius:999px;
  background:#f3efe7;
  color:var(--ink);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.onboarding-card h3{
  margin:0 0 8px;
  font-size:23px;
  line-height:1.08;
}
.onboarding-card p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}
.onboarding-card small{
  display:block;
  margin-top:10px;
  color:var(--muted);
}
.onboarding-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}
.onboarding-help-card .helper{max-width:720px}

@media(max-width:860px){
  .onboarding-card{
    left:12px;
    right:12px;
    bottom:max(12px,env(safe-area-inset-bottom));
    width:auto;
    border-radius:18px;
  }
  .onboarding-layer.welcome{
    padding:14px;
  }
  .onboarding-layer.welcome .onboarding-card{
    left:auto;
    right:auto;
    bottom:auto;
  }
  .onboarding-actions{
    align-items:stretch;
  }
}

/* Legal, support and feedback */
.sidebar-support-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:8px;
}
.sidebar-support-btn{
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:12px;
  padding:10px 9px;
  font-size:12px;
  font-weight:900;
}
.sidebar-support-btn:active{transform:translateY(1px)}

.app-legal-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-top:34px;
  padding:24px 0 8px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
}
.app-legal-footer>div{
  display:grid;
  gap:3px;
}
.app-legal-footer>div strong{color:var(--ink)}
.app-legal-footer nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px 14px;
}
.app-legal-footer a,
.app-legal-footer button,
.auth-legal-links a{
  color:var(--muted);
  text-decoration:none;
  border:0;
  background:transparent;
  padding:0;
  font:inherit;
  cursor:pointer;
}
.app-legal-footer a:hover,
.app-legal-footer button:hover,
.auth-legal-links a:hover{
  color:var(--ink);
  text-decoration:underline;
}
.auth-legal-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 12px;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:11px;
}
.support-contact-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.support-contact-grid a{
  display:grid;
  gap:4px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  color:var(--ink);
  text-decoration:none;
}
.support-contact-grid a span{
  color:var(--muted);
  font-size:12px;
}
.support-contact-grid a:hover{
  border-color:#bcb7ae;
}
@media(max-width:680px){
  .app-legal-footer{
    align-items:flex-start;
    flex-direction:column;
    padding-bottom:max(10px,env(safe-area-inset-bottom));
  }
  .app-legal-footer nav{
    justify-content:flex-start;
  }
  .support-contact-grid{
    grid-template-columns:1fr;
  }
}

.top-tool-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:999px;
  padding:9px 13px;
  font-size:12px;
  font-weight:900;
}
.top-tool-btn:hover{border-color:#bcb7ae}
.top-icon{display:none}
.signup-legal-note{
  margin:4px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
  text-align:center;
}
.signup-legal-note a{color:var(--ink);font-weight:800}
@media(max-width:860px){
  .top-actions{gap:6px;align-items:center}
  .top-tool-btn{
    width:36px;
    min-width:36px;
    height:36px;
    min-height:36px;
    padding:0;
    font-size:12px;
  }
  .top-tool-btn .top-label{display:none}
  .top-tool-btn .top-icon{display:inline}
  .top-actions .primary-btn{
    padding:9px 11px;
    font-size:11px;
  }
}
@media(max-width:430px){
  .topbar{gap:8px}
  .top-actions{gap:4px}
  .top-tool-btn{width:34px;min-width:34px;height:34px;min-height:34px}
  .top-actions .primary-btn{padding:8px 9px;font-size:10px}
}

/* Compact legal footer — intentionally quiet on mobile */
.app-legal-footer{
  margin-top:26px!important;
  padding:14px 0 4px!important;
  gap:10px!important;
  font-size:10px!important;
  line-height:1.35!important;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
.app-legal-footer>div{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:4px 7px!important;
  font-size:10px!important;
  line-height:1.35!important;
}
.app-legal-footer>div strong,
.app-legal-footer>div span{
  font-size:10px!important;
  line-height:1.35!important;
}
.app-legal-footer nav{
  gap:4px 10px!important;
  align-items:center!important;
}
.app-legal-footer nav a,
.app-legal-footer nav button{
  appearance:none!important;
  -webkit-appearance:none!important;
  color:#77736c!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  font-size:10px!important;
  font-weight:700!important;
  line-height:1.35!important;
  text-decoration:none!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
}
@media(max-width:680px){
  .app-legal-footer{
    display:block!important;
    margin-top:20px!important;
    padding:11px 0 max(6px,env(safe-area-inset-bottom))!important;
  }
  .app-legal-footer>div{
    margin-bottom:5px!important;
  }
  .app-legal-footer nav{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:flex-start!important;
    gap:3px 9px!important;
  }
  .app-legal-footer #footerHelpBtn,
  .app-legal-footer #footerFeedbackBtn{
    display:none!important;
  }
}

/* Cleaner mobile topbar */
.topbar-title{min-width:0}
@media(max-width:860px){
  .topbar-title{flex:1;min-width:0}
  .topbar-title .eyebrow{display:none}
  .topbar-title h1{
    font-size:21px;
    line-height:1.05;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin:0;
  }
  #backBtn{
    width:34px;
    min-width:34px;
    height:34px;
    padding:0;
    font-size:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  #backBtn::before{
    content:"←";
    font-size:18px;
    line-height:1;
  }
}
@media(max-width:430px){
  .topbar{
    padding-top:12px;
    padding-bottom:12px;
    margin-bottom:18px;
  }
  .topbar-title h1{font-size:19px}
}

/* Dynamic daypart hero */
.hero-card{
  position:relative;
  overflow:hidden;
}
.hero-card .hero-moment-icon{
  position:absolute;
  top:22px;
  right:26px;
  font-size:40px;
  line-height:1;
  transform-origin:center;
  pointer-events:none;
}
.hero-card.moment-morning .hero-moment-icon{
  animation:tleSunPulse 3.8s ease-in-out infinite;
}
.hero-card.moment-afternoon .hero-moment-icon{
  animation:tleDropFloat 2.8s ease-in-out infinite;
}
.hero-card.moment-night .hero-moment-icon{
  animation:tleMoonFloat 4s ease-in-out infinite;
}
@keyframes tleSunPulse{
  0%,100%{transform:scale(1) rotate(0)}
  50%{transform:scale(1.08) rotate(6deg)}
}
@keyframes tleDropFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(7px)}
}
@keyframes tleMoonFloat{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-5px) rotate(3deg)}
}
.hero-card.moment-morning{background:#FFF0B7}
.hero-card.moment-afternoon{background:var(--blue)}
.hero-card.moment-night{background:#E7E5FF}
.hero-card #todayMomentCopy{max-width:560px}

/* Primary platform admin never sees subscription UI */
body.platform-owner-no-billing [data-account-billing],
body.platform-owner-no-billing #trialExpiryBanner,
body.platform-owner-no-billing .trial-card{
  display:none!important;
}

/* Visitor-state dashboard */
.platform-states{
  display:grid;
  gap:8px;
}
.state-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#FCFBF8;
}
.state-row>span{
  display:grid;
  gap:2px;
}
.state-row>span:last-child{
  text-align:right;
}
.state-row small{
  color:var(--muted);
  font-size:11px;
}

@media(max-width:680px){
  .hero-card .hero-moment-icon{
    top:18px;
    right:18px;
    font-size:34px;
  }
  .hero-card h2{
    padding-right:46px;
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-moment-icon{animation:none!important}
}

/* Greeting + weather mini ecosystem */
#todayHeroCard{
  align-items:stretch;
  padding:26px;
}
.hero-ecosystem{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(350px,.85fr);
  gap:18px;
  align-items:stretch;
}
.hero-greeting-zone{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:8px 4px 8px 6px;
}
.hero-greeting-zone #todayHeroAction{
  margin-top:18px;
}
.weather-brief{
  display:grid;
  grid-template-columns:1fr;
  gap:9px;
  min-width:0;
  margin:0;
  padding:14px;
  border:1px solid rgba(25,25,25,.12);
  border-radius:20px;
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  cursor:pointer;
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.weather-brief:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.72);
  box-shadow:0 10px 26px rgba(25,25,25,.08);
}
.weather-brief:active{transform:scale(.992)}
.weather-brief:focus-visible{
  outline:3px solid rgba(25,25,25,.16);
  outline-offset:2px;
}
.weather-brief[hidden]{display:none!important}
.weather-module-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.weather-open-hint{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:0 0 30px;
  border:1px solid rgba(25,25,25,.12);
  border-radius:50%;
  background:rgba(255,255,255,.7);
  font-size:14px;
  font-weight:900;
}
.weather-now{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.weather-icon{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:14px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(25,25,25,.10);
  font-size:24px;
}
.weather-now-copy{
  display:grid;
  gap:2px;
  min-width:0;
}
.weather-now-copy>small{
  color:#68635C;
  font-size:9px;
  font-weight:900;
  letter-spacing:.10em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.weather-temp-row{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px;
}
.weather-temp-row strong{
  font-size:25px;
  letter-spacing:-.04em;
}
.weather-temp-row span,
#weatherFeels{
  color:#5F5A53;
  font-size:11px;
}
.weather-business-note{
  display:grid;
  gap:2px;
  padding:9px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(25,25,25,.09);
  line-height:1.28;
}
.weather-business-note.rain{background:rgba(238,245,255,.82)}
.weather-business-note strong{font-size:11px}
.weather-business-note span{
  color:#625E57;
  font-size:10px;
}
.weather-forecast{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}
.weather-day{
  display:grid;
  gap:1px;
  min-width:0;
  padding:7px 8px;
  border-radius:11px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(25,25,25,.08);
}
.weather-day span,
.weather-day small{
  color:#6E6961;
  font-size:9px;
}
.weather-day b{font-size:11px}
.weather-updated{
  color:#827D75;
  text-align:right;
  font-size:8px;
  margin-top:-2px;
}
@media(max-width:980px){
  .hero-ecosystem{
    grid-template-columns:1fr;
  }
  .hero-greeting-zone{
    padding-right:54px;
  }
  .weather-brief{
    max-width:none;
  }
}
@media(max-width:680px){
  #todayHeroCard{
    padding:18px;
  }
  .hero-ecosystem{
    gap:14px;
  }
  .hero-greeting-zone{
    padding:2px 0 0;
  }
  .hero-greeting-zone #todayHeroAction{
    width:100%;
    margin-top:14px;
  }
  .weather-brief{
    padding:12px;
    gap:8px;
    border-radius:17px;
  }
  .weather-icon{
    width:40px;
    height:40px;
    flex-basis:40px;
    font-size:22px;
  }
  .weather-temp-row strong{font-size:23px}
  .weather-business-note{
    padding:8px 9px;
  }
  .weather-day{
    padding:7px 6px;
  }
  .weather-updated{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .weather-brief{transition:none}
}

/* Context-aware greeting card colors */
.hero-card{
  transition:background-color .55s ease,border-color .55s ease,box-shadow .55s ease,transform .35s ease;
}
.hero-card.message-morning{background:#FFF0B7}
.hero-card.message-afternoon{background:var(--blue)}
.hero-card.message-jobs{background:#F8E6A0}
.hero-card.message-hydrate{background:#DDEFFF}
.hero-card.message-booking{background:#F6F1E8}
.hero-card.message-calm{background:#F8F5EE}
.hero-card.message-night{background:#E7E5FF}
.hero-card.message-rain{
  background:#D8E8FF;
  border-color:#B7D0F4;
  box-shadow:0 12px 36px rgba(63,96,143,.10);
}
.hero-card.message-rain .hero-moment-icon{
  animation:tleRainNudge 2.4s ease-in-out infinite;
}
@keyframes tleRainNudge{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(5px)}
}
@media (prefers-reduced-motion: reduce){
  .hero-card{transition:none}
}

/* Platform Admin activity feed */
.platform-activity-panel{
  min-width:0;
}
.activity-row{
  min-width:0;
}
.activity-row>span:first-child{
  min-width:0;
}
.activity-row strong{
  overflow-wrap:anywhere;
}
.activity-row small{
  overflow-wrap:anywhere;
}
.activity-value{
  display:grid;
  justify-items:end;
  gap:2px;
  flex:0 0 auto;
}
.activity-value strong{
  font-size:13px;
}
@media(max-width:620px){
  .activity-row{
    align-items:flex-start;
  }
  .activity-row time{
    white-space:nowrap;
  }
  .purchase-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
  }
}

/* Explicit confirmation on public invoice + quote */
.public-confirm-submit{
  width:100%;
  margin-top:14px;
}
.public-confirm-submit:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.quote-response-choice.selected,
.invoice-payment-choices button.selected{
  outline:3px solid rgba(25,25,25,.12);
  outline-offset:2px;
}
#declineQuoteBtn.selected{
  background:#191919;
  color:#fff;
}

/* Premium mobile records + dashboard polish */
.safe-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
}
.record-card-actions{
  display:grid!important;
  grid-template-columns:1fr;
  gap:10px!important;
}
.record-delete-btn{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid #E8C9C4!important;
  background:#FFF3F1!important;
  color:#873F37!important;
  border-radius:13px!important;
  min-height:40px;
  padding:10px 14px!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.01em;
}
.record-delete-btn:active{
  transform:scale(.985);
}
.record-primary{
  min-width:0;
}
.record-primary strong,
.record-primary small{
  display:block;
  min-width:0;
  overflow-wrap:anywhere;
}
.record-field{
  min-width:0;
}
.record-field>small{
  display:block;
  margin-top:3px;
}
#mileageTable .table-row{
  grid-template-columns:1.1fr .7fr 1.1fr .7fr;
}
#timeEntriesTable .table-row{
  grid-template-columns:1.25fr .7fr .7fr .8fr;
}

/* Premium Dashboard presence */
.presence-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin-bottom:20px;
  background:
    radial-gradient(circle at 8% 0%,rgba(242,216,91,.20),transparent 32%),
    #fff;
  overflow:hidden;
}
.presence-copy{
  min-width:0;
  max-width:410px;
}
.presence-copy h3{
  margin:0 0 6px;
  font-size:22px;
}
.presence-copy>p:last-child{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.presence-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(130px,1fr));
  gap:9px;
  width:min(600px,100%);
}
.presence-btn{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#FAF9F6;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.presence-btn:hover{
  transform:translateY(-1px);
  border-color:#CFC9BD;
  box-shadow:0 8px 20px rgba(25,25,25,.05);
}
.presence-btn.connected{
  background:#fff;
  border-color:#CFC8B8;
}
.presence-mark{
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:var(--ink);
  color:white;
  font-size:17px;
  font-weight:900;
}
.presence-btn>span:last-child{
  display:grid;
  min-width:0;
  gap:2px;
}
.presence-btn strong{
  font-size:12px;
}
.presence-btn small{
  color:var(--muted);
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Smooth premium interactions */
.view.view-enter{
  animation:tleViewIn .32s cubic-bezier(.22,.75,.22,1) both;
}
@keyframes tleViewIn{
  from{opacity:.35;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
.metric-card,
.panel,
.client-card,
.kanban-col article,
.job-block,
.mobile-record-card{
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.quick-card,
.primary-btn,
.dark-btn,
.ghost-btn,
.text-btn,
.card-actions button,
.record-actions button{
  transition:transform .15s ease,opacity .15s ease,background .15s ease,border-color .15s ease;
}
.quick-card:active,
.primary-btn:active,
.dark-btn:active,
.ghost-btn:active,
.card-actions button:active,
.record-actions button:active{
  transform:scale(.975);
}
[data-page="today"] .metric-card{
  box-shadow:0 8px 24px rgba(25,25,25,.025);
}
[data-page="today"] .panel{
  box-shadow:0 10px 32px rgba(25,25,25,.035);
}

@media(max-width:680px){
  /* Sections breathe more like a native app */
  .section-intro{
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:start!important;
    gap:14px!important;
    margin-bottom:18px!important;
  }
  .section-intro h2{
    font-size:clamp(29px,10vw,40px)!important;
    line-height:1.05!important;
  }
  .section-intro>.primary-btn,
  .section-intro>.section-actions{
    width:100%;
  }
  .section-intro>.primary-btn{
    min-height:50px;
  }

  /* Replace desktop tables with clean stacked cards */
  .table-card{
    border:0!important;
    background:transparent!important;
    overflow:visible!important;
    border-radius:0!important;
  }
  .table-card>.table-head{
    display:none!important;
  }
  #leadsTable,
  #invoicesTable,
  #mileageTable,
  #timeEntriesTable{
    display:grid;
    gap:12px;
  }
  .mobile-record-card{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    padding:16px!important;
    border:1px solid var(--line)!important;
    border-radius:19px!important;
    background:#fff!important;
    box-shadow:0 8px 24px rgba(25,25,25,.025);
  }
  .mobile-record-card>.record-primary{
    padding-bottom:10px;
    border-bottom:1px solid #EEEAE2;
  }
  .mobile-record-card>.record-primary strong{
    font-size:17px;
    line-height:1.2;
  }
  .mobile-record-card>.record-primary small{
    margin-top:4px;
    color:var(--muted);
    font-size:12px;
  }
  .mobile-record-card>.record-field{
    display:grid!important;
    grid-template-columns:minmax(80px,.75fr) minmax(0,1.25fr);
    align-items:center;
    gap:12px;
    min-height:28px;
    font-size:13px;
  }
  .mobile-record-card>.record-field:before{
    content:attr(data-label);
    color:#8A857D;
    font-size:10px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  .mobile-record-card>.record-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding-top:11px;
    border-top:1px solid #EEEAE2;
  }
  .mobile-record-card .safe-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    width:100%;
  }
  .mobile-record-card .safe-actions button{
    min-height:40px;
    width:100%;
    padding:9px 10px!important;
    font-size:11px!important;
    border-radius:12px!important;
  }
  .mobile-record-card .record-delete-btn,
  .record-card-actions .record-delete-btn{
    width:100%;
    min-height:44px;
    margin-top:2px;
  }

  /* Client cards */
  .client-grid{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .client-card{
    padding:17px!important;
    border-radius:19px!important;
  }
  .client-card .client-avatar{
    width:40px;
    height:40px;
    margin-bottom:4px;
  }
  .client-card>strong{
    font-size:18px;
  }
  .client-card>span,
  .client-card>small{
    overflow-wrap:anywhere;
  }
  .record-card-actions{
    padding-top:11px;
    margin-top:8px!important;
    border-top:1px solid #EEEAE2;
  }
  .record-card-actions .safe-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
  }
  .record-card-actions .safe-actions button{
    width:100%;
    min-height:40px;
    border-radius:12px!important;
  }

  /* Quotes: one clean column instead of a squeezed Kanban */
  .kanban{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .kanban-col{
    border-radius:18px!important;
    padding:12px!important;
  }
  .kanban-col h3{
    margin:2px 2px 9px!important;
  }
  .kanban-col article{
    padding:15px!important;
    border-radius:16px!important;
  }
  .kanban-col .record-card-actions{
    display:grid!important;
  }

  /* Calendar job list */
  .job-block{
    grid-template-columns:1fr!important;
    gap:8px!important;
    align-items:start!important;
    padding:15px!important;
    border-radius:17px!important;
  }
  .job-block>time{
    font-size:11px;
    color:var(--muted);
    font-weight:900;
  }
  .job-block>.record-actions{
    display:flex!important;
    grid-column:auto!important;
    justify-content:flex-start!important;
    padding-top:9px;
    border-top:1px solid #EEEAE2;
  }
  .buffer-block{
    padding-left:12px!important;
  }

  /* Booking request rows and other split rows */
  .booking-request-row{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .booking-request-row>.record-actions{
    justify-content:flex-start!important;
  }

  /* Dashboard feels lighter and faster */
  [data-page="today"] .metric-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  [data-page="today"] .metric-card{
    padding:16px!important;
    border-radius:18px!important;
    min-height:125px;
  }
  [data-page="today"] .metric-card span{
    font-size:11px!important;
    line-height:1.25;
  }
  [data-page="today"] .metric-card strong{
    font-size:29px!important;
    margin:9px 0 4px!important;
  }
  [data-page="today"] .metric-card small{
    font-size:11px;
    line-height:1.35;
  }
  [data-page="today"] .metric-card:last-child{
    grid-column:1/-1;
    min-height:auto;
  }
  .dashboard-grid,
  .dashboard-grid.lower{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .quick-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .quick-card{
    min-height:84px!important;
    padding:12px!important;
    border-radius:16px!important;
    font-size:20px!important;
  }
  .quick-card span{
    font-size:10px!important;
    line-height:1.25;
    margin-top:14px!important;
  }
  .timeline-item{
    grid-template-columns:62px 1fr!important;
    gap:9px!important;
  }
  .timeline-item>.status{
    grid-column:2;
  }

  /* Social / booking presence stays compact */
  .presence-panel{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    padding:18px!important;
    border-radius:20px!important;
  }
  .presence-actions{
    grid-template-columns:1fr!important;
    width:100%;
  }
  .presence-btn{
    min-height:56px;
    padding:10px 12px;
  }
}

@media(max-width:410px){
  [data-page="today"] .metric-grid{
    grid-template-columns:1fr 1fr!important;
  }
  .quick-grid{
    grid-template-columns:1fr 1fr!important;
  }
  .mobile-record-card .safe-actions,
  .record-card-actions .safe-actions{
    grid-template-columns:1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce){
  .view.view-enter{animation:none!important}
  .metric-card,.panel,.client-card,.kanban-col article,.job-block,.mobile-record-card,
  .quick-card,.primary-btn,.dark-btn,.ghost-btn,.text-btn,.card-actions button,.record-actions button,.presence-btn{
    transition:none!important;
  }
}

.table-head.mileage-head{grid-template-columns:1.1fr .7fr 1.1fr .7fr}
.table-head.time-head{grid-template-columns:1.25fr .7fr .7fr .8fr}

/* 2026-09-27 mobile list hardening + premium dashboard */
html,body{max-width:100%;overflow-x:hidden}
.app-shell,.main,.view,.table-card,.client-grid,.kanban,.dashboard-grid{min-width:0;max-width:100%}
.main{overflow-x:clip}

/* Destructive actions must never look like ordinary actions */
.record-delete-btn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  width:100%!important;
  min-height:48px!important;
  margin-top:4px!important;
  border:1px solid #E3B9B2!important;
  background:#FFF1EE!important;
  color:#8A352E!important;
  border-radius:14px!important;
  font-size:12px!important;
  font-weight:900!important;
}
.record-delete-btn::before{
  content:"Delete";
  display:none;
}
.record-delete-btn:hover{
  background:#FCE8E4!important;
  border-color:#D9A59C!important;
}
.record-actions>.record-delete-btn,
.record-card-actions>.record-delete-btn{
  border-top:1px solid transparent;
}

/* Dashboard polish */
[data-page="today"]{
  --dash-shadow:0 12px 38px rgba(25,25,25,.045);
}
[data-page="today"] .hero-card,
[data-page="today"] .weather-brief,
[data-page="today"] .metric-card,
[data-page="today"] .panel{
  box-shadow:var(--dash-shadow);
}
[data-page="today"] .hero-card,
[data-page="today"] .weather-brief,
[data-page="today"] .presence-panel{
  transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s ease,background-color .45s ease;
}
[data-page="today"] .hero-card:active,
[data-page="today"] .presence-btn:active{
  transform:scale(.992);
}
.presence-panel{
  border:1px solid #E9E4DA!important;
  box-shadow:0 14px 40px rgba(25,25,25,.04);
}
.presence-mark{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
#presenceInstagramBtn .presence-mark{font-family:Arial,sans-serif}
#presenceFacebookBtn .presence-mark{font-family:Arial,sans-serif}
.presence-btn.connected small::after{
  content:" · connected";
  opacity:.72;
}

@media(max-width:680px){
  /* No horizontal table UI on phones, anywhere */
  .table-card{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
  }
  .table-card .table-head{
    display:none!important;
  }
  .table-card .table-row:not(.table-head),
  #leadsTable .table-row,
  #invoicesTable .table-row,
  #mileageTable .table-row,
  #timeEntriesTable .table-row{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    gap:8px!important;
    padding:16px!important;
    overflow:hidden!important;
    border:1px solid var(--line)!important;
    border-radius:20px!important;
    background:#fff!important;
  }
  .table-card .table-row:not(.table-head)>*{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .mobile-record-card>.record-primary{
    display:grid!important;
    gap:3px!important;
    padding-bottom:11px!important;
  }
  .mobile-record-card>.record-primary strong{
    font-size:18px!important;
    letter-spacing:-.015em;
  }
  .mobile-record-card>.record-primary small{
    font-size:12px!important;
    line-height:1.35!important;
    overflow-wrap:anywhere!important;
  }
  .mobile-record-card>.record-field{
    display:flex!important;
    justify-content:space-between!important;
    align-items:flex-start!important;
    gap:14px!important;
    min-height:0!important;
    padding:3px 0!important;
    line-height:1.35!important;
  }
  .mobile-record-card>.record-field:before{
    flex:0 0 auto!important;
    max-width:42%!important;
  }
  .mobile-record-card>.record-field>strong,
  .mobile-record-card>.record-field>i,
  .mobile-record-card>.record-field>small{
    text-align:right!important;
    overflow-wrap:anywhere!important;
  }
  .mobile-record-card>.record-actions{
    margin-top:5px!important;
    padding-top:13px!important;
    gap:13px!important;
  }
  .mobile-record-card .safe-actions,
  .record-card-actions .safe-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .mobile-record-card .safe-actions button,
  .record-card-actions .safe-actions button{
    min-width:0!important;
    min-height:44px!important;
    padding:10px 8px!important;
    border-radius:13px!important;
    font-size:11px!important;
    white-space:normal!important;
    line-height:1.2!important;
  }
  .record-delete-btn{
    min-height:50px!important;
    margin-top:3px!important;
    border-radius:15px!important;
    font-size:12px!important;
  }

  /* Cards outside tables follow the same action hierarchy */
  .client-card,
  .kanban-col article{
    overflow:hidden!important;
  }
  .record-card-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  /* Cleaner dashboard rhythm */
  [data-page="today"] .hero-card{
    border-radius:26px!important;
    padding:24px 20px!important;
    margin-bottom:14px!important;
  }
  [data-page="today"] .hero-card h2{
    font-size:clamp(34px,10.5vw,48px)!important;
    line-height:.98!important;
    margin:18px 0 12px!important;
  }
  [data-page="today"] .hero-card p{
    font-size:15px!important;
    line-height:1.45!important;
    max-width:90%;
  }
  [data-page="today"] .hero-card .dark-btn{
    margin-top:18px!important;
    min-height:52px!important;
    border-radius:17px!important;
  }
  [data-page="today"] .weather-brief{
    box-shadow:0 10px 30px rgba(25,25,25,.035)!important;
  }
  [data-page="today"] .metric-grid{
    gap:9px!important;
  }
  [data-page="today"] .metric-card{
    min-height:112px!important;
    padding:15px!important;
  }
  [data-page="today"] .metric-card span{
    font-size:10px!important;
    text-transform:uppercase;
    letter-spacing:.055em;
  }
  [data-page="today"] .metric-card small{
    color:#8D887F!important;
  }

  /* Social + booking feels like a polished control center */
  .presence-panel{
    padding:16px!important;
    gap:12px!important;
    margin-top:4px!important;
  }
  .presence-copy h3{
    font-size:20px!important;
  }
  .presence-actions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .presence-btn{
    display:grid!important;
    justify-items:center!important;
    text-align:center!important;
    gap:7px!important;
    min-height:88px!important;
    padding:11px 7px!important;
    border-radius:16px!important;
  }
  .presence-mark{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    border-radius:12px!important;
  }
  .presence-btn>span:last-child{
    justify-items:center!important;
  }
  .presence-btn strong{
    font-size:10px!important;
  }
  .presence-btn small{
    max-width:88px;
    font-size:9px!important;
  }
  .presence-btn.connected small::after{
    content:""!important;
  }
}

@media(max-width:390px){
  .mobile-record-card .safe-actions,
  .record-card-actions .safe-actions{
    grid-template-columns:1fr!important;
  }
  .presence-actions{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* Premium dashboard stagger + 4-way presence controls */
.view[data-page="today"].view-enter > *{
  animation:tleDashboardRise .38s cubic-bezier(.2,.8,.2,1) both;
}
.view[data-page="today"].view-enter > *:nth-child(1){animation-delay:0ms}
.view[data-page="today"].view-enter > *:nth-child(2){animation-delay:35ms}
.view[data-page="today"].view-enter > *:nth-child(3){animation-delay:70ms}
.view[data-page="today"].view-enter > *:nth-child(4){animation-delay:105ms}
.view[data-page="today"].view-enter > *:nth-child(5){animation-delay:140ms}
.view[data-page="today"].view-enter > *:nth-child(6){animation-delay:175ms}
@keyframes tleDashboardRise{
  from{opacity:.15;transform:translateY(9px) scale(.995)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.presence-actions{
  grid-template-columns:repeat(4,minmax(105px,1fr))!important;
}
#presenceInstagramBtn.connected .presence-mark{background:#191919}
#presenceFacebookBtn.connected .presence-mark{background:#191919}
#presenceGoogleBtn.connected .presence-mark{background:#191919}
#presenceBookingBtn .presence-mark{background:#191919}
@media(max-width:680px){
  .presence-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .presence-btn{
    min-height:76px!important;
    grid-template-columns:36px minmax(0,1fr)!important;
    justify-items:start!important;
    text-align:left!important;
    padding:11px!important;
  }
  .presence-btn>span:last-child{
    justify-items:start!important;
  }
  .presence-btn small{
    max-width:none!important;
  }
  .view[data-page="today"].view-enter > *{
    animation-duration:.32s;
  }
}
@media (prefers-reduced-motion: reduce){
  .view[data-page="today"].view-enter > *{animation:none!important}
}

/* Dashboard tap targets */
.metric-link{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.metric-link:active{
  transform:scale(.985);
}
.metric-link:focus-visible{
  outline:3px solid rgba(25,25,25,.16);
  outline-offset:3px;
}
@media(hover:hover){
  .metric-link:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(25,25,25,.06);
  }
}

/* FINAL mobile record layout — vertical, readable, no compressed columns */
@media(max-width:680px){
  #leadsTable .mobile-record-card,
  #invoicesTable .mobile-record-card,
  #mileageTable .mobile-record-card,
  #timeEntriesTable .mobile-record-card{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    gap:0!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:18px!important;
    overflow:visible!important;
  }

  .mobile-record-card>.record-primary{
    width:100%!important;
    min-width:0!important;
    padding:0 0 13px!important;
    margin:0 0 11px!important;
    border-bottom:1px solid #ECE7DD!important;
  }
  .mobile-record-card>.record-primary strong{
    display:block!important;
    font-size:19px!important;
    line-height:1.15!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }
  .mobile-record-card>.record-primary small{
    display:block!important;
    margin-top:5px!important;
    font-size:12px!important;
    line-height:1.35!important;
    color:var(--muted)!important;
  }

  .mobile-record-card>.record-field{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    justify-content:stretch!important;
    align-items:start!important;
    gap:4px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:10px 0!important;
    border-bottom:1px solid #F1EDE5!important;
    text-align:left!important;
    font-size:14px!important;
    line-height:1.35!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  .mobile-record-card>.record-field:before{
    content:attr(data-label)!important;
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    color:#8A857D!important;
    font-size:9px!important;
    font-weight:900!important;
    letter-spacing:.11em!important;
    line-height:1.2!important;
    text-transform:uppercase!important;
    text-align:left!important;
  }

  .mobile-record-card>.record-field>strong,
  .mobile-record-card>.record-field>i,
  .mobile-record-card>.record-field>small{
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    text-align:left!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }

  /* Money must never break into vertical characters */
  #invoicesTable .record-field[data-label="Amount"]>strong,
  #invoicesTable .record-field[data-label="Monto"]>strong{
    display:block!important;
    width:max-content!important;
    max-width:100%!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    font-size:25px!important;
    line-height:1!important;
    letter-spacing:-.035em!important;
  }

  #invoicesTable .record-field .status{
    justify-self:start!important;
    width:max-content!important;
    white-space:nowrap!important;
  }

  #invoicesTable .payment-choice-note{
    display:block!important;
    margin-top:3px!important;
    color:#625A36!important;
    font-size:12px!important;
    line-height:1.35!important;
  }

  .mobile-record-card>.record-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    width:100%!important;
    min-width:0!important;
    padding:15px 0 0!important;
    margin:2px 0 0!important;
    border-top:0!important;
  }

  .mobile-record-card .safe-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
  }

  #invoicesTable .safe-actions{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .mobile-record-card .safe-actions button{
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    padding:11px 12px!important;
    border-radius:14px!important;
    font-size:12px!important;
    line-height:1.2!important;
    white-space:normal!important;
  }

  .mobile-record-card .record-delete-btn,
  .record-card-actions .record-delete-btn{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    min-height:52px!important;
    margin:7px 0 0!important;
    padding:13px 16px!important;
    border-radius:16px!important;
    font-size:13px!important;
    line-height:1.2!important;
  }

  /* Client + quote cards use the same safe action hierarchy */
  .client-card .record-card-actions,
  .kanban-col article .record-card-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    padding-top:14px!important;
    margin-top:10px!important;
    border-top:1px solid #ECE7DD!important;
  }
  .client-card .record-card-actions .safe-actions,
  .kanban-col article .record-card-actions .safe-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .client-card .record-delete-btn,
  .kanban-col article .record-delete-btn{
    width:100%!important;
    min-height:50px!important;
    margin-top:4px!important;
  }
}

@media(max-width:390px){
  .mobile-record-card .safe-actions,
  .client-card .record-card-actions .safe-actions,
  .kanban-col article .record-card-actions .safe-actions{
    grid-template-columns:minmax(0,1fr)!important;
  }
}


/* Animated dashboard greeting */
#todayHeroCard{
  isolation:isolate;
  border:1px solid rgba(25,25,25,.07);
  transition:background-color .8s ease,border-color .8s ease,box-shadow .8s ease;
}
#todayHeroCard.assistant-arrival{
  animation:tleGreetingEnter .58s cubic-bezier(.2,.8,.2,1) both;
}
#todayHeroCard::before{
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  right:-68px;
  top:-78px;
  border-radius:50%;
  background:rgba(255,255,255,.22);
  opacity:.42;
  pointer-events:none;
  z-index:0;
  animation:tleGreetingOrb 7s ease-in-out infinite;
}
#todayHeroCard::after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  left:-46px;
  bottom:-62px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  opacity:.35;
  pointer-events:none;
  z-index:0;
  animation:tleGreetingOrbSmall 9s ease-in-out infinite;
}
#todayHeroCard>div,
#todayHeroCard>#todayHeroAction,
#todayHeroCard>.hero-moment-icon{
  position:relative;
  z-index:1;
}
.hero-assistant-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}
@keyframes tleGreetingEnter{
  0%{opacity:0;transform:translateY(10px) scale(.99)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes tleGreetingColorCycle{
  0%,24.999%{background-color:#FFF0B7}
  25%,49.999%{background-color:#DDEBFA}
  50%,74.999%{background-color:#F8F5EE}
  75%,99.999%{background-color:#E7E5FF}
  100%{background-color:#FFF0B7}
}
@keyframes tleGreetingOrb{
  0%,100%{transform:translate3d(0,0,0) scale(.95)}
  50%{transform:translate3d(-18px,16px,0) scale(1.08)}
}
@keyframes tleGreetingOrbSmall{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(15px,-10px,0)}
}
@media (prefers-reduced-motion: reduce){
  #todayHeroCard,
  #todayHeroCard::before,
  #todayHeroCard::after,
  .trial-card{
    animation:none!important;
  }
}

/* Compact grouped visitor activity */
#platformRecentVisits{
  gap:0;
}
.visit-group{
  padding:14px 0;
  border-top:1px solid var(--line);
}
.visit-group:first-child{
  border-top:0;
  padding-top:4px;
}
.visit-group-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:start;
}
.visit-group-main>span{
  min-width:0;
  display:grid;
  gap:4px;
}
.visit-group-main strong{
  font-size:15px;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.visit-group-main small{
  font-size:11px;
  color:var(--muted);
}
.visit-group-main>time{
  font-size:10px;
  color:var(--muted);
  white-space:nowrap;
}
.visit-group-details{
  margin-top:8px;
}
.visit-group-details summary{
  width:max-content;
  list-style:none;
  cursor:pointer;
  font-size:10px;
  font-weight:900;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 9px;
  background:#fff;
}
.visit-group-details summary::-webkit-details-marker{display:none}
.visit-group-details summary:after{content:" ↓"}
.visit-group-details[open] summary:after{content:" ↑"}
.visit-detail-list{
  margin-top:9px;
  padding:9px 10px;
  border-radius:12px;
  background:var(--ivory);
  display:grid;
  gap:7px;
}
.visit-detail-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  font-size:11px;
}
.visit-detail-row span{
  color:var(--ink);
  overflow-wrap:anywhere;
}
.visit-detail-row time{
  color:var(--muted);
  font-size:9px;
  white-space:nowrap;
}
@media(max-width:620px){
  .visit-group{
    padding:13px 0;
  }
  .visit-group-main{
    gap:10px;
  }
  .visit-group-main strong{
    font-size:14px;
  }
}

/* Admin activity controls */
.activity-panel-head{
  align-items:flex-start;
  gap:12px;
}
.activity-refresh-btn,
.activity-archive-btn{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:999px;
  font:900 10px/1 Futura,"Avenir Next",Arial,sans-serif;
  padding:8px 10px;
  cursor:pointer;
  white-space:nowrap;
}
.activity-refresh-btn{
  background:#191919;
  color:#fff;
  border-color:#191919;
}
.activity-refresh-btn:disabled,
.activity-archive-btn:disabled{
  opacity:.55;
  cursor:wait;
}
.activity-row-actions{
  display:grid;
  justify-items:end;
  gap:7px;
  flex:0 0 auto;
}
.activity-row-actions time{
  white-space:nowrap;
}
.visit-group-actions{
  margin-top:8px;
  display:flex;
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
.visit-group-actions .visit-group-details{
  margin-top:0;
}
.activity-archive-btn{
  color:#655F57;
}
@media(max-width:620px){
  .activity-refresh-btn{
    padding:8px 11px;
  }
  .activity-row-actions{
    gap:6px;
  }
}

/* Global installed-app refresh */
.app-refresh-btn .top-icon{
  display:inline-block;
  font-size:18px;
  line-height:1;
  transform-origin:50% 50%;
}
.app-refresh-btn.is-refreshing .top-icon{
  animation:tleManualRefreshSpin .8s linear infinite;
}
@keyframes tleManualRefreshSpin{
  to{transform:rotate(360deg)}
}
@media(prefers-reduced-motion:reduce){
  .app-refresh-btn.is-refreshing .top-icon{animation:none}
}

/* Inquiry notification bell */
.top-actions{position:relative;align-items:center}
.notification-shell{position:relative}
.notification-bell-btn{position:relative}
.notification-bell-icon{
  display:inline-block;
  position:relative;
  width:18px;
  height:18px;
  font-size:0;
}
.notification-bell-icon:before{
  content:"";
  position:absolute;
  left:4px;
  top:2px;
  width:10px;
  height:11px;
  border:2px solid currentColor;
  border-radius:7px 7px 5px 5px;
  border-bottom-width:2px;
}
.notification-bell-icon:after{
  content:"";
  position:absolute;
  left:8px;
  bottom:0;
  width:4px;
  height:2px;
  border-radius:999px;
  background:currentColor;
}
.notification-bell-btn.has-notifications{
  background:#FFF3A8;
  border-color:#D4BC3E;
}
.notification-badge{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:17px;
  height:17px;
  padding:0 4px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#191919;
  color:#fff;
  border:2px solid #FAF8F3;
  font-size:8px;
  line-height:1;
  font-weight:900;
}
.notification-popover{
  position:absolute;
  z-index:90;
  right:0;
  top:calc(100% + 10px);
  width:min(360px,calc(100vw - 30px));
  max-height:min(560px,70vh);
  overflow:auto;
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 22px 60px rgba(25,25,25,.16);
  padding:12px;
}
.notification-popover-head{
  position:sticky;
  top:-12px;
  z-index:2;
  background:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 8px 11px;
  border-bottom:1px solid var(--line);
}
.notification-popover-head>div{display:grid;gap:2px}
.notification-popover-head small{
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  color:var(--muted);
}
.notification-popover-head strong{font-size:17px}
.notification-close-btn{
  width:30px;
  height:30px;
  border:0;
  border-radius:50%;
  background:var(--ivory);
  font-size:20px;
  line-height:1;
}
.notification-list{display:grid}
.notification-item{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  padding:13px 8px;
  display:grid;
  grid-template-columns:8px minmax(0,1fr) auto;
  gap:10px;
  align-items:start;
  text-align:left;
  cursor:pointer;
}
.notification-item:last-child{border-bottom:0}
.notification-item.is-new{background:#FFFDF2}
.notification-dot{
  width:7px;
  height:7px;
  margin-top:6px;
  border-radius:50%;
  background:#D6D1C8;
}
.notification-item.is-new .notification-dot{background:var(--yellow);box-shadow:0 0 0 2px #191919}
.notification-copy{display:grid;gap:3px;min-width:0}
.notification-copy strong{font-size:13px;overflow-wrap:anywhere}
.notification-copy small{font-size:10px;color:#514D46;font-weight:800}
.notification-copy em{font-size:9px;color:var(--muted);font-style:normal}
.notification-arrow{align-self:center;font-size:14px}
.notification-empty{
  padding:22px 12px;
  display:grid;
  gap:4px;
  text-align:center;
}
.notification-empty strong{font-size:13px}
.notification-empty span{font-size:10px;color:var(--muted)}
@media(max-width:620px){
  .notification-popover{
    position:fixed;
    top:72px;
    right:12px;
    left:12px;
    width:auto;
    max-height:66vh;
  }
}

/* Inquiry detail opened from notification bell */
.inquiry-detail-card{
  display:grid;
  gap:16px;
}
.inquiry-detail-service{
  padding:18px;
  border:1px solid var(--ink);
  border-radius:18px;
  background:var(--yellow);
  display:grid;
  gap:5px;
}
.inquiry-detail-service>span{
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}
.inquiry-detail-service>strong{
  font-family:Prompt,Arial,sans-serif;
  font-size:25px;
  line-height:1.05;
  letter-spacing:-.03em;
}
.inquiry-detail-service>small{
  width:max-content;
  max-width:100%;
  border:1px solid rgba(25,25,25,.18);
  border-radius:999px;
  background:rgba(255,255,255,.52);
  padding:5px 8px;
  font-size:9px;
  font-weight:900;
  text-transform:capitalize;
}
.inquiry-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.inquiry-detail-grid>div{
  min-width:0;
  padding:13px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  display:grid;
  gap:4px;
}
.inquiry-detail-grid>div.full{
  grid-column:1/-1;
}
.inquiry-detail-grid small{
  font-size:9px;
  font-weight:900;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.inquiry-detail-grid strong,
.inquiry-detail-grid p{
  margin:0;
  font-size:12px;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.inquiry-detail-actions{
  flex-wrap:wrap;
}
@media(max-width:620px){
  .inquiry-detail-grid{
    grid-template-columns:1fr;
  }
  .inquiry-detail-grid>div.full{
    grid-column:auto;
  }
  .inquiry-detail-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .inquiry-detail-actions button{
    width:100%;
  }
}

/* Soft animated app atmosphere — Safari-safe, no fixed layers */
.app-shell{
  position:relative;
  isolation:auto;
  min-height:100vh;
  min-height:100dvh;
  background-color:#EEF9FF;
  background-image:
    radial-gradient(circle at 15% 18%,rgba(255,255,255,.34) 0 44px,rgba(178,226,250,.10) 45px 64px,transparent 65px),
    radial-gradient(circle at 82% 28%,rgba(255,255,255,.24) 0 30px,rgba(178,226,250,.08) 31px 46px,transparent 47px),
    radial-gradient(circle at 74% 72%,rgba(255,255,255,.22) 0 38px,rgba(178,226,250,.07) 39px 56px,transparent 57px),
    radial-gradient(circle at 24% 82%,rgba(255,255,255,.18) 0 24px,rgba(178,226,250,.06) 25px 38px,transparent 39px),
    linear-gradient(180deg,#F5FCFF 0%,#EAF7FF 52%,#F7FCFF 100%);
  background-size:
    520px 520px,
    440px 440px,
    600px 600px,
    460px 460px,
    100% 100%;
  background-repeat:repeat;
  background-position:
    0 0,
    180px 70px,
    90px 260px,
    300px 340px,
    0 0;
  animation:tleSafeBubbleBackground 36s ease-in-out infinite alternate;
}
.app-shell>.main{
  position:relative;
}
.main{
  background:transparent!important;
}
@keyframes tleSafeBubbleBackground{
  from{
    background-position:
      0 0,
      180px 70px,
      90px 260px,
      300px 340px,
      0 0;
  }
  to{
    background-position:
      18px -16px,
      164px 88px,
      108px 240px,
      284px 324px,
      0 0;
  }
}

/* Live seasonal + current-weather animation inside greeting card */
#todayHeroCard{
  position:relative;
  overflow:hidden;
}
.hero-weather-effects{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  border-radius:inherit;
}
.hero-season-layer,
.hero-precip-layer{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.hero-season-layer{
  opacity:.26;
}
.hero-precip-layer{
  opacity:.48;
}
#todayHeroCard .hero-ecosystem,
#todayHeroCard>.hero-moment-icon{
  position:relative;
  z-index:2;
}

/* seasonal washes stay subtle so text remains the focus */
#todayHeroCard[data-season="spring"] .hero-season-layer{
  background:
    radial-gradient(circle at 84% 18%,rgba(255,255,255,.36),transparent 26%),
    linear-gradient(135deg,rgba(233,251,242,.22),transparent 58%);
}
#todayHeroCard[data-season="summer"] .hero-season-layer{
  background:
    radial-gradient(circle at 82% 10%,rgba(255,243,174,.33),transparent 24%),
    linear-gradient(135deg,rgba(229,247,255,.18),transparent 58%);
}
#todayHeroCard[data-season="fall"] .hero-season-layer{
  background:
    radial-gradient(circle at 86% 12%,rgba(246,218,166,.30),transparent 24%),
    linear-gradient(135deg,rgba(255,239,215,.18),transparent 58%);
}
#todayHeroCard[data-season="winter"] .hero-season-layer{
  background:
    radial-gradient(circle at 82% 10%,rgba(255,255,255,.42),transparent 26%),
    linear-gradient(135deg,rgba(226,241,255,.24),transparent 58%);
}

.season-particle,
.rain-drop,
.snow-flake{
  position:absolute;
  left:var(--x);
  top:-18px;
  transform:scale(var(--scale));
  animation-delay:var(--delay);
  animation-duration:var(--dur);
  animation-iteration-count:infinite;
  animation-timing-function:linear;
}
.season-particle{
  width:8px;
  height:8px;
  border-radius:55% 45% 60% 40%;
  opacity:.42;
}
.season-spring .season-particle{
  background:rgba(255,255,255,.72);
  box-shadow:0 0 0 1px rgba(188,226,207,.22);
  animation-name:tleSeasonFloat;
}
.season-summer .season-particle{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,245,184,.48);
  filter:blur(.2px);
  animation-name:tleSeasonGlow;
}
.season-fall .season-particle{
  width:9px;
  height:6px;
  border-radius:70% 20% 70% 30%;
  background:rgba(211,159,96,.32);
  animation-name:tleSeasonLeaf;
}
.season-winter .season-particle{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.62);
  animation-name:tleSeasonFloat;
}

.rain-drop{
  width:1.5px;
  height:24px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(113,174,214,.72));
  animation-name:tleLiveRain;
}
.intensity-light .rain-drop{height:16px;opacity:.46}
.intensity-heavy .rain-drop{height:30px;opacity:.72}
.snow-flake{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.88);
  box-shadow:0 0 7px rgba(255,255,255,.38);
  animation-name:tleLiveSnow;
}
.intensity-heavy .snow-flake{width:9px;height:9px}

#todayHeroCard[data-weather="rain"]{
  box-shadow:inset 0 0 0 999px rgba(205,230,247,.06);
}
#todayHeroCard[data-weather="snow"]{
  box-shadow:inset 0 0 0 999px rgba(241,248,255,.08);
}

@keyframes tleLiveRain{
  0%{transform:translate3d(0,-34px,0) rotate(8deg) scale(var(--scale));opacity:0}
  8%{opacity:.75}
  100%{transform:translate3d(var(--drift),430px,0) rotate(8deg) scale(var(--scale));opacity:.12}
}
@keyframes tleLiveSnow{
  0%{transform:translate3d(0,-22px,0) scale(var(--scale));opacity:0}
  12%{opacity:.9}
  100%{transform:translate3d(var(--drift),430px,0) scale(var(--scale));opacity:.10}
}
@keyframes tleSeasonFloat{
  0%{transform:translate3d(0,-12px,0) rotate(0deg) scale(var(--scale));opacity:0}
  14%{opacity:.42}
  100%{transform:translate3d(var(--drift),390px,0) rotate(160deg) scale(var(--scale));opacity:0}
}
@keyframes tleSeasonLeaf{
  0%{transform:translate3d(0,-12px,0) rotate(0deg) scale(var(--scale));opacity:0}
  15%{opacity:.42}
  100%{transform:translate3d(var(--drift),370px,0) rotate(420deg) scale(var(--scale));opacity:0}
}
@keyframes tleSeasonGlow{
  0%,100%{transform:translate3d(0,42px,0) scale(var(--scale));opacity:.12}
  50%{transform:translate3d(var(--drift),190px,0) scale(calc(var(--scale) * 1.22));opacity:.38}
}

@media(max-width:680px){
  .app-shell{
    background-size:
      420px 420px,
      360px 360px,
      500px 500px,
      380px 380px,
      100% 100%;
  }
  .hero-season-layer{opacity:.20}
  .hero-precip-layer{opacity:.40}
}
@media(prefers-reduced-motion:reduce){
  .app-shell,
  .season-particle,
  .rain-drop,
  .snow-flake{
    animation:none!important;
  }
}



/* Deterministic shell visibility — Safari-safe */
body.shell-auth #appShell,
body.shell-auth #workerShell,
body.shell-auth #publicShell{
  display:none!important;
}
body.shell-auth #authShell{
  display:grid!important;
}

body.shell-app #authShell,
body.shell-app #workerShell,
body.shell-app #publicShell{
  display:none!important;
}
body.shell-app #appShell{
  display:grid!important;
}

body.shell-worker #authShell,
body.shell-worker #appShell,
body.shell-worker #publicShell{
  display:none!important;
}
body.shell-worker #workerShell{
  display:block!important;
}

body.shell-public #authShell,
body.shell-public #appShell,
body.shell-public #workerShell{
  display:none!important;
}
body.shell-public #publicShell{
  display:block!important;
}

@media(max-width:860px){
  body.shell-app #appShell{
    display:block!important;
    width:100%!important;
    min-height:100vh!important;
    margin:0!important;
    padding:0!important;
  }
  body.shell-app #appShell>.main{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding-left:max(12px,env(safe-area-inset-left))!important;
    padding-right:max(12px,env(safe-area-inset-right))!important;
  }
  body.shell-app #appShell>.sidebar{
    width:min(84vw,300px)!important;
    max-width:300px!important;
    left:calc(-1 * min(84vw,300px) - 20px)!important;
  }
  body.shell-app #appShell>.sidebar.open{
    left:0!important;
  }
}

/* Mobile sidebar must never participate in document flow */
@media(max-width:860px){
  body.shell-app #appShell>.sidebar{
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    left:calc(-1 * min(84vw,300px) - 20px)!important;
    width:min(84vw,300px)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    z-index:40!important;
  }
  body.shell-app #appShell>.sidebar.open{
    left:0!important;
  }
  body.shell-app #appShell>.main{
    position:relative!important;
    top:0!important;
    margin:0!important;
    width:100%!important;
  }
}

/* Persistent mobile navigation trigger */
@media(max-width:860px){
  body.shell-app #menuToggle{
    display:grid!important;
    place-items:center;
    position:fixed!important;
    top:max(14px,calc(env(safe-area-inset-top) + 8px))!important;
    left:max(12px,env(safe-area-inset-left))!important;
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0!important;
    margin:0!important;
    border:1px solid rgba(25,25,25,.12)!important;
    border-radius:14px!important;
    background:rgba(250,248,243,.94)!important;
    color:#191919!important;
    box-shadow:0 8px 24px rgba(25,25,25,.08)!important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    z-index:65!important;
    line-height:1!important;
    font-size:22px!important;
  }
  body.shell-app .topbar{
    padding-left:52px!important;
  }
  body.shell-app #menuToggle:active{
    transform:scale(.96);
  }
}
@media(max-width:430px){
  body.shell-app #menuToggle{
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    border-radius:13px!important;
  }
  body.shell-app .topbar{
    padding-left:48px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  body.shell-app #menuToggle{transition:none!important}
}

/* Tap-outside drawer close layer */
.sidebar-scrim{
  display:none;
}
@media(max-width:860px){
  body.shell-app .sidebar-scrim:not([hidden]){
    display:block!important;
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:rgba(25,25,25,.14)!important;
    backdrop-filter:blur(1.5px);
    -webkit-backdrop-filter:blur(1.5px);
    z-index:39!important;
    cursor:default;
  }
  body.shell-app.sidebar-is-open{
    overflow:hidden;
  }
}

/* Clock-synced 15-minute card palettes */
#todayHeroCard.quarter-color-0{background-color:#FFF0B7}
#todayHeroCard.quarter-color-1{background-color:#DDEBFA}
#todayHeroCard.quarter-color-2{background-color:#F8F5EE}
#todayHeroCard.quarter-color-3{background-color:#E7E5FF}

.trial-card.quarter-color-0{
  background-color:#FFFDF5;
  border-color:#191919;
  box-shadow:0 0 0 rgba(25,25,25,0);
}
.trial-card.quarter-color-1{
  background-color:#EAF4FF;
  border-color:#8DB6DC;
  box-shadow:0 8px 24px rgba(141,182,220,.16);
}
.trial-card.quarter-color-2{
  background-color:#FFF3A8;
  border-color:#D4BC3E;
  box-shadow:0 8px 24px rgba(242,216,91,.18);
}
.trial-card.quarter-color-3{
  background-color:#F2F0FF;
  border-color:#B7B1DE;
  box-shadow:0 8px 24px rgba(183,177,222,.16);
}

[data-page="platform-admin"]>.metric-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.suspected-traffic-row .status{
  white-space:nowrap;
}
@media(max-width:860px){
  [data-page="platform-admin"]>.metric-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:430px){
  [data-page="platform-admin"]>.metric-grid{
    grid-template-columns:1fr 1fr;
  }
}

/* Footer share CTA */
.footer-share-app-btn{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid #191919!important;
  border-radius:999px!important;
  background:#191919!important;
  color:#fff!important;
  padding:9px 14px!important;
  margin-left:auto!important;
  min-height:38px!important;
  font-size:11px!important;
  font-weight:900!important;
  line-height:1!important;
  cursor:pointer;
}
.footer-share-app-btn:hover{
  color:#fff!important;
  text-decoration:none!important;
  transform:translateY(-1px);
}
.footer-share-app-btn span:first-child{
  font-size:14px;
  line-height:1;
}
@media(max-width:680px){
  .footer-share-app-btn{
    width:100%!important;
    margin:8px 0 0!important;
    min-height:42px!important;
  }
}


/* 2026-09-27 — contextual greeting card states */
#todayHeroCard.quarter-color-0{background-color:#F3EBCB}
#todayHeroCard.quarter-color-1{background-color:#E7EEF2}
#todayHeroCard.quarter-color-2{background-color:#F3F0EA}
#todayHeroCard.quarter-color-3{background-color:#ECE9F2}

#todayHeroCard.message-rain{
  background:linear-gradient(135deg,#DCE8EC 0%,#EEF2F1 58%,#E7E1D4 100%)!important;
}
#todayHeroCard.message-jobs{
  background:linear-gradient(135deg,#F2E8C6 0%,#F7F3E8 100%)!important;
}
#todayHeroCard.message-booking{
  background:linear-gradient(135deg,#E3EDF2 0%,#F5F3ED 100%)!important;
}
#todayHeroCard.message-quotes{
  background:linear-gradient(135deg,#E8EAF1 0%,#F4F1EA 100%)!important;
}
#todayHeroCard.message-invoice{
  background:linear-gradient(135deg,#ECE5D9 0%,#F6F2EB 100%)!important;
}
#todayHeroCard.message-hydrate{
  background:linear-gradient(135deg,#E2EDF1 0%,#F5F2E9 100%)!important;
}
#todayHeroCard.message-night{
  background:linear-gradient(135deg,#E8E7F0 0%,#F3F0EA 100%)!important;
}
#todayHeroCard[data-daypart="early"] #todayGreeting,
#todayHeroCard[data-daypart="morning"] #todayGreeting,
#todayHeroCard[data-daypart="midday"] #todayGreeting,
#todayHeroCard[data-daypart="afternoon"] #todayGreeting,
#todayHeroCard[data-daypart="wrap"] #todayGreeting,
#todayHeroCard[data-daypart="evening"] #todayGreeting,
#todayHeroCard[data-daypart="late"] #todayGreeting{
  letter-spacing:-.035em;
}
#todayHeroCard #todayMomentCopy{
  max-width:640px;
  line-height:1.55;
}
@media(max-width:720px){
  #todayHeroCard #todayMomentCopy{font-size:15px;line-height:1.5}
  #todayHeroCard .hero-greeting-zone #todayHeroAction{width:100%;justify-content:center}
}

/* Auth recovery action */
.auth-links .auth-retry{
  border:1px solid var(--ink);
  background:#F4F1EA;
  border-radius:999px;
  padding:8px 12px;
}
.auth-links .auth-retry[hidden]{display:none!important}
@media(max-width:620px){
  .auth-links{flex-wrap:wrap;align-items:center}
  .auth-links .auth-retry{order:-1;width:100%;text-align:center}
}


/* 2026-09-27 — unified app card palette */
.app-shell{--unified-card-bg:#F3F0EA}
.app-shell.quarter-color-0{--unified-card-bg:#F3EBCB}
.app-shell.quarter-color-1{--unified-card-bg:#E7EEF2}
.app-shell.quarter-color-2{--unified-card-bg:#F3F0EA}
.app-shell.quarter-color-3{--unified-card-bg:#ECE9F2}
.app-shell[data-card-mood="rain"]{--unified-card-bg:linear-gradient(135deg,#DCE8EC 0%,#EEF2F1 58%,#E7E1D4 100%)}
.app-shell[data-card-mood="jobs"]{--unified-card-bg:linear-gradient(135deg,#F2E8C6 0%,#F7F3E8 100%)}
.app-shell[data-card-mood="booking"]{--unified-card-bg:linear-gradient(135deg,#E3EDF2 0%,#F5F3ED 100%)}
.app-shell[data-card-mood="quotes"]{--unified-card-bg:linear-gradient(135deg,#E8EAF1 0%,#F4F1EA 100%)}
.app-shell[data-card-mood="invoice"]{--unified-card-bg:linear-gradient(135deg,#ECE5D9 0%,#F6F2EB 100%)}
.app-shell[data-card-mood="hydrate"]{--unified-card-bg:linear-gradient(135deg,#E2EDF1 0%,#F5F2E9 100%)}
.app-shell[data-card-mood="night"]{--unified-card-bg:linear-gradient(135deg,#E8E7F0 0%,#F3F0EA 100%)}

.app-shell .metric-card,
.app-shell .quick-card,
.app-shell .table-card,
.app-shell .client-card,
.app-shell .service-card,
.app-shell .supply-card,
.app-shell .share-access-card,
.app-shell .timer-card,
.app-shell .empty-card,
.app-shell .mobile-record-card,
.app-shell .review-settings-card,
.app-shell .support-contact-card,
.app-shell .worker-job-card,
.app-shell .trial-card,
.app-shell .inquiry-detail-card,
.app-shell .install-card,
.app-shell .onboarding-help-card{
  background:var(--unified-card-bg)!important;
  border-color:rgba(87,81,72,.18)!important;
  box-shadow:none!important;
  transition:background .28s ease,border-color .28s ease!important;
}

/* Compact share action — never blocks primary controls */
.footer-share-app-btn{
  width:auto!important;
  max-width:max-content!important;
  min-height:34px!important;
  padding:7px 10px!important;
  gap:5px!important;
  font-size:10px!important;
  font-weight:800!important;
  margin-left:auto!important;
  align-self:center!important;
  position:static!important;
  inset:auto!important;
  z-index:auto!important;
}
.footer-share-app-btn span:first-child{font-size:12px!important}
@media(max-width:680px){
  .footer-share-app-btn{
    width:auto!important;
    max-width:max-content!important;
    min-height:34px!important;
    margin:7px 0 0!important;
    padding:7px 10px!important;
    align-self:flex-start!important;
  }
}

/* Password visibility toggle */
.password-input-wrap{position:relative;display:block}
.password-input-wrap input{width:100%;padding-right:48px}
.password-toggle{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--ink);
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:17px;
  line-height:1;
}
.password-toggle:hover{background:rgba(25,25,25,.06)}
.password-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}