*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --brand:#FF5C2B;--brand-d:#D94518;--brand-l:#FFF0EB;--brand-m:#FFB59A;
  --ink:#18110C;--ink2:#4A3F38;--ink3:#8C7F78;--ink4:#C2B8B2;
  --bg:#F7F4F0;--bg2:#EDE9E3;--surf:#FFFFFF;
  --border:#E0D9D2;--border2:#CFC7BF;
  --green:#16A34A;--green-bg:#DCFCE7;
  --amber:#D97706;--amber-bg:#FEF3C7;
  --blue:#2563EB;--blue-bg:#DBEAFE;
  --red:#DC2626;--red-bg:#FEE2E2;
  --violet:#7C3AED;--violet-bg:#EDE9FE;
  --r:14px;--rsm:9px;--rxs:6px;
  --sh:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
  --sh-md:0 4px 16px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.04);
  --sh-lg:0 12px 40px rgba(0,0,0,.15);
  --sb:220px;
}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}

/* ── AUTH ─────────────────────────────────────────── */
#auth-wrap{min-height:100vh;display:flex}
.auth-left{width:460px;flex-shrink:0;background:var(--ink);display:flex;flex-direction:column;padding:2.5rem;gap:2rem;position:relative;overflow:hidden}
.auth-left::before{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(255,92,43,.3) 0%,transparent 65%);top:-120px;right:-160px;pointer-events:none}
.auth-left::after{content:'';position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,92,43,.18) 0%,transparent 65%);bottom:-80px;left:-60px;pointer-events:none}
.auth-brand{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.auth-logo{font-size:28px}
.auth-logo-text{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:800;color:#fff}
.auth-left-body{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center}
.auth-left-body h2{font-family:'Bricolage Grotesque',sans-serif;font-size:30px;font-weight:800;color:#fff;line-height:1.15;margin-bottom:.75rem}
.auth-left-body p{font-size:13px;color:rgba(255,255,255,.5);line-height:1.7;margin-bottom:1.5rem}
.auth-feats{display:flex;flex-direction:column;gap:8px}
.auth-feat{font-size:12px;color:rgba(255,255,255,.65);display:flex;align-items:center;gap:8px}
.auth-left-footer{font-size:11px;color:rgba(255,255,255,.2);position:relative;z-index:1}
.auth-right{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem;background:var(--bg)}
.auth-screen{display:none;width:100%;max-width:380px}
.auth-screen.active{display:block}
.auth-card{background:var(--surf);border-radius:var(--r);border:1px solid var(--border);padding:2rem;box-shadow:var(--sh-md)}
.auth-card h1{font-family:'Bricolage Grotesque',sans-serif;font-size:24px;font-weight:800;margin-bottom:.2rem}
.auth-sub{font-size:12px;color:var(--ink3);margin-bottom:1.5rem}
.auth-switch{font-size:12px;text-align:center;color:var(--ink3);margin-top:1rem}
.auth-switch a{color:var(--brand);text-decoration:none;font-weight:600}

/* ── FORMS ────────────────────────────────────────── */
.fg{margin-bottom:.9rem}
.fg label{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px}
.fg input,.fg select,.fg textarea{display:block;width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:var(--rsm);font-size:14px;font-family:'Plus Jakarta Sans',sans-serif;color:var(--ink);background:var(--surf);transition:border-color .15s,box-shadow .15s}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,92,43,.12)}
.slug-row{display:flex;align-items:stretch;border:1.5px solid var(--border);border-radius:var(--rsm);overflow:hidden;transition:border-color .15s}
.slug-row:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,92,43,.12)}
.slug-pre{padding:10px 10px;font-size:11px;color:var(--ink3);background:var(--bg);border-right:1.5px solid var(--border);white-space:nowrap;display:flex;align-items:center}
.slug-row input{border:none!important;box-shadow:none!important;border-radius:0!important;flex:1}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-error{background:var(--red-bg);color:var(--red);border-radius:var(--rsm);padding:9px 13px;font-size:13px;margin-bottom:.875rem;border:1px solid #FCA5A5}
.form-success{background:var(--green-bg);color:#166534;border-radius:var(--rsm);padding:9px 13px;font-size:13px;margin-top:.875rem;border:1px solid #86EFAC;display:inline-block}

/* ── BUTTONS ──────────────────────────────────────── */
.btn-brand{display:block;width:100%;padding:12px;background:var(--brand);color:#fff;border:none;border-radius:var(--rsm);font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;cursor:pointer;margin-top:.5rem;transition:background .15s,transform .1s;box-shadow:0 4px 14px rgba(255,92,43,.28)}
.btn-brand:hover{background:var(--brand-d)}
.btn-brand:active{transform:scale(.98)}
.btn-brand-sm{display:inline-flex;align-items:center;gap:6px;padding:9px 20px;background:var(--brand);color:#fff;border:none;border-radius:var(--rsm);font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s;box-shadow:0 3px 10px rgba(255,92,43,.25)}
.btn-brand-sm:hover{background:var(--brand-d)}
.btn-ghost{padding:9px 18px;background:transparent;border:1.5px solid var(--border2);border-radius:var(--rsm);font-size:13px;font-weight:600;cursor:pointer;color:var(--ink2);font-family:'Plus Jakarta Sans',sans-serif}
.btn-ghost-sm{padding:7px 16px;background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:var(--rsm);font-size:13px;color:rgba(255,255,255,.7);cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif}
.btn-outline-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;background:transparent;border:1.5px solid var(--border2);border-radius:20px;font-size:13px;color:var(--ink2);text-decoration:none;transition:background .15s;font-weight:600}
.btn-outline-pill:hover{background:var(--bg2)}
.btn-copy{margin-top:.75rem;padding:7px 16px;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--rsm);font-size:13px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;color:var(--ink2);font-weight:600}

/* ── SIDEBAR ──────────────────────────────────────── */
#dashboard{display:flex;min-height:100vh}
.sidebar{width:var(--sb);background:var(--ink);display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;overflow-y:auto;z-index:200;padding:0}
.sb-brand{display:flex;align-items:center;gap:9px;padding:1.4rem 1.25rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.07);font-size:22px}
.sb-brand-name{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:800;color:#fff}
.sb-nav{flex:1;padding:.75rem .625rem}
.sb-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--rsm);text-decoration:none;font-size:14px;font-weight:500;color:rgba(255,255,255,.45);transition:background .15s,color .15s;margin-bottom:2px;position:relative}
.sb-link:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.8)}
.sb-link.active{background:var(--brand);color:#fff;font-weight:700}
.sb-icon{font-size:17px;flex-shrink:0}
.sb-badge{margin-left:auto;background:#FF3B3B;color:#fff;font-size:10px;font-weight:800;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;animation:pulseDot 1s ease-in-out infinite}
@keyframes pulseDot{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
.sb-foot{padding:.875rem .625rem 1.25rem;border-top:1px solid rgba(255,255,255,.07);margin-top:auto}
.sb-user{display:flex;align-items:center;gap:9px;padding:.5rem .75rem;border-radius:var(--rsm);background:rgba(255,255,255,.05);margin-bottom:.5rem}
.sb-avatar{width:32px;height:32px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0}
.sb-uname{font-size:13px;font-weight:600;color:rgba(255,255,255,.7)}
.sb-urole{font-size:11px;color:rgba(255,255,255,.3)}
.sb-logout{width:100%;background:transparent;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.4);border-radius:var(--rsm);padding:7px;font-size:12px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:color .15s}
.sb-logout:hover{color:#fff}

/* ── MAIN / TOPBAR ────────────────────────────────── */
.main{margin-left:var(--sb);flex:1}
.topbar{background:var(--surf);border-bottom:1px solid var(--border);padding:1rem 1.75rem;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100;box-shadow:var(--sh)}
.topbar-title{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:800}
.topbar-sub{font-size:12px;color:var(--ink3);margin-top:1px}
.topbar-actions{display:flex;align-items:center;gap:10px}
.sound-toggle{width:38px;height:38px;border-radius:50%;background:var(--bg2);border:1.5px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:background .15s;user-select:none}
.sound-toggle:hover{background:var(--bg)}
.sound-toggle.muted{opacity:.4}
.sound-toggle.alerting{background:var(--red);color:#fff;border-color:var(--red);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}}
.page-wrap{padding:1.75rem;max-width:960px}

/* ── TABS ─────────────────────────────────────────── */
.tab{display:none}
.tab.active{display:block}
.tab-toolbar{display:flex;justify-content:flex-end;margin-bottom:1.25rem}

/* ── METRICS ──────────────────────────────────────── */
.metrics-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:1.5rem}
.metric{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:1.1rem 1.25rem;box-shadow:var(--sh)}
.metric-val{font-family:'Bricolage Grotesque',sans-serif;font-size:26px;font-weight:800}
.metric-lbl{font-size:12px;color:var(--ink3);margin-top:3px;font-weight:500}

/* ── NEW ORDER BANNER ─────────────────────────────── */
.new-banner{background:linear-gradient(135deg,#FF5C2B,#FF3D00);border-radius:var(--r);padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem;position:relative;overflow:hidden;box-shadow:0 6px 24px rgba(255,60,0,.35);animation:bannerPop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes bannerPop{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}
.new-banner-pulse{width:14px;height:14px;border-radius:50%;background:#fff;flex-shrink:0;animation:ping 1s ease-in-out infinite}
@keyframes ping{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.6}}
.new-banner-text{flex:1;color:#fff}
.new-banner-text strong{display:block;font-size:15px;font-weight:800}
.new-banner-text span{font-size:12px;opacity:.85}
.btn-silence{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);border-radius:var(--rsm);padding:6px 14px;color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;white-space:nowrap}

/* ── ORDER FILTERS ────────────────────────────────── */
.order-filters{display:flex;gap:8px;margin-bottom:1.1rem;flex-wrap:wrap}
.of{padding:7px 16px;border-radius:20px;font-size:13px;font-weight:600;border:1.5px solid var(--border);background:var(--surf);color:var(--ink2);cursor:pointer;transition:all .15s;font-family:'Plus Jakarta Sans',sans-serif}
.of:hover{border-color:var(--brand-m);color:var(--brand)}
.of.active{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 3px 10px rgba(255,92,43,.25)}

/* ── ORDERS LIST ──────────────────────────────────── */
.orders-list{display:flex;flex-direction:column;gap:10px}
.order-card{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);transition:box-shadow .2s}
.order-card:hover{box-shadow:var(--sh-md)}
.order-card.status-new{border-left:4px solid var(--blue)}
.order-card.status-accepted{border-left:4px solid var(--green)}
.order-card.status-prep{border-left:4px solid var(--amber)}
.order-card.status-ready{border-left:4px solid var(--violet)}
.order-card.status-done{border-left:4px solid var(--ink4)}
.order-card-head{display:flex;justify-content:space-between;align-items:flex-start;padding:.875rem 1rem .5rem}
.order-card-id{font-size:14px;font-weight:800}
.order-card-time{font-size:12px;color:var(--ink3);margin-top:2px}
.order-card-items{padding:0 1rem .5rem;font-size:13px;color:var(--ink2);line-height:1.5}
.order-card-addr{padding:0 1rem .5rem;font-size:12px;color:var(--ink3)}
.order-card-foot{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--bg);border-top:1px solid var(--border)}
.order-total{font-family:'Bricolage Grotesque',sans-serif;font-size:17px;font-weight:800;color:var(--brand)}
.order-btns{display:flex;gap:7px;align-items:center}
.btn-accept{padding:7px 18px;background:var(--green);color:#fff;border:none;border-radius:20px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;box-shadow:0 3px 10px rgba(22,163,74,.3);animation:acceptPulse 1.2s ease-in-out infinite}
@keyframes acceptPulse{0%,100%{box-shadow:0 3px 10px rgba(22,163,74,.3)}50%{box-shadow:0 3px 20px rgba(22,163,74,.6)}}
.btn-next{padding:7px 16px;background:var(--brand);color:#fff;border:none;border-radius:20px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:background .15s}
.btn-next:hover{background:var(--brand-d)}
.btn-wpp{padding:7px 14px;background:#25D366;color:#fff;border:none;border-radius:20px;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;font-family:'Plus Jakarta Sans',sans-serif}
.btn-cancel-order{padding:7px 12px;background:var(--red-bg);color:var(--red);border:1px solid #FCA5A5;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:12px;font-weight:700}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0}
.badge-new      {background:var(--blue-bg);color:var(--blue)}.badge-new::before{background:var(--blue)}
.badge-accepted {background:var(--green-bg);color:var(--green)}.badge-accepted::before{background:var(--green)}
.badge-prep     {background:var(--amber-bg);color:var(--amber)}.badge-prep::before{background:var(--amber)}
.badge-ready    {background:var(--violet-bg);color:var(--violet)}.badge-ready::before{background:var(--violet)}
.badge-done     {background:var(--bg2);color:var(--ink3)}.badge-done::before{background:var(--ink4)}
.badge-cancelled{background:var(--red-bg);color:var(--red)}.badge-cancelled::before{background:var(--red)}

/* ── PRODUCTS GRID ────────────────────────────────── */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.pc{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);transition:box-shadow .2s,transform .2s}
.pc:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.pc.off{opacity:.55}
.pc-thumb{height:136px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:52px;position:relative;overflow:hidden}
.pc-thumb img{width:100%;height:100%;object-fit:cover}
.pc-body{padding:.875rem}
.pc-cat{font-size:11px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.pc-name{font-size:14px;font-weight:700;line-height:1.3}
.pc-desc{font-size:12px;color:var(--ink3);margin-top:2px;line-height:1.4;display:-webkit-box;display:-moz-box;display:box;-webkit-line-clamp:2;-moz-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;-moz-box-orient:vertical;box-orient:vertical;overflow:hidden}
.pc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:.75rem}
.pc-price{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;color:var(--brand)}
.pc-actions{display:flex;gap:6px}
.btn-ic{width:30px;height:30px;border-radius:var(--rxs);border:1.5px solid var(--border);background:var(--surf);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:background .15s}
.btn-ic:hover{background:var(--bg2)}
.btn-ic.del:hover{background:var(--red-bg);border-color:#FCA5A5}

/* ── STORE EDIT ───────────────────────────────────── */
.store-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.5rem}
.store-section{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:1.25rem;box-shadow:var(--sh)}
.store-section h3{font-size:15px;font-weight:800;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}
.full-w{grid-column:1/-1}
.cover-upload-zone{border:2px dashed var(--border2);border-radius:var(--r);height:180px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;transition:border-color .2s,background .2s}
.cover-upload-zone:hover{border-color:var(--brand-m);background:var(--brand-l)}
.cover-upload-zone img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.cover-placeholder{text-align:center;color:var(--ink3);pointer-events:none}
.cover-placeholder p{font-size:13px;margin-top:.5rem}
.logo-upload-zone{border:2px dashed var(--border2);border-radius:50%;width:120px;height:120px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;transition:border-color .2s;margin:0 auto}
.logo-upload-zone:hover{border-color:var(--brand-m)}
.logo-upload-zone img{width:100%;height:100%;object-fit:cover}
.logo-placeholder{text-align:center;color:var(--ink3);font-size:11px;pointer-events:none;padding:.5rem}
.toggle-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:500;color:var(--ink2);margin-bottom:.875rem}
.tgl{position:relative;display:inline-block;width:48px;height:26px}
.tgl input{display:none}
.tgl-sl{position:absolute;inset:0;background:var(--border2);border-radius:13px;cursor:pointer;transition:background .2s}
.tgl-sl::after{content:'';position:absolute;width:20px;height:20px;background:#fff;border-radius:50%;top:3px;left:3px;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tgl input:checked+.tgl-sl{background:var(--brand)}
.tgl input:checked+.tgl-sl::after{transform:translateX(22px)}

/* ── SETTINGS ─────────────────────────────────────── */
.settings-card{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:1.25rem;box-shadow:var(--sh)}
.settings-card h3{font-size:15px;font-weight:800;margin-bottom:1rem}
.link-box{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--rsm);padding:10px 14px;font-size:13px;font-weight:600;color:var(--brand);word-break:break-all}
.link-group{display:flex;flex-direction:column;gap:1rem}
.link-item{display:flex;flex-direction:column;gap:8px}
.link-item label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}

/* ── MODAL ────────────────────────────────────────── */
.modal-bg{position:fixed;inset:0;background:rgba(20,14,8,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;backdrop-filter:blur(4px)}
.modal{background:var(--surf);border-radius:var(--r);width:100%;max-width:520px;max-height:92vh;overflow-y:auto;box-shadow:var(--sh-lg)}
.modal-hd{display:flex;justify-content:space-between;align-items:center;padding:1.4rem 1.6rem 1.1rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surf);z-index:1;border-radius:var(--r) var(--r) 0 0}
.modal-hd h3{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:800}
.modal-x{width:30px;height:30px;border-radius:50%;background:var(--bg2);border:none;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.modal-body{padding:1.4rem 1.6rem}
.modal-ft{display:flex;gap:10px;justify-content:flex-end;padding:1.1rem 1.6rem;border-top:1px solid var(--border);position:sticky;bottom:0;background:var(--surf);border-radius:0 0 var(--r) var(--r)}

/* ── IMAGE UPLOAD ─────────────────────────────────── */
.img-upload-zone{border:2px dashed var(--border2);border-radius:var(--r);min-height:140px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden;transition:border-color .2s,background .2s}
.img-upload-zone:hover{border-color:var(--brand-m);background:var(--brand-l)}
.img-upload-zone.has-img{border-style:solid;border-color:var(--border)}
.img-upload-zone img{width:100%;height:140px;object-fit:cover;display:block;border-radius:calc(var(--r) - 2px)}
.img-upload-ph{text-align:center;color:var(--ink3);pointer-events:none}
.img-upload-ph p{font-size:13px;margin-top:.5rem;line-height:1.5}
.img-upload-ph strong{color:var(--brand)}
.img-upload-overlay{position:absolute;inset:0;background:rgba(0,0,0,.42);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;border-radius:calc(var(--r) - 2px)}
.img-upload-zone.has-img:hover .img-upload-overlay{opacity:1}
.img-upload-overlay span{color:#fff;font-size:13px;font-weight:700}
.img-upload-prog{position:absolute;bottom:0;left:0;height:3px;background:var(--brand);transition:width .2s}
.emoji-grid{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.em-opt{width:40px;height:40px;border-radius:var(--rsm);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:all .15s}
.em-opt:hover{border-color:var(--brand-m);background:var(--brand-l)}
.em-opt.active{border-color:var(--brand);background:var(--brand-l);box-shadow:0 0 0 2px var(--brand-m)}

/* ── ORDER POPUP ──────────────────────────────────── */
.order-popup{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:2000;display:flex;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(6px)}
.popup-inner{background:var(--surf);border-radius:var(--r);width:100%;max-width:420px;padding:2rem;text-align:center;box-shadow:var(--sh-lg);animation:popupIn .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes popupIn{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.popup-ring{font-size:52px;margin-bottom:.875rem;display:inline-block;animation:ringWiggle 0.5s ease-in-out infinite}
@keyframes ringWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}
.popup-inner h2{font-family:'Bricolage Grotesque',sans-serif;font-size:26px;font-weight:800;color:var(--brand);margin-bottom:1rem}
#popup-orders-list{text-align:left;margin-bottom:1.25rem;max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.popup-order-item{background:var(--bg);border:1px solid var(--border);border-radius:var(--rsm);padding:.75rem 1rem}
.popup-order-id{font-size:13px;font-weight:800}
.popup-order-det{font-size:12px;color:var(--ink3);margin-top:2px}
.btn-accept-all{display:block;width:100%;padding:13px;background:var(--green);color:#fff;border:none;border-radius:var(--rsm);font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:800;cursor:pointer;margin-bottom:.75rem;box-shadow:0 6px 20px rgba(22,163,74,.35);transition:background .15s}
.btn-accept-all:hover{background:#15803D}

/* ── TOAST ────────────────────────────────────────── */
.toast{position:fixed;bottom:1.75rem;right:1.75rem;background:var(--ink);color:#fff;padding:11px 18px;border-radius:var(--rsm);font-size:14px;font-weight:600;box-shadow:var(--sh-lg);transform:translateY(80px);opacity:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s;z-index:9999}
.toast.show{transform:translateY(0);opacity:1}
.toast.ok{background:var(--green)}
.toast.err{background:var(--red)}

/* ── EMPTY ────────────────────────────────────────── */
.empty{text-align:center;padding:3rem 1rem;color:var(--ink3)}
.empty .eico{font-size:44px;margin-bottom:.75rem;opacity:.4}

/* ── RESPONSIVE ───────────────────────────────────── */
@media(max-width:900px){
  :root{--sb:60px}
  .sb-brand-name,.sb-link>span:not(.sb-icon):not(.sb-badge),.sb-uname,.sb-urole,.sb-logout{display:none}
  .sb-brand{justify-content:center;padding:1rem .5rem}
  .sb-link{justify-content:center;padding:10px}
  .sb-user{justify-content:center}
  .sb-nav{padding:0 .25rem}
  .metrics-row{grid-template-columns:repeat(2,1fr)}
  .store-edit-grid{grid-template-columns:1fr}
}

/* Auth Responsivo */
@media(max-width:768px){
  #auth-wrap{flex-direction:column}
  .auth-left{width:100%;min-height:60vh;padding:2rem 1.5rem}
  .auth-left-body h2{font-size:28px}
  .auth-left-body p{font-size:13px}
  .auth-feats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .auth-feat{font-size:12px}
  .auth-right{padding:1.5rem}
  .auth-screen{max-width:100%}
  .auth-card{padding:1.75rem}
  .auth-card h1{font-size:22px}
}

@media(max-width:480px){
  .auth-left{min-height:50vh;padding:1.5rem 1rem}
  .auth-left-body h2{font-size:24px}
  .auth-left-body p{font-size:12px}
  .auth-feats{grid-template-columns:1fr;gap:8px}
  .auth-feat{font-size:11px}
  .auth-right{padding:1rem}
  .auth-card{padding:1.5rem;border-radius:12px}
  .auth-card h1{font-size:20px}
  .auth-sub{font-size:12px}
  .fg{margin-bottom:0.75rem}
  .fg input,.fg select,.fg textarea{padding:12px 15px;font-size:16px} /* iOS zoom fix */
  .btn-brand{padding:14px 20px;font-size:15px}
}

@media(max-width:380px){
  .auth-left{padding:1rem 0.75rem}
  .auth-left-body h2{font-size:22px}
  .auth-right{padding:0.75rem}
  .auth-card{padding:1.25rem}
  .auth-card h1{font-size:18px}
  .fg input,.fg select,.fg textarea{padding:14px 16px}
  .btn-brand{padding:16px 24px;font-size:14px}
}

/* ── Payment Methods Config ───────────────────────────── */
.section-desc {
  font-size: 12px;
  color: var(--ink3);
  margin-bottom: 1rem;
  font-style: italic;
}

.payment-methods-config {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-method-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.payment-method-toggle:hover {
  border-color: var(--brand);
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.payment-toggle-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.payment-icon {
  font-size: 24px;
  min-width: 24px;
}

.payment-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 2px;
}

.payment-desc {
  font-size: 12px;
  color: var(--ink3);
}

/* ── Order Card Phone ───────────────────────────────── */
.order-card-phone {
  font-size: 12px;
  color: var(--brand);
  font-weight: 600;
  margin-top: 2px;
}

/* ── Print Button ───────────────────────────────── */
.btn-print {
  background: var(--bg-light);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-print:hover {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM POLISH
   ══════════════════════════════════════════════════════════════ */
:root {
  --bg-light: #F7F4F0;
  --grad-brand: linear-gradient(135deg, #FF7A45 0%, #FF5C2B 45%, #E03E0C 100%);
  --sh: 0 2px 8px rgba(24, 17, 12, .06);
  --sh-md: 0 10px 30px rgba(24, 17, 12, .12);
  --sh-lg: 0 24px 60px rgba(24, 17, 12, .2);
}

/* Sidebar depth */
.sidebar {
  background: linear-gradient(180deg, #1c1410 0%, var(--ink) 60%, #2a1d15 100%);
}
.sb-link.active { box-shadow: 0 8px 20px rgba(255, 92, 43, .4), inset 0 1px 0 rgba(255,255,255,.2); }
.sb-brand-name { letter-spacing: -.02em; }

/* Buttons */
.btn-brand { background: var(--grad-brand); box-shadow: 0 8px 22px rgba(255, 92, 43, .32); }
.btn-brand:hover { background: var(--brand-d); transform: translateY(-1px); }
.btn-brand-sm { background: var(--grad-brand); }
.btn-outline-pill:hover { background: var(--brand-l); border-color: var(--brand-m); color: var(--brand-d); }

/* Cards / metrics */
.metric { border-radius: 16px; transition: transform .2s, box-shadow .2s; }
.metric:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.metric-val { letter-spacing: -.02em; }

/* Order cards */
.order-card { border-radius: 16px; }
.order-card:hover { transform: translateY(-2px); }
.order-total { color: var(--brand); }
.btn-accept, .btn-next { box-shadow: 0 6px 16px rgba(0,0,0,.14); }
.btn-accept:hover, .btn-next:hover { transform: translateY(-1px); }

/* Product cards */
.pc { border-radius: 16px; }
.pc-thumb { background: linear-gradient(135deg, #fbf7f4, #f1ebe5); }
.btn-ic { border-radius: 9px; }
.btn-ic:hover { transform: translateY(-1px); }

/* Modals / toasts */
.modal { border-radius: 18px; }
.toast { border-radius: 12px; }

/* Auth polish */
.auth-card { border-radius: 18px; box-shadow: var(--sh-lg); }
.auth-left { background: linear-gradient(160deg, #1c1410, #2a1d15 70%, #3a2416); }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-m); }
::selection { background: var(--brand-m); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   DASHBOARD PROFISSIONAL — refinamento completo
   ══════════════════════════════════════════════════════════════ */
:root { --sb: 252px; }

body { font-size: 14.5px; }

/* Sidebar */
.sidebar {
  background: linear-gradient(180deg, #171310 0%, #221812 55%, #2f2117 100%);
  border-right: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 4px 0 30px rgba(20, 12, 6, .18);
}
.sb-brand { padding: 1.5rem 1.25rem 1.25rem; gap: 11px; }
.sb-brand > span:first-child {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: var(--grad-brand); border-radius: 13px; font-size: 20px;
  box-shadow: 0 10px 24px rgba(255, 92, 43, .45);
}
.sb-brand-name { font-size: 20px; letter-spacing: -.02em; }
.sb-nav { padding: .9rem .7rem; }
.sb-link {
  gap: 12px; padding: 11px 12px; border-radius: 12px; font-size: 14.5px;
  font-weight: 600; color: rgba(255, 255, 255, .6); margin-bottom: 4px;
}
.sb-link:hover { background: rgba(255, 255, 255, .07); color: #fff; transform: none; }
.sb-link.active { background: var(--grad-brand); color: #fff; box-shadow: 0 10px 26px rgba(255, 92, 43, .45); }
.sb-icon {
  width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .07);
  display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0;
  transition: background .15s;
}
.sb-icon svg { width: 18px; height: 18px; }
.sb-link.active .sb-icon { background: rgba(255, 255, 255, .22); }
.sb-foot { padding: .9rem .8rem 1.25rem; }
.sb-user { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px; padding: .6rem .7rem; }
.sb-avatar { background: var(--grad-brand); box-shadow: 0 6px 16px rgba(255, 92, 43, .4); }
.sb-pro-link {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff;
  border-radius: 10px; padding: 10px; font-size: 12.5px; font-weight: 700;
  text-decoration: none; margin-bottom: .5rem; box-shadow: 0 8px 22px rgba(109, 40, 217, .34);
  transition: transform .15s, box-shadow .15s;
}
.sb-pro-link:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(109, 40, 217, .45); }
.sb-pro-link svg { width: 15px; height: 15px; }
.sb-logout {
  display: block; width: 100%; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13); color: rgba(255, 255, 255, .7);
  border-radius: 10px; padding: 10px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: background .15s, color .15s;
}
.sb-logout:hover { background: rgba(255, 92, 43, .9); color: #fff; }

/* Topbar */
.main { margin-left: var(--sb); }
.topbar {
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  padding: 16px 28px; box-shadow: var(--sh);
}
.topbar-title { font-size: 22px; }
.topbar-sub { font-size: 12.5px; color: var(--ink3); font-weight: 600; }
.topbar-sub::before { content: '● '; color: var(--green); font-size: 10px; }
.sound-toggle { background: var(--bg2); border: 1.5px solid var(--border); }
.btn-outline-pill { background: #fff; }
.btn-outline-pill:hover { background: var(--brand-l); border-color: var(--brand-m); color: var(--brand-d); }
.page-wrap { padding: 24px 28px; max-width: 1080px; }

/* Metrics */
.metrics-row { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.metric {
  display: flex; align-items: center; gap: 15px; padding: 18px 20px;
  border-radius: 16px; background: #fff; border: 1px solid var(--border);
  box-shadow: var(--sh); position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.metric::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad-brand); }
.metric:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.metric-icon { width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; background: var(--brand-l); }
.metric-body { min-width: 0; }
.metric-val { font-family: 'Bricolage Grotesque', sans-serif; font-size: 27px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.metric-lbl { font-size: 12.5px; color: var(--ink3); margin-top: 5px; font-weight: 600; }
.metric--orders::before { background: linear-gradient(180deg, #FF8A4C, #FF5C2B); }
.metric--rev::before { background: linear-gradient(180deg, #34D399, #10B981); }
.metric--pending::before { background: linear-gradient(180deg, #FBBF24, #F59E0B); }
.metric--prods::before { background: linear-gradient(180deg, #818CF8, #6366F1); }
.metric--orders .metric-icon { background: #FFF1EA; }
.metric--rev .metric-icon { background: #DCFCE7; }
.metric--pending .metric-icon { background: #FEF3C7; }
.metric--prods .metric-icon { background: #E0E7FF; }

/* Filters */
.order-filters { gap: 8px; margin-bottom: 16px; }
.of { padding: 8px 17px; box-shadow: var(--sh); }

/* Orders */
.orders-list { gap: 12px; }
.order-card { border-radius: 16px; }
.order-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.order-card-head { padding: 1rem 1.1rem .5rem; }
.order-card-id { font-size: 15px; }
.order-card-foot { padding: .8rem 1.1rem; }
.order-total { letter-spacing: -.01em; }
.btn-accept { background: linear-gradient(135deg, #34D399, #10B981); }
.btn-next { background: var(--grad-brand); }

/* Products */
.prod-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.pc { border-radius: 16px; }
.pc-thumb { height: 148px; background: linear-gradient(135deg, #FBF7F4, #F1EAE4); }
.pc-price { color: var(--brand-d); }
.tab-toolbar { margin-bottom: 16px; }
.btn-brand-sm { font-weight: 800; }

/* Store edit */
.store-section { border-radius: 16px; }
.cover-upload-zone, .logo-upload-zone, .img-upload-zone { border-radius: 16px; }

/* Settings */
.settings-card { border-radius: 16px; }
.link-box { border-radius: 12px; color: var(--brand-d); }

/* Modal */
.modal { border-radius: 20px; }
.modal-hd { border-radius: 20px 20px 0 0; }

/* Responsive */
@media (max-width: 1024px) {
  .metrics-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  :root { --sb: 74px; }
  .sb-brand > span:first-child { width: 38px; height: 38px; }
  .sb-pro-link { font-size: 0; padding: 11px 0; }
  .sb-pro-link svg { width: 17px; height: 17px; }
  .page-wrap { padding: 20px 16px; }
  .topbar { padding: 14px 16px; }
}
@media (max-width: 620px) {
  .metrics-row { grid-template-columns: 1fr 1fr; }
  .metric { padding: 15px; gap: 12px; }
  .metric-val { font-size: 22px; }
  .metric-icon { width: 44px; height: 44px; font-size: 20px; }
}

/* ══════════════════════════════════════════════════════════════
   CONFIGURAÇÕES — Minha loja & Ajustes
   ══════════════════════════════════════════════════════════════ */

/* Section icon chip */
.sec-ico {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-l); color: var(--brand-d);
}
.sec-ico svg { width: 16px; height: 16px; }

/* Cards de seção */
.store-edit-grid { gap: 1.25rem; }
.store-section {
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: 1.4rem; box-shadow: var(--sh);
  transition: box-shadow .2s, transform .2s;
}
.store-section:hover { box-shadow: var(--sh-md); }
.store-section h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 800; margin-bottom: 1.15rem;
  padding-bottom: .85rem; border-bottom: 1px solid var(--border);
  font-family: 'Bricolage Grotesque', sans-serif;
}
.section-desc { font-size: 12px; color: var(--ink3); margin: -.4rem 0 1rem; font-style: normal; font-weight: 500; }

/* Upload zones */
.cover-upload-zone {
  border: 2px dashed var(--border2); border-radius: 16px; height: 200px;
  background: var(--bg); transition: border-color .2s, background .2s;
}
.cover-upload-zone:hover { border-color: var(--brand); background: var(--brand-l); }
.cover-placeholder p { font-size: 13px; color: var(--ink3); font-weight: 600; }
.cover-placeholder p small { color: var(--ink3); font-weight: 500; }
.logo-upload-zone { border: 2px dashed var(--border2); transition: border-color .2s, background .2s; }
.logo-upload-zone:hover { border-color: var(--brand); background: var(--brand-l); }
.logo-placeholder p { font-size: 11px; color: var(--ink3); font-weight: 600; }

/* Inputs refinados */
.fg input, .fg select, .fg textarea { border-radius: 11px; }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(255, 92, 43, .13); }

/* Toggle switch */
.tgl { width: 52px; height: 30px; }
.tgl-sl { border-radius: 30px; background: var(--border2); }
.tgl-sl::after { width: 24px; height: 24px; top: 3px; left: 3px; }
.tgl input:checked + .tgl-sl { background: var(--grad-brand); }
.tgl input:checked + .tgl-sl::after { transform: translateX(22px); }
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 15px; border: 1.5px solid var(--border); border-radius: 12px;
  font-weight: 700; color: var(--ink2); background: #fff;
}

/* Payment method cards */
.payment-methods-config { gap: 10px; }
.payment-method-toggle {
  border: 1.5px solid var(--border); border-radius: 14px; padding: 15px 16px;
  background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.payment-method-toggle:hover { border-color: var(--brand-m); box-shadow: var(--sh); transform: translateY(-1px); }
.payment-icon {
  width: 44px; height: 44px; border-radius: 12px; background: var(--brand-l);
  display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.payment-name { font-weight: 800; font-size: 14px; }
.payment-desc { font-size: 12px; color: var(--ink3); }

/* Sticky save bar */
.store-actions {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 1.5rem; padding: 14px 16px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sh-lg);
}
.store-save {
  display: inline-flex; width: auto; align-items: center; gap: 9px;
  padding: 13px 30px; border-radius: 13px; font-size: 15px; margin-top: 0;
  background: var(--grad-brand); box-shadow: 0 10px 26px rgba(255, 92, 43, .38);
}
.store-save svg { width: 17px; height: 17px; }
.store-save:hover { transform: translateY(-1px); }
.store-actions .form-success { margin: 0; }

/* Settings cards */
.settings-card {
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: 1.5rem; box-shadow: var(--sh);
}
.settings-card h3 {
  display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 800;
  margin-bottom: 1.2rem; padding-bottom: .85rem; border-bottom: 1px solid var(--border);
  font-family: 'Bricolage Grotesque', sans-serif;
}
.link-group { gap: 1.2rem; }
.link-item label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); }
.link-box {
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 12px;
  padding: 12px 15px; font-size: 13px; font-weight: 700; color: var(--brand-d);
  word-break: break-all; font-family: 'SF Mono', ui-monospace, monospace;
}
.btn-copy {
  margin-top: .6rem; padding: 10px 18px; background: #fff; border: 1.5px solid var(--border);
  border-radius: 11px; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--ink2);
  font-family: 'Plus Jakarta Sans', sans-serif; transition: all .15s;
}
.btn-copy:hover { border-color: var(--brand); color: var(--brand-d); background: var(--brand-l); }
.btn-brand-sm {
  display: inline-flex; align-items: center; gap: 7px; padding: 11px 20px; border-radius: 11px;
  font-size: 13.5px; font-weight: 800; background: var(--grad-brand);
  box-shadow: 0 8px 20px rgba(255, 92, 43, .3); border: none; color: #fff; cursor: pointer;
}
.btn-brand-sm:hover { transform: translateY(-1px); }
.btn-ghost { border-radius: 11px; font-weight: 700; }
.btn-ghost:hover { background: var(--bg2); }

/* Modal refinado */
.modal-bg { backdrop-filter: blur(5px); }
.modal { border-radius: 20px; box-shadow: var(--sh-lg); }
.modal-hd h3 { font-family: 'Bricolage Grotesque', sans-serif; }
.modal-x:hover { background: var(--red-bg); color: var(--red); }
.img-upload-zone { border-radius: 16px; }
.img-upload-zone:hover { border-color: var(--brand); background: var(--brand-l); }
.em-opt { width: 42px; height: 42px; border-radius: 11px; font-size: 21px; }
.em-opt:hover { transform: translateY(-2px); }
.modal-ft { gap: 10px; }

@media (max-width: 900px) {
  .store-actions { flex-direction: column; align-items: stretch; }
  .store-save { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════
   REFORMA — Pedidos, produtos e estados
   ══════════════════════════════════════════════════════════════ */

/* Order card header */
.order-card { overflow: hidden; }
.order-card-head { padding: 1.05rem 1.15rem .65rem; gap: 12px; align-items: flex-start; }
.order-card-id { font-size: 15.5px; letter-spacing: -.01em; }
.order-card-time { font-size: 12px; color: var(--ink3); margin-top: 4px; font-weight: 600; }
.order-card-phone { font-size: 12.5px; color: var(--brand-d); font-weight: 700; margin-top: 3px; }
.order-card-items {
  margin: 0 1.15rem .8rem; padding: 11px 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  font-size: 13px; font-weight: 600; color: var(--ink2); line-height: 1.5;
}
.order-card-addr { padding: 0 1.15rem .85rem; font-size: 12.5px; color: var(--ink3); }
.order-card-foot { padding: .85rem 1.15rem; background: linear-gradient(180deg, #fff, #FBF7F4); }

/* Action buttons */
.order-btns { gap: 8px; }
.order-btns svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn-accept, .btn-next {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 11px;
}
.btn-print, .btn-wpp, .btn-cancel-order {
  width: 38px; height: 38px; padding: 0; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-print svg, .btn-cancel-order svg { width: 16px; height: 16px; }
.btn-wpp svg { width: 19px; height: 19px; }
.btn-print { background: #fff; border: 1.5px solid var(--border); color: var(--ink2); }
.btn-print:hover { background: var(--brand-l); border-color: var(--brand-m); color: var(--brand-d); }
.btn-wpp:hover { filter: brightness(.94); }
.btn-cancel-order:hover { background: #FCA5A5; color: #fff; }

/* Product cards */
.pc-actions { gap: 7px; }
.btn-ic {
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-ic svg { width: 16px; height: 16px; }
.btn-ic:hover { border-color: var(--brand); color: var(--brand-d); background: var(--brand-l); }
.btn-ic.del:hover { background: var(--red-bg); border-color: #FCA5A5; color: var(--red); }
.pc.off { filter: grayscale(.4); }

/* Badges */
.badge { padding: 5px 12px; font-size: 11.5px; letter-spacing: .01em; }

/* Filters */
.of.active { transform: translateY(-1px); }

/* Empty state */
.empty {
  background: #fff; border: 1.5px dashed var(--border2); border-radius: 18px;
  padding: 3.4rem 1.25rem; color: var(--ink3);
}
.empty .eico {
  width: 74px; height: 74px; margin: 0 auto 1rem; border-radius: 22px;
  background: var(--brand-l); display: flex; align-items: center; justify-content: center;
  font-size: 34px; opacity: 1;
}
.empty p { font-weight: 700; font-size: 14px; }

/* New order banner */
.new-banner { border-radius: 16px; }
.btn-silence { border-radius: 11px; font-weight: 700; }

/* Popup */
.popup-inner { border-radius: 22px; }
.popup-order-item { border-radius: 12px; }
.btn-accept-all { border-radius: 13px; }

/* Toast */
.toast { border-radius: 12px; font-weight: 700; }

/* Tabs toolbar */
.tab-toolbar { justify-content: flex-start; }

/* Metric icons (SVG) */
.metric-icon svg { width: 24px; height: 24px; }
.metric--orders  .metric-icon { color: #FF5C2B; }
.metric--rev     .metric-icon { color: #10B981; }
.metric--pending .metric-icon { color: #F59E0B; }
.metric--prods   .metric-icon { color: #6366F1; }

/* Filter pills with icons */
.of { display: inline-flex; align-items: center; gap: 7px; }
.of svg { width: 15px; height: 15px; flex-shrink: 0; }
.order-filters .of:nth-child(1) svg { color: var(--ink3); }
.order-filters .of:nth-child(2) svg { color: #EF4444; }
.order-filters .of:nth-child(3) svg { color: #10B981; }
.order-filters .of:nth-child(4) svg { color: #F59E0B; }
.order-filters .of:nth-child(5) svg { color: #8B5CF6; }
.order-filters .of:nth-child(6) svg { color: #3B82F6; }
.order-filters .of.active svg { color: #fff; }

/* Payment icons (SVG) */
.payment-icon svg { width: 22px; height: 22px; }

/* Opening hours */
.schedule-box { display: flex; flex-direction: column; transition: opacity .2s; }
.schedule-box.disabled { opacity: .4; pointer-events: none; }

.schedule-status {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 800; letter-spacing: .01em;
  padding: 12px 16px; border-radius: 13px; margin-bottom: 14px;
  background: var(--bg); border: 1.5px solid var(--border); color: var(--ink2);
}
.schedule-status::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--ink4); flex-shrink: 0; }
.schedule-status.open { background: var(--green-bg); color: #166534; border-color: #86EFAC; }
.schedule-status.open::before { background: #16A34A; box-shadow: 0 0 0 4px rgba(22, 163, 74, .18); }
.schedule-status.closed { background: var(--red-bg); color: #991B1B; border-color: #FCA5A5; }
.schedule-status.closed::before { background: #DC2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .15); }
.schedule-status.off { background: var(--bg2); color: var(--ink3); }

.days-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.day-chip { position: relative; cursor: pointer; }
.day-chip input { position: absolute; opacity: 0; pointer-events: none; }
.day-chip span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 54px; padding: 11px 12px; border-radius: 12px;
  border: 1.5px solid var(--border); background: #fff;
  font-size: 13px; font-weight: 800; color: var(--ink3);
  transition: all .15s; user-select: none;
}
.day-chip:hover span { border-color: var(--brand-m); color: var(--brand-d); }
.day-chip input:checked + span {
  background: var(--grad-brand); border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px rgba(255, 92, 43, .3);
}
.fg input[type="time"] { font-weight: 700; }

/* Seletor de cor principal */
.color-row { display: flex; align-items: center; gap: 12px; }
.color-row input[type="color"] {
  width: 58px; height: 46px; padding: 4px; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 12px; background: #fff;
}
.color-row span {
  flex: 1; font-family: 'SF Mono', ui-monospace, monospace; font-size: 13px; font-weight: 700;
  color: var(--ink2); background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 11px; padding: 12px 14px; text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════
   CLIENTES
   ══════════════════════════════════════════════════════════════ */
.cust-toolbar { justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cust-search {
  flex: 1; min-width: 220px; max-width: 420px; padding: 12px 15px;
  border: 1.5px solid var(--border); border-radius: 12px; font-size: 14px;
  font-family: 'Plus Jakarta Sans', sans-serif; color: var(--ink); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.cust-search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(255, 92, 43, .13); }
.cust-count { font-size: 12.5px; font-weight: 700; color: var(--ink3); background: var(--bg2); padding: 8px 14px; border-radius: 20px; }

.customers-list { display: flex; flex-direction: column; gap: 12px; }
.cust-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sh); overflow: hidden; transition: box-shadow .2s; }
.cust-card:hover { box-shadow: var(--sh-md); }
.cust-head { display: flex; align-items: center; gap: 14px; padding: 16px; cursor: pointer; }
.cust-avatar {
  width: 46px; height: 46px; border-radius: 50%; background: var(--grad-brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800;
  flex-shrink: 0; box-shadow: 0 6px 16px rgba(255, 92, 43, .3);
}
.cust-info { flex: 1; min-width: 0; }
.cust-name { font-size: 15px; font-weight: 800; }
.cust-phone { font-size: 12.5px; color: var(--brand-d); font-weight: 700; margin-top: 1px; }
.cust-addr { font-size: 12px; color: var(--ink3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-stats { display: flex; gap: 20px; flex-shrink: 0; }
.cust-stat { text-align: right; }
.cust-stat strong { display: block; font-size: 14px; font-weight: 800; font-family: 'Bricolage Grotesque', sans-serif; }
.cust-stat span { font-size: 10.5px; color: var(--ink3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cust-toggle {
  width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--border);
  background: #fff; cursor: pointer; color: var(--ink3); font-size: 14px; flex-shrink: 0;
  transition: transform .2s, background .15s, color .15s;
}
.cust-card.open .cust-toggle { transform: rotate(180deg); background: var(--brand-l); color: var(--brand-d); border-color: var(--brand-m); }

.cust-orders { display: none; border-top: 1px solid var(--border); background: #FBF9F7; padding: 12px 16px; }
.cust-card.open .cust-orders { display: block; }
.cust-orders-loading, .cust-orders-empty { font-size: 12.5px; color: var(--ink3); padding: 10px 0; text-align: center; }
.cust-order {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; margin-bottom: 8px;
}
.cust-order:last-child { margin-bottom: 0; }
.cust-order-main { min-width: 0; }
.cust-order-id { font-size: 13px; font-weight: 800; }
.cust-order-items { font-size: 11.5px; color: var(--ink3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.cust-order-date { font-size: 11px; color: var(--ink3); margin-top: 2px; }
.cust-order-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.cust-order-total { font-size: 13px; font-weight: 800; color: var(--brand-d); font-family: 'Bricolage Grotesque', sans-serif; }

@media (max-width: 760px) {
  .cust-head { flex-wrap: wrap; }
  .cust-stats { width: 100%; justify-content: space-between; padding-top: 10px; border-top: 1px dashed var(--border); }
  .cust-stat { text-align: left; }
  .cust-order-items { max-width: 150px; }
}

/* ══════════════════════════════════════════════════════════════
   APARÊNCIA DA LOJA (cor + preview)
   ══════════════════════════════════════════════════════════════ */
.swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.sw {
  width: 38px; height: 38px; border-radius: 11px; border: 2px solid transparent; cursor: pointer;
  box-shadow: var(--sh); transition: transform .15s, border-color .15s;
}
.sw:hover { transform: translateY(-2px); }
.sw.active { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0, 0, 0, .08); }

.preview-box {
  border: 1.5px solid var(--border); border-radius: 16px; padding: 16px; background: #fff;
  display: flex; flex-direction: column; gap: 10px; margin-top: 6px;
}
.pv-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink3); }
.pv-btn-primary {
  background: var(--grad-brand, #FF5C2B); color: #fff; border: none; border-radius: 12px;
  padding: 13px; font-size: 14px; font-weight: 800; cursor: default;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
}
.pv-btn-secondary {
  background: #fff; color: var(--brand-d, #D94518); border: 1.5px solid var(--brand, #FF5C2B);
  border-radius: 12px; padding: 12px; font-size: 14px; font-weight: 800; cursor: default;
}
.pv-badges { display: flex; gap: 7px; flex-wrap: wrap; }
.pv-badge { font-size: 10.5px; font-weight: 800; padding: 4px 11px; border-radius: 20px; }
.pv-new  { background: #FEF3C7; color: #B45309; }
.pv-prep { background: var(--brand-l, #FFF1EA); color: var(--brand-d, #D94518); }
.pv-done { background: #DCFCE7; color: #166534; }
.pv-order { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1.5px solid var(--border); border-radius: 13px; background: #FBF9F7; }
.pv-order-emoji { width: 38px; height: 38px; border-radius: 11px; background: var(--brand-l, #FFF1EA); display: flex; align-items: center; justify-content: center; font-size: 19px; }
.pv-order-name { font-size: 13.5px; font-weight: 800; }
.pv-order-sub { font-size: 11.5px; color: var(--ink3); }
.pv-order-total { font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 800; color: var(--brand-d, #D94518); margin-left: auto; }

.plan-usage {
  font-size: 12.5px; font-weight: 800; color: var(--ink3); background: var(--bg2);
  padding: 8px 14px; border-radius: 20px; margin-left: auto;
}
.plan-usage.full { background: var(--red-bg); color: var(--red); }

/* ══════════════════════════════════════════════════════════════
   MEU PLANO + GRÁFICOS
   ══════════════════════════════════════════════════════════════ */

/* Card do plano na sidebar */
.sb-plan {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; padding: 12px; margin-bottom: .5rem;
}
.sb-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sb-plan-name { font-size: 12.5px; font-weight: 800; color: #fff; }
.sb-plan-price { font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, .55); }
.sb-plan-usage { font-size: 11px; color: rgba(255, 255, 255, .7); margin-bottom: 7px; }
.sb-plan-bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .16); overflow: hidden; margin-bottom: 10px; }
.sb-plan-bar i { display: block; height: 100%; background: var(--grad-brand); border-radius: 6px; transition: width .4s ease; }
.sb-plan-bar i.full { background: linear-gradient(135deg, #F87171, #EF4444); }
.sb-plan-cta {
  width: 100%; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
  color: #fff; border-radius: 9px; padding: 8px; font-size: 11.5px; font-weight: 800; cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif; transition: background .15s;
}
.sb-plan-cta:hover { background: rgba(255, 255, 255, .22); }

/* Página Meu plano */
.plan-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, #2b1b12, #4a2a18); color: #fff;
  border-radius: 18px; padding: 22px 24px; margin-bottom: 18px;
  box-shadow: 0 16px 40px rgba(43, 27, 18, .25);
}
.plan-hero-badge {
  display: inline-block; background: var(--grad-brand); color: #fff; font-size: 10.5px; font-weight: 800;
  letter-spacing: .1em; padding: 5px 12px; border-radius: 20px; margin-bottom: 10px;
}
.plan-hero-name { font-family: 'Bricolage Grotesque', sans-serif; font-size: 26px; font-weight: 800; }
.plan-hero-price { font-size: 14px; color: rgba(255, 255, 255, .75); margin-top: 3px; }
.plan-hero .btn-brand-sm { background: #fff; color: var(--brand-d); box-shadow: none; }

.plan-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.plan-box {
  background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 20px; box-shadow: var(--sh);
}
.plan-box h4 { font-size: 14px; font-weight: 800; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.plan-features { display: flex; flex-direction: column; gap: 9px; }
.pf { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.pf-ic {
  width: 20px; height: 20px; border-radius: 50%; background: var(--green-bg); color: #166534;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.plan-usage-list { display: flex; flex-direction: column; gap: 14px; }
.pu-top { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--ink2); margin-bottom: 6px; }
.pu-bar { height: 8px; border-radius: 8px; background: var(--bg2); overflow: hidden; }
.pu-bar i { display: block; height: 100%; border-radius: 8px; background: var(--grad-brand); transition: width .4s ease; }
.pu-bar i.warn { background: linear-gradient(135deg, #FBBF24, #F59E0B); }
.pu-bar i.full { background: linear-gradient(135deg, #F87171, #EF4444); }

/* Gráficos */
.charts-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; margin-bottom: 20px; }
.chart-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: var(--sh); }
.chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.chart-head strong { font-size: 14px; font-weight: 800; }
.chart-total { font-family: 'Bricolage Grotesque', sans-serif; font-size: 14px; font-weight: 800; color: var(--brand-d); }
.chart-body { min-height: 120px; }
.svg-chart { width: 100%; height: auto; display: block; }
.svg-lbl { font-size: 8.5px; font-weight: 700; fill: var(--ink3); font-family: 'Plus Jakarta Sans', sans-serif; }
.chart-empty { font-size: 12.5px; color: var(--ink3); text-align: center; padding: 34px 0; }

.donut-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.donut { width: 132px; height: 132px; flex-shrink: 0; }
.donut-num { font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 800; fill: var(--ink); }
.donut-lbl { font-size: 8px; font-weight: 700; fill: var(--ink3); text-transform: uppercase; letter-spacing: .06em; }
.donut-legend { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 6px; }
.dl-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink2); }
.dl-row i { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dl-row span { flex: 1; }
.dl-row strong { font-weight: 800; }

@media (max-width: 980px) {
  .charts-row { grid-template-columns: 1fr; }
  .plan-cols { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD, CATEGORIAS E RELATÓRIOS
   ══════════════════════════════════════════════════════════════ */
.dash-hello {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.dash-hello h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.dash-hello p { font-size: 13.5px; color: var(--ink3); margin-top: 2px; }
.dash-status {
  font-size: 12.5px; font-weight: 800; padding: 8px 15px; border-radius: 20px;
  background: var(--green-bg); color: #166534;
}
.dash-status.closed { background: var(--red-bg); color: #991B1B; }

.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.card-box { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: var(--sh); }
.card-box-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.card-box-head strong { font-size: 14.5px; font-weight: 800; }
.link-mini {
  background: none; border: none; cursor: pointer; color: var(--brand-d);
  font-size: 12.5px; font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif;
}
.link-mini:hover { text-decoration: underline; }

.plan-alert {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--amber-bg); border: 1px solid #FDE68A; border-radius: 12px;
  padding: 12px 14px; margin-top: 14px;
}
.plan-alert span { font-size: 12.5px; font-weight: 700; color: #92400E; }

.recent-list { display: flex; flex-direction: column; gap: 8px; }
.recent-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 13px; transition: border-color .15s, box-shadow .15s;
}
.recent-row:hover { border-color: var(--brand-m); box-shadow: var(--sh); }
.recent-av {
  width: 44px; height: 44px; border-radius: 12px; background: var(--brand-l); color: var(--brand-d);
  display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; flex-shrink: 0;
}
.recent-main { flex: 1; min-width: 0; }
.recent-name { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-sub { font-size: 11.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.recent-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.recent-total { font-family: 'Bricolage Grotesque', sans-serif; font-size: 14px; font-weight: 800; color: var(--brand-d); }

/* Categorias */
.cat-manager { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.cat-mgr-row {
  display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid var(--border);
  border-radius: 15px; padding: 14px 16px; box-shadow: var(--sh); transition: box-shadow .2s, transform .2s;
}
.cat-mgr-row:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.cat-mgr-ico {
  width: 42px; height: 42px; border-radius: 12px; background: var(--brand-l); color: var(--brand-d);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cat-mgr-ico svg { width: 20px; height: 20px; }
.cat-mgr-info { flex: 1; min-width: 0; }
.cat-mgr-name { font-size: 14px; font-weight: 800; }
.cat-mgr-sub { font-size: 11.5px; color: var(--ink3); margin-top: 2px; }

/* Relatórios */
.reports-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.report-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 20px; box-shadow: var(--sh); }
.report-card h4 { font-size: 14px; font-weight: 800; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.report-card.grid-2 { grid-column: 1 / -1; }
.rep-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rep-kpi { text-align: center; background: var(--bg); border-radius: 13px; padding: 14px 10px; }
.rep-kpi strong { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 19px; font-weight: 800; }
.rep-kpi span { font-size: 10.5px; color: var(--ink3); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.rep-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.rep-row:last-child { border-bottom: none; }
.rep-row strong { font-weight: 800; color: var(--brand-d); }

/* Destaque ao abrir uma seção */
.store-section.flash { animation: flashSec 1.6s ease; }
@keyframes flashSec {
  0%, 100% { box-shadow: var(--sh); }
  25%, 75% { box-shadow: 0 0 0 4px var(--brand-ring, rgba(255,92,43,.18)); }
}

@media (max-width: 900px) {
  .dash-cols { grid-template-columns: 1fr; }
  .rep-kpis { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR / TOPBAR (padrão do mockup) + CUPONS
   ══════════════════════════════════════════════════════════════ */
.sb-store-card {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px; padding: 13px; margin-bottom: 10px;
}
.sb-store-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sb-avatar { position: relative; }
.sb-crown {
  position: absolute; right: -4px; bottom: -4px; width: 19px; height: 19px; border-radius: 50%;
  background: #F59E0B; color: #fff; display: flex; align-items: center; justify-content: center;
  border: 2px solid #2a1c12;
}
.sb-crown svg { width: 10px; height: 10px; }
.sb-store-txt { min-width: 0; }
.sb-plan-line { font-size: 11px; font-weight: 800; color: #FBBF24; margin-top: 2px; }
.sb-store-status { font-size: 10.5px; font-weight: 700; color: #4ADE80; margin-top: 9px; }
.sb-store-status.closed { color: #F87171; }

.sb-upgrade {
  width: 100%; background: var(--grad-brand); color: #fff; border: none; border-radius: 11px;
  padding: 11px; font-size: 12.5px; font-weight: 800; cursor: pointer; margin-bottom: .5rem;
  box-shadow: 0 8px 20px rgba(255, 92, 43, .35); font-family: 'Plus Jakarta Sans', sans-serif;
}
.sb-upgrade:hover { filter: brightness(.95); }
.sb-pro-mini {
  display: block; text-align: center; font-size: 11px; font-weight: 700;
  color: rgba(255, 255, 255, .5); text-decoration: none; margin-bottom: .5rem;
}
.sb-pro-mini:hover { color: #fff; }

/* Topbar */
.tb-chip {
  font-size: 12px; font-weight: 800; padding: 8px 14px; border-radius: 20px;
  background: var(--green-bg); color: #166534; white-space: nowrap;
}
.tb-chip.closed { background: var(--red-bg); color: #991B1B; }
.tb-user {
  display: flex; align-items: center; gap: 9px; padding: 4px 13px 4px 4px;
  border-radius: 24px; background: #fff; border: 1px solid var(--border);
}
.tb-av {
  width: 34px; height: 34px; border-radius: 50%; background: var(--grad-brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px;
}
.tb-name { font-size: 12.5px; font-weight: 800; line-height: 1.15; }
.tb-role { font-size: 10.5px; color: var(--ink3); font-weight: 600; }

/* Cupons */
.coupon-form { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr 0.9fr auto; gap: 12px; align-items: end; }
.coupon-form .fg { margin-bottom: 0; }
.coupons-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.coupon-row {
  display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border);
  border-radius: 15px; padding: 14px 16px; box-shadow: var(--sh); transition: box-shadow .2s;
}
.coupon-row:hover { box-shadow: var(--sh-md); }
.coupon-row.off { opacity: .55; }
.coupon-code {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px; font-weight: 800;
  background: var(--brand-l); color: var(--brand-d); padding: 10px 15px; border-radius: 11px;
  border: 1.5px dashed var(--brand-m); letter-spacing: .02em;
}
.pu-lbl { display: flex; align-items: center; gap: 8px; }
.pu-lbl svg { width: 15px; height: 15px; color: var(--brand); flex-shrink: 0; }
.plan-usage-list .pu-row:nth-child(1) .pu-lbl svg { color: #FF5C2B; }
.plan-usage-list .pu-row:nth-child(2) .pu-lbl svg { color: #2563EB; }
.plan-usage-list .pu-row:nth-child(3) .pu-lbl svg { color: #059669; }
.plan-usage-list .pu-row:nth-child(4) .pu-lbl svg { color: #7C3AED; }
.plan-usage-list .pu-row:nth-child(5) .pu-lbl svg { color: #F59E0B; }
.plan-usage-list .pu-row:nth-child(2) .pu-bar i { background: linear-gradient(135deg, #60A5FA, #2563EB); }
.plan-usage-list .pu-row:nth-child(3) .pu-bar i { background: linear-gradient(135deg, #34D399, #059669); }
.plan-usage-list .pu-row:nth-child(4) .pu-bar i { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.plan-usage-list .pu-row:nth-child(5) .pu-bar i { background: linear-gradient(135deg, #FBBF24, #F59E0B); }

.coupon-info { flex: 1; min-width: 0; }
.coupon-off { font-size: 14px; font-weight: 800; }
.coupon-sub { font-size: 11.5px; color: var(--ink3); margin-top: 2px; }

@media (max-width: 980px) {
  .coupon-form { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   SUB-ABAS DE MINHA LOJA + CORES EXTRAS + TENDÊNCIAS
   ══════════════════════════════════════════════════════════════ */
.subtabs {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;
  border-bottom: 1px solid var(--border); padding-bottom: 14px;
}
.subtab {
  background: #fff; border: 1.5px solid var(--border); border-radius: 11px; padding: 10px 18px;
  font-size: 13.5px; font-weight: 700; color: var(--ink2); cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif; transition: all .16s;
}
.subtab:hover { border-color: var(--brand-m); color: var(--brand-d); }
.subtab.active { background: var(--grad-brand); border-color: transparent; color: #fff; box-shadow: 0 8px 20px rgba(255, 92, 43, .3); }

#tab-store .subpanel { display: none; }
#tab-store .subpanel.active { display: grid; }

.color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.color-grid input[type="color"] {
  width: 100%; height: 46px; padding: 4px; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 11px; background: #fff;
}

.metric-trend { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px; }
.metric-trend.up { background: var(--green-bg); color: #166534; }
.metric-trend.down { background: var(--red-bg); color: #991B1B; }
.metric-trend:empty { display: none; }

.tb-date {
  font-size: 12.5px; font-weight: 700; color: var(--ink2); background: #fff;
  border: 1px solid var(--border); padding: 8px 13px; border-radius: 11px; white-space: nowrap;
}

@media (max-width: 900px) {
  .color-grid { grid-template-columns: 1fr 1fr; }
  .tb-date { display: none; }
}

/* Barras com cor conforme o uso */
.sb-plan-bar i.good { background: linear-gradient(135deg, #34D399, #059669); }
.sb-plan-bar i.warn { background: linear-gradient(135deg, #FBBF24, #F59E0B); }
.sb-plan-bar i.high { background: linear-gradient(135deg, #FB923C, #EA580C); }
.sb-plan-bar i.full { background: linear-gradient(135deg, #F87171, #EF4444); }
.pu-bar i.good { background: linear-gradient(135deg, #34D399, #059669); }
.pu-bar i.high { background: linear-gradient(135deg, #FB923C, #EA580C); }

/* Seletor de período do gráfico */
.chart-head-right { display: flex; align-items: center; gap: 10px; }
.chart-range {
  border: 1.5px solid var(--border); border-radius: 10px; padding: 7px 11px;
  font-size: 12px; font-weight: 700; font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ink2); background: #fff; cursor: pointer;
}
.hint-sm { font-size: 11px; color: var(--ink3); font-weight: 600; margin-top: 2px; }
.btn-reset { padding: 10px 16px !important; font-size: 12.5px !important; }

/* Preview da loja (Aparência) */
.sp { background: var(--c-bg, #F6F3EF); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; color: var(--c-text, #171310); }
.sp-header { display: flex; align-items: center; gap: 8px; padding: 9px 11px; background: var(--c-secondary, #1F2937); color: #fff; }
.sp-menu { font-size: 14px; opacity: .9; }
.sp-brand { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.sp-logo { width: 26px; height: 26px; border-radius: 8px; background: var(--c-btn, #FF5C2B); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.sp-brand b { display: block; font-size: 11px; font-weight: 800; line-height: 1.1; color: #fff; }
.sp-brand i { font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7); font-style: normal; }
.sp-cart { position: relative; font-size: 14px; }
.sp-cart em { position: absolute; top: -6px; right: -8px; background: var(--c-btn, #FF5C2B); color: #fff; font-size: 8px; font-weight: 800; border-radius: 20px; padding: 1px 5px; font-style: normal; }
.sp-banner { background: linear-gradient(135deg, var(--c-btn, #FF5C2B), var(--c-secondary, #1F2937)); padding: 16px 12px; color: #fff; }
.sp-banner-t { font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 800; line-height: 1.1; }
.sp-banner-d { font-size: 9.5px; opacity: .85; margin-top: 4px; }
.sp-pills { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.sp-pills span { font-size: 8.5px; font-weight: 700; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .28); border-radius: 20px; padding: 3px 8px; }
.sp-open { background: rgba(37, 211, 102, .28) !important; color: #C7FFDE; }
.sp-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 8px; }
.sp-benefits div { background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 6px 5px; text-align: center; }
.sp-benefits b { font-size: 12px; display: block; }
.sp-benefits span { font-size: 7.5px; font-weight: 700; color: var(--ink2); display: block; margin-top: 2px; line-height: 1.2; }
.sp-cats { display: flex; gap: 5px; padding: 0 8px 8px; flex-wrap: wrap; }
.sp-cats span { font-size: 8.5px; font-weight: 700; padding: 5px 10px; border-radius: 20px; background: #fff; border: 1px solid var(--border); color: var(--ink2); }
.sp-cats span.on { background: var(--c-btn, #FF5C2B); color: #fff; border-color: transparent; }
.sp-sec { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 6px; font-size: 10px; font-weight: 800; }
.sp-sec em { font-size: 8px; color: var(--c-btn, #FF5C2B); font-style: normal; }
.sp-prod { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: 11px; padding: 7px; margin: 0 8px 6px; }
.sp-thumb { width: 34px; height: 34px; border-radius: 9px; background: var(--bg2); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.sp-info { flex: 1; min-width: 0; }
.sp-info b { display: block; font-size: 9.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-info i { display: block; font-size: 8px; color: var(--ink3); font-style: normal; }
.sp-info em { display: block; font-size: 10.5px; font-weight: 800; color: var(--c-price, #FF5C2B); font-style: normal; margin-top: 1px; }
.sp-plus { width: 24px; height: 24px; border-radius: 50%; background: var(--c-btn, #FF5C2B); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; }
.sp-nav { display: flex; align-items: center; justify-content: space-around; background: #fff; border-top: 1px solid var(--border); padding: 7px 6px; }
.sp-nav span { font-size: 11px; color: var(--ink3); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sp-nav span i { font-size: 7px; font-weight: 700; font-style: normal; }
.sp-nav span.on { color: var(--c-btn, #FF5C2B); }
.sp-navcart { background: var(--c-btn, #FF5C2B); color: #fff !important; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
@media (max-width: 620px) {
  .tb-user-txt { display: none; }
  .coupon-row { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════
   MOCKUP MATCH FINAL
   ══════════════════════════════════════════════════════════════ */
:root {
  --brand:#FF5A1F;
  --brand-d:#E63F0B;
  --brand-l:#FFF2EC;
  --brand-m:#FFB394;
  --ink:#111827;
  --ink2:#374151;
  --ink3:#6B7280;
  --ink4:#CBD5E1;
  --bg:#F8FAFC;
  --bg2:#EEF2F7;
  --surf:#FFFFFF;
  --border:#E6EBF2;
  --border2:#D6DEE8;
  --grad-brand:linear-gradient(135deg,#FF7A1A 0%,#FF5A1F 48%,#FF3D00 100%);
  --sh:0 1px 2px rgba(17,24,39,.04),0 8px 24px rgba(17,24,39,.06);
  --sh-md:0 14px 34px rgba(17,24,39,.10);
  --sb:250px;
}

body {
  background:
    radial-gradient(900px 420px at 18% -8%, rgba(255,90,31,.07), transparent 62%),
    linear-gradient(180deg,#F8FAFC 0%,#F3F6FA 100%);
  color:var(--ink);
}

.sidebar {
  background:linear-gradient(180deg,#071019 0%,#0B1119 58%,#111827 100%);
  border-right:1px solid rgba(255,255,255,.08);
}

.sb-brand > span:first-child,
.auth-logo {
  filter:drop-shadow(0 8px 18px rgba(255,90,31,.35));
}

.sb-link {
  color:rgba(255,255,255,.72);
}

.sb-link:hover {
  background:rgba(255,255,255,.08);
  color:#fff;
}

.sb-link.active {
  background:var(--grad-brand);
  box-shadow:0 10px 28px rgba(255,90,31,.42);
}

.sb-store-card,
.sb-user {
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.sb-avatar,
.tb-av,
.metric--orders .metric-icon,
.recent-av,
.cat-mgr-ico {
  background:var(--grad-brand);
  color:#fff;
}

.main {
  background:transparent;
}

.topbar {
  min-height:70px;
  background:rgba(255,255,255,.88);
  border-bottom:1px solid var(--border);
}

.page-wrap {
  max-width:none;
  width:100%;
  padding:22px 28px 36px;
}

.dash-hello h3,
.topbar-title {
  color:#0F172A;
}

.metric,
.chart-card,
.card-box,
.store-section,
.settings-card,
.pc,
.order-card,
.report-card,
.cat-mgr-row,
.coupon-row,
.plan-box,
.plan-hero {
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--sh);
}

.metric {
  min-height:104px;
}

.metric::before {
  width:0;
}

.metric-icon {
  color:var(--brand);
}

.metric--orders .metric-icon { background:#FFE8DC; color:var(--brand); }
.metric--rev .metric-icon { background:#DCFCE7; color:#16A34A; }
.metric--pending .metric-icon { background:#FEF3C7; color:#D97706; }
.metric--prods .metric-icon { background:#EDE9FE; color:#7C3AED; }

.charts-row {
  grid-template-columns:minmax(0,1.35fr) minmax(360px,.9fr);
}

.dash-cols {
  grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);
}

.of,
.subtab,
.chart-range,
.btn-outline-pill,
.fg input,
.fg select,
.fg textarea,
.link-box {
  border-color:var(--border);
  border-radius:12px;
}

.of.active,
.subtab.active,
.btn-brand,
.btn-brand-sm,
.sb-upgrade,
.store-save,
.sp-plus,
.sp-navcart,
.sp-cats span.on {
  background:var(--grad-brand);
  color:#fff;
  border-color:transparent;
  box-shadow:0 8px 20px rgba(255,90,31,.28);
}

.btn-ghost:hover,
.subtab:hover,
.of:hover {
  background:var(--brand-l);
  color:var(--brand-d);
  border-color:var(--brand-m);
}

.preview-box {
  max-width:420px;
  margin:18px auto 0;
}

.sp {
  border-radius:18px;
  box-shadow:0 18px 44px rgba(17,24,39,.16);
}

.sp-header {
  background:#080D14;
}

.sp-banner {
  min-height:132px;
  background:
    linear-gradient(90deg,rgba(8,13,20,.94),rgba(8,13,20,.35)),
    linear-gradient(135deg,var(--c-btn,#FF5A1F),var(--c-secondary,#1F2937));
}

.sp-banner-t {
  font-size:20px;
}

.payment-method-toggle {
  background:#fff;
}

.plan-hero {
  background:linear-gradient(135deg,#7C3AED 0%,#8B5CF6 48%,#6D28D9 100%);
  color:#fff;
}

.plan-hero .btn-brand-sm {
  background:#fff;
  color:#6D28D9;
  box-shadow:none;
}

@media (max-width: 1180px) {
  .charts-row,
  .dash-cols {
    grid-template-columns:1fr;
  }
}

@media (max-width: 900px) {
  .page-wrap { padding:20px 18px 34px; }
}