:root{--green:#0d8d64;--dark:#0d2f27;--ink:#17211e;--muted:#6f7b77;--line:#e1e8e5;--bg:#f3f6f5;--soft:#eaf7f2}*{box-sizing:border-box}body{margin:0;font:15px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--ink)}button,input,textarea,select{font:inherit}.hidden{display:none!important}.login{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;background:#fff}.login-brand{padding:55px 8vw;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:radial-gradient(circle at 90% 15%,#1b755d,transparent 30%),linear-gradient(145deg,#0e4c3c,#072b24)}.logo{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:800}.logo b{color:#53d6a6}.login-brand h1{font-size:52px;line-height:1.05;letter-spacing:-.05em;max-width:620px}.login-brand p{font-size:18px;color:#b9d0c8;max-width:560px}.login-card{width:min(430px,80%);margin:auto;display:flex;flex-direction:column;gap:17px}.login-card h2{font-size:32px;margin:0}.login-card small,.heading small{font-size:11px;letter-spacing:.14em;color:#86918d;font-weight:800}label{font-size:13px;font-weight:700;display:flex;flex-direction:column;gap:7px}input,textarea,select{border:1px solid var(--line);border-radius:9px;padding:11px 12px;background:#fff;color:var(--ink)}textarea{resize:vertical}.primary{border:0;border-radius:9px;background:var(--green);color:#fff;font-weight:750;padding:11px 15px}.error{color:#c33}.portal{min-height:100vh;display:flex}.portal > aside{position:fixed;width:250px;inset:0 auto 0 0;padding:24px 16px;background:var(--dark);color:#c4d2cd;display:flex;flex-direction:column}.portal > aside nav{margin-top:35px;display:flex;flex-direction:column;gap:5px}.portal > aside nav button{border:0;background:transparent;color:#9fb4ad;text-align:left;padding:11px 13px;border-radius:8px}.portal > aside nav button:hover,.portal > aside nav button.active{background:#ffffff12;color:#fff}.account{margin-top:auto;border-top:1px solid #ffffff18;padding:18px 10px 0;display:flex;flex-direction:column}.account small{color:#849c94}.account button{margin-top:10px;border:1px solid #ffffff22;background:transparent;color:#cbd8d4;border-radius:8px;padding:7px}.workspace{margin-left:250px;min-width:0;flex:1}.workspace header{height:74px;display:flex;align-items:center;gap:13px;padding:0 30px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}.workspace header small{color:var(--muted)}.workspace header h2{font-size:18px;margin:0}.workspace header>span{margin-left:auto;background:var(--soft);color:var(--green);padding:5px 9px;border-radius:15px;font-size:11px;font-weight:700}#menu{display:none}.page{display:none;padding:32px;max-width:1350px;margin:auto}.page.active{display:block}.heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.heading h1{font-size:28px;margin:5px 0}.heading p{margin:0;color:var(--muted)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.metrics article,.card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:20px;box-shadow:0 5px 18px #182f2608}.metrics small{display:block;color:var(--muted)}.metrics b{display:block;font-size:28px;margin-top:8px}.notice{margin-top:18px}.notice p{color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.device h3{margin:0}.device p{color:var(--muted)}.badge{display:inline-block;padding:4px 8px;border-radius:12px;background:var(--soft);color:var(--green);font-size:11px}.device button{margin-right:6px}.form{max-width:800px;display:flex;flex-direction:column;gap:16px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.toggle{flex-direction:row}.warning{background:#fff7e6;border:1px solid #f0dda9;color:#7c6025;border-radius:9px;padding:12px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left}th{color:#7c8984;font-size:11px;letter-spacing:.06em}th,td{padding:12px;border-bottom:1px solid var(--line)}td input{width:100px}.update-grid{display:grid;grid-template-columns:1.6fr .8fr;gap:17px}.version{display:flex;align-items:center;gap:13px}.version>span{width:50px;height:50px;display:grid;place-items:center;border-radius:13px;background:var(--soft);color:var(--green);font-size:25px}.version h2{margin:3px 0}.version>b{margin-left:auto;color:var(--green)}.progress{height:9px;background:#e8eeeb;border-radius:10px;overflow:hidden;margin:20px 0}.progress i{display:block;width:0;height:100%;background:var(--green);transition:.3s}.actions{display:flex;justify-content:space-between}.actions button,.heading button,.device button{border:1px solid var(--line);border-radius:8px;background:#fff;padding:9px 11px}.actions .primary{background:var(--green);border:0}.checks p{border-top:1px solid var(--line);padding:10px 0;margin:0;color:#4d5c57}.flash{position:fixed;right:20px;top:85px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);padding:12px 16px;border-radius:8px;z-index:9}dialog{border:0;border-radius:14px;padding:25px;box-shadow:0 25px 80px #0004;text-align:center}dialog::backdrop{background:#071d18a8}.close{position:absolute;right:10px;top:8px;border:0;background:transparent;font-size:24px}.qr-loading{width:320px;min-height:320px;display:grid;place-items:center;background:#f2f5f4}.qr-loading img{width:320px}.direction-in{color:#a45d16}.direction-out{color:var(--green)}
@media(max-width:900px){.metrics,.cards{grid-template-columns:1fr 1fr}.update-grid{grid-template-columns:1fr}.portal > aside{transform:translateX(-100%);transition:.2s;z-index:10}.portal > aside.open{transform:none}.workspace{margin-left:0}#menu{display:block;border:0;background:transparent;font-size:22px}.login{grid-template-columns:1fr}.login-brand{display:none}.login-card{min-height:100vh;justify-content:center}.page{padding:22px 15px}.heading{align-items:flex-start;flex-direction:column;gap:12px}.grid{grid-template-columns:1fr}}
@media(max-width:540px){.metrics,.cards{grid-template-columns:1fr}.login-card{width:88%}}
.form label small,.qr-loading small{display:block;color:var(--muted);font-weight:500}.qr-loading img+small{margin-top:8px}.delay-grid input{width:100%}.manual-update{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin:10px 0 18px}.manual-update p{color:var(--muted);margin:6px 0 12px}.manual-update>div{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.manual-update input{flex:1;min-width:240px}.manual-update button{border:1px solid var(--line);border-radius:8px;background:#fff;padding:10px 12px;font-weight:700}.portal > aside nav{overflow-y:auto;min-height:0}.account{flex:none}.compact-form{margin-bottom:18px}.two-factor-qr{width:240px;height:240px;align-self:center;border:1px solid var(--line);border-radius:10px}.two-factor-key{word-break:break-all;text-align:center;padding:10px;background:var(--soft);border-radius:8px}.cards .card button,td button{border:1px solid var(--line);border-radius:7px;background:#fff;padding:7px 9px;margin-top:4px}select[multiple]{min-height:110px}
.device-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}.device-overview article{background:linear-gradient(145deg,#fff,#f7fbf9);border:1px solid var(--line);border-radius:14px;padding:17px 19px;display:flex;flex-direction:column;gap:3px}.device-overview small{font-size:10px;letter-spacing:.12em;color:#788680;font-weight:800}.device-overview b{font-size:25px}.device-overview span,.status-legend{font-size:12px;color:var(--muted)}.status-legend{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px}.dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:#87948f}.dot.connected{background:#12a675;box-shadow:0 0 0 4px #12a67518}.dot.waiting{background:#e7a624;box-shadow:0 0 0 4px #e7a62418}.dot.error-dot{background:#d65353;box-shadow:0 0 0 4px #d6535318}.device-card{position:relative;overflow:hidden;padding:0!important}.device-card:before{content:"";display:block;height:4px;background:#93a09b}.device-card.state-connected:before{background:#12a675}.device-card.state-waiting_qr:before,.device-card.state-connecting:before,.device-card.state-reconnecting:before{background:#e7a624}.device-card.state-error:before,.device-card.state-logged_out:before{background:#d65353}.device-card-body{padding:18px 20px}.device-card-top{display:flex;align-items:flex-start;gap:12px}.device-icon{width:44px;height:44px;border-radius:13px;background:var(--soft);display:grid;place-items:center;color:var(--green);font-weight:900;font-size:20px;flex:none}.device-card h3{margin:0;font-size:17px}.device-meta{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0;color:var(--muted);font-size:12px}.device-error{color:#a33;background:#fff0f0;border-radius:8px;padding:8px 10px;font-size:12px;margin:10px 0}.device-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.device-actions button{margin:0}.danger{color:#b03838!important;border-color:#ebcaca!important}.contact-picker{border:1px solid var(--line);border-radius:11px;padding:13px;background:#f9fbfa}.picker-head,.table-tools,.heading-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.contact-picker>input{width:100%;margin:10px 0}.contact-options{max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:#fff}.contact-option{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:9px 11px;border-bottom:1px solid #edf1ef;font-size:13px}.contact-option:last-child{border-bottom:0}.contact-option small{color:var(--muted)}.contact-option input{margin:0}.table-tools{margin-bottom:10px}.table-tools label{margin:0}.heading-actions button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 11px}.broadcast-actions{display:flex;gap:5px;flex-wrap:wrap}.broadcast-actions button{margin:0;font-size:12px;padding:6px 8px}.badge.paused{background:#fff3d8;color:#936813}.badge.failed,.badge.cancelled{background:#ffeded;color:#a43d3d}
@media(max-width:900px){.device-overview{grid-template-columns:1fr}.device-card-top{align-items:center}.contact-option{grid-template-columns:auto 1fr}.contact-option>small:last-child{grid-column:2}.heading-actions{width:100%}}
.actions{flex-wrap:wrap;gap:8px}.device-card.state-disabled:before{background:#d65353}
.storage-meter{padding:13px;border:1px solid var(--line);border-radius:10px;background:#f8fbfa}.storage-meter .progress{margin:9px 0 0}.storage-meter b{font-size:14px}
.button-link,.broadcast-actions a{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:#fff;padding:8px 11px;color:var(--ink);text-decoration:none}.analytics-card{margin-top:18px}.mini-metrics{margin:12px 0}.mini-metrics article{box-shadow:none;padding:14px}.mini-metrics b{font-size:20px}.analytics-bars{height:100px;display:flex;align-items:end;gap:4px;border-bottom:1px solid var(--line);padding-top:10px}.analytics-bars span{height:100%;flex:1;display:flex;align-items:end}.analytics-bars i{display:block;width:100%;min-height:4px;background:linear-gradient(var(--green),#55caa1);border-radius:3px 3px 0 0}.inbox-layout{display:grid;grid-template-columns:360px minmax(0,1fr);gap:15px}.inbox-list{padding:12px}.inbox-list .grid{grid-template-columns:1fr 135px;margin-bottom:10px}.conversation-item{display:flex;width:100%;flex-direction:column;gap:4px;text-align:left;border:0;border-bottom:1px solid var(--line);background:#fff;padding:12px;border-radius:8px}.conversation-item:hover,.conversation-item.active{background:var(--soft)}.conversation-item span{display:flex;justify-content:space-between;gap:8px}.conversation-item i{font-style:normal;background:var(--green);color:#fff;border-radius:20px;padding:1px 7px;font-size:11px}.conversation-item small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}.conversation-item em{font-style:normal;font-size:11px;color:var(--green)}.thread-head{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid var(--line);padding-bottom:12px}.thread-head h3{margin:0}.thread-messages{height:390px;overflow:auto;background:#f2f6f4;border-radius:10px;padding:14px;margin:14px 0;display:flex;flex-direction:column;gap:8px}.bubble{max-width:76%;padding:9px 12px;border-radius:12px;background:#fff;box-shadow:0 2px 7px #0000000b}.bubble.out{align-self:flex-end;background:#dff7ed}.bubble p{margin:0;white-space:pre-wrap}.bubble small{color:var(--muted);font-size:10px}.inbox-thread .form{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.profile-dialog{width:min(900px,92vw);max-height:85vh;text-align:left;overflow:auto}.profile-dialog .close{position:sticky;float:right}.checks>button{margin:10px 0;border:1px solid var(--line);border-radius:8px;background:#fff;padding:9px 11px}
.heading button.primary,.actions button.primary{background:var(--green);border-color:var(--green);color:#fff}.profile-dialog form{clear:both;margin-top:18px}.profile-dialog .actions{gap:10px;justify-content:flex-end}.profile-dialog .actions .close{position:static;float:none}.conversation-actions{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.conversation-actions button{border:1px solid var(--line);border-radius:8px;background:#fff;padding:8px 10px}.conversation-actions .primary{background:var(--green);border-color:var(--green);color:#fff}.conversation-state{display:inline-flex!important;width:max-content;padding:3px 7px;border-radius:999px;background:#eef3f1}.state-ai_active{color:#087f5b!important}.state-waiting_cs{color:#b56a00!important;background:#fff4dc!important}.state-handled_cs{color:#1768b2!important;background:#eaf4ff!important}.state-waiting_customer{color:#7653a6!important;background:#f3edff!important}.state-completed{color:#59635f!important}
html,body{max-width:100%;overflow-x:hidden}.page{max-width:1500px}.form{width:100%;max-width:1100px}.compact-form{max-width:1100px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid>*{min-width:0}.grid input,.grid select,.grid textarea,.form input,.form select,.form textarea{max-width:100%;min-width:0}.inbox-layout{grid-template-columns:minmax(320px,390px) minmax(0,1fr)}.inbox-list,.inbox-thread{min-width:0}.inbox-list .grid{grid-template-columns:minmax(0,1fr) minmax(120px,140px)}.inbox-list input,.inbox-list select{width:100%}.cards{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.device-overview{grid-template-columns:repeat(3,minmax(0,1fr))}.portal > aside nav{scrollbar-width:thin;scrollbar-color:#8a9b95 transparent;padding-right:4px}.portal > aside nav::-webkit-scrollbar{width:6px}.portal > aside nav::-webkit-scrollbar-thumb{background:#789088;border-radius:10px}.cod-setting{display:flex;flex-direction:column;gap:12px;padding:15px;border:1px solid var(--line);border-radius:11px;background:#f7faf9}#add-device:disabled{background:#84928d;border-color:#84928d;color:#fff;cursor:not-allowed}
@media(max-width:900px){.inbox-layout{grid-template-columns:1fr}.thread-messages{height:330px}.mini-metrics{grid-template-columns:1fr 1fr}}
.balance-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}.balance-stats article{background:linear-gradient(145deg,#fff,#f7fbf9);border:1px solid var(--line);border-radius:14px;padding:18px}.balance-stats small,.balance-stats span{display:block;color:var(--muted)}.balance-stats b{display:block;font-size:25px;margin:5px 0;color:var(--dark)}.text-success{color:var(--green);font-weight:700}.text-danger{color:#b03838;font-weight:700}#device-diagnostics{margin-bottom:18px}#device-diagnostics p{margin:7px 0;border-top:1px solid var(--line);padding-top:7px}@media(max-width:900px){.balance-stats{grid-template-columns:1fr}}
/* v1.2.56 — Paket & Langganan lebih ringkas */
#page-commercial .table-wrap{overflow-x:auto}#page-commercial table{min-width:1080px}#page-commercial th{white-space:nowrap;padding:14px 12px}#page-commercial td{vertical-align:middle;padding:16px 12px}.subscription-row:hover{background:#fbfdfc}.subscription-store{min-width:145px}.subscription-store b,.subscription-store small{display:block}.subscription-store small{margin-top:4px;color:var(--muted)}.subscription-select{width:100%;min-width:150px;max-width:250px}.storage-addon-select{min-width:220px}.compact-label{margin-top:8px;gap:4px;font-size:11px}.compact-label input{width:100%!important;max-width:180px;padding:8px 10px}.field-hint{display:block;margin-top:6px;color:var(--muted);font-size:11px;line-height:1.35}.subscription-renew{margin-top:9px;align-items:center;gap:7px;white-space:nowrap}.subscription-renew input{width:auto}.subscription-date{width:145px!important}.subscription-total{min-width:150px}.subscription-total b{display:block;font-size:17px}.subscription-total small{display:block;color:var(--muted);margin-top:5px}.subscription-actions{min-width:128px}.subscription-actions button{display:block;width:100%;margin:0 0 8px}.subscription-actions .primary{color:#fff;background:var(--green);border-color:var(--green)}
@media(max-width:900px){#page-commercial table{min-width:1000px}.storage-addon-select{min-width:200px}}

/* v1.2.58 Inbox identity + order detail */
.inbox-contact-actions{margin-top:8px;gap:8px}
.inbox-contact-actions button{padding:7px 10px;font-size:12px}
.conversation-item small{line-height:1.45}
.order-table-card table{min-width:1050px}
.order-table-card td{vertical-align:top}
.order-table-card hr{border:0;border-top:1px solid var(--line,#e4e9e7);margin:8px 0}
.order-actions{display:flex;flex-direction:column;gap:7px;min-width:120px}
.order-actions .button-link,.order-actions button{text-align:center;margin:0}
.order-detail-dialog{width:min(960px,94vw);max-width:960px}
.order-detail-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;border-bottom:1px solid var(--line,#e4e9e7);padding-bottom:14px;margin-bottom:18px}
.order-detail-head h2{margin:4px 0}
.order-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}
.order-detail-grid article{border:1px solid var(--line,#e4e9e7);border-radius:12px;padding:14px;background:#fafcfb}
.order-detail-grid article h3{margin:6px 0 8px}
.order-detail-items{border:1px solid var(--line,#e4e9e7);border-radius:12px;overflow:hidden}
.order-detail-items>div{display:flex;justify-content:space-between;gap:20px;padding:12px 14px;border-bottom:1px solid var(--line,#e4e9e7)}
.order-detail-items>div:last-child{border-bottom:0}
.order-detail-items span:last-child{text-align:right}
.order-detail-items small{display:block;margin-top:3px}
.order-totals{margin:12px 0 20px auto;width:min(360px,100%)}
.order-totals p{display:flex;justify-content:space-between;margin:7px 0}
.order-totals .grand-total{font-size:18px;border-top:1px solid var(--line,#e4e9e7);padding-top:10px}
.order-history{border-left:3px solid #dce8e3;padding-left:14px}
@media(max-width:800px){.order-detail-grid{grid-template-columns:1fr}.order-detail-items>div{flex-direction:column}.order-detail-items span:last-child{text-align:left}}

/* v1.2.69 multi product media */
.media-upload-box{margin:12px 0;padding:14px}
.media-upload-box h4{margin:0 0 6px}
.media-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:10px}
.media-preview-grid figure{margin:0;border:1px solid var(--line,#e4e9e7);border-radius:10px;padding:7px}
.media-preview-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:7px}
.media-preview-grid figcaption{font-size:11px;line-height:1.4;margin-top:6px}

/* v1.2.81 official Pesantera identity */
.logo img{width:38px;height:38px;object-fit:contain;display:block;flex:0 0 38px}.logo .brand-name{display:inline;color:#fff;background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;min-width:0!important;height:auto!important;letter-spacing:normal;font-size:20px;font-weight:800}.logo .brand-name b{color:#53d6a6}.login-brand .logo img{width:48px;height:48px;flex-basis:48px}.portal > aside .logo img{filter:none}

/* v1.2.83 — Simple Product Manager */
.product-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}.product-summary-grid article{background:#fff;border:1px solid var(--line);border-radius:13px;padding:15px}.product-summary-grid small{display:block;color:var(--muted);margin-bottom:6px}.product-summary-grid b{font-size:24px;color:var(--dark)}.product-toolbar{padding:13px 15px}.product-search-row{display:grid;grid-template-columns:minmax(240px,1fr) 190px 170px auto;gap:9px}.product-search-row input,.product-search-row select{width:100%}.product-list-card{padding:0;overflow:visible}.product-list-card table{margin:0}.product-list-card td{vertical-align:middle}.product-list-card td:nth-child(2) b,.product-list-card td:nth-child(4) b{display:block}.product-list-card td:nth-child(2) small{display:block;color:var(--muted);margin-top:4px}.product-thumb-wrap{width:52px;height:52px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f5f8f7;display:grid;place-items:center}.product-thumb{width:100%;height:100%;object-fit:cover}.product-thumb-empty{font-size:22px}.product-status{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700;background:#eef3f1}.product-status.active{background:#e7f8f1;color:#087f5b}.product-status.low{background:#fff4dc;color:#a36100}.product-status.empty{background:#fdecec;color:#a63434}.product-status.draft{color:#59635f}.product-more{position:relative}.product-more>summary{list-style:none;cursor:pointer;font-size:22px;width:34px;height:34px;display:grid;place-items:center;border-radius:8px}.product-more>summary::-webkit-details-marker{display:none}.product-more>div{position:absolute;right:0;top:36px;z-index:30;min-width:155px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px #14231d26;padding:6px}.product-more button{display:block;width:100%;border:0;background:transparent;text-align:left;padding:9px;border-radius:7px}.product-more button:hover{background:var(--soft)}.danger-text{color:#b03838!important}.duplicate-result{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}.duplicate-result>p{margin:5px 0 10px}.duplicate-groups{display:grid;gap:6px;margin:10px 0}.duplicate-groups>div{display:flex;justify-content:space-between;gap:12px;background:#f7faf9;border-radius:8px;padding:8px 10px}.duplicate-groups small{color:var(--muted)}.product-tools>summary{cursor:pointer;font-weight:700}.product-tools-body{padding-top:16px}.product-tools-body>.form{margin:18px 0}.product-mobile-list{display:none}.product-mobile-card{position:relative;grid-template-columns:58px 1fr auto;gap:10px;align-items:center;border-bottom:1px solid var(--line);padding:12px}.product-mobile-info b,.product-mobile-info small,.product-mobile-info strong{display:block}.product-mobile-info small{color:var(--muted);margin:3px 0}.product-mobile-card>.product-more{position:absolute;right:8px;bottom:8px}.product-mobile-card>button{align-self:start}.product-heading .heading-actions{width:auto}
@media(max-width:900px){.product-summary-grid{grid-template-columns:1fr 1fr}.product-search-row{grid-template-columns:1fr 1fr}.product-search-row input{grid-column:1/-1}.product-desktop-table{display:none}.product-mobile-list{display:block}.product-heading{align-items:flex-start}.product-heading .heading-actions{width:auto}.product-tools-body>.grid{grid-template-columns:1fr}}
/* v1.2.84 simplified variants + WordPress-style bulk product actions */
.product-bulk-bar{display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid var(--line);background:#fbfdfc;flex-wrap:wrap}.product-bulk-bar select{min-width:150px}.product-select-all{display:flex;align-items:center;gap:7px;font-weight:600}.product-bulk-editor{display:grid;grid-template-columns:minmax(180px,1fr) 190px 150px auto;gap:9px;padding:12px;border-bottom:1px solid var(--line);background:#f5faf8}.product-row-select{width:17px;height:17px}.variant-simple-box{margin-top:14px}.variant-editor-list{display:grid;gap:9px;margin:12px 0}.variant-editor-row{display:grid;grid-template-columns:minmax(180px,1fr) 110px minmax(220px,1fr) auto;gap:10px;align-items:end;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fbfdfc}.variant-editor-row label{margin:0}.variant-editor-row small{display:block;color:var(--muted);margin-top:4px}.variant-remove{height:40px}.product-mobile-check{align-self:start;margin-top:6px}.product-mobile-card{grid-template-columns:22px 58px 1fr auto}
@media(max-width:900px){.product-bulk-editor{grid-template-columns:1fr}.variant-editor-row{grid-template-columns:1fr 90px}.variant-editor-row label:nth-child(3){grid-column:1/-1}.variant-remove{grid-column:1/-1}.product-mobile-card{grid-template-columns:22px 58px 1fr}.product-mobile-card>button{grid-column:3}.product-mobile-card>.product-more{right:8px;bottom:8px}}

/* v1.2.85 compact grouped sidebar */
.portal > aside nav.compact-nav{gap:3px;margin-top:26px;overflow-y:auto;padding-right:4px}
.compact-nav .nav-quick{display:flex;flex-direction:column;gap:3px}
.portal > aside .compact-nav button[data-page]{width:100%;display:flex;align-items:center;gap:9px;padding:9px 11px}
.compact-nav .nav-icon{width:19px;display:inline-grid;place-items:center;flex:0 0 19px;font-size:14px}
.compact-nav .nav-divider{height:1px;background:#ffffff16;margin:7px 5px}
.compact-nav .nav-group{display:block}
.portal > aside .compact-nav .nav-group-toggle{width:100%;border:0;background:transparent;color:#b5c8c1;padding:10px 11px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;text-align:left;font-weight:650;cursor:pointer}
.portal > aside .compact-nav .nav-group-toggle>span{display:flex;align-items:center;gap:9px;min-width:0}
.portal > aside .compact-nav .nav-group-toggle i{font-style:normal;font-size:18px;line-height:1;transition:transform .16s ease;color:#8ca49c}
.portal > aside .compact-nav .nav-group-toggle:hover,.portal > aside .compact-nav .nav-group.open>.nav-group-toggle{background:#ffffff0b;color:#fff}
.compact-nav .nav-group.open>.nav-group-toggle i{transform:rotate(90deg)}
.compact-nav .nav-group-items{display:none;padding:2px 0 4px 28px}
.compact-nav .nav-group.open>.nav-group-items{display:flex;flex-direction:column;gap:2px}
.portal > aside .compact-nav .nav-group-items button[data-page]{padding:8px 10px;font-size:13px;color:#93aaa2;border-radius:7px}
.portal > aside .compact-nav .nav-group-items button[data-page].active{color:#fff;background:#ffffff12}
@media(max-width:900px){.portal > aside nav.compact-nav{margin-top:20px}.portal > aside .compact-nav .nav-group-toggle,.portal > aside .compact-nav button[data-page]{min-height:42px}}
/* v1.2.86 — Inbox Media + AI Vision */
.chat-media-compose{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.chat-media-compose .muted{font-size:12px;color:var(--muted)}
.chat-image-button{display:block;border:0;background:transparent;padding:0;margin:0 0 6px;cursor:zoom-in;max-width:100%}.chat-image{display:block;max-width:min(320px,100%);max-height:340px;border-radius:12px;object-fit:cover;border:1px solid var(--line)}
.bubble.in .chat-image,.bubble.out .chat-image{background:#fff}@media(max-width:680px){.chat-image{max-width:100%;max-height:280px}}
.product-heading .heading-actions{display:flex;gap:9px;flex-wrap:wrap}.product-heading .heading-actions>button:not(.primary){border:1px solid var(--line);border-radius:9px;background:#fff;padding:11px 15px;font-weight:750}.product-import-dialog{width:min(820px,94vw);max-height:88vh;text-align:left;overflow:auto}.product-import-dialog .close{position:sticky;float:right;top:0}.import-dialog-head h3{margin:5px 0}.import-dialog-head p{margin:0 0 18px}.csv-import-preview{border:1px solid var(--line);border-radius:10px;padding:12px;min-height:54px}.csv-preview-summary{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.csv-preview-summary span{padding:5px 9px;border-radius:999px;background:var(--soft);font-size:12px;font-weight:750}.csv-preview-summary .bad{background:#fff1f0;color:#b42318}.actions-right{display:flex;gap:8px}.product-import-dialog .actions{align-items:center;gap:12px;flex-wrap:wrap}.product-import-dialog button:disabled{opacity:.55;cursor:not-allowed}

/* v1.2.88 — AI Vision controls */
.vision-settings{border:1px solid var(--border,#dbe5df);border-radius:14px;padding:14px;margin:10px 0 16px;background:rgba(37,211,102,.035)}
.vision-settings .block-note{display:block;margin-top:4px;font-weight:400;opacity:.72}.vision-settings .badge.failed{background:#fee2e2;color:#991b1b}

/* v1.3.2 Media Library preview */
.media-library-item{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start}.media-library-thumb{width:120px;height:90px;object-fit:cover;border-radius:10px;background:#eef2f1}.storage-badge{display:block;margin-top:5px;font-weight:700}.row-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.row-actions .button{display:inline-flex;align-items:center;text-decoration:none;border:1px solid #cfd8d5;border-radius:8px;padding:7px 10px;color:inherit;background:#fff}@media(max-width:640px){.media-library-item{grid-template-columns:88px 1fr}.media-library-thumb{width:88px;height:72px}}

.order-stage-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 16px}.order-stage-tabs button{display:flex;gap:7px;align-items:center}.order-stage-tabs button b{min-width:22px;padding:2px 7px;border-radius:999px;background:rgba(0,0,0,.07);font-size:12px}.order-stage-tabs button.active{font-weight:700;box-shadow:inset 0 0 0 2px currentColor}

/* v1.3.20 Visual Automation Builder */
.visual-flow-shell{padding:0;overflow:hidden}.visual-flow-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px;border-bottom:1px solid var(--line)}.visual-flow-head h3{margin:0 0 5px}.visual-flow-head p{margin:0;color:var(--muted)}.flow-head-actions{display:flex;gap:8px;flex-wrap:wrap}.flow-meta{display:grid;grid-template-columns:2fr 1fr auto;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);align-items:end}.flow-enable{padding-bottom:11px}.visual-flow-layout{display:grid;grid-template-columns:165px minmax(480px,1fr) 250px;min-height:560px}.flow-palette,.flow-inspector{padding:14px;background:#f8fbfa}.flow-palette{border-right:1px solid var(--line)}.flow-inspector{border-left:1px solid var(--line)}.flow-palette>b,.flow-inspector>b{display:block;margin-bottom:10px}.flow-palette button{display:block;width:100%;text-align:left;margin:7px 0;padding:9px 10px;background:#fff}.flow-canvas-wrap{overflow:auto;background-image:radial-gradient(#cfd9d5 1px,transparent 1px);background-size:20px 20px}.flow-canvas{position:relative;min-width:850px;min-height:560px}.flow-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.flow-lines line{stroke:#79a997;stroke-width:2}.flow-node{position:absolute;width:180px;min-height:72px;text-align:left;padding:11px 13px;border:2px solid #dbe7e2;background:#fff;border-radius:12px;box-shadow:0 4px 12px #183c2e12;cursor:grab;z-index:2}.flow-node.selected{border-color:var(--green);box-shadow:0 0 0 3px #21a1791c}.flow-node small,.flow-node b{display:block}.flow-node small{text-transform:uppercase;font-size:10px;color:var(--muted);margin-bottom:5px}.flow-empty{position:absolute;inset:0;place-items:center;color:var(--muted)}.flow-inspector label{display:block;margin:10px 0}.flow-inspector input{width:100%}.flow-connect-choice{display:block;width:100%;margin-top:5px;text-align:left}.flow-bottom{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:16px 18px;border-top:1px solid var(--line)}.flow-list,.flow-run-history{margin-top:9px;display:grid;gap:7px}.flow-list-item{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;background:#fff}.flow-list-item.active{border-color:var(--green)}.flow-list-item>button:first-child{flex:1;text-align:left;border:0;background:transparent}.flow-list-item b,.flow-list-item small{display:block}.flow-list-item small,.flow-run-history small{color:var(--muted);margin-top:3px}.flow-run-history>div{padding:8px 10px;border:1px solid var(--line);border-radius:8px}.flow-run-history b,.flow-run-history small{display:block}.flow-json-debug{margin:0 18px 18px}.flow-json-debug textarea{width:100%;margin-top:8px;font-family:monospace;font-size:11px}@media(max-width:1050px){.visual-flow-layout{grid-template-columns:130px minmax(420px,1fr)}.flow-inspector{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}#flow-inspector-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}@media(max-width:700px){.visual-flow-head,.flow-meta{grid-template-columns:1fr;display:grid}.visual-flow-layout{grid-template-columns:1fr}.flow-palette{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}.flow-palette>b{display:none}.flow-palette button{min-width:135px;margin:0 5px}.flow-inspector{grid-column:auto}.flow-bottom{grid-template-columns:1fr}}

body.mintol-admin-mode #mintol-mode-badge::after{content:' · /mintol';font-weight:700;color:var(--primary,#6b5cff)}

.portal > aside .nav-search,.nav-search{display:flex;align-items:center;gap:8px;margin:4px 0 12px 0;padding:8px 12px;border:1px solid rgba(255,255,255,0.14);border-radius:9px;background:rgba(255,255,255,0.07);color:#cbd8d4;transition:all .18s ease;box-sizing:border-box}
.portal > aside .nav-search:focus-within,.nav-search:focus-within{background:rgba(255,255,255,0.12);border-color:#53d6a6;box-shadow:0 0 0 2px rgba(83,214,166,0.22);color:#fff}
.nav-search span{font-size:14px;color:#8ca39c;user-select:none;line-height:1}
.nav-search input{width:100%;border:0!important;outline:0!important;padding:0!important;background:transparent!important;color:#fff!important;font:inherit;font-size:13px!important;line-height:1.4!important;box-shadow:none!important}
.nav-search input::placeholder{color:#769188;font-size:13px}
.nav-group-items button.hidden{display:none}

/* v1.3.198 Modern Orders Board & Couriers Settings */
#operations-summary.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px;}
#operations-summary.metrics article{cursor:pointer;transition:all .18s ease;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:12px;padding:14px 16px;}
#operations-summary.metrics article:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(13,47,39,0.08);border-color:var(--green);}
#operations-summary.metrics article.active{border-color:var(--green);background:var(--soft);box-shadow:0 0 0 2px var(--green);}
#operations-summary.metrics article small{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
#operations-summary.metrics article b{font-size:26px;margin-top:4px;color:var(--ink);}

.order-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.4;}
.order-badge-dot{width:7px;height:7px;border-radius:50%;display:inline-block;}
.badge-status-awaiting_payment,.badge-status-awaiting_shipping_quote{background:#fff8eb;color:#b45309;border:1px solid #fde68a;}
.badge-status-awaiting_payment .order-badge-dot,.badge-status-awaiting_shipping_quote .order-badge-dot{background:#f59e0b;}
.badge-status-ready_for_warehouse,.badge-status-processing{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;}
.badge-status-ready_for_warehouse .order-badge-dot,.badge-status-processing .order-badge-dot{background:#3b82f6;}
.badge-status-shipped{background:#f5f3ff;color:#6d28d9;border:1px solid #ddd6fe;}
.badge-status-shipped .order-badge-dot{background:#8b5cf6;}
.badge-status-complete{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;}
.badge-status-complete .order-badge-dot{background:#10b981;}
.badge-status-cancelled,.badge-status-payment_rejected{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;}
.badge-status-cancelled .order-badge-dot,.badge-status-payment_rejected .order-badge-dot{background:#ef4444;}

.order-customer-cell{display:flex;flex-direction:column;gap:3px;}
.order-customer-header{display:flex;align-items:center;gap:6px;}
.order-customer-name{font-weight:700;color:var(--ink);font-size:13px;}
.order-wa-icon-link{display:inline-flex;align-items:center;justify-content:center;color:#10b981;transition:transform .15s ease;text-decoration:none;}
.order-wa-icon-link:hover{transform:scale(1.2);color:#059669;}
.order-customer-phone{font-size:12px;color:var(--muted);}

.order-product-cell{font-size:12px;line-height:1.4;}
.order-product-title{font-weight:600;color:var(--ink);}
.order-product-subtotal{font-size:11px;color:var(--muted);margin-top:2px;}
.order-product-total{font-weight:800;font-size:13px;color:var(--ink);margin-top:3px;}

.order-shipping-cell{font-size:12px;min-width:180px;}
.order-courier-tag{display:inline-block;padding:2px 7px;border-radius:6px;background:#eef3f1;font-weight:700;font-size:11px;color:#0d2f27;margin-bottom:3px;}
.order-dest-text{font-size:11px;color:var(--muted);line-height:1.3;display:block;margin-bottom:6px;}
.order-resi-box{display:flex;align-items:center;gap:5px;margin-top:4px;}
.order-resi-box input{width:130px;padding:6px 8px;font-size:11px;border:1px solid var(--line);border-radius:6px;background:#fff;}
.order-resi-box .btn-save-resi{padding:6px 9px;font-size:11px;font-weight:600;border:1px solid var(--line);border-radius:6px;background:#f9fbfa;cursor:pointer;white-space:nowrap;}
.order-resi-box .btn-save-resi:hover{background:#eef5f2;border-color:var(--green);color:var(--green);}
.order-resi-badge{display:inline-flex;align-items:center;gap:4px;font-family:monospace;font-size:11px;font-weight:700;padding:3px 8px;background:#f3f6f5;border:1px solid var(--line);border-radius:6px;color:#17211e;}

.order-actions{display:inline-flex;align-items:center;justify-content:center;position:relative;}
.order-action-menu-wrap{position:relative;display:inline-block;text-align:right;}
.order-menu-trigger{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid #d1d5db;background:#ffffff;color:#374151;font-size:16px;cursor:pointer;transition:all .15s ease;padding:0;}
.order-menu-trigger:hover,.order-menu-trigger:focus-visible{background:#f3f4f6;border-color:#9ca3af;color:#111827;outline:none;}
.order-dropdown-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:999;min-width:195px;background:#ffffff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 10px 25px -5px rgba(0,0,0,0.12),0 8px 10px -6px rgba(0,0,0,0.06);padding:6px;display:flex;flex-direction:column;gap:2px;}
.order-dropdown-menu.hidden{display:none !important;}
.order-dropdown-item{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:12.5px;font-weight:500;color:#374151;text-decoration:none;border-radius:6px;border:none;background:transparent;cursor:pointer;text-align:left;width:100%;box-sizing:border-box;transition:background .12s ease,color .12s ease;white-space:nowrap;}
.order-dropdown-item:hover{background:#f3f4f6;color:#111827;}
.order-dropdown-item.highlight-action{color:#0d8d64;font-weight:600;}
.order-dropdown-item.highlight-action:hover{background:#ecfdf5;color:#065f46;}
.order-dropdown-icon{font-size:14px;display:inline-flex;align-items:center;justify-content:center;width:18px;}
#order-data-table{min-height:220px;}
#order-data-table tbody tr:last-child:not(:first-child) .order-dropdown-menu{bottom:calc(100% + 4px);top:auto;}

.store-couriers-grid .courier-card{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fdfefe;transition:all .15s ease;}
.store-couriers-grid .courier-card:hover{border-color:var(--green);background:#fafdfc;}
.store-couriers-grid .courier-info{display:flex;align-items:center;gap:10px;}
.store-couriers-grid .courier-icon{width:32px;height:32px;border-radius:8px;background:#eaf7f2;color:var(--green);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;}
.store-couriers-grid .courier-details b{display:block;font-size:13px;color:var(--ink);text-transform:uppercase;}
.store-couriers-grid .courier-details small{display:block;font-size:11px;color:var(--muted);}

/* Modern Payment & Wallet Styling (v1.3.199) */
.payment-hero-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;margin-bottom:20px;}
@media(max-width:900px){.payment-hero-grid{grid-template-columns:1fr;}}
.payment-wallet-card{background:linear-gradient(135deg,#062e24 0%,#0d4a3b 60%,#0d8d64 100%);color:#fff;border-radius:16px;padding:24px;position:relative;overflow:hidden;box-shadow:0 10px 25px -5px rgba(6,46,36,0.3);display:flex;flex-direction:column;justify-content:space-between;min-height:200px;}
.payment-wallet-card::before{content:"";position:absolute;top:-40px;right:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(52,211,153,0.3) 0%,rgba(255,255,255,0) 70%);pointer-events:none;}
.payment-wallet-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.payment-wallet-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.15);backdrop-filter:blur(8px);padding:5px 12px;border-radius:999px;font-size:11px;font-weight:600;color:#6ee7b7;border:1px solid rgba(255,255,255,0.2);}
.payment-wallet-badge .dot{width:7px;height:7px;background:#34d399;border-radius:50%;box-shadow:0 0 8px #34d399;}
.payment-wallet-tenant-label{font-size:11px;color:#a7d3c5;}
.payment-wallet-balance-wrap small{font-size:12px;color:#a7d3c5;font-weight:500;}
.payment-wallet-amount{font-size:36px;font-weight:800;letter-spacing:-1px;margin:4px 0 16px 0;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,0.2);}
.payment-wallet-actions{display:flex;gap:10px;flex-wrap:wrap;}
.btn-wallet{padding:10px 18px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s ease;border:none;}
.btn-wallet-topup{background:#10b981;color:#fff;box-shadow:0 4px 12px rgba(16,185,129,0.4);}
.btn-wallet-topup:hover{background:#059669;transform:translateY(-1px);}
.btn-wallet-withdraw{background:rgba(255,255,255,0.12);color:#fff;border:1px solid rgba(255,255,255,0.2);backdrop-filter:blur(8px);}
.btn-wallet-withdraw:hover{background:rgba(255,255,255,0.2);transform:translateY(-1px);}

.payment-bank-card{background:#fff;border-radius:16px;padding:22px;border:1px solid var(--line);box-shadow:var(--shadow,0 1px 3px rgba(0,0,0,0.05));display:flex;flex-direction:column;justify-content:space-between;}
.payment-bank-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.payment-bank-card-header h3{margin:0;font-size:15px;font-weight:700;color:var(--ink);}
.badge-secure{background:#ecfdf5;color:#047857;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;border:1px solid #a7f3d0;display:inline-flex;align-items:center;gap:4px;}
.payment-bank-card-desc{font-size:12px;color:var(--muted);margin:0 0 12px 0;line-height:1.4;}
.payment-bank-detail-box{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;}
.payment-bank-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;}
.payment-bank-row:last-child{margin-bottom:0;}
.payment-bank-row span{color:var(--muted);}
.payment-bank-row b{color:var(--ink);}
.btn-change-bank{width:100%;background:#f1f5f9;color:var(--ink);border:1px solid var(--line);padding:9px 14px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s ease;}
.btn-change-bank:hover{background:#e2e8f0;}

.payment-inline-panel{border-radius:12px;padding:20px;margin-bottom:20px;border:1px solid var(--line);background:#fff;}
.payment-inline-panel.withdraw-theme{background:#f0f9ff;border-color:#bae6fd;}
.payment-inline-panel.security-theme{background:#fefce8;border-color:#fef08a;}
.payment-inline-panel .panel-header-flex{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;}
.payment-inline-panel h4{margin:0 0 4px 0;font-size:15px;font-weight:700;color:var(--ink);}
.payment-inline-panel p{margin:0;font-size:13px;}
.panel-close-btn{background:none;border:none;font-size:18px;cursor:pointer;color:var(--muted);padding:2px 6px;}
.panel-close-btn:hover{color:var(--ink);}

.a2f-verification-box{background:#fff;border:1px solid #fde047;border-radius:10px;padding:14px 16px;margin:14px 0;}
.a2f-verification-box b{font-size:13px;color:#854d0e;display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.a2f-verification-box p{font-size:12px;color:#713f12;margin:0 0 10px 0;}
.a2f-input-row{display:flex;gap:10px;align-items:center;}
.a2f-input-code{font-size:18px!important;font-weight:800;letter-spacing:6px;text-align:center;width:160px!important;background:#fffef2!important;border-color:#eab308!important;}

.payment-tabs-nav{display:flex;gap:8px;border-bottom:2px solid var(--line);margin-bottom:20px;}
.payment-tab-btn{background:none;border:none;padding:12px 20px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:8px;transition:color .2s ease;border-bottom:2px solid transparent;margin-bottom:-2px;}
.payment-tab-btn:hover{color:var(--ink);}
.payment-tab-btn.active{color:var(--primary,#0284c7);border-bottom:2px solid var(--primary,#0284c7);font-weight:700;}
.payment-tab-btn .badge-count{background:var(--line);color:var(--muted);font-size:11px;padding:2px 7px;border-radius:999px;font-weight:600;}
.payment-tab-btn.active .badge-count{background:#e0f2fe;color:#0369a1;}

/* ==========================================================================
   MODERN ENTERPRISE SAAS DESIGN SYSTEM (v1.3.200)
   Collapsible Sidebar, Fintech Theme, Clean Cards, Unified Badges & Forms
   ========================================================================== */

/* 1. Collapsible Sidebar Desktop & Mobile */
.portal > aside {
  width: 260px !important;
  background: #062e24 !important; /* Deep Forest Emerald Dark Theme */
  border-right: 1px solid #0d4a3b !important;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1), transform 0.22s ease !important;
  z-index: 50;
}

.workspace {
  margin-left: 260px !important;
  transition: margin-left 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: #f4f8f6 !important; /* Soft Green-tinted Clean Slate */
  min-height: 100vh;
}

/* Sidebar Toggle Button inside Logo */
.sidebar-toggle-btn {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #a7d3c5 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  border-radius: 7px !important;
  padding: 4px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}
.sidebar-toggle-btn:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border-color: #53d6a6 !important;
}

/* Sidebar Collapsed State (Desktop Toggle) */
.portal.sidebar-collapsed > aside {
  width: 68px !important;
  padding: 14px 6px !important;
}

.portal.sidebar-collapsed .workspace,
.portal.sidebar-collapsed .mintol-workspace {
  margin-left: 68px !important;
}

.portal.sidebar-collapsed .logo {
  justify-content: center !important;
  padding: 0 0 14px 0 !important;
  gap: 0 !important;
}

.portal.sidebar-collapsed .logo img,
.portal.sidebar-collapsed .logo .brand-name,
.portal.sidebar-collapsed .nav-search,
.portal.sidebar-collapsed .nav-quick button span:last-child,
.portal.sidebar-collapsed nav.compact-nav button[data-tab] span:last-child,
.portal.sidebar-collapsed .nav-group,
.portal.sidebar-collapsed .nav-divider,
.portal.sidebar-collapsed .account b,
.portal.sidebar-collapsed .account small,
.portal.sidebar-collapsed .account button {
  display: none !important;
}

.portal.sidebar-collapsed .nav-quick button,
.portal.sidebar-collapsed nav.compact-nav button[data-tab] {
  justify-content: center !important;
  padding: 10px 0 !important;
  border-radius: 8px !important;
}

.portal.sidebar-collapsed .nav-icon {
  font-size: 18px !important;
  margin: 0 !important;
  width: auto !important;
}

/* 2. Modern Sidebar Styling */
.portal > aside .logo {
  padding: 0 8px 16px 8px;
  border-bottom: 1px solid #0d4a3b;
  display: flex;
  align-items: center;
  gap: 10px;
}

.compact-nav .nav-search input {
  background: #0b3d30 !important;
  border: 1px solid #135d4b !important;
  color: #f0fdf4 !important;
  border-radius: 8px !important;
  padding: 8px 10px 8px 30px !important;
  font-size: 12.5px !important;
}

.compact-nav .nav-search input:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
}

.portal > aside .compact-nav button[data-page] {
  color: #a7d3c5 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
  padding: 8px 12px !important;
}

.portal > aside .compact-nav button[data-page]:hover {
  background: #0e4c3c !important;
  color: #ffffff !important;
}

.portal > aside .compact-nav button[data-page].active {
  background: #0d8d64 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(13, 141, 100, 0.4) !important;
}

.portal > aside .compact-nav .nav-group-toggle {
  color: #79a899 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding: 8px 10px !important;
}

.portal > aside .compact-nav .nav-group-toggle:hover {
  color: #e2f7ef !important;
  background: transparent !important;
}

.compact-nav .nav-group-items {
  padding-left: 14px !important;
  border-left: 1px solid #0e4c3c;
  margin-left: 16px;
  margin-top: 4px;
}

/* 3. Modern Sticky Workspace Header */
.workspace header {
  height: 64px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 0 24px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
}

#menu {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}

#menu:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.workspace header h2 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.3px !important;
}

.workspace header small {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

/* 4. Global Card, Form, and Table Clean Polishing */
.card, .metrics article {
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02) !important;
}

.metrics article b {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.metrics article small {
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

input, select, textarea {
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

input:focus, select:focus, textarea:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

button.primary, .actions .primary {
  background: #10b981 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  padding: 9px 16px !important;
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.3) !important;
  cursor: pointer;
  transition: background 0.15s ease !important;
}

button.primary:hover, .actions .primary:hover {
  background: #059669 !important;
}

table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 11px 14px !important;
}

td {
  padding: 12px 14px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  font-size: 13px !important;
}

tr:hover td {
  background: #fafbfc !important;
}

/* ==========================================================================
   ULTIMATE CS & OPERATIONS SUITE (v1.3.201)
   Dark/Light Mode, Command Palette, Smart Copilot Pills, Sound Alerts & Kanban
   ========================================================================== */

/* 1. Header Suite Actions */
.header-suite-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.header-action-btn {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  color: #334155 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease !important;
}

.header-action-btn:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.cmd-shortcut {
  font-size: 10px;
  font-weight: 700;
  background: #e2e8f0;
  color: #475569;
  padding: 2px 5px;
  border-radius: 4px;
}

/* 2. Global Command Palette Modal */
.command-palette-dialog {
  width: min(580px, 94vw);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 0;
  background: #ffffff;
  box-shadow: 0 20px 45px rgba(0,0,0,0.18);
  overflow: hidden;
}

.palette-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.palette-icon {
  font-size: 16px;
}

.palette-input-wrap input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
  color: #0f172a;
  outline: none !important;
  padding: 0 !important;
}

.palette-esc-kbd {
  font-size: 11px;
  background: #e2e8f0;
  color: #64748b;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.palette-results {
  max-height: 340px;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.palette-group-title {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 12px 4px 12px;
}

.palette-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.palette-item:hover, .palette-item.active {
  background: #ecfdf5;
}

.palette-item span {
  font-size: 16px;
}

.palette-item b {
  font-size: 13.5px;
  color: #0f172a;
}

.palette-item small {
  margin-left: auto;
  font-size: 12px;
  color: #64748b;
}

/* 3. Smart Copilot Pills in Inbox */
.smart-copilot-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}

.copilot-pill-label {
  font-size: 11px;
  font-weight: 700;
  color: #166534;
  white-space: nowrap;
}

.copilot-pill-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.copilot-pill-scroll::-webkit-scrollbar { display: none; }

.copilot-pill {
  background: #ffffff !important;
  border: 1px solid #86efac !important;
  color: #15803d !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  cursor: pointer;
  transition: all 0.15s ease !important;
}

.copilot-pill:hover {
  background: #16a34a !important;
  color: #ffffff !important;
  border-color: #16a34a !important;
}

/* 4. Kanban Board Layout */
.order-view-toggle-wrap {
  display: inline-flex;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc;
}

.order-view-toggle-btn {
  border: none !important;
  background: transparent !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  cursor: pointer;
}

.order-view-toggle-btn.active {
  background: #10b981 !important;
  color: #ffffff !important;
}

.order-kanban-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding: 12px 0 18px 0;
}

.kanban-col {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  min-height: 480px;
  max-height: 700px;
}

.kanban-col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  border-bottom: 1px solid #e2e8f0;
}

.kanban-col-head b {
  background: #e2e8f0;
  color: #475569;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
}

.kanban-card-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kanban-order-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  cursor: pointer;
  transition: all 0.15s ease;
}

.kanban-order-item:hover {
  border-color: #10b981;
  box-shadow: 0 3px 6px rgba(16,185,129,0.12);
  transform: translateY(-1px);
}

.kanban-order-item-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 4px;
}

.kanban-order-item-head b {
  color: #0f172a;
}

.kanban-order-item-cust {
  font-size: 12px;
  color: #475569;
  margin-bottom: 4px;
}

.kanban-order-item-total {
  font-size: 13px;
  font-weight: 800;
  color: #0d8d64;
}

/* 5. Emerald Dark Mode System */
body.dark-mode {
  background: #061a14 !important;
  color: #e2f7ef !important;
}

body.dark-mode .workspace {
  background: #061a14 !important;
}

body.dark-mode .workspace header {
  background: #09231b !important;
  border-color: #0d382b !important;
}

body.dark-mode .workspace header h2 {
  color: #f0fdf4 !important;
}

body.dark-mode .workspace header small {
  color: #79a899 !important;
}

body.dark-mode #menu, 
body.dark-mode .header-action-btn {
  background: #0d382b !important;
  border-color: #134e3d !important;
  color: #a7d3c5 !important;
}

body.dark-mode .card,
body.dark-mode .metrics article,
body.dark-mode .order-table-card,
body.dark-mode .inbox-list,
body.dark-mode .inbox-crm-sidebar,
body.dark-mode .inbox-thread {
  background: #09231b !important;
  border-color: #0d382b !important;
  color: #e2f7ef !important;
}

body.dark-mode .metrics article b {
  color: #ffffff !important;
}

body.dark-mode .metrics article small {
  color: #79a899 !important;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: #0b2e24 !important;
  border-color: #134e3d !important;
  color: #f0fdf4 !important;
}

body.dark-mode th {
  background: #0d382b !important;
  color: #a7d3c5 !important;
  border-color: #134e3d !important;
}

body.dark-mode td {
  border-color: #0d382b !important;
  color: #e2f7ef !important;
}

body.dark-mode tr:hover td {
  background: #0d382b !important;
}

body.dark-mode .command-palette-dialog {
  background: #09231b !important;
  border-color: #134e3d !important;
}

body.dark-mode .palette-input-wrap {
  background: #061a14 !important;
  border-color: #0d382b !important;
}

body.dark-mode .palette-input-wrap input {
  color: #f0fdf4 !important;
}

body.dark-mode .palette-item:hover,
body.dark-mode .palette-item.active {
  background: #0d382b !important;
}

body.dark-mode .palette-item b {
  color: #f0fdf4 !important;
}

body.dark-mode .kanban-col {
  background: #061a14 !important;
  border-color: #0d382b !important;
}

body.dark-mode .kanban-col-head {
  border-color: #0d382b !important;
  color: #a7d3c5 !important;
}

body.dark-mode .kanban-order-item {
  background: #09231b !important;
  border-color: #0d382b !important;
}

body.dark-mode .kanban-order-item-head b {
  color: #f0fdf4 !important;
}

/* Inbox Product Picker Modal */
.inbox-product-results {
  max-height: 420px;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inbox-product-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--line, #e2e8f0);
  background: #fff;
  transition: all 0.15s ease;
}

.inbox-product-item:hover {
  border-color: #10b981;
  background: #f0fdf4;
}

.inbox-product-thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  flex-shrink: 0;
}

.inbox-product-thumb-empty {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}

.inbox-product-info {
  flex: 1;
  min-width: 0;
}

.inbox-product-info b {
  display: block;
  font-size: 14px;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-product-info small {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

.inbox-product-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.inbox-product-actions button {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  white-space: nowrap;
}

body.dark-mode .inbox-product-item {
  background: #09231b !important;
  border-color: #0d382b !important;
}

body.dark-mode .inbox-product-item:hover {
  background: #0f3d30 !important;
  border-color: #10b981 !important;
}

body.dark-mode .inbox-product-info b {
  color: #f0fdf4 !important;
}

body.dark-mode .inbox-product-info small {
  color: #a7d3c5 !important;
}

/* Automation Unified Tab Navigation & Holiday Mode */
.automation-tabs-nav {
  display: flex;
  gap: 8px;
  background: var(--surface-2, #f1f5f9);
  padding: 6px;
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid var(--border, #e2e8f0);
}

.automation-tab-btn {
  flex: 1;
  padding: 10px 16px;
  background: transparent;
  color: var(--text-muted, #64748b);
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.automation-tab-btn:hover {
  color: var(--text, #0f172a);
  background: rgba(255, 255, 255, 0.5);
}

.automation-tab-btn.active {
  background: var(--surface, #ffffff);
  color: var(--primary, #059669);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

body.dark-mode .automation-tabs-nav {
  background: #0f172a;
  border-color: #1e293b;
}

body.dark-mode .automation-tab-btn {
  color: #94a3b8;
}

body.dark-mode .automation-tab-btn:hover {
  color: #f8fafc;
  background: #1e293b;
}

body.dark-mode .automation-tab-btn.active {
  background: #1e293b;
  color: #34d399;
}

.autotab-content {
  display: none;
}

.autotab-content.active {
  display: block;
}

/* Holiday Box Styling */
.holiday-config-box {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 12px;
  background: linear-gradient(145deg, #f0fdf4 0%, #e6f7ef 100%);
  border: 1px solid #bbf7d0;
}

body.dark-mode .holiday-config-box {
  background: linear-gradient(145deg, #062b1e 0%, #083324 100%);
  border-color: #134e4a;
}

.holiday-box-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.holiday-box-icon {
  font-size: 24px;
  line-height: 1;
}

.holiday-preview-tip {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.7);
  border: 1px dashed #86efac;
  color: #166534;
}

body.dark-mode .holiday-preview-tip {
  background: rgba(15, 23, 42, 0.5);
  border-color: #047857;
  color: #6ee7b7;
}

/* User-Friendly Linear Step Builder Styling */
.flow-mode-toggle button {
  border: none;
  background: transparent;
  color: var(--text-muted, #64748b);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.flow-mode-toggle button.active {
  background: var(--surface, #ffffff);
  color: var(--primary, #059669);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

body.dark-mode .flow-mode-toggle {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark-mode .flow-mode-toggle button.active {
  background: #0f172a;
  color: #34d399;
}

.flow-step-card {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: var(--surface, #ffffff);
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: border-color 0.2s ease;
}

.flow-step-card:hover {
  border-color: #94a3b8;
}

body.dark-mode .flow-step-card {
  background: #0f172a;
  border-color: #1e293b;
}

.flow-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.flow-step-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  text-transform: uppercase;
}

.flow-step-badge.tag-trigger { background: #eff6ff; color: #2563eb; }
.flow-step-badge.tag-ai { background: #f5f3ff; color: #7c3aed; }
.flow-step-badge.tag-reply { background: #ecfdf5; color: #059669; }
.flow-step-badge.tag-delay { background: #fffbeb; color: #d97706; }
.flow-step-badge.tag-condition { background: #fef2f2; color: #dc2626; }
.flow-step-badge.tag-handoff { background: #f0fdf4; color: #166534; }
.flow-step-badge.tag-label { background: #f1f5f9; color: #475569; }
.flow-step-badge.tag-webhook { background: #fdf4ff; color: #c026d3; }

body.dark-mode .flow-step-badge.tag-trigger { background: #1e3a8a; color: #93c5fd; }
body.dark-mode .flow-step-badge.tag-ai { background: #3b0764; color: #d8b4fe; }
body.dark-mode .flow-step-badge.tag-reply { background: #064e3b; color: #6ee7b7; }
body.dark-mode .flow-step-badge.tag-delay { background: #451a03; color: #fcd34d; }
body.dark-mode .flow-step-badge.tag-condition { background: #450a0a; color: #fca5a5; }

.flow-step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.flow-step-grid label, .flow-step-card label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flow-step-card input, .flow-step-card select, .flow-step-card textarea {
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border, #cbd5e1);
  background: var(--surface, #ffffff);
}

body.dark-mode .flow-step-card input,
body.dark-mode .flow-step-card select,
body.dark-mode .flow-step-card textarea {
  background: #1e293b;
  border-color: #334155;
  color: #f8fafc;
}

@media (max-width: 900px) {
  .flow-builder-container {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   INBOX QUICK REPLY CHIPS (v1.3.207)
   ========================================================================== */
.inbox-quick-reply-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 10px;
  background: var(--surface-alt, #f8fafc);
  border-top: 1px solid var(--border, #e2e8f0);
  border-bottom: 1px solid var(--border, #e2e8f0);
  scrollbar-width: thin;
}
.inbox-quick-reply-chips::-webkit-scrollbar {
  height: 4px;
}
.inbox-quick-reply-chips::-webkit-scrollbar-thumb {
  background: var(--border, #cbd5e1);
  border-radius: 4px;
}
.quick-chip {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
}
.quick-chip:hover {
  background: #f1f5f9 !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
  transform: translateY(-1px);
}
body.dark-mode .inbox-quick-reply-chips {
  background: #0f172a;
  border-color: #1e293b;
}
body.dark-mode .quick-chip {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}
body.dark-mode .quick-chip:hover {
  background: #334155 !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
}

/* CRM Metrics Card in Inbox Sidebar */
.crm-metrics-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}
.crm-metrics-card .crm-card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 10px;
}
.crm-tier-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.crm-tier-badge.tier-vip {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}
.crm-tier-badge.tier-regular {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.crm-tier-badge.tier-new {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}
.crm-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.crm-metric-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
}
.crm-metric-item small {
  display: block;
  font-size: 10px;
  color: #64748b;
  margin-bottom: 3px;
  line-height: 1.2;
}
.crm-metric-item b {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}
body.dark-mode .crm-metrics-card {
  background: #1e293b;
  border-color: #334155;
}
body.dark-mode .crm-metrics-card .crm-card-title {
  color: #cbd5e1;
}
body.dark-mode .crm-metric-item {
  background: #0f172a;
  border-color: #334155;
}
body.dark-mode .crm-metric-item small {
  color: #94a3b8;
}
body.dark-mode .crm-metric-item b {
  color: #f8fafc;
}

/* Fullpage no-scroll Inbox Layout */
#page-messages {
  max-width: 100% !important;
  padding: 10px 14px !important;
  height: calc(100vh - 64px) !important;
  max-height: calc(100vh - 64px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
#page-messages .inbox-layout {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* v1.3.211 WhatsApp Web Style Chat History Pagination */
.chat-load-earlier{display:flex;justify-content:center;padding:10px 0;width:100%;min-height:36px}
.btn-load-earlier{background:#eef3f1;color:#183b32;border:1px solid var(--line,#cfd8d5);border-radius:20px;padding:6px 16px;font-size:12px;font-weight:600;cursor:pointer;transition:all .18s ease;box-shadow:0 1px 3px rgba(0,0,0,0.06)}
.btn-load-earlier:hover{background:#dbe8e3;transform:scale(1.02)}

/* v1.3.212 Option 2: Compact Reply Bar & Floating Quick Replies Popover */
.reply-compact-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 10px !important;
  background: var(--surface, #f8fafc);
  border-top: 1px solid var(--line, #e2e8f0);
  border-bottom: 1px solid var(--line, #e2e8f0);
  min-height: 40px;
  gap: 8px;
}
.reply-meta-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.reply-meta-right {
  display: flex;
  align-items: center;
}
.btn-quick-popover-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(37, 211, 102, 0.12);
  color: #128c7e;
  border: 1px solid rgba(37, 211, 102, 0.35);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}
.btn-quick-popover-trigger:hover {
  background: rgba(37, 211, 102, 0.22);
  border-color: #25d366;
}
.btn-quick-popover-trigger .shortcut-kbd {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: monospace;
  font-size: 11px;
}
.inbox-reply-box {
  position: relative !important;
}
.quick-replies-popover {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 12px;
  width: min(440px, 94vw);
  max-height: 380px;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  z-index: 120;
  overflow: hidden;
  animation: popoverFadeIn 0.15s ease-out;
}
@keyframes popoverFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line, #e2e8f0);
  background: var(--surface, #f8fafc);
}
.popover-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.popover-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-popover-link {
  background: none;
  border: none;
  color: #128c7e;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
}
.btn-popover-link:hover {
  text-decoration: underline;
}
.btn-popover-close {
  background: none;
  border: none;
  font-size: 14px;
  color: var(--muted, #64748b);
  cursor: pointer;
  padding: 0 4px;
}
.popover-search-wrap {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line, #f1f5f9);
}
.popover-search-wrap input {
  width: 100%;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 6px;
  box-sizing: border-box;
  background: var(--input-bg, #ffffff);
}
.quick-reply-list {
  flex: 1;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}
.quick-reply-item {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
  margin-bottom: 2px;
  border: 1px solid transparent;
}
.quick-reply-item:hover {
  background: rgba(37, 211, 102, 0.08);
  border-color: rgba(37, 211, 102, 0.25);
}
.quick-reply-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}
.quick-reply-item-title {
  font-size: 12px;
  color: var(--text, #0f172a);
}
.quick-reply-chip {
  font-family: monospace;
  font-size: 10.5px;
  background: var(--surface, #f1f5f9);
  padding: 1px 6px;
  border-radius: 4px;
  color: #128c7e;
  font-weight: 600;
}
.quick-reply-item-body {
  font-size: 11.5px;
  color: var(--muted, #64748b);
  line-height: 1.35;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.quick-reply-empty {
  padding: 20px 10px;
  text-align: center;
  color: var(--muted, #64748b);
}

/* Dark mode adjustments */
body.dark-mode .reply-compact-bar {
  background: #1e293b !important;
  border-color: #334155 !important;
}
body.dark-mode .btn-quick-popover-trigger {
  color: #25d366;
  background: rgba(37, 211, 102, 0.15);
  border-color: rgba(37, 211, 102, 0.35);
}
body.dark-mode .quick-replies-popover {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}
body.dark-mode .popover-head {
  background: #0f172a;
  border-color: #334155;
}
body.dark-mode .popover-search-wrap {
  border-color: #334155;
}
body.dark-mode .popover-search-wrap input {
  background: #0f172a;
  border-color: #334155;
  color: #f8fafc;
}
body.dark-mode .quick-reply-item:hover {
  background: rgba(37, 211, 102, 0.12);
  border-color: rgba(37, 211, 102, 0.3);
}
body.dark-mode .quick-reply-item-title {
  color: #f8fafc;
}
body.dark-mode .quick-reply-chip {
  background: #0f172a;
  color: #25d366;
}

/* Product Modal Dialog & Redesigned 2-Tier Variant Styles (v1.3.223) */
.product-modal-dialog {
  width: min(920px, 94vw);
  max-height: 90vh;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--line);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  background: #fff;
}
.product-modal-dialog::backdrop {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
}
.product-dialog-header {
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.product-dialog-header h3 {
  margin: 2px 0 0;
  font-size: 18px;
  color: var(--ink);
}
.dialog-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--green);
  letter-spacing: 0.5px;
}
.product-modal-close-btn {
  position: absolute;
  right: 16px;
  top: 14px;
  border: 0;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-modal-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.product-tabs-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  overflow-x: auto;
  padding: 0 16px;
}
.product-tab-btn {
  padding: 12px 16px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.product-tab-btn:hover {
  color: var(--ink);
}
.product-tab-btn.active {
  color: var(--green);
  border-bottom-color: var(--green);
}
.product-modal-form {
  padding: 20px 24px;
  max-height: calc(85vh - 140px);
  overflow-y: auto;
  background: #fff;
}
.product-modal-form .product-tab-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.product-modal-form .product-tab-pane.hidden {
  display: none !important;
}
.sku-input-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}
.sku-input-wrap input {
  flex: 1;
}
.highlight-grid {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 12px 14px;
}
.required-star {
  color: #ef4444;
  font-weight: bold;
}
.variant-2tier-box {
  margin-top: 10px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}
.variant-type-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  margin-top: 12px;
}
.variant-type-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.tag-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tag-input-row input {
  flex: 1;
}
.variant-chips-box {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  min-height: 24px;
}
.variant-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
}
.variant-chip button {
  border: 0;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}
.variant-chip button:hover {
  color: #ef4444;
}
.variant-matrix-wrap {
  margin-top: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.matrix-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #f1f5f9;
  border-bottom: 1px solid var(--line);
}
.quick-stock-tool {
  display: flex;
  align-items: center;
  gap: 6px;
}
.product-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 10px;
}

/* Dark mode adjustments for product dialog */
body.dark-mode .product-modal-dialog {
  background: #0f172a;
  border-color: #334155;
  color: #f8fafc;
}
body.dark-mode .product-dialog-header {
  background: #1e293b;
  border-color: #334155;
}
body.dark-mode .product-dialog-header h3 {
  color: #f8fafc;
}
body.dark-mode .product-tabs-nav {
  background: #0f172a;
  border-color: #334155;
}
body.dark-mode .product-modal-form {
  background: #0f172a;
}
body.dark-mode .variant-2tier-box,
body.dark-mode .variant-type-card,
body.dark-mode .variant-matrix-wrap {
  background: #1e293b;
  border-color: #334155;
}
body.dark-mode .matrix-header {
  background: #0f172a;
  border-color: #334155;
}
body.dark-mode .variant-chip {
  background: #0f172a;
  border-color: #334155;
  color: #f8fafc;
}
body.dark-mode .highlight-grid {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.25);
}

/* ==========================================================================
   v1.3.226 Modern Redesign: Follow-up Otomatis & CRM
   ========================================================================== */
.followup-subnav {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  overflow-x: auto;
}
.subnav-tab {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: all .16s ease;
  white-space: nowrap;
}
.subnav-tab:hover {
  background: var(--soft);
  color: var(--green);
  border-color: #badfd2;
}
.subnav-tab.active {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
  box-shadow: 0 4px 12px rgba(13,47,39,0.18);
}
.followup-tab-panel {
  display: none;
}
.followup-tab-panel.active {
  display: block;
}

/* Master Control Header */
.followup-master-card {
  padding: 22px;
}
.followup-control-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.followup-master-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.followup-master-toggle input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--green);
  cursor: pointer;
}
.followup-master-toggle .toggle-text b {
  font-size: 15px;
  color: var(--ink);
  display: block;
}
.followup-master-toggle .toggle-text small {
  color: var(--muted);
  font-size: 12px;
  display: block;
}
.control-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.limit-badge-box {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #f8fafc;
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12.5px;
}
.limit-badge-box input {
  width: 60px;
  padding: 5px 8px;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  border-radius: 6px;
}
.followup-metrics-grid {
  margin: 18px 0;
}
.followup-metrics-grid article {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fafcfb;
}

/* 3-Tier Temperature Cards Grid */
.followup-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 20px 0 26px;
}
@media (max-width: 1050px) {
  .followup-tier-grid {
    grid-template-columns: 1fr;
  }
}
.followup-tier-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(13,47,39,0.04);
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.followup-tier-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13,47,39,0.08);
}
.tier-card-header {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.tier-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tier-icon {
  font-size: 24px;
}
.tier-header-info h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 750;
  color: var(--ink);
}
.tier-header-info small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.tier-hot .tier-card-header {
  background: linear-gradient(135deg, #fef2f2, #fff);
  border-top: 4px solid #ef4444;
}
.tier-warm .tier-card-header {
  background: linear-gradient(135deg, #fffbeb, #fff);
  border-top: 4px solid #f59e0b;
}
.tier-cold .tier-card-header {
  background: linear-gradient(135deg, #eff6ff, #fff);
  border-top: 4px solid #3b82f6;
}

.tier-card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.tier-card-body .field-row label {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}
.delay-input-group {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 8px;
}
.delay-preset-select {
  padding: 8px 10px;
  font-size: 12.5px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
}
.delay-input-group input {
  padding: 8px 10px;
  font-size: 12.5px;
  border-radius: 8px;
  border: 1px solid var(--line);
  text-align: center;
  font-weight: 700;
}
.tier-card-body textarea {
  width: 100%;
  font-size: 12.5px;
  line-height: 1.45;
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 10px;
  resize: vertical;
}

/* Variable Quick Insert Pills */
.var-pill-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.var-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.var-pill {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all .14s ease;
}
.var-pill:hover {
  background: var(--soft);
  color: var(--green);
  border-color: var(--green);
}

/* WhatsApp Simulation Bubble */
.wa-preview-wrapper {
  background: #eef2f0;
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 4px;
}
.wa-preview-wrapper label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 6px;
  display: block;
}
.wa-preview-bubble-box {
  background: #efeae2;
  border-radius: 8px;
  padding: 10px;
  background-image: radial-gradient(#d3cbbe 1px, transparent 1px);
  background-size: 16px 16px;
}
.wa-sim-bubble {
  background: #ffffff;
  border-radius: 8px 8px 8px 2px;
  padding: 8px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  max-width: 90%;
  position: relative;
}
.wa-sim-text {
  font-size: 12px;
  line-height: 1.45;
  color: #111b21;
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}
.wa-sim-time {
  font-size: 10px;
  color: #667781;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

/* Prioritas Lead Table Section */
.leads-priority-section {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 10px;
}
.leads-table-tools {
  margin-bottom: 14px;
}
.leads-table-tools h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 750;
  color: var(--ink);
}
.leads-table-tools small {
  color: var(--muted);
  font-size: 12px;
}
.lead-filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.lead-filter-btn {
  background: #f1f5f9;
  border: 1px solid var(--line);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s ease;
}
.lead-filter-btn:hover {
  background: #e2e8f0;
  color: var(--ink);
}
.lead-filter-btn.active {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
}
.leads-priority-table td {
  vertical-align: middle;
}
.leads-priority-table .lead-name-cell b {
  display: block;
  font-size: 13px;
  color: var(--ink);
}
.leads-priority-table .lead-name-cell small {
  color: var(--muted);
  font-size: 11.5px;
}
.lead-score-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lead-score-bar {
  width: 60px;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}
.lead-score-bar-fill {
  height: 100%;
  border-radius: 3px;
}
.lead-score-bar-fill.hot { background: #ef4444; }
.lead-score-bar-fill.warm { background: #f59e0b; }
.lead-score-bar-fill.cold { background: #3b82f6; }

/* ==========================================================================
   v1.3.228 Modern Redesign: Kelola Kontak & CRM Pelanggan
   ========================================================================== */
.contacts-subtabs-nav {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--border, #e2e8f0);
  margin-bottom: 18px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.contacts-subtab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted, #64748b);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.contacts-subtab-btn:hover {
  color: var(--ink, #0f172a);
}
.contacts-subtab-btn.active {
  color: var(--green, #0d8d64);
  border-bottom-color: var(--green, #0d8d64);
}
.contacts-subtab-btn b {
  font-size: 11px;
  background: rgba(13, 141, 100, 0.12);
  color: var(--green, #0d8d64);
  padding: 1px 7px;
  border-radius: 10px;
}
.contacts-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  background: var(--surface, #ffffff);
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border, #e2e8f0);
}
.contacts-search-box {
  flex: 1;
  min-width: 250px;
}
.contacts-search-box input {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 8px;
  background: var(--card, #ffffff);
  color: var(--ink, #0f172a);
}
.contacts-search-box input:focus {
  border-color: var(--green, #0d8d64);
  outline: none;
}
.contacts-filter-group {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.contacts-filter-group select {
  padding: 8px 12px;
  font-size: 12.5px;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 8px;
  background: var(--card, #ffffff);
  color: var(--ink, #0f172a);
  cursor: pointer;
}
.contact-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.contact-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12.5px;
  color: #ffffff;
  flex-shrink: 0;
  text-transform: uppercase;
}
.contact-avatar.avatar-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.contact-avatar.avatar-green { background: linear-gradient(135deg, #10b981, #059669); }
.contact-avatar.avatar-orange { background: linear-gradient(135deg, #f59e0b, #d97706); }
.contact-avatar.avatar-purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.contact-avatar.avatar-rose { background: linear-gradient(135deg, #f43f5e, #e11d48); }

.contact-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.contact-meta .contact-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink, #0f172a);
}
.contact-meta .contact-phone {
  font-size: 11.5px;
  color: var(--muted, #64748b);
  font-family: monospace;
}
.contact-tags-wrap {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.contact-tag-pill {
  font-size: 10px;
  background: #f1f5f9;
  color: #475569;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  border: 1px solid #e2e8f0;
}
.badge-lead {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.badge-lead.hot { background: #fee2e2; color: #b91c1c; }
.badge-lead.warm { background: #fef3c7; color: #b45309; }
.badge-lead.cold { background: #dbeafe; color: #1d4ed8; }

.contact-row-actions {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
}
.contact-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--border, #cbd5e1);
  background: var(--card, #ffffff);
  color: var(--ink, #0f172a);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}
.contact-action-btn:hover {
  background: #f8fafc;
  border-color: var(--green, #0d8d64);
  color: var(--green, #0d8d64);
}
.contact-action-btn.danger:hover {
  border-color: #ef4444;
  color: #ef4444;
}
.contact-bulk-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: #0f172a;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
  z-index: 99;
  border: 1px solid #334155;
  transition: all 0.25s ease;
}
.contact-bulk-bar.hidden {
  display: none !important;
}
.contact-bulk-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.contact-modal-dialog {
  max-width: 640px;
  width: 95%;
}
.contact-import-dialog {
  max-width: 520px;
  width: 95%;
}

/* ==========================================================================
   STORE PICKUP & OUTLET FULFILLMENT REDESIGN (v1.3.229)
   ========================================================================== */
.pickup-subtabs-nav {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--border, #e2e8f0);
  margin-bottom: 20px;
  padding-bottom: 4px;
  overflow-x: auto;
}
.pickup-tab-panel.hidden {
  display: none !important;
}

.pickup-quick-verify-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(14, 165, 233, 0.06));
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 20px;
}
.pickup-verify-header {
  margin-bottom: 12px;
}
.pickup-verify-form-row {
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: 480px;
}
.pickup-verify-form-row input {
  font-size: 16px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 2px solid var(--border, #cbd5e1);
  background: var(--card, #ffffff);
  color: var(--ink, #0f172a);
}
.pickup-verify-form-row input:focus {
  border-color: #10b981;
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.pickup-verify-result {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid var(--border, #cbd5e1);
  font-size: 14px;
}
.pickup-verify-result.success {
  background: rgba(16, 185, 129, 0.12);
  border-color: #10b981;
  color: #065f46;
}
.pickup-verify-result.error {
  background: rgba(239, 68, 68, 0.12);
  border-color: #ef4444;
  color: #991b1b;
}

.pickup-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.pickup-location-card {
  background: var(--card, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pickup-location-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.pickup-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.pickup-card-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--ink, #0f172a);
}
.pickup-card-meta {
  font-size: 13px;
  color: var(--muted, #64748b);
  line-height: 1.5;
  margin-bottom: 14px;
}
.pickup-badge-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
}
.pickup-badge-status.active {
  background: rgba(16, 185, 129, 0.12);
  color: #065f46;
}
.pickup-badge-status.inactive {
  background: rgba(148, 163, 184, 0.2);
  color: #475569;
}
.pickup-badge-status.pay-store {
  background: rgba(59, 130, 246, 0.12);
  color: #1e40af;
}

.pickup-code-badge {
  font-family: monospace;
  font-weight: 700;
  font-size: 12px;
  background: #f1f5f9;
  border: 1px dashed #94a3b8;
  padding: 2px 6px;
  border-radius: 4px;
  color: #0f172a;
}
body.dark-mode .pickup-code-badge {
  background: #1e293b;
  border-color: #475569;
  color: #f8fafc;
}
body.dark-mode .pickup-quick-verify-card {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
}
body.dark-mode .pickup-location-card {
  background: #1e293b;
  border-color: #334155;
}
body.dark-mode .pickup-card-title {
  color: #f8fafc;
}
body.dark-mode .pickup-card-meta {
  color: #94a3b8;
}