/* Editable app previews, scoped to the sample shop. */
.sp-workspace-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;color:#386348;border-bottom:1px solid #e2e8dd;padding-bottom:10px;margin-bottom:16px}.sp-workspace-row small{font-size:8px;color:#8a9a89}
.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-grid>*{min-width:0}.contact-grid input,.contact-grid select,.contact-grid textarea{min-width:0}@media(max-width:940px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.sp-view{--sp-font:12px;color:#203e33;background:#f7f8f7;padding:20px;font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--sp-font);line-height:1.65;text-align:left;min-width:0;container-type:inline-size}
.sp-view *{box-sizing:border-box}.sp-view h4,.sp-view h5,.sp-view p{margin:0;letter-spacing:normal}.sp-view h4{font-family:inherit;font-weight:700;font-size:20px;line-height:1.3;color:#183d31;margin:4px 0 6px}.sp-view h5{font-family:inherit;font-size:15px;line-height:1.4;font-weight:700;margin:5px 0}.sp-view p{font-size:var(--sp-font);color:#687e72;line-height:1.7}
.sp-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}.sp-heading>div{min-width:0}.sp-eyebrow,.sp-label{display:block;font-size:9px;color:#7b8d80;font-weight:600;letter-spacing:.07em;line-height:1.6}.sp-heading .sp-action{flex-shrink:0}
.sp-pill{display:inline-flex;align-items:center;padding:4px 8px;font-size:9px;line-height:1.5;white-space:nowrap;color:#246d52;border-radius:6px;background:#eaf3e9}.sp-pill.sp-amber{background:#fbf2dc;color:#816120}.sp-action{display:inline-flex;align-items:center;justify-content:center;padding:9px 11px;background:#076a57;color:#fff;border:1px solid #076a57;border-radius:8px;font-size:10px;font-weight:600;line-height:1.5}.sp-link{color:#08705a;font-size:10px;font-weight:600}
.sp-card{background:#fff;padding:15px;border:1px solid #e0e8df;border-radius:12px;margin:12px 0}.sp-card>p{margin:6px 0}.sp-selected{border-color:#92bda2;background:#f0f7f0}.sp-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.sp-row>div{min-width:0}
.sp-tabs{display:flex;align-items:center;gap:12px;padding:8px;background:#edf2e9;border:1px solid #e2e9dd;border-radius:9px;margin-bottom:18px;font-size:10px;line-height:1.5;flex-wrap:wrap}.sp-tabs>span{padding:4px 3px;color:#698373}.sp-tabs>b{padding:7px 9px;border-radius:6px;background:#fff;color:#076c57;font-weight:600}.sp-tabs em{font-style:normal;font-size:9px;margin-left:4px;background:#e8f1e6;border-radius:4px;padding:2px 4px}
.sp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}.sp-stats.sp-four{grid-template-columns:repeat(4,minmax(0,1fr))}.sp-stats>div{padding:12px 10px;background:#fff;border:1px solid #e1e8df;border-radius:9px;min-width:0}.sp-stats strong{display:block;font-size:22px;line-height:1.35;font-weight:600;color:#185440;letter-spacing:-.04em;overflow-wrap:anywhere}.sp-stats small{display:block;color:#809083;font-size:9px;line-height:1.5;margin-top:5px}
.sp-search{background:#f7faf5;border:1px solid #dfe8da;color:#8fa093;padding:8px 10px;border-radius:7px;margin:13px 0 4px;font-size:11px}.sp-list-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #eef1eb}.sp-list-row:last-child{border-bottom:0;padding-bottom:2px}.sp-list-row>div{flex:1;min-width:0}.sp-list-row b{display:block;font-weight:600;font-size:11px}.sp-list-row small{display:block;color:#899b8c;font-size:9px}.sp-list-row strong{color:#3e6e50;font-size:13px;font-weight:600}
.sp-avatar{display:grid;place-items:center;width:32px;height:32px;flex:none;background:#e8f1e4;color:#426b4c;border-radius:9px;font-weight:700;font-size:10px}.sp-dot{display:inline-block;width:6px;height:6px;background:#30c26b;border-radius:50%;margin-right:4px}.sp-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;color:#7f9386;font-size:9px}.sp-subtle{color:#889b8d;font-size:9px}
.sp-chart{display:flex;align-items:flex-end;gap:10px;height:115px;border-bottom:1px solid #e4ebe1;padding:15px 8px 0;margin-top:10px;background:repeating-linear-gradient(to top,#fff 0,#fff 28px,#f0f3ed 29px,#fff 30px)}.sp-chart i{flex:1;height:var(--bar);background:#219e77;border-radius:4px 4px 0 0}.sp-axis{display:flex;justify-content:space-between;padding:6px 8px;font-size:8px;color:#8ea193}
.sp-filter{display:flex;gap:8px;flex-wrap:wrap;color:#2c7658;padding:9px 0;font-size:10px}.sp-filter span{color:#8c9b8d;margin-left:auto}.sp-followup{padding:12px 14px}.sp-followup p{font-size:11px;margin:7px 0}.sp-followup small{color:#9aa798;font-size:9px}.sp-followup .sp-link{display:block;margin-top:9px}
.sp-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sp-two .sp-card{margin:8px 0}.sp-field{background:#fbfcf9;border:1px solid #dce6d7;border-radius:7px;padding:9px;margin:6px 0 12px;font-size:11px;line-height:1.6}.sp-card .sp-label{margin-top:12px}.sp-switch{width:30px;height:17px;background:#0b765e;border-radius:20px;position:relative;flex:none}.sp-switch:after{content:'';width:13px;height:13px;position:absolute;right:2px;top:2px;background:#fff;border-radius:50%}
.sp-steps{list-style:none;margin:16px 0 0;padding:0}.sp-steps li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #ebf0e7}.sp-steps li>span{width:25px;height:25px;display:grid;place-items:center;background:#e6f1e7;color:#2f7351;border-radius:7px;font-size:10px;flex:none}.sp-steps b{display:block;font-size:11px;font-weight:600}.sp-steps small{color:#97a493;font-size:9px}.sp-large-icon{color:#128762;font-size:25px}
.sp-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sp-product-card{background:#fff;border:1px solid #e0e8db;border-radius:10px;padding:10px;min-width:0}.sp-product-card>b{display:block;margin:8px 0 2px;font-size:11px}.sp-product-card>p{font-size:9px}.sp-product-card .sp-row{margin-top:8px}.sp-product-card .sp-row strong{color:#2c7050;font-size:11px}.sp-product-art{position:relative;height:100px;display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden;background:linear-gradient(140deg,#e1ebdd,#f4f6ed);color:#416046;margin:8px 0}.sp-product-art svg{width:75%;height:70%;stroke:currentColor;stroke-width:2;fill:#fbfcf7}.sp-product-art>span{position:absolute;font-size:8px;font-weight:700;letter-spacing:.1em;top:9px;left:10px}.sp-product-art.sp-sand{background:linear-gradient(140deg,#eee9db,#f7f3e9);color:#87795b}
.sp-mini-message{background:#f4f7f1;border:1px solid #e6eddf;border-radius:8px;padding:10px;font-size:10px;line-height:1.7;margin:10px 0;color:#3c5b4a}.sp-table-wrap{width:100%;max-width:100%;overflow:auto;background:#fff;border:1px solid #e0e8dd;border-radius:10px}.sp-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:10px}.sp-table th{padding:10px 7px;background:#f0f5ed;color:#748778;text-align:left;font-size:9px;font-weight:500}.sp-table td{padding:13px 7px;border-top:1px solid #eef2e9;color:#4d705a;vertical-align:top;overflow-wrap:anywhere}.sp-table th:first-child{width:40%}.sp-table td:first-child{color:#264e3c;font-weight:600}.sp-table td small{display:block;margin-top:5px;color:#9ba89a;font-size:8px;font-weight:400}
.sp-check,.sp-empty-check{height:18px;width:18px;border:1px solid #c7d9c4;border-radius:4px;flex:none}.sp-check{display:grid;place-items:center;background:#11734d;color:#fff;border-color:#11734d;font-size:11px}.sp-audience-total{display:flex;align-items:center;gap:12px;margin-top:13px}.sp-audience-total strong{font-size:30px;color:#20754f;font-weight:600}.sp-audience-total span{color:#7f9580;font-size:11px}.sp-training-status{font-size:10px;margin-bottom:16px}.sp-faq{padding:12px 0;border-bottom:1px solid #edf1e8;font-size:11px}.sp-faq:last-child{border:0}.sp-faq>span{float:right;color:#5a8767}.sp-faq>p{margin-top:8px;font-size:10px}
.sp-chat{background:#f5f7f1;margin:-20px}.sp-chat-head{display:flex;align-items:center;gap:10px;padding:16px;background:#fff;border-bottom:1px solid #e2e8dd}.sp-chat-head b{font-size:14px}.sp-chat-head small{display:block;color:#7f9885;font-size:10px}.sp-chat-menu{margin-left:auto;color:#7c9280}.sp-chat-body{padding:18px 14px;min-height:300px}.sp-date{display:table;margin:0 auto 18px;padding:3px 9px;font-size:9px;color:#8b9c88;background:#e9eee3;border-radius:5px}.sp-bubble{max-width:91%;padding:11px 13px 7px;border:1px solid #e2e8dc;border-radius:13px;background:#fff;margin-bottom:14px;font-size:12px;line-height:1.7;color:#2c5040}.sp-bubble.sp-out{margin-left:auto;background:#e2efdc;border-color:#d3e5cd}.sp-bubble small{display:block;text-align:right;color:#88a087;font-size:8px;margin-top:4px}.sp-ai{display:block;font-size:8px;color:#167553;font-weight:600;margin-bottom:4px}.sp-compose{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;background:#fff;color:#97a690;border-top:1px solid #e1e9db;font-size:11px}.sp-compose b{background:#076e51;color:#fff;height:27px;width:27px;display:grid;place-items:center;border-radius:8px}
.app-capture figcaption .app-shot-button{width:auto;padding:2px 3px;line-height:1;font-size:17px;color:#086947;background:transparent;border:0;cursor:zoom-in}.app-capture figcaption .app-shot-button:hover{color:#034730;background:#edf4e7}.app-capture-hero .sp-view{padding:20px}
#screen-preview .sp-view{--sp-font:14px;min-width:700px;padding:28px}#screen-preview .sp-view h4{font-size:25px}#screen-preview .sp-table{font-size:13px}#screen-preview .sp-table th{font-size:11px}#screen-preview .sp-stats strong{font-size:30px}#screen-preview .sp-chat{margin:-28px}#screen-preview .sp-chat-body{min-height:350px;max-width:700px;margin:auto}
@container(max-width:380px){.sp-heading{flex-wrap:wrap;gap:8px;margin-bottom:14px}.sp-heading h4{font-size:17px}.sp-heading .sp-action{padding:6px 9px}.sp-stats{gap:6px}.sp-stats>div{padding:9px 6px}.sp-stats strong{font-size:16px}.sp-stats small{font-size:8px}.sp-stats.sp-four{grid-template-columns:repeat(2,minmax(0,1fr))}.sp-table{font-size:9px}.sp-table th{font-size:8px;padding:8px 4px}.sp-table td{padding:10px 4px}.sp-tabs{gap:4px;font-size:9px}.sp-card{padding:11px}.sp-two{gap:7px}.sp-product-grid{gap:8px}.sp-product-art{height:80px}}
.sp-view p,.sp-eyebrow,.sp-label,.sp-subtle,.sp-list-row small,.sp-stats small,.sp-bottom,.sp-workspace-row small,.sp-table th,.sp-table td small,.sp-steps small,.sp-followup small,.sp-axis,.sp-chat-head small,.sp-compose{color:#5b7162}