:root{
  --brand:#7D2B63;--brand-dark:#4F1A40;--brand-light:#A8548C;--pale:#F8EEF4;--gold:#C9A227;
  --ink:#2B1826;--cream:#FFFBFC;--ok:#4C7A5A;--warn:#B08628;--danger:#A3423A;--line:#EADCE4;--muted:#7a6a74;
  --side:260px;--bs-primary:#7D2B63;--bs-primary-rgb:125,43,99;--bs-link-color:#7D2B63;--bs-link-hover-color:#4F1A40;
}
*{-webkit-tap-highlight-color:transparent}
html,body{background:var(--cream);color:var(--ink);font-family:"Work Sans",system-ui,sans-serif;font-size:15px}
h1,h2,h3,h4,h5,.brand-font{font-family:"Fraunces",Georgia,serif;font-weight:600;color:var(--brand-dark)}
.mono{font-family:"Space Mono",monospace}
a{color:var(--brand)}
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-brand:hover,.btn-brand:focus{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.btn-outline-brand{border-color:var(--brand);color:var(--brand)}
.btn-outline-brand:hover{background:var(--brand);color:#fff}
.btn{border-radius:10px;font-weight:500}
.form-control,.form-select{border-radius:10px;border-color:var(--line);padding:.6rem .8rem}
.form-control:focus,.form-select:focus{border-color:var(--brand-light);box-shadow:0 0 0 .2rem rgba(125,43,99,.15)}
.form-label{font-size:.82rem;font-weight:600;color:var(--brand-dark);margin-bottom:.25rem}

/* ---------- shell ---------- */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--side);background:linear-gradient(180deg,var(--brand-dark),#3a1230);color:#fff;overflow-y:auto;z-index:1040;padding-bottom:24px}
.sidebar .logo-wrap{padding:18px 18px 8px;text-align:center}
.sidebar .logo-wrap img{width:84px;height:84px;border-radius:50%;background:#fff;padding:3px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.sidebar .biz{font-family:"Fraunces",serif;font-size:1.05rem;margin-top:8px;color:#fff}
.sidebar .biz small{display:block;color:#d9b8cc;font-family:"Work Sans";font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.sidebar .grp{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#c79ab5;padding:16px 20px 4px}
.sidebar a.nav-i{display:flex;align-items:center;gap:12px;padding:10px 20px;color:#f3e3ec;text-decoration:none;border-left:3px solid transparent;font-size:.93rem}
.sidebar a.nav-i i{width:20px;text-align:center;opacity:.9}
.sidebar a.nav-i:hover{background:rgba(255,255,255,.07)}
.sidebar a.nav-i.active{background:rgba(255,255,255,.12);border-left-color:var(--gold);color:#fff;font-weight:600}
.sidebar .me{margin:18px 14px 0;padding:12px;border-radius:12px;background:rgba(255,255,255,.08);font-size:.85rem}
.sidebar .me .role{color:var(--gold);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em}
.main{margin-left:var(--side);min-height:100vh;padding:22px 26px 90px}
.topbar-m{display:none}
.page-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:18px}
.page-head h1{font-size:1.6rem;margin:0}
.sub{color:var(--muted);font-size:.88rem}

/* ---------- cards / stats ---------- */
.card-x{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 2px 10px rgba(79,26,64,.04)}
.card-x .hd{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px}
.card-x .hd h5{margin:0;font-size:1.02rem}
.card-x .bd{padding:16px 18px}
.stat{padding:16px 18px;border-radius:16px;background:#fff;border:1px solid var(--line);height:100%;position:relative;overflow:hidden}
.stat:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand)}
.stat.gold:before{background:var(--gold)}.stat.ok:before{background:var(--ok)}.stat.danger:before{background:var(--danger)}.stat.warn:before{background:var(--warn)}
.stat .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.stat .v{font-family:"Fraunces",serif;font-size:1.55rem;color:var(--brand-dark);line-height:1.15;margin-top:2px}
.stat .n{font-size:.78rem;color:var(--muted)}
.table{--bs-table-bg:transparent;margin:0}
.table thead th{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap;font-weight:600}
.table td{vertical-align:middle;border-color:var(--line)}
.table-hover tbody tr:hover{background:var(--pale)}
.pill{display:inline-block;padding:.2em .65em;border-radius:99px;font-size:.72rem;font-weight:600;letter-spacing:.02em}
.pill.ok{background:#e4f0e8;color:var(--ok)}.pill.low{background:#fbf0d6;color:var(--warn)}.pill.out,.pill.danger{background:#f6dedb;color:var(--danger)}
.pill.brand{background:var(--pale);color:var(--brand)}.pill.gray{background:#eee;color:#666}
.thumb{width:42px;height:42px;border-radius:10px;object-fit:cover;background:var(--pale)}
.empty{text-align:center;padding:34px 12px;color:var(--muted)}
.alert{border-radius:12px;border:0}
.list-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.list-row:last-child{border:0}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg .btn{padding:.35rem .8rem;font-size:.82rem}

/* ---------- POS ---------- */
.pos-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start}
.pick{max-height:56vh;overflow-y:auto;border:1px solid var(--line);border-radius:12px}
.pick .it{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;background:#fff}
.pick .it:hover{background:var(--pale)}
.pick .it.disabled{opacity:.45;pointer-events:none}
.pick .cat{position:sticky;top:0;background:var(--pale);color:var(--brand);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;padding:5px 12px;font-weight:700;z-index:1}
.cart-line{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line)}
.qty{display:flex;align-items:center;gap:4px}
.qty button{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:#fff;line-height:1}
.qty span{min-width:22px;text-align:center}
.pay-opt{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pay-opt label{border:1.5px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center;cursor:pointer;font-weight:600;font-size:.88rem;background:#fff}
.pay-opt input{display:none}
.pay-opt input:checked+label{border-color:var(--brand);background:var(--pale);color:var(--brand)}
.total-box{background:var(--brand-dark);color:#fff;border-radius:14px;padding:14px 16px}
.total-box .amt{font-family:"Fraunces",serif;font-size:1.8rem}

/* ---------- login ---------- */
.login-bg{min-height:100vh;display:grid;place-items:center;background:radial-gradient(1200px 600px at 10% -10%,#e9cfdf 0,transparent 60%),radial-gradient(900px 500px at 110% 110%,#f1dcea 0,transparent 60%),var(--pale);padding:20px}
.login-card{width:100%;max-width:400px;background:#fff;border-radius:22px;padding:30px 26px;box-shadow:0 20px 60px rgba(79,26,64,.18);text-align:center}
.login-card img{width:120px}

/* ---------- mobile ---------- */
.bottom-nav{display:none}
@media(max-width:991.98px){
  .sidebar{transform:translateX(-100%);transition:transform .25s}
  .sidebar.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1035;display:none}.scrim.open{display:block}
  .main{margin-left:0;padding:14px 14px 96px}
  .topbar-m{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:rgba(255,251,252,.95);backdrop-filter:blur(8px);margin:-14px -14px 12px;padding:10px 14px;border-bottom:1px solid var(--line);z-index:1030}
  .topbar-m img{width:34px;height:34px;border-radius:50%}
  .topbar-m .t{font-family:"Fraunces",serif;color:var(--brand-dark);font-size:1.05rem}
  .bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);z-index:1030;padding-bottom:env(safe-area-inset-bottom)}
  .bottom-nav a,.bottom-nav button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 7px;font-size:.66rem;color:var(--muted);text-decoration:none;background:none;border:0}
  .bottom-nav i{font-size:1.15rem}
  .bottom-nav .on{color:var(--brand);font-weight:700}
  .bottom-nav .fab i{background:var(--brand);color:#fff;border-radius:50%;width:42px;height:42px;display:grid;place-items:center;margin-top:-22px;box-shadow:0 6px 16px rgba(125,43,99,.45)}
  .pos-grid{grid-template-columns:1fr}
  .pick{max-height:42vh}
  .page-head h1{font-size:1.3rem}
  .stat .v{font-size:1.25rem}
  .table-responsive-stack thead{display:none}
}
@media print{.sidebar,.topbar-m,.bottom-nav,.no-print{display:none!important}.main{margin:0;padding:0}}