/* Baliant Bake — admin console */
:root{
  --bg:#f6f1e9; --card:#fff; --ink:#2b2118; --muted:#8a7a68;
  --brand:#a4552e; --brand-dark:#7d3d1f; --accent:#e7b98b;
  --line:#e7dcc9; --ok:#2e7d4f; --err:#b3261e; --warn:#9a6a00;
  --shadow:0 4px 18px rgba(80,50,20,.08);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-size:14px;line-height:1.5}
h1,h2,h3{font-family:'Playfair Display',serif;margin:0}
.muted{color:var(--muted)}
.pad{padding:1rem}
.r{text-align:right}

/* ---------- login ---------- */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(160deg,#f6f1e9,#e9d9c3)}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:2.4rem;width:340px;display:flex;flex-direction:column;gap:.8rem;text-align:center}
.login-card h1{font-size:1.4rem}
.login-card input{padding:.75rem .9rem;border:1px solid var(--line);border-radius:10px;font:inherit;text-align:center}
.login-card input:focus{outline:2px solid var(--accent)}
.login-card .btn{margin-top:.4rem}
.alert{padding:.6rem .8rem;border-radius:8px;font-size:.85rem}
.alert.err{background:#fdecea;color:var(--err);border:1px solid #f5c6c2}

/* ---------- app layout ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:max-content;min-width:196px;max-width:250px;flex-shrink:0;background:#2b2118;color:#f3ece2;display:flex;flex-direction:column;padding:.9rem .55rem .7rem;gap:.4rem;position:sticky;top:0;height:100vh;overflow-y:auto}
.side-brand{display:flex;align-items:center;gap:.55rem;padding:.3rem .5rem .85rem;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:.5rem}
.side-title{font-family:'Playfair Display',serif;font-weight:700;font-size:.98rem;white-space:nowrap}
.side-sub{font-size:.66rem;color:#c9b8a3;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.brand-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:700}
.brand-mark.logo{background:none;border-radius:8px;padding:0;object-fit:contain}
.side-btn{display:block;width:100%;text-align:left;background:none;border:none;color:#e8dccb;font:inherit;font-weight:600;padding:.5rem .8rem;border-radius:9px;cursor:pointer;text-decoration:none;white-space:nowrap}
.side-btn:hover{background:rgba(255,255,255,.08)}
.side-btn.active{background:var(--brand);color:#fff}
.side-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:#c9b8a3;margin:.8rem .4rem .3rem}
.side-search{width:100%;padding:.55rem .7rem;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;font:inherit}
.side-search::placeholder{color:#a8957e}
.side-search:focus{outline:2px solid var(--brand)}
.customer-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem;margin-top:.5rem;min-height:0}
.cust-item{padding:.55rem .7rem;border-radius:9px;cursor:pointer;font-size:.86rem;line-height:1.35}
.cust-item:hover{background:rgba(255,255,255,.08)}
.cust-item.active{background:var(--brand);color:#fff}
.cust-item .sub{font-size:.74rem;opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-foot{margin-top:.6rem;border-top:1px solid rgba(255,255,255,.12);padding-top:.6rem}

/* ---------- main ---------- */
.main{flex:1;padding:1.4rem;min-width:0}
.main-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.main-head h1{font-size:1.5rem}
.filters{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.filters select,.filters input{border:1px solid var(--line);border-radius:9px;padding:.5rem .6rem;font:inherit;background:#fff}
.btn{font:inherit;font-weight:600;border:none;border-radius:9px;padding:.6rem 1.1rem;cursor:pointer;transition:.15s}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-dark)}
.btn.ghost{background:#fff;color:var(--brand-dark);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--brand)}
.btn.sm{padding:.42rem .8rem;font-size:.82rem}
.btn.danger{background:#fff;color:var(--err);border:1px solid #f0c4c0}
.btn.danger:hover{background:#fdecea}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* customer header */
.customer-header{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:1.1rem 1.3rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.customer-header h2{font-size:1.15rem}
.customer-header .chips{display:flex;gap:1.2rem;flex-wrap:wrap}
.customer-header .chip b{display:block;font-size:1.05rem}
.customer-header .chip span{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* orders table */
.table-card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:auto}
.orders-table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:760px}
.orders-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:.7rem .9rem;border-bottom:1px solid var(--line);background:#fdfbf7}
.orders-table td{padding:.7rem .9rem;border-bottom:1px solid #f2ecdf;vertical-align:middle}
.orders-table tr:hover td{background:#fdf9f2}
.orders-table tr.row-paid td{background:#f0faf3}
.orders-table tr.row-paid:hover td{background:#e4f4ea}
.badge{display:inline-block;padding:.22rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;text-transform:capitalize}
.badge.new{background:#fdecea;color:var(--err)}
.badge.confirmed{background:#e8f0fe;color:#1a56c4}
.badge.processing{background:#fff3dc;color:var(--warn)}
.badge.shipped{background:#e9ecff;color:#4b3fbf}
.badge.delivered{background:#e7f5ec;color:var(--ok)}
.badge.invoiced{background:#f3e8f9;color:#7a2ea8}
.badge.cancelled{background:#eee;color:#555}
.badge.car{background:#e9ecff;color:#4b3fbf}
.badge.bike{background:#e7f5ec;color:var(--ok)}
.badge.custom{background:#fdf3e7;color:var(--brand-dark);border:1px solid #e7c9a6}
.badge.pl{background:#e9ecff;color:#4b3fbf;border:1px solid #cdd4f5;margin-left:.35rem}
.link-btn{background:none;border:none;color:var(--brand);font-weight:600;cursor:pointer;font-size:.82rem;padding:.2rem .3rem}
.link-btn:hover{text-decoration:underline}
.link-btn.danger{color:var(--err)}

/* ---------- profile ---------- */
.profile-form{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:1.4rem;max-width:560px;display:flex;flex-direction:column;gap:.9rem}
.f-row{display:flex;flex-direction:column;gap:.3rem}
.f-row label{font-weight:600;font-size:.82rem;color:#5c4f3f}
.f-row input,.f-row textarea{font:inherit;padding:.6rem .8rem;border:1px solid var(--line);border-radius:9px;background:#fdfbf7}
.f-row input:focus,.f-row textarea:focus{outline:2px solid var(--accent)}
.f-row-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:640px){.f-row-row{grid-template-columns:1fr}}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow-y:auto}
.modal-backdrop{position:fixed;inset:0;background:rgba(30,20,10,.55)}
.modal-card{position:relative;background:#fff;border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.3);width:640px;max-width:100%}
.modal-card.wide{width:860px}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:1.2rem 1.4rem;border-bottom:1px solid var(--line)}
.modal-head h2{font-size:1.2rem}
.icon-btn{background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--muted)}
.modal-body{padding:1.2rem 1.4rem;display:flex;flex-direction:column;gap:1.2rem}
.om-section{border:1px solid var(--line);border-radius:12px;padding:1rem;background:#fffdf9}
.om-section h3{font-size:.95rem;color:var(--brand-dark);margin-bottom:.7rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:140px 1fr auto;gap:.45rem .8rem;align-items:center;font-size:.88rem}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:600;word-break:break-word;min-height:1.4em;min-width:0}
.kv .edit-cell{display:flex;gap:.4rem;align-items:center}
.kv input{font:inherit;padding:.35rem .55rem;border:1px solid var(--line);border-radius:7px;width:100%;min-width:220px}
.kv textarea{font:inherit;padding:.35rem .55rem;border:1px solid var(--line);border-radius:7px;width:100%;min-width:220px;resize:vertical}
/* narrow screens: stack key/value rows so long text never wraps per-character */
@media(max-width:640px){
  .kv{grid-template-columns:minmax(0,1fr);gap:.15rem 0}
  .kv dd:empty{display:none}
}
.mini{font-size:.75rem;padding:.25rem .55rem;border-radius:7px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:600}
.mini.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.mini.danger{color:var(--err);border-color:#f0c4c0}

/* items mini table */
.mini-table{width:100%;border-collapse:collapse;font-size:.86rem}
.mini-table th{text-align:left;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line);padding:.35rem .5rem}
.mini-table td{padding:.4rem .5rem;border-bottom:1px solid #f2ecdf}

/* biteship */
.bs-panel{background:#fdf3e7;border:1px dashed #d9b98c;border-radius:12px;padding:1rem}
.rate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.6rem;margin-top:.7rem}
.rate-card{border:1px solid var(--line);background:#fff;border-radius:10px;padding:.7rem;cursor:pointer;transition:.15s}
.rate-card:hover{border-color:var(--brand);box-shadow:var(--shadow)}
.rate-card.selected{border-color:var(--brand);background:#f7ead8}
.rate-card .c{font-weight:700}
.rate-card .s{font-size:.76rem;color:var(--muted)}
.rate-card .p{font-weight:700;color:var(--brand-dark);margin-top:.25rem}

/* toast */
.toast{position:fixed;bottom:1.4rem;right:1.4rem;background:#2b2118;color:#fff;padding:.8rem 1.2rem;border-radius:10px;box-shadow:var(--shadow);z-index:200;font-size:.88rem}
.toast.err{background:var(--err)}

/* ---------- mobile top bar + menu (narrow screens) ---------- */
.mobile-bar{display:none;align-items:center;justify-content:space-between;gap:.8rem;background:#2b2118;color:#f3ece2;padding:.6rem .9rem;position:sticky;top:0;z-index:130}
.mobile-bar-brand{display:flex;align-items:center;gap:.6rem}
.mobile-bar-brand .side-title{font-size:.95rem}
.menu-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:1.35rem;line-height:1;padding:.15rem .85rem .4rem;border-radius:9px;cursor:pointer;touch-action:manipulation;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.menu-btn:hover{background:rgba(255,255,255,.2)}

@media(max-width:820px){
  .app{flex-direction:column}
  .mobile-bar{display:flex;width:100%;flex-shrink:0}
  .sidebar{position:fixed;top:0;left:0;bottom:0;height:100vh;width:290px;z-index:120;transform:translateX(-105%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.35)}
  .sidebar.open{transform:translateX(0)}
  .menu-backdrop{position:fixed;inset:0;background:rgba(20,14,8,.5);z-index:110;display:block}
  .menu-backdrop[hidden]{display:none}
  .customer-list{max-height:220px}
}
@media(min-width:821px){.mobile-bar{display:none}}

/* ---------- products ---------- */
.inline-num{width:110px;padding:.4rem .5rem;border:1px solid var(--line);border-radius:8px;font:inherit;text-align:right}
.inline-num:focus{outline:2px solid var(--accent)}
.products-table td{vertical-align:middle}

/* ---------- calendar (admin) ---------- */
.cal-wrap{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:1.2rem;max-width:860px}
.cal-grid.admin{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem}
.cal-cell.admin{border:1px solid var(--line);border-radius:9px;background:#fff;min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;font-size:.82rem;cursor:pointer;padding:.35rem;transition:.12s}
.cal-cell.admin:hover{border-color:var(--brand);box-shadow:var(--shadow)}
.cal-cell.admin b{font-size:.95rem}
.cal-cell.admin .cap{font-size:.66rem;color:var(--muted)}
.cal-cell.admin .cap.orders{color:var(--brand-dark);font-weight:700}
.cal-cell.admin .bar{width:70%;height:4px;border-radius:2px;background:#eee5d6;overflow:hidden}
.cal-cell.admin .bar i{display:block;height:100%;background:var(--brand)}
.cal-cell.admin.auto{background:#fdfbf7}
.cal-cell.admin.open{background:#e7f5ec;border-color:#bfe0cc}
.cal-cell.admin.closed{background:#fdecea;border-color:#f0c4c0}
.cal-cell.admin.closed .bar i{background:var(--err)}
.cal-cell.admin.has-orders{border-width:2px}
.cal-cell.empty{border:none;background:none;cursor:default}
.cal-legend{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.9rem;font-size:.76rem;color:var(--muted)}
.cal-legend .lg{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:.3rem;vertical-align:-1px;border:1px solid var(--line)}
.lg.open{background:#e7f5ec;border-color:#bfe0cc}
.lg.auto{background:#fdfbf7}
.lg.closed{background:#fdecea;border-color:#f0c4c0}

/* ---------- tag bar (orders customer filter) ---------- */
.tagbar{background:#fdf3e7;border:1px solid #e7c9a6;border-radius:10px;padding:.55rem .9rem;margin-bottom:.8rem;font-size:.88rem;display:flex;align-items:center;gap:.6rem}
.tagbar .link-btn{color:var(--err)}

/* ---------- calendar over capacity ---------- */
.cal-cell.admin.over{border-color:var(--err)}
.cal-cell.admin.over .cap{color:var(--err);font-weight:700}
.cal-cell.admin.over .bar i{background:var(--err)}
.cal-cell.admin.over .cap.orders{color:var(--err)}

/* ---------- custom order flow ---------- */
.mini-steps{display:flex;gap:.3rem;list-style:none;margin:0 0 1rem;padding:0;flex-wrap:wrap}
.mini-steps li{display:flex;align-items:center;gap:.4rem;padding:.4rem .75rem;border-radius:999px;background:#f4efe6;color:var(--muted);font-size:.8rem;font-weight:600}
.mini-steps li span{width:20px;height:20px;border-radius:50%;background:#d8cdb8;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem}
.mini-steps li.active{background:var(--brand);color:#fff}
.mini-steps li.active span{background:rgba(255,255,255,.25)}
.mini-steps li.done{background:#e7f5ec;color:var(--ok)}
.mini-steps li.done span{background:var(--ok)}
.custom-step{display:none}
.custom-step.active{display:block}
.custom-flow{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:1.4rem}
.custom-flow .catalog-layout{display:grid;grid-template-columns:1fr 300px;gap:1.4rem;align-items:start}
@media(max-width:900px){.custom-flow .catalog-layout{grid-template-columns:1fr}}
.custom-flow .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.7rem}
.custom-flow .card{border:1px solid var(--line);border-radius:10px;padding:.7rem;background:#fffdf9;display:flex;flex-direction:column;gap:.5rem}
.custom-flow .card.selected{border-color:var(--brand);background:#fdf3e7}
.custom-flow .card-name{font-weight:600;font-size:.85rem;line-height:1.3;height:2.2em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.custom-flow .card-price{color:var(--brand-dark);font-weight:700;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.custom-flow .p-img{width:100%;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:#f3ecdd;display:flex;align-items:center;justify-content:center}
.custom-flow .p-img img{width:100%;height:100%;object-fit:cover;display:block}
.custom-flow .p-img.noimg{background:#fdf9f1}
.custom-flow .stepper{display:flex;align-items:center;gap:.4rem;margin-top:auto}
.custom-flow .stepper button{width:28px;height:28px;border-radius:7px;border:1px solid var(--line);background:#fff;font-size:1rem;cursor:pointer;color:var(--brand-dark)}
.custom-flow .stepper button:hover{border-color:var(--brand);background:#f7ead8}
.custom-flow .stepper .qty{min-width:2ch;text-align:center;font-weight:700}
.custom-flow .cart{border:1px solid var(--line);border-radius:12px;padding:.9rem;background:#fffdf9;position:sticky;top:84px}
.custom-flow .cart-items{display:flex;flex-direction:column;gap:.5rem;max-height:280px;overflow:auto;margin-bottom:.7rem}
.custom-flow .cart-line{display:flex;justify-content:space-between;gap:.5rem;font-size:.84rem;border-bottom:1px dashed var(--line);padding-bottom:.4rem}
.custom-flow .cart-line .x{background:none;border:none;color:var(--muted);font-weight:700;cursor:pointer}
.custom-flow .cart-total{display:flex;justify-content:space-between;font-weight:700;padding:.5rem 0;border-top:2px solid var(--line)}
.custom-flow .form{max-width:640px}
.custom-flow .cal-cell{border:1px solid var(--line);border-radius:9px;background:#fff;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;font-size:.85rem;cursor:default;padding:.3rem}
.custom-flow .cal-cell b{font-size:.95rem}
.custom-flow .cal-cell .cap{font-size:.62rem;color:var(--muted);line-height:1.1;text-align:center}
.custom-flow .cal-cell.avail{cursor:pointer;border-color:#bfe0cc;background:#f2faf5}
.custom-flow .cal-cell.avail:hover{border-color:var(--ok)}
.custom-flow .cal-cell.past{background:#eee9e0;color:#b5a896}
.custom-flow .cal-cell.selected{background:var(--brand);border-color:var(--brand-dark);color:#fff}
.custom-flow .cal-cell.selected .cap{color:#ffe9d6}
.custom-flow .calendar-wrap{max-width:640px}

/* ---------- customer notes ---------- */
.note-input{width:100%;padding:.5rem .7rem;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fdfbf7;resize:vertical}
.note-input:focus{outline:2px solid var(--accent)}

/* ---------- card editor ---------- */
.card-editor-frame{position:relative;height:calc(100vh - 190px);min-height:480px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.card-editor-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.8rem}
.card-tile{border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s}
.card-tile:hover{box-shadow:0 6px 18px rgba(0,0,0,.08)}
.card-tile-img{aspect-ratio:5/7;background:#f3ecdd;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card-tile-img img{width:100%;height:100%;object-fit:cover;display:block}
.card-tile-noimg{font-size:2rem;opacity:.4}
.card-tile-body{padding:.6rem .7rem .7rem;display:flex;flex-direction:column;gap:.25rem}
.card-tile-name{font-weight:600;font-size:.85rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-tile-meta{font-size:.72rem;color:var(--muted)}
.card-tile-actions{display:flex;gap:.35rem;margin-top:.4rem;flex-wrap:wrap}
.btn.sm{padding:.28rem .6rem;font-size:.75rem;border-radius:7px}
.btn.danger{color:var(--err)}
.tpl-cats{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.8rem}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem;max-height:60vh;overflow:auto}
.tpl-card{border:1px solid var(--line);border-radius:10px;background:var(--card);overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:box-shadow .15s}
.tpl-card:hover{box-shadow:0 6px 16px rgba(0,0,0,.1);border-color:var(--accent)}
.tpl-img{aspect-ratio:5/7;background:#f3ecdd;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tpl-img img{width:100%;height:100%;object-fit:cover;display:block}
.tpl-img.blank{font-size:2.4rem;color:var(--brand);background:#fdf3e7}
.tpl-name{font-weight:600;font-size:.8rem;padding:.45rem .6rem 0}
.tpl-desc{font-size:.7rem;color:var(--muted);padding:.15rem .6rem .3rem;line-height:1.35}
.tpl-fmt{font-size:.68rem;color:var(--muted);padding:0 .6rem .5rem}
.modal-card.wide{max-width:880px;width:92vw}
#cardsEditorWrap.editor-off{position:absolute;left:-100000px;top:0;width:1280px;height:900px;pointer-events:none;overflow:hidden}
#cardsEditorWrap.editor-off .card-editor-frame{height:900px}
#cardsEditorWrap.editor-on{position:static;margin-bottom:1rem}
/* while the editor is open, drop the “Card Editor / Editing…” title to give the canvas more vertical room */
.view[data-editor-open] #cardsHeadTxt{display:none}

/* ---------- order modal: greetings + card generation ---------- */
.greet-details summary{cursor:pointer;font-weight:600;font-size:.9rem;color:var(--brand-dark)}
.greet-details[open] summary{margin-bottom:.4rem}
.greet-line{border-left:3px solid var(--accent);padding:.3rem .6rem;margin-bottom:.5rem;background:#fdf9f1;border-radius:0 8px 8px 0;font-size:.84rem;line-height:1.5}
.greet-line .muted{color:var(--muted)}
.greet-line-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.greet-line-head b{font-size:.88rem}
.greet-edit{display:flex;flex-direction:column;gap:.5rem;padding:.15rem 0 .3rem}
.greet-edit .ge-row{display:flex;flex-direction:column;gap:.2rem}
.greet-edit label{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.greet-edit input,.greet-edit textarea,.greet-edit select{font:inherit;padding:.4rem .55rem;border:1px solid var(--line);border-radius:7px;background:#fff;width:100%}
.greet-edit textarea{resize:vertical}
.greet-edit .ge-row-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.greet-edit .ge-actions{display:flex;gap:.4rem;align-items:center}
.gen-progress{border:1px solid var(--line);border-radius:10px;padding:.8rem;background:#fdf9f1;margin-bottom:.8rem}
.gen-progress-title{font-weight:600;font-size:.85rem;margin-bottom:.5rem}
.gen-progress-bar{height:8px;border-radius:99px;background:#eee3d0;overflow:hidden}
.gen-progress-fill{height:100%;background:var(--brand);border-radius:99px;transition:width .3s}
.gen-progress-text{font-size:.78rem;color:var(--muted);margin-top:.4rem;word-break:break-word}

/* ---------- card folders (order modal) ---------- */
.om-receiver{border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;margin-bottom:.6rem;background:#fffdf9}
.om-hampers{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.om-chip{display:inline-flex;align-items:center;gap:.45rem;border:1.5px solid var(--line);background:#fdf3e7;padding:.35rem .7rem;box-shadow:0 1px 3px rgba(80,50,20,.06)}
.om-chip img{width:26px;height:26px;border-radius:7px;border:1px solid #e7dcc9;object-fit:cover;flex-shrink:0;vertical-align:middle}
.om-chip .noimg-sm{width:26px;height:26px;border-radius:7px;background:#f3ecdd;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0}
.om-chip b{color:var(--brand-dark)}
.folder-tile{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1.1rem .8rem;text-align:center}
.folder-tile .folder-icon{font-size:2rem;line-height:1}
.folder-tile:hover{border-color:var(--brand)}
.folder-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.7rem}
.folder-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.folder-card img{width:100%;aspect-ratio:5/7;object-fit:cover;display:block;background:#f3ecdd}
.folder-card-noimg{aspect-ratio:5/7;display:flex;align-items:center;justify-content:center;font-size:1.6rem;background:#f3ecdd;color:#b5a896}
.folder-card-label{font-size:.72rem;font-weight:600;padding:.4rem .5rem 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folder-card .btn{margin:.4rem .5rem .5rem}

/* hover-magnify popup for folder card thumbnails */
.card-preview-pop{position:fixed;left:50% !important;top:50% !important;transform:translate(-50%,-50%) scale(.94);z-index:500;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s ease, transform .12s ease;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 44px rgba(43,33,24,.28);padding:8px;width:min(560px, 86vw)}
.card-preview-pop.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.card-preview-pop img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;border-radius:7px}

/* ---------- product categories modal ---------- */
.cats-list{display:flex;flex-direction:column;gap:.5rem}
.cat-row{display:flex;align-items:center;gap:.7rem;border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem;background:#fffdf9}
.cat-rank{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:#f3ecdd;color:var(--brand-dark);display:inline-flex;align-items:center;justify-content:center;font-size:.78rem}
.cat-name{flex:1 1 auto;min-width:0;font:inherit;padding:.45rem .6rem;border:1px solid var(--line);border-radius:8px;background:#fff}
.cat-name:focus{outline:2px solid var(--accent);border-color:transparent}
.cats-add{display:flex;gap:.5rem;margin-top:.4rem}
.cats-add input{flex:1 1 auto;font:inherit;padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px}
.cats-add input:focus{outline:2px solid var(--accent);border-color:transparent}
.cat-sel{font:inherit;font-size:.82rem;padding:.35rem .4rem;border:1px solid var(--line);border-radius:8px;background:#fff;max-width:140px}

/* ---------- custom order: receiver boxes + assign popup (matches customer flow) ---------- */
.custom-flow .rec-box{border:1px solid #e7dcc9;border-radius:12px;padding:1rem;margin-bottom:.9rem;background:#fffdf9;transition:border-color .15s, box-shadow .15s}
.custom-flow .rec-box.active{border-color:#a4552e;box-shadow:0 0 0 3px rgba(164,85,46,.12)}
.custom-flow .rec-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem;flex-wrap:wrap}
.custom-flow .rec-head b{font-size:1rem}
.custom-flow .rec-assign-btn{flex-shrink:0}
.custom-flow .rec-assign-btn{margin-left:auto;white-space:nowrap}
.custom-flow .rec-assign-btn:disabled{opacity:.45;cursor:not-allowed}
.custom-flow .rec-remove{margin-left:.25rem;background:none;border:none;color:#b3261e;font-size:1rem;cursor:pointer}
.custom-flow .rec-assigned{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem}
.custom-flow .rec-chip{display:inline-flex;align-items:center;gap:.35rem;background:#f3ecdd;border:1px solid #e7dcc9;border-radius:99px;padding:.3rem .7rem;font-size:.8rem}
.custom-flow .rec-chip img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.custom-flow .rec-chip b{color:#a4552e}
.custom-flow .rec-chip button{background:none;border:none;color:#8a7a68;cursor:pointer;font-size:.85rem;padding:0}
.custom-flow .rec-box .field-err{border-color:#b3261e !important;outline:2px solid rgba(179,38,30,.35) !important}
.custom-flow .addr-wrap{position:relative}
.custom-flow .suggest{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #e7dcc9;border-radius:10px;box-shadow:0 6px 24px rgba(80,50,20,.08);max-height:260px;overflow:auto;z-index:40}
.custom-flow .suggest-item{padding:.6rem .8rem;cursor:pointer;font-size:.88rem;border-bottom:1px solid #f3ecdd}
.custom-flow .suggest-item:hover{background:#fdf3e7}
.custom-flow .addr-chip{background:#eaf5ee;border:1px solid #bfe0cc;color:#2e7d4f;font-size:.82rem;padding:.45rem .7rem;border-radius:8px;margin-top:.4rem;display:flex;justify-content:space-between;gap:.5rem}
.custom-flow .addr-chip button{background:none;border:none;color:#b3261e;cursor:pointer;font-weight:700}
.custom-flow .rec-review{border-left:3px solid #e7b98b;padding:.35rem .7rem;margin-bottom:.6rem;font-size:.9rem;line-height:1.5;background:#fdf9f1;border-radius:0 8px 8px 0}

/* assign popup overlay (shared look) */
.overlay{position:fixed;inset:0;background:rgba(43,33,24,.45);z-index:400;display:flex;align-items:center;justify-content:center;padding:1rem}
.overlay-card{background:#fffdf9;border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 24px rgba(80,50,20,.15);width:100%;max-width:520px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden}
.overlay-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem 1.2rem .4rem}
.overlay-head h3{margin:0;font-size:1.05rem}
.overlay-x{background:none;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:.2rem}
.overlay-x:hover{color:#b3261e}
.overlay-card .hint{padding:0 1.2rem;margin:.2rem 0 .6rem}
.assign-modal-list{flex:1;overflow:auto;padding:0 1.2rem;display:flex;flex-wrap:wrap;gap:.6rem;align-content:flex-start}
.assign-tile{display:flex;flex-direction:column;align-items:center;gap:.35rem;width:calc(33.333% - .4rem);min-width:104px;border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:.6rem .4rem;cursor:pointer;font:inherit;transition:border-color .15s, transform .1s;position:relative}
.assign-tile:hover{border-color:#a4552e;transform:translateY(-1px)}
.assign-tile img{width:54px;height:54px;border-radius:10px;object-fit:cover}
.assign-tile .noimg{width:54px;height:54px;border-radius:10px;background:#f3ecdd;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.assign-tile-name{font-size:.78rem;text-align:center;line-height:1.25;min-height:2.4em}
.assign-tile-qty{position:absolute;top:.35rem;right:.35rem;background:#a4552e;color:#fff;font-size:.7rem;border-radius:99px;padding:.1rem .45rem}
.overlay-foot{padding:.8rem 1.2rem;border-top:1px solid var(--line);display:flex;justify-content:flex-end}

/* ===== order warnings (v10) ===== */
.orders-table th.om-flag,.orders-table td.om-flag{width:36px;text-align:center;padding-left:.4rem;padding-right:.4rem}
.warn-ic{font-size:1rem;white-space:nowrap;display:inline-block}
.warn-ic + .warn-ic{margin-left:.2rem}
.flag-legend{display:none}

/* ---------- settings sub-tabs (card templates / order form style) ---------- */
.sub-tabs{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.sub-tab-btn{transition:background .12s, color .12s, border-color .12s}
.sub-tab-btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.sub-tab-btn.active:hover{background:var(--brand-dark)}

/* ---------- order form style (appearance) ---------- */
.theme-layout{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:1.4rem;align-items:start;max-width:1180px}
@media(max-width:960px){.theme-layout{grid-template-columns:1fr}}
.theme-controls{display:flex;flex-direction:column;gap:.9rem}
.theme-swatch{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.42rem 0;border-bottom:1px dashed var(--line)}
.theme-swatch:last-child{border-bottom:none}
.theme-swatch label{font-weight:600;font-size:.82rem;color:#5c4f3f}
.theme-swatch label .muted{font-weight:500;font-size:.72rem}
.theme-cp{display:inline-flex;align-items:center;gap:.45rem;flex-shrink:0}
.theme-cp input[type=color]{width:46px;height:30px;padding:0;border:1px solid var(--line);border-radius:7px;background:#fff;cursor:pointer}
.theme-cp code{font-size:.72rem;color:var(--muted);background:#f6f1e9;padding:.15rem .4rem;border-radius:6px}
.theme-preview-col{min-width:0}
/* mini order-form mock — picks up the theme vars set inline on #themePreview */
.theme-preview{background:var(--bg,#f6f1e9);border:1px solid var(--line,#e7dcc9);border-radius:var(--r-panel,16px);padding:14px;display:flex;flex-direction:column;gap:12px;font-family:var(--font-body,'Inter',system-ui,sans-serif);color:var(--ink,#2b2118);box-shadow:var(--shadow);transition:background .15s}
.theme-preview .tp-bar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;background:var(--card,#fff);border:1px solid var(--line,#e7dcc9);border-radius:var(--r-box,14px);padding:.55rem .8rem}
.theme-preview .tp-brand{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;line-height:1}
.theme-preview .tp-brand img{width:34px;height:34px;object-fit:contain}
.theme-preview .tp-tag{font-size:.52rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted,#8a7a68)}
.theme-preview .tp-steps{display:flex;gap:.4rem}
.theme-preview .tp-steps i{width:14px;height:14px;border-radius:50%;background:var(--line,#e7dcc9);display:block}
.theme-preview .tp-steps i.on{background:var(--brand,#a4552e)}
.theme-preview .tp-head{font-family:var(--font-head,'Playfair Display',serif);font-weight:600;font-size:1rem;color:var(--brand-dark,#7d3d1f);line-height:1.2}
.theme-preview .tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.theme-preview .tp-card{background:var(--card,#fff);border:1px solid var(--line,#e7dcc9);border-radius:var(--r-card,12px);padding:.7rem;display:flex;flex-direction:column;gap:.45rem}
.theme-preview .tp-photo{aspect-ratio:4/3;border-radius:var(--r-card,12px);background:#f3ecdd;display:flex;align-items:center;justify-content:center;font-size:1.7rem}
.theme-preview .tp-name{font-weight:600;font-size:.8rem;line-height:1.25;color:var(--ink,#2b2118)}
.theme-preview .tp-price{font-weight:700;font-size:.8rem;color:var(--brand-dark,#7d3d1f)}
.theme-preview .tp-stepper{display:flex;align-items:center;gap:.35rem}
.theme-preview .tp-stepper b{width:22px;height:22px;border:1px solid var(--line,#e7dcc9);border-radius:var(--r-btn-sm,8px);background:var(--card,#fff);display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:var(--brand-dark,#7d3d1f)}
.theme-preview .tp-stepper span{min-width:1.6ch;text-align:center;font-weight:700;font-size:.8rem;color:var(--ink,#2b2118)}
.theme-preview .tp-actions{display:flex;gap:.5rem;justify-content:flex-end}
.theme-preview .btn{border-radius:var(--r-btn,10px)}
.theme-preview h3{font-family:var(--font-head,'Playfair Display',serif)}

/* ---------- calendar day modal: products ordered for that day ---------- */
.dm-products{background:#fffdf9;border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem .9rem;margin-bottom:.4rem}
.dm-products-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
.dm-products-head b{font-size:.88rem;color:var(--brand-dark)}
.dm-products-head .muted{font-size:.74rem}
.dm-products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.6rem;max-height:300px;overflow:auto;padding:.1rem}
.dm-prod{border:1px solid var(--line);border-radius:10px;background:#fff;padding:.45rem;position:relative;display:flex;flex-direction:column;gap:.3rem;transition:border-color .12s}
.dm-prod:hover{border-color:var(--accent)}
.dm-prod-img{aspect-ratio:1/1;border-radius:7px;background:#f3ecdd;display:flex;align-items:center;justify-content:center;font-size:1.15rem;overflow:hidden}
.dm-prod-img img{width:100%;height:100%;object-fit:cover;display:block}
.dm-prod-qty{position:absolute;top:.55rem;right:.55rem;background:var(--brand);color:#fff;font-size:.68rem;font-weight:700;border-radius:99px;padding:.05rem .45rem;line-height:1.3}
.dm-prod-name{font-size:.68rem;font-weight:600;line-height:1.25;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:1.75em}
.dm-empty{background:#fdf9f2;border:1px dashed var(--line);border-radius:10px;padding:.9rem 1rem;color:var(--muted);font-size:.85rem;margin-bottom:.5rem}

/* ---------- summary tab (order stats) ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:.7rem;margin-bottom:1rem}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:.7rem .8rem;display:flex;flex-direction:column;justify-content:center;min-height:86px}
.kpi .lab{font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.25}
.kpi .val{font-size:1.22rem;font-weight:700;color:var(--ink);margin-top:.3rem;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .sub{font-size:.66rem;color:var(--muted);margin-top:.2rem;line-height:1.3}
.kpi.hero{background:var(--brand);border-color:var(--brand)}
.kpi.hero .lab,.kpi.hero .sub{color:#f7e6d8}
.kpi.hero .val{color:#fff}
.sum-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1rem;align-items:start}
@media(max-width:980px){.sum-grid{grid-template-columns:1fr}}
.sum-panel{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:.9rem 1rem}
.sum-panel h2{font-size:.98rem;color:var(--brand-dark);margin:0 0 .7rem}
.sum-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:.7rem;flex-wrap:wrap;margin-bottom:.4rem}
.sum-panel-head h2{margin-bottom:0}
.sum-panel-head .muted{font-size:.74rem}
.sum-side{display:flex;flex-direction:column;gap:1rem;min-width:0}
.prod-row{display:flex;align-items:center;gap:.6rem;padding:.42rem 0;border-bottom:1px dashed #f0e6d6}
.prod-row:last-child{border-bottom:none}
.prod-row img{width:38px;height:38px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#f3ecdd}
.prod-row .noimg{width:38px;height:38px;border-radius:8px;background:#f3ecdd;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.95rem}
.prod-row .pn{flex:1;min-width:0}
.prod-row .pn b{font-size:.85rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod-row .pn span{font-size:.7rem;color:var(--muted)}
.prod-row .pq{font-weight:700;color:var(--brand-dark);white-space:nowrap}
.prod-row .pr{font-size:.78rem;color:var(--muted);white-space:nowrap;min-width:88px;text-align:right}
.stat-line{display:flex;justify-content:space-between;gap:.6rem;padding:.34rem 0;border-bottom:1px dashed #f0e6d6;font-size:.84rem}
.stat-line:last-child{border-bottom:none}
.stat-line b{font-variant-numeric:tabular-nums}
#viewSummary .main-head{margin-bottom:.9rem}

/* ---------- WhatsApp templates (settings sub-tab + order view buttons) ---------- */
.wa-btns{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.6rem;padding-top:.6rem;border-top:1px dashed var(--line)}
.om-receiver .wa-btns{margin-top:.55rem}
.wa-btn{border:1.5px solid var(--line);background:#fff;color:var(--brand-dark);border-radius:999px;padding:.32rem .8rem;font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .12s}
.wa-btn:hover{border-color:var(--ok);color:var(--ok);background:#f2faf5}
.wa-btn.sent,.wa-btn:disabled{background:#e7f5ec;border-color:#bfe0cc;color:var(--ok);cursor:default;opacity:1}
.wa-btn .wa-mini{margin-left:.35rem;font-weight:500;color:var(--muted)}
/* settings pane */
.wa-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:1.1rem;align-items:start;max-width:1180px}
@media(max-width:980px){.wa-grid{grid-template-columns:1fr}}
.wa-tpl-row{display:flex;align-items:center;gap:.6rem;border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;background:#fffdf9;margin-bottom:.5rem}
.wa-tpl-row .wt-name{font-weight:600;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.wa-tpl-row .wt-body{flex:1;min-width:0;font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-tpl-row .wt-cat{flex-shrink:0}
.wa-token-bar{display:flex;gap:.35rem;flex-wrap:wrap;margin:.35rem 0 .5rem}
.wa-token{background:#f3ecdd;border:1px solid var(--line);border-radius:999px;font-size:.7rem;font-weight:600;color:var(--brand-dark);padding:.2rem .6rem;cursor:pointer}
.wa-token:hover{background:#fdf3e7;border-color:var(--accent)}
.wa-hint{font-size:.78rem;color:var(--muted);line-height:1.5}
.wa-hint-err{color:var(--err);font-weight:600}
#waMetaPhoneIdHint{margin-top:.25rem}
#waTplBody{font:inherit;padding:.6rem .8rem;border:1px solid var(--line);border-radius:9px;width:100%;resize:vertical;background:#fdfbf7}
.wa-provider-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:640px){.wa-provider-row{grid-template-columns:1fr}}
.wa-send-note{margin:.35rem 0 0;font-size:.74rem;color:var(--muted)}

/* ============================================================
   Chat tab (WhatsApp inbox)
   ============================================================ */
.chat-nav-badge{display:inline-block;min-width:1.05rem;background:#ff5a4e;color:#fff;border-radius:999px;font-size:.68rem;font-weight:700;line-height:1.05rem;padding:0 .28rem;text-align:center;margin-left:.35rem;vertical-align:1px}
.side-btn.active .chat-nav-badge{background:#fff;color:var(--err)}

/* --- setup panel --- */
.chat-setup{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:1.1rem 1.3rem;margin-bottom:1rem}
.chat-setup-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.chat-setup-head h3{font-size:1.02rem;margin-bottom:.2rem}
.chat-setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.4rem;margin-top:.9rem;max-width:1100px}
@media(max-width:820px){.chat-setup-grid{grid-template-columns:1fr}}
.cs-field label{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.04em}
.cs-field input{width:100%;padding:.55rem .7rem;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fdfbf7}
.cs-field input:focus{outline:2px solid var(--accent);background:#fff}
.cs-copy{display:flex;gap:.4rem;align-items:center}
.cs-copy code{flex:1;min-width:0;padding:.55rem .7rem;border:1px dashed var(--line);border-radius:9px;background:#faf5ec;font-size:.76rem;color:var(--brand-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Consolas,monospace}
.cs-copy input{flex:1}
.chat-setup-foot{display:flex;align-items:center;gap:.7rem;margin-top:.9rem;flex-wrap:wrap}
.chat-setup-diag{margin-top:.7rem;padding:.6rem .8rem;border-radius:9px;background:#fdfbf7;border:1px dashed var(--line);font-size:.8rem;color:var(--muted);display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.chat-setup-diag .ok{color:var(--ok);font-weight:600}
.chat-setup-diag .err{color:var(--err);font-weight:600}

/* --- shell: list + thread --- */
.chat-shell{display:flex;gap:1rem;align-items:stretch;height:calc(100vh - 212px);min-height:380px}
@media(max-width:860px){.chat-shell{flex-direction:column;height:auto}.chat-list{height:38vh}.chat-thread{height:60vh}}
.chat-list{width:300px;flex-shrink:0;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow-y:auto;display:flex;flex-direction:column}
@media(max-width:860px){.chat-list{width:100%}}
.chat-item{display:flex;gap:.6rem;padding:.7rem .8rem;border-bottom:1px solid #f2ecdf;cursor:pointer;align-items:flex-start;transition:background .1s}
.chat-item:hover{background:#fdf9f2}
.chat-item.active{background:#f7ead9;box-shadow:inset 3px 0 0 var(--brand)}
.chat-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Playfair Display',serif;font-size:.95rem}
.chat-item-main{flex:1;min-width:0}
.chat-item-top{display:flex;justify-content:space-between;gap:.4rem;align-items:baseline}
.chat-item-top b{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item-top .ci-time{font-size:.68rem;color:var(--muted);flex-shrink:0;font-variant-numeric:tabular-nums}
.chat-preview{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.1rem}
.chat-item-foot{display:flex;justify-content:space-between;align-items:center;margin-top:.18rem;gap:.4rem}
.chat-tag{font-size:.64rem;font-weight:600;color:var(--brand-dark);background:#f3ecdd;border-radius:999px;padding:.08rem .45rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:75%;cursor:pointer}
.chat-tag:hover{background:#fdf3e7}
.chat-unread{background:var(--brand);color:#fff;font-size:.68rem;font-weight:700;border-radius:999px;min-width:1.15rem;text-align:center;padding:0 .32rem;line-height:1.15rem;flex-shrink:0}
.chat-esc{font-size:.64rem;font-weight:700;color:#b45309;background:#fdeee0;border:1px solid #f6d7b8;border-radius:999px;padding:.08rem .5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:78%;flex-shrink:0}
.chat-item.esc-row{background:#fffaf3}
.chat-list .muted.pad{text-align:center;padding-top:2rem}

/* --- thread --- */
.chat-thread{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.chat-thread-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;padding:1rem}
.cte-icon{font-size:2.2rem;opacity:.7}
.chat-thread-head{display:flex;align-items:center;gap:.7rem;padding:.65rem .9rem;border-bottom:1px solid var(--line);background:#fdfbf7;flex-wrap:wrap}
.chat-thread-head .cth-info{flex:1;min-width:0}
.chat-thread-head b{font-size:.95rem}
.chat-thread-head .cth-sub{font-size:.74rem;color:var(--muted)}
.chat-msgs{flex:1;overflow-y:auto;padding:1rem .9rem;background:#f4ede1;display:flex;flex-direction:column;gap:.28rem}
.chat-day{text-align:center;font-size:.68rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:.45rem 0 .3rem}
.chat-msg{display:flex;flex-direction:column;max-width:72%}
.chat-msg.in{align-self:flex-start;align-items:flex-start}
.chat-msg.out{align-self:flex-end;align-items:flex-end}
.chat-bubble{background:#fff;border:1px solid #efe3cf;border-radius:14px 14px 14px 4px;padding:.5rem .75rem;font-size:.88rem;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 2px rgba(80,50,20,.06)}
.chat-msg.out .chat-bubble{background:var(--brand);border-color:var(--brand);color:#fff;border-radius:14px 14px 4px 14px}
.chat-msg .cm-time{font-size:.64rem;color:var(--muted);margin-top:.15rem;padding:0 .15rem}
.chat-msg.out .cm-time{color:var(--muted)}
.cm-status{margin-left:.3rem;font-style:normal}
.cm-status.delivered,.cm-status.read{color:var(--ok)}
.cm-status.failed{color:var(--err)}
.chat-bubble.media{background:#fdfbf7;border-style:dashed;font-style:italic;color:var(--muted)}
.chat-msg.out .chat-bubble.media{background:#b9835f;border-color:#b9835f;color:#fff}
.chat-composer{display:flex;gap:.55rem;padding:.7rem .9rem;border-top:1px solid var(--line);background:#fdfbf7;align-items:flex-end}
.chat-composer textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem;font:inherit;font-size:.9rem;max-height:120px;background:#fff}
.chat-composer textarea:focus{outline:2px solid var(--accent)}
.chat-composer .btn{flex-shrink:0}
.chat-composer .cc-hint{font-size:.66rem;color:var(--muted);align-self:center}
.chat-reply-note{font-size:.72rem;color:var(--brand-dark);background:#fdf3e7;padding:.5rem .8rem;border-top:1px dashed var(--line);font-style:italic}

/* ---------- coordinates + pickup (order view) ---------- */
.badge.pickup{background:#fdf3e7;color:var(--brand-dark);border:1px solid #e7c9a6;margin-left:.35rem}
.coord-row .kv-value{font-variant-numeric:tabular-nums}
.kv .coord-inputs{display:flex;gap:.45rem;align-items:center}
.kv .coord-inputs input{min-width:0;width:100%}
.kv .coord-inputs input:first-child{max-width:150px}
.kv .coord-inputs input:last-child{max-width:170px}

/* ---------- midtrans payments (order modal) ---------- */
.badge.paid{background:#e7f5ec;color:var(--ok);border:1px solid #bfe0cc}
.pay-row{font-size:.9rem;font-weight:600;margin:.15rem 0;display:flex;flex-wrap:wrap;gap:.3rem;align-items:baseline}
.pay-row.ok{color:var(--ok)}
.pay-row.warn{color:#9a6b1f}
.pay-row.err{color:var(--err)}
.pay-sub{font-size:.8rem;color:var(--muted);word-break:break-word;margin:.2rem 0}
.pay-linkbox{display:flex;flex-direction:column;gap:.3rem;margin:.45rem 0;padding:.6rem .7rem;background:#fffdf9;border:1px dashed #d9b98c;border-radius:10px}
.pay-linkbox .url{font-size:.78rem;word-break:break-all;color:var(--muted)}
.pay-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.5rem}