:root{--bg-main:#F9F7F4;--bg-sidebar:#EFECE5;--surface:#FFFFFF;--border:#E6E2D8;--text-dark:#2B2523;--text-muted:#6B645E;--accent:#B23D22;--accent-hover:#962E16;--green:#208754;--teal:#197280;--radius:12px;--radius-sm:8px;--shadow:0 4px 12px rgba(43,37,35,0.04)}
*{box-sizing:border-box;margin:0;padding:0;font-family:'DM Sans',sans-serif}
body{display:flex;flex-direction:column;height:100vh;background:var(--bg-main);color:var(--text-dark);overflow:hidden;-webkit-font-smoothing:antialiased}

/* NAV */
.top-nav{height:72px;background:var(--surface);display:flex;align-items:center;padding:0 2rem;border-bottom:1px solid var(--border);z-index:10;position:relative}
.brand{font-size:20px;font-weight:700;color:var(--accent);letter-spacing:-.5px;flex-shrink:0}
.tabs{display:flex;height:100%;gap:32px;position:absolute;left:50%;transform:translateX(-50%)}
.tab{font-size:15px;font-weight:500;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;border-bottom:3px solid transparent;transition:all .2s;padding-top:3px;text-decoration:none}
.tab:hover{color:var(--text-dark)}
.tab.active{color:var(--text-dark);border-bottom-color:var(--accent);font-weight:600}
.nav-right{display:flex;align-items:center;gap:16px;margin-left:auto}
.search-box{background:#F1EEE8;border-radius:20px;padding:8px 16px;display:flex;align-items:center;gap:8px;width:220px}
.search-box input{background:transparent;border:none;outline:none;width:100%;font-size:14px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;color:white;font-size:14px;font-weight:600}

/* LAYOUT */
.app-body{display:flex;flex:1;overflow:hidden}
.sidebar{width:260px;background:var(--bg-sidebar);display:flex;flex-direction:column;padding:2.5rem 1.5rem;flex-shrink:0}
.side-header h2{font-size:18px;font-weight:700;color:var(--accent);margin-bottom:4px}
.side-header p{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:24px}
.side-menu{list-style:none;flex:1}
.side-menu li{padding:12px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text-muted);display:flex;align-items:center;gap:12px;margin-bottom:4px;cursor:pointer;transition:all .2s}
.side-menu li i{font-size:18px}
.side-menu li:hover{background:rgba(255,255,255,.4);color:var(--text-dark)}
.side-menu li.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow)}
.side-bottom{margin-top:auto}
.side-bottom ul{list-style:none;margin-bottom:16px;border-top:1px solid rgba(0,0,0,.05);padding-top:16px}
.side-bottom li{padding:10px 14px;font-size:13px;font-weight:600;color:var(--text-muted);display:flex;align-items:center;gap:12px;cursor:pointer}
.btn-new-order{width:100%;background:var(--accent);color:white;border:none;border-radius:var(--radius-sm);padding:12px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}
.btn-new-order:hover{background:var(--accent-hover)}

/* CONTENT */
.content-area{flex:1;overflow-y:auto;padding:2.5rem 3rem}
.content-area::-webkit-scrollbar{width:8px}
.content-area::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:4px}
.view-section{display:none}
.view-section.active{display:block;animation:fadeIn .4s cubic-bezier(.16,1,.3,1)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* PAGE ELEMENTS */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2.5rem}
.head-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.page-title{font-size:32px;font-weight:700;letter-spacing:-1px}
.page-desc{font-size:14px;color:var(--text-muted);margin-top:8px;font-weight:500;max-width:600px;line-height:1.5}

/* METRICS */
.metrics-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:2rem}
.metric-card{background:var(--surface);padding:24px;border-radius:var(--radius);box-shadow:var(--shadow)}
.metric-card.accent-edge{border-left:4px solid var(--accent)}
.m-title{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:16px}
.m-val{font-size:34px;font-weight:700;display:flex;align-items:baseline;gap:8px;line-height:1;margin-bottom:4px}
.m-sub{font-size:13px;font-weight:700}
.c-green{color:var(--green)}.c-red{color:var(--accent)}

/* GRID */
.grid-2{display:grid;grid-template-columns:1fr 1.3fr;gap:24px;margin-bottom:2.5rem}
.card{background:var(--surface);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.card-beige{background:#F1ECE3}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.card-title{font-size:16px;font-weight:700}
.link-red{color:var(--accent);font-size:11px;font-weight:700;text-transform:uppercase;text-decoration:none;letter-spacing:.8px;cursor:pointer}

/* SENTIMENT */
.sent-row{display:flex;align-items:center;margin-bottom:20px}
.sent-pill{width:90px;text-align:center;font-size:10px;font-weight:700;padding:6px 0;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;margin-right:16px}
.bg-green-l{background:#E2F3E9;color:var(--green)}.bg-blue-l{background:#E6F0FC;color:#1967D2}
.bg-oran-l{background:#FDECE0;color:#B95000}.bg-red-l{background:#FCE8E6;color:#C5221F}
.sent-bar-w{flex:1;height:6px;background:rgba(0,0,0,.06);border-radius:3px;margin-right:16px}
.sent-bar{height:100%;border-radius:3px}
.bg-green{background:#28A745}.bg-blue{background:#4285F4}.bg-oran{background:#FB8C00}.bg-red{background:#EA4335}
.sent-pct{font-size:15px;font-weight:700;width:36px;text-align:right}

/* ALERTS */
.alert-box{display:flex;padding:16px 20px;border-radius:var(--radius-sm);margin-bottom:16px;background:#FFF;border:1px solid var(--border);border-left:4px solid;gap:16px}
.alert-box.red{border-left-color:var(--accent)}.alert-box.teal{border-left-color:var(--teal)}
.alert-icon{font-size:22px;padding-top:2px}
.red .alert-icon{color:var(--accent)}.teal .alert-icon{color:var(--teal)}
.alert-cont{flex:1}
.alert-cont h4{font-size:14px;font-weight:700;margin-bottom:6px}
.alert-cont p{font-size:13px;color:var(--text-muted);margin-bottom:14px;line-height:1.4}
.alert-acts{display:flex;gap:12px}
.btn-sm{padding:8px 16px;font-size:10px;font-weight:700;text-transform:uppercase;border-radius:20px;cursor:pointer;letter-spacing:.5px;border:1px solid transparent}
.btn-red{background:var(--accent);color:white}.btn-teal{background:var(--teal);color:white}
.btn-wht{background:white;color:var(--text-dark);border-color:var(--border)}

/* TABLE */
.filter-tabs{display:flex;gap:8px;background:var(--bg-main);padding:4px;border-radius:24px}
.f-tab{font-size:12px;font-weight:600;color:var(--text-muted);padding:6px 16px;border-radius:20px;cursor:pointer;transition:all .2s}
.f-tab.active{background:var(--surface);color:var(--text-dark);box-shadow:0 1px 4px rgba(0,0,0,.05)}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;padding:12px 16px 16px 0;font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid var(--border)}
.tbl td{padding:14px 16px 14px 0;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.customer-cell{display:flex;align-items:center;gap:12px}
.c-avatar{width:36px;height:36px;border-radius:50%;background:#FDECE0;color:#B95000;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.c-name{font-size:14px;font-weight:600}
.plat-icon{font-size:18px}.plat-icon.wa{color:var(--green)}.plat-icon.ig{color:#E1306C}
.msg-txt{font-size:12px;color:var(--text-muted);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.rep-txt{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.score-txt{font-size:15px;font-weight:600}
.pill-sm{font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;text-transform:uppercase;background:#F1EEE8;display:inline-block}
.load-more{text-align:center;font-size:13px;font-weight:600;color:var(--text-muted);margin-top:16px;cursor:pointer}

/* STOCK */
.btn-main{padding:10px 20px;font-size:13px;font-weight:700;border-radius:var(--radius-sm);cursor:pointer;border:none;display:inline-flex;align-items:center;gap:8px;transition:all .2s}
.btn-o{background:#EFECE5;color:var(--text-dark)}.btn-o:hover{background:#E6E2D8}
.btn-r{background:var(--accent);color:white}.btn-r:hover{background:var(--accent-hover)}
.grid-stock{display:grid;grid-template-columns:240px 1fr;gap:24px;margin-bottom:2.5rem}
.card-low{background:#FFF;padding:32px 24px;border-radius:var(--radius);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.low-icon{width:56px;height:56px;border-radius:16px;background:#FDECE0;color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:20px}
.low-num{font-size:42px;font-weight:700;line-height:1;margin-bottom:8px}
.low-lbl{font-size:13px;color:var(--text-muted);font-weight:500}
.stock-list{background:var(--surface);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.st-head{display:grid;grid-template-columns:2.5fr 1fr 1fr 1.5fr 90px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.st-col{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px}
.st-row{display:grid;grid-template-columns:2.5fr 1fr 1fr 1.5fr 90px;align-items:center;padding:14px 16px;background:#FAF8F5;border-radius:var(--radius-sm);margin-bottom:8px;border:1px solid transparent;transition:all .2s}
.st-row:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.st-prod{display:flex;align-items:center;gap:14px}
.st-img{width:44px;height:44px;border-radius:8px;background:#FFF;border:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px}
.st-name{font-size:14px;font-weight:700}
.st-cat{display:inline-block;padding:5px 12px;font-size:10px;font-weight:700;text-transform:uppercase;background:#EFECE5;border-radius:20px;letter-spacing:.5px}
.st-price{font-size:14px;font-weight:700;color:var(--accent)}
.sl-val{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.sl-bar-w{width:100%;height:6px;background:#E6E2D8;border-radius:3px}
.sl-bar{height:100%;border-radius:3px}
.btn-update{background:none;border:1px solid var(--border);border-radius:6px;padding:5px 12px;font-size:11px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s}
.btn-update:hover{background:var(--accent);color:white;border-color:var(--accent)}
.inline-edit{display:none;padding:16px 20px;background:#F9F7F4;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px}
.inline-edit.show{display:block}
.ie-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:12px}
.ie-f{display:flex;flex-direction:column;gap:6px}
.ie-l{font-size:12px;font-weight:700}
.ie-i{background:white;border:1px solid var(--border);padding:10px 12px;border-radius:6px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none}
.ie-i:focus{border-color:var(--accent)}
.ie-acts{display:flex;justify-content:flex-end;gap:12px}
.ie-btn{font-size:13px;font-weight:700;padding:8px 20px;border-radius:var(--radius-sm);cursor:pointer;border:none;font-family:'DM Sans',sans-serif}
.ie-btn-cancel{background:#EFECE5;color:var(--text-dark)}
.ie-btn-save{background:var(--accent);color:white}

/* MODAL */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;align-items:center;justify-content:center}
.modal-bg.show{display:flex}
.modal-box{background:white;border-radius:var(--radius);padding:32px;width:480px;max-width:90vw}
.modal-title{font-size:18px;font-weight:700;margin-bottom:24px}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:8px}
.modal-field{display:flex;flex-direction:column;gap:8px}
.modal-label{font-size:13px;font-weight:700}
.modal-input{background:#F6F4EF;border:1px solid transparent;padding:12px 14px;border-radius:8px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none}
.modal-input:focus{border-color:var(--accent)}
.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}

/* INGREDIENTS TABLE */
.ing-tbl{width:100%;border-collapse:collapse}
.ing-tbl th{text-align:left;padding:10px 16px 14px 0;font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid var(--border)}
.ing-tbl td{padding:14px 16px 14px 0;border-bottom:1px solid var(--border);font-size:14px}
.ing-tbl tr:last-child td{border-bottom:none}
.status-pill{display:inline-block;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase}
.status-in{background:#E2F3E9;color:var(--green)}
.status-low{background:#FDECE0;color:#B95000}

/* CUSTOMERS */
.cust-search{width:100%;max-width:360px;background:white;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 16px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none;margin-bottom:20px}

/* MARKETING */
.mkt-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.mkt-card{background:white;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.mkt-card-title{font-size:14px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.lead-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
.lead-item:last-child{border-bottom:none}
.lead-name{font-size:13px;font-weight:600}
.lead-score{font-size:12px;font-weight:700;padding:3px 8px;border-radius:10px;background:#FDECE0;color:#B95000}
.template-btn{background:#EFECE5;border:none;border-radius:6px;padding:8px 14px;font-size:12px;font-weight:600;cursor:pointer;margin-bottom:8px;width:100%;text-align:left;font-family:'DM Sans',sans-serif;transition:background .2s}
.template-btn:hover{background:var(--accent);color:white}

/* INVENTORY STATS */
.inv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.inv-stat{background:white;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);text-align:center}
.inv-stat-val{font-size:28px;font-weight:700;color:var(--accent)}
.inv-stat-lbl{font-size:12px;color:var(--text-muted);margin-top:4px}

/* TOAST */
.global-toast{position:fixed;bottom:24px;right:24px;background:var(--green);color:white;padding:14px 20px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;z-index:999;opacity:0;transform:translateY(10px);transition:all .3s;pointer-events:none}
.global-toast.show{opacity:1;transform:translateY(0)}
.global-toast.error{background:var(--accent)}

/* RESTOCK MODAL */
.restock-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:300;align-items:center;justify-content:center}
.restock-modal.show{display:flex}

.loading-wrap{display:flex;justify-content:center;padding:40px}
.spinner{width:24px;height:24px;border:3px solid #EFECE5;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.chart-container{position:relative;height:220px;width:100%;margin-top:20px}

/* ONBOARDING MODAL */
.onboarding-modal{display:none;position:fixed;inset:0;background:linear-gradient(135deg,#2B2523 0%,#1a1715 100%);z-index:500;align-items:center;justify-content:center;padding:20px}
.onboarding-modal.show{display:flex}
.onboarding-container{background:white;border-radius:20px;padding:40px;width:100%;max-width:520px;box-shadow:0 25px 50px rgba(0,0,0,.3)}
.onboarding-progress{display:flex;justify-content:center;gap:16px;margin-bottom:32px}
.onboarding-step{width:40px;height:40px;border-radius:50%;background:#EFECE5;color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;transition:all .3s}
.onboarding-step.active{background:var(--accent);color:white}
.onboarding-title{font-size:24px;font-weight:700;text-align:center;margin-bottom:8px}
.onboarding-subtitle{font-size:14px;color:var(--text-muted);text-align:center;margin-bottom:24px}
.onboarding-form{display:flex;flex-direction:column;gap:16px}
.onboarding-field{display:flex;flex-direction:column;gap:6px}
.onboarding-field label{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.onboarding-field input,.onboarding-field select,.onboarding-field textarea{background:#F6F4EF;border:1px solid transparent;padding:12px 14px;border-radius:8px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none;transition:border-color .2s}
.onboarding-field input:focus,.onboarding-field select:focus,.onboarding-field textarea:focus{border-color:var(--accent)}
.onboarding-field textarea{min-height:80px;resize:vertical}
.onboarding-field-checkbox{display:flex;align-items:center;gap:10px;margin-top:8px}
.onboarding-field-checkbox input{width:18px;height:18px}
.onboarding-field-checkbox label{font-size:14px;font-weight:500}
.onboarding-btn{background:var(--accent);color:white;border:none;padding:14px 28px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;width:100%;margin-top:16px;transition:background .2s}
.onboarding-btn:hover{background:var(--accent-hover)}
.onboarding-btn.launch{background:linear-gradient(135deg,#208754,#179a60);font-size:16px;padding:16px}
.onboarding-btn-secondary{background:#EFECE5;border:none;padding:10px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;margin-top:12px;font-family:'DM Sans',sans-serif;transition:background .2s}
.onboarding-btn-secondary:hover{background:#E6E2D8}
.onboarding-nav{display:flex;gap:12px;margin-top:16px}
.onboarding-nav .onboarding-btn{flex:1;margin-top:0}
.onboarding-btn-outline{background:transparent;border:1px solid var(--border);color:var(--text-muted);padding:14px 20px;border-radius:10px;font-size:14px;font-weight:600;cursor pointer;flex:1;text-align:center;transition:all .2s}
.onboarding-btn-outline:hover{background:#EFECE5}
.product-row{display:flex;gap:10px;margin-bottom:10px}
.product-row input{flex:1;background:#F6F4EF;border:none;padding:10px 12px;border-radius:6px;font-size:13px;font-family:'DM Sans',sans-serif}
.product-row input::placeholder{color:var(--text-muted)}
.product-name{flex:2!important}
.product-price{flex:1!important}
.onboarding-summary{background:#F9F7F4;border-radius:12px;padding:20px;margin:16px 0}
.onboarding-summary-item{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.onboarding-summary-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.onboarding-summary-label{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.onboarding-summary-value{font-size:15px;font-weight:600}

/* IMPACT SCREEN */
.impact-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:600;align-items:center;justify-content:center;padding:20px}
.impact-overlay.show{display:flex}
.impact-container{background:white;border-radius:20px;padding:40px;width:100%;max-width:900px;max-height:90vh;overflow-y:auto;position:relative}
.impact-close{position:absolute;top:20px;right:20px;background:none;border:none;font-size:28px;cursor:pointer;color:var(--text-muted)}
.impact-header{text-align:center;margin-bottom:32px}
.impact-header h1{font-size:28px;font-weight:700;margin-bottom:8px}
.impact-header p{font-size:14px;color:var(--text-muted)}
.impact-comparison{display:flex;align-items:center;gap:24px;margin-bottom:40px}
.impact-side{flex:1;background:#F9F7F4;border-radius:16px;padding:24px}
.impact-side.before{border:2px solid #EA4335}
.impact-side.after{border:2px solid #208754}
.impact-side h2{font-size:16px;font-weight:700;margin-bottom:20px;text-align:center}
.impact-stat{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.impact-stat:last-child{border-bottom:none}
.impact-value{font-size:18px;font-weight:700}
.impact-value.red{color:#EA4335}
.impact-value.green{color:#208754}
.impact-label{font-size:12px;color:var(--text-muted)}
.impact-arrow{font-size:32px;color:var(--accent)}
.roi-calculator{background:linear-gradient(135deg,#B23D22,#962E16);border-radius:16px;padding:28px;color:white}
.roi-calculator h3{font-size:18px;font-weight:700;margin-bottom:20px;text-align:center}
.roi-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:24px}
.roi-input{display:flex;flex-direction:column;gap:8px}
.roi-input label{font-size:12px;opacity:.9}
.roi-input input[type=range]{width:100%;accent-color:white}
.roi-input span{font-size:14px;font-weight:700;text-align:center}
.roi-outputs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.roi-output-value{font-size:24px;font-weight:700;display:block;margin-bottom:4px}
.roi-output-label{font-size:12px;opacity:.9}
.impact-float-btn{position:fixed;bottom:24px;right:24px;background:var(--accent);color:white;border:none;padding:14px 20px;border-radius:30px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 4px 12px rgba(178,61,34,.4);z-index:100;transition:transform .2s}
.impact-float-btn:hover{transform:scale(1.05)}

/* SIMULATOR */
.simulator-container{display:flex;flex-direction:column;gap:20px}
.simulator-api-key{display:flex;align-items:center;gap:12px;background:var(--surface);padding:16px;border-radius:var(--radius)}
.simulator-api-key label{font-size:13px;font-weight:600}
.simulator-api-key input{flex:1;background:#F6F4EF;border:none;padding:10px 14px;border-radius:6px;font-size:13px;font-family:'DM Sans',sans-serif}
.simulator-chat{background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);height:500px;display:flex;flex-direction:column}
.chat-header{background:var(--accent);color:white;padding:16px 20px;display:flex;justify-content:space-between;align-items:center}
.chat-business-name{font-weight:700;font-size:15px}
.chat-status{font-size:12px;opacity:.9}
.chat-messages{flex:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;background:#E8E4DC}
.chat-empty{text-align:center;color:var(--text-muted);font-size:13px;padding:40px}
.chat-bubble{max-width:70%;padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.4}
.chat-bubble.customer{background:#25D366;color:white;align-self:flex-end;border-bottom-right-radius:4px}
.chat-bubble.ai{background:white;color:var(--text-dark);align-self:flex-start;border-bottom-left-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.chat-bubble-avatar{font-size:20px;margin-bottom:8px}
.chat-intent{font-size:10px;font-weight:700;text-transform:uppercase;padding:3px 8px;background:#F1EEE8;border-radius:4px;display:inline-block;margin-top:8px;color:var(--text-muted)}
.chat-typing{font-size:12px;color:var(--text-muted);padding:12px 16px;background:white;border-radius:16px;align-self:flex-start;border-bottom-left-radius:4px}
.chat-quick-send{display:flex;flex-wrap:wrap;gap:8px;padding:12px;background:white;border-top:1px solid var(--border)}
.quick-btn{background:#F1EEE8;border:none;padding:8px 12px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background .2s}
.quick-btn:hover{background:var(--accent);color:white}
.chat-input{display:flex;gap:10px;padding:12px;background:white;border-top:1px solid var(--border)}
.chat-input input{flex:1;background:#F6F4EF;border:none;padding:12px 16px;border-radius:24px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none}
.chat-send{background:var(--accent);color:white;border:none;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:background .2s}
.chat-send:hover{background:var(--accent-hover)}
.chat-clear{background:transparent;border:1px solid var(--border);color:var(--text-muted);padding:8px 16px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;align-self:center;margin-top:8px;font-family:'DM Sans',sans-serif}

/* SETTINGS */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
.settings-form{display:flex;flex-direction:column;gap:16px}
.settings-field{display:flex;flex-direction:column;gap:6px}
.settings-field label{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase}
.settings-field input,.settings-field select,.settings-field textarea{background:#F6F4EF;border:1px solid transparent;padding:10px 12px;border-radius:6px;font-size:13px;font-family:'DM Sans',sans-serif;outline:none}
.settings-field input:focus,.settings-field textarea:focus{border-color:var(--accent)}
.settings-actions{display:flex;gap:12px}

/* SOCIAL IMPACT COUNTER */
.social-impact{background:linear-gradient(135deg,#B23D22,#962E16);padding:32px 40px;margin-top:40px;border-radius:var(--radius);margin-left:-3rem;margin-right:-3rem;margin-bottom:-2.5rem}
.impact-counter{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.counter-item{display:flex;flex-direction:column;align-items:center;gap:8px}
.counter-icon{font-size:32px;margin-bottom:4px}
.counter-value{font-size:42px;font-weight:700;color:white;line-height:1}
.counter-label{font-size:13px;color:rgba(255,255,255,.9);max-width:180px}