/* Isolated interactive demo. All displayed customers are examples. */
:root{--forest:#0b7969;--ink:#15382d;--muted:#60786e;--edge:#d9e8df;--paper:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;margin:0;background:#eaf4ee;color:var(--ink)}
button,input,select{font:inherit}button{cursor:pointer}
.demo-app{max-width:990px;margin:24px auto;background:#fff;border:1px solid var(--edge);box-shadow:0 23px 75px rgba(15,75,57,.1);border-radius:22px;overflow:hidden}
.demo-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:17px clamp(16px,4vw,30px);background:#fcfefd;border-bottom:1px solid #e5eee8}
.demo-brand{display:flex;gap:12px;align-items:center}.demo-brand b{font-size:19px;letter-spacing:-.04em}.demo-brand small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.demo-brand-mark{width:38px;height:38px;border-radius:10px;background:var(--forest);color:#fff;font-weight:900;font-size:23px;display:grid;place-items:center}
.demo-tag{background:#e6f5ea;color:#176b4c;border-radius:99px;font-size:10px;font-weight:800;letter-spacing:.08em;padding:7px 11px;white-space:nowrap}
.demo-tabs{display:flex;border-bottom:1px solid #dcebe2;background:#f8fcf9}
.demo-tabs button{background:transparent;border:0;border-bottom:3px solid transparent;padding:14px 18px;color:#668076;font-weight:700;font-size:13px;flex:1}
.demo-tabs button.active{border-color:#087c6c;color:#087c6c;background:#fff}
.demo-warning{margin:0;background:#f6fbf7;border-bottom:1px solid #e5efe7;color:#5a7368;font-size:11px;line-height:1.5;padding:10px clamp(16px,4vw,30px)}
.demo-screen{padding:clamp(18px,4vw,32px);min-height:460px;animation:fade-in .15s ease}
.demo-screen.hidden{display:none}.demo-hero{margin-bottom:20px}
.demo-eyebrow{color:#088673;font-size:11px;font-weight:800;letter-spacing:.09em}
.demo-hero h1{font-size:clamp(23px,3.7vw,32px);margin:5px 0 8px;letter-spacing:-.05em}
.demo-hero p{font-size:13px;line-height:1.65;color:#5b756b;margin:0}
.demo-form{display:grid;gap:13px}
.demo-form label{font-size:12px;font-weight:650;color:#375a4d;display:grid;gap:6px}
.demo-form label input,.demo-form label select{background:#fff;border:1px solid #cbded1;border-radius:10px;outline-color:var(--forest);padding:12px;font-size:14px;color:var(--ink);width:100%;min-width:0}
.demo-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.demo-estimate{padding:13px 15px;background:#eef8f1;border:1px solid #d0e9d9;border-radius:12px;display:grid;gap:5px}
.demo-estimate span{font-size:10px;color:#238167;letter-spacing:.08em;font-weight:800}
.demo-estimate strong{font-size:clamp(19px,3vw,25px);letter-spacing:-.025em;color:#086c55}
.demo-estimate small{font-size:11px;color:#52776a}
.demo-primary{background:#087c6c;color:white;border:1px solid #087c6c;border-radius:10px;padding:12px 16px;font-size:14px;font-weight:750;box-shadow:0 6px 15px rgba(3,106,86,.1)}
.demo-primary:hover{background:#006955}.demo-primary:disabled{opacity:.55;cursor:not-allowed}
.demo-secondary{background:#fff;color:#156856;border:1px solid #c7dfd1;border-radius:10px;padding:11px 15px;font-size:13px;font-weight:700}
.demo-secondary:disabled{opacity:.55;cursor:not-allowed}
.demo-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:15px}
.demo-stat-grid article{background:#f3faf6;border:1px solid #e1ede4;padding:12px;border-radius:12px;display:grid;gap:5px}
.demo-stat-grid article span{font-size:11px;color:#648075}.demo-stat-grid article b{font-size:24px;color:#087c6c}
.demo-ticket-list{border:1px solid var(--edge);border-radius:13px;overflow:hidden;background:#fff}
.demo-ticket-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:#fff;border:0;border-bottom:1px solid #ebf2ee;text-align:left;padding:13px}
.demo-ticket-row:hover,.demo-ticket-row.selected{background:#f2faf4}
.demo-ticket-row:last-child{border-bottom:0}.demo-ticket-row strong{display:block;font-size:13px}.demo-ticket-row small{display:block;color:#6b8277;font-size:11px;margin-top:4px}
.demo-status{font-size:11px;border-radius:99px;background:#dff4e9;color:#0d7f5d;padding:5px 9px;font-weight:750;white-space:nowrap}
.demo-status.green{background:#d9f6e4;color:#056e3e}.demo-status.blue{background:#e9f2fe;color:#2163a3}
.demo-ticket-detail{padding:17px;border-radius:13px;border:1px solid var(--edge);background:#f8fbf9;margin:14px 0}
.demo-ticket-detail h3{margin:0 0 8px;font-size:15px}
.demo-ticket-detail p{font-size:13px;line-height:1.65;color:#597467;margin:6px 0}
.demo-ticket-detail .demo-primary{margin-top:12px}
.demo-offer-card{padding:20px;border:1px solid #d8e8df;border-radius:14px;background:#fcfefd}
.demo-offer-head{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px;color:#4e6f63}
.demo-offer-card h2{font-size:22px;letter-spacing:-.035em;margin:15px 0 8px}
.demo-offer-card>p{font-size:13px;color:#5c766a;line-height:1.6}
.demo-offer-price{padding:20px;margin:18px 0;background:#eaf6ee;border-radius:12px;display:grid;gap:7px}
.demo-offer-price small{font-size:11px;color:#4c7665}.demo-offer-price strong{font-size:32px;color:#0b7860}
.demo-offer-card .demo-legal{font-size:11px;color:#6b7f76}
.demo-actions{display:flex;gap:8px;flex-wrap:wrap}
.demo-result{margin-top:12px;font-size:13px;color:#087c6c;font-weight:650}
.demo-footer{border-top:1px solid #e4eee7;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;color:#688075}
.demo-footer a{color:#0b7c66;font-weight:750;text-decoration:none}
:focus-visible{outline:3px solid #55c9a7;outline-offset:3px}
@keyframes fade-in{from{opacity:.6}to{opacity:1}}
body.embedded{background:transparent}
body.embedded .demo-app{margin:0;border-radius:16px;box-shadow:none;border:0;max-width:none}
body.embedded .demo-header{padding:12px 15px}body.embedded .demo-brand b{font-size:16px}
body.embedded .demo-brand-mark{width:29px;height:29px;font-size:18px;border-radius:8px}
body.embedded .demo-brand small{font-size:10px}
body.embedded .demo-tag{font-size:8px;padding:5px 7px}
body.embedded .demo-tabs button{padding:12px 8px;font-size:12px}
body.embedded .demo-warning{padding:9px 14px;font-size:10px}
body.embedded .demo-screen{padding:16px;min-height:405px}
body.embedded .demo-hero h1{font-size:23px}
body.embedded .demo-footer{padding:12px 15px}
@media(max-width:480px){.demo-app{margin:0;border-radius:0}.demo-header{padding:13px 16px}.demo-screen{padding:16px}.demo-form-grid{gap:8px}.demo-footer{padding:12px 15px}.demo-brand small{font-size:10px}}

/* Urgent sample appointments and local demo invoice drafts */
.demo-urgent-board{border:1px solid #f1cc9a;border-radius:15px;background:#fff9f1;padding:14px;margin:0 0 15px}
.demo-urgent-board.hidden{display:none}
.demo-urgent-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.demo-urgent-header strong{font-size:15px;color:#9c4b1a}
.demo-urgent-header small{font-size:10px;color:#936b4d}
.demo-urgent-list{display:grid;gap:8px}
.demo-urgent-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #f5d9b4;border-radius:11px;background:#fff;min-width:0}
.demo-urgent-meta{min-width:0}
.demo-urgent-meta strong{display:block;font-size:13px;color:#87421a}
.demo-urgent-meta small{display:block;font-size:11px;line-height:1.6;color:#9c795d;margin-top:3px}
.demo-urgent-badge{display:inline-block!important;width:max-content;margin-top:7px;padding:5px 8px;border-radius:7px;background:#ffefd9;color:#8e4a16;font-size:11px!important;font-weight:800}
.demo-detail-urgent{border-radius:9px;background:#fff0de;border:1px solid #f3c38f;padding:9px 11px;color:#8e4310!important;font-weight:700}
.demo-invoice-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border:1px solid #cae2d1;background:#ecf7ef;border-radius:12px;padding:13px;margin:15px 0 3px}
.demo-invoice-bar strong{display:block;font-size:13px;color:#205640}
.demo-invoice-bar small{display:block;font-size:11px;color:#648271;line-height:1.6;margin-top:3px}
.demo-invoice-bar button{flex-shrink:0}
@media(max-width:520px){.demo-urgent-item,.demo-invoice-bar{align-items:stretch;flex-direction:column}.demo-urgent-item button,.demo-invoice-bar button{width:100%}}

/* Branded vector mark and typographic urgency indicator */
.demo-brand-mark svg{display:block;width:23px;height:23px}
.demo-alert-icon{display:inline-grid;place-items:center;background:#a45c27;color:white;width:17px;height:17px;border-radius:5px;font-weight:900;font-size:12px;margin-right:4px}