* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'DM Sans', system-ui, sans-serif;
      background: #f0f4f4;
      color: #1a2e2e;
      height: 100vh;
      display: flex;
      overflow: hidden;
      font-size: 14px;
    }

    :root {
      --t5: #208080;
      --t4: #2a9d9d;
      --t3: #4db8b8;
      --t2: #85d0d0;
      --t1: #b8e8e8;
      --t0: #e6f5f5;
      --t6: #1e6b6b;
      --t7: #1a5454;
      --sbg: #0d2e2e;
      --shv: #1a4a4a;
      --bp: #f0f4f4;
      --bc: #ffffff;
      --bs: #f7fafa;
      --bd: #d4e8e8;
      --tp: #0d2626;
      --ts: #4a7070;
      --tm: #7a9e9e;
      --dn: #c0392b;
      --db: #fdf0ee;
      --sc: #1a7a4a;
      --sb2: #edf7f2;
      --wn: #b07a00;
      --wb: #fdf8e6;
    }

    /* ============ LAYOUT ============ */
    #app {
      display: flex;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }

    /* ============ SIDEBAR ============ */
    #sidebar {
      width: 220px;
      min-width: 220px;
      background: var(--sbg);
      display: flex;
      flex-direction: column;
      transition: width .25s ease;
      overflow: hidden;
      flex-shrink: 0;
      z-index: 100;
    }

    #sidebar.collapsed {
      width: 52px;
      min-width: 52px;
    }

    /* Mobile: sidebar is fixed overlay, hidden by default */
    @media(max-width:767px) {
      #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        transform: translateX(-100%);
        transition: transform .25s ease;
        width: 220px !important;
        min-width: 220px !important;
        z-index: 200;
      }

      #sidebar.mobile-open {
        transform: translateX(0);
      }
    }

    #sb-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .5);
      z-index: 150;
    }

    @media(max-width:767px) {
      #sb-overlay.active {
        display: block;
      }
    }

    /* Sidebar header */
    #sh {
      padding: 14px 12px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      min-height: 58px;
      flex-shrink: 0;
      gap: 8px;
    }

    #brand-block {
      overflow: hidden;
      flex: 1;
    }

    #bn {
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      white-space: nowrap;
      letter-spacing: -.2px;
      line-height: 1.3;
    }

    #bs-text {
      font-size: 8.5px;
      color: rgba(255, 255, 255, .36);
      letter-spacing: .8px;
      text-transform: uppercase;
      white-space: nowrap;
      margin-top: 1px;
    }

    #sidebar.collapsed #brand-block {
      display: none;
    }

    #sidebar.collapsed .tl-label {
      display: none;
    }

    #sidebar.collapsed .tl-tooltip {
      left: 52px;
      bottom: 0;
    }

    #tb {
      background: none;
      border: none;
      cursor: pointer;
      color: rgba(255, 255, 255, .35);
      padding: 4px;
      border-radius: 4px;
      font-size: 16px;
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    #tb:hover {
      color: #fff;
    }

    /* Nav */
    nav {
      flex: 1;
      padding: 6px;
      overflow-y: auto;
      overflow-x: hidden;
    }

    nav::-webkit-scrollbar {
      width: 3px;
    }

    nav::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, .1);
      border-radius: 3px;
    }

    .ns {
      font-size: 9px;
      font-weight: 600;
      color: rgba(255, 255, 255, .2);
      letter-spacing: 1.2px;
      text-transform: uppercase;
      padding: 9px 8px 3px;
      white-space: nowrap;
    }

    #sidebar.collapsed .ns {
      display: none;
    }

    .ni {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 10px;
      border-radius: 7px;
      cursor: pointer;
      color: rgba(255, 255, 255, .52);
      transition: all .15s;
      margin-bottom: 1px;
      white-space: nowrap;
      position: relative;
      text-decoration: none;
    }

    .ni:hover {
      background: var(--shv);
      color: rgba(255, 255, 255, .9);
    }

    .ni.active {
      background: var(--t4);
      color: #fff;
    }

    .ni svg {
      min-width: 15px;
      flex-shrink: 0;
    }

    .nl {
      font-size: 12px;
      font-weight: 500;
    }

    .nb {
      position: absolute;
      right: 8px;
      background: #e8a020;
      color: #fff;
      border-radius: 9px;
      font-size: 9px;
      padding: 1px 5px;
      font-weight: 700;
    }

    #sidebar.collapsed .nl {
      display: none;
    }

    #sidebar.collapsed .ni {
      justify-content: center;
      padding: 10px;
    }

    #sidebar.collapsed .nb {
      right: 4px;
      top: 4px;
    }

    .nsub {
      padding-left: 26px;
      display: none;
    }

    .nsub.open {
      display: block;
    }

    #sidebar.collapsed .nsub {
      display: none;
    }

    .nsi {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 6px 10px;
      border-radius: 6px;
      cursor: pointer;
      color: rgba(255, 255, 255, .4);
      font-size: 11px;
      transition: all .15s;
      margin-bottom: 1px;
    }

    .nsi:hover {
      background: var(--shv);
      color: rgba(255, 255, 255, .82);
    }

    .nsi.active {
      color: var(--t2);
      font-weight: 500;
    }

    .na {
      margin-left: auto;
      font-size: 9px;
      color: rgba(255, 255, 255, .22);
      transition: transform .2s;
      flex-shrink: 0;
    }

    .ni.hs.open .na {
      transform: rotate(90deg);
    }

    /* Sidebar footer */
    #sf {
      padding: 8px 6px;
      border-top: 1px solid rgba(255, 255, 255, .08);
      flex-shrink: 0;
    }

    .lb {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px 10px;
      border-radius: 7px;
      cursor: pointer;
      color: rgba(255, 255, 255, .42);
      transition: all .15s;
      width: 100%;
      border: none;
      background: none;
      font-family: 'DM Sans', sans-serif;
      font-size: 12px;
      font-weight: 500;
    }

    .lb:hover {
      background: #3a1515;
      color: #ff8080;
    }

    #sidebar.collapsed .lb span {
      display: none;
    }

    #sidebar.collapsed .lb {
      justify-content: center;
    }

    /* ============ MAIN ============ */
    #main {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-width: 0;
    }

    .page {
      display: none;
      flex: 1;
      flex-direction: column;
      overflow: hidden;
    }

    .page.active {
      display: flex;
    }

    /* ============ TOPBAR ============ */
    .topbar {
      padding: 0 14px;
      height: 52px;
      border-bottom: 1px solid var(--bd);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--bc);
      flex-shrink: 0;
      gap: 8px;
    }

    .tbl {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #mmb:hover {
      background: var(--t0);
    }

    @media(max-width:767px) {}

    .topbar h2 {
      font-size: 14px;
      font-weight: 600;
      color: var(--tp);
      white-space: nowrap;
    }

    .tbr {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    .ms {
      display: flex;
      background: var(--bs);
      border: 1px solid var(--bd);
      border-radius: 18px;
      padding: 3px;
      gap: 2px;
    }

    .mb {
      padding: 3px 11px;
      border: none;
      border-radius: 14px;
      cursor: pointer;
      font-size: 10px;
      font-weight: 600;
      background: transparent;
      color: var(--tm);
      transition: all .15s;
      font-family: 'DM Sans', sans-serif;
    }

    .mb.al {
      background: var(--sb2);
      color: var(--sc);
    }

    .mb.at {
      background: var(--wb);
      color: var(--wn);
    }

    .uc {
      display: flex;
      align-items: center;
      gap: 5px;
      background: var(--t0);
      border: 1px solid var(--t2);
      border-radius: 18px;
      padding: 3px 9px 3px 4px;
    }

    .ua {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--t4);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 700;
      flex-shrink: 0;
    }

    .un {
      font-size: 11px;
      font-weight: 500;
      color: var(--t6);
      white-space: nowrap;
    }

    @media(max-width:480px) {
      .un {
        display: none;
      }
    }

    /* ============ BUTTONS ============ */
    .btn {
      padding: 7px 13px;
      border-radius: 7px;
      border: none;
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      transition: all .15s;
      font-family: 'DM Sans', sans-serif;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      white-space: nowrap;
    }

    .bp {
      background: var(--t4);
      color: #fff;
    }

    .bp:hover {
      background: var(--t5);
    }

    .bs2 {
      background: var(--bs);
      color: var(--tp);
      border: 1px solid var(--bd);
    }

    .bs2:hover {
      background: var(--t0);
      border-color: var(--t3);
    }

    .bd2 {
      background: var(--db);
      color: var(--dn);
      border: 1px solid #f0c0bb;
    }

    .bd2:hover {
      background: #fae0dc;
    }

    .bw {
      background: var(--wb);
      color: var(--wn);
      border: 1px solid #e8d890;
    }

    .bw:hover {
      background: #f5f0c0;
    }

    .bsu {
      background: var(--sb2);
      color: var(--sc);
      border: 1px solid #b8e0cc;
    }

    .bsu:hover {
      background: #d8f0e4;
    }

    .bsm {
      padding: 5px 10px;
      font-size: 11px;
    }

    .bxs {
      padding: 3px 7px;
      font-size: 10px;
      border-radius: 5px;
    }

    .bfl {
      width: 100%;
      justify-content: center;
    }

    /* ============ PAGE CONTENT ============ */
    .pc {
      padding: 14px;
      flex: 1;
      overflow-y: auto;
      background: var(--bp);
    }

    @media(min-width:768px) {
      .pc {
        padding: 18px;
      }
    }

    /* ============ STAT CARDS ============ */
    .sr {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 9px;
      margin-bottom: 14px;
    }

    @media(min-width:600px) {
      .sr {
        gap: 12px;
        margin-bottom: 16px;
      }
    }

    .sc2 {
      background: var(--bc);
      border: 1px solid var(--bd);
      border-radius: 11px;
      padding: 12px 14px;
    }

    .sl {
      font-size: 10px;
      color: var(--tm);
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .sv {
      font-size: 18px;
      font-weight: 600;
      color: var(--tp);
      font-family: 'DM Mono', monospace;
    }

    @media(min-width:600px) {
      .sv {
        font-size: 20px;
      }
    }

    .sv.g {
      color: var(--sc);
    }

    .sv.a {
      color: var(--t5);
    }

    /* ============ TABLES ============ */
    .tw {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .dt {
      width: 100%;
      border-collapse: collapse;
      min-width: 420px;
    }

    .dt th {
      text-align: left;
      font-size: 10px;
      color: var(--tm);
      padding: 8px 11px;
      border-bottom: 1px solid var(--bd);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .5px;
      white-space: nowrap;
    }

    .dt td {
      padding: 9px 11px;
      border-bottom: 1px solid var(--bs);
      font-size: 12px;
      color: var(--tp);
    }

    .dt tr:hover td {
      background: var(--t0);
    }

    .tc {
      background: var(--bc);
      border: 1px solid var(--bd);
      border-radius: 11px;
      overflow: hidden;
      margin-bottom: 14px;
    }

    .th3 {
      padding: 11px 14px;
      border-bottom: 1px solid var(--bd);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 7px;
    }

    .th3 h3 {
      font-size: 12px;
      font-weight: 600;
      color: var(--tp);
    }

    .fi {
      display: flex;
      gap: 5px;
      margin-bottom: 11px;
      flex-wrap: wrap;
      align-items: center;
    }

    .fin {
      background: var(--bc);
      border: 1px solid var(--bd);
      border-radius: 6px;
      color: var(--tp);
      padding: 6px 9px;
      font-size: 11px;
      font-family: 'DM Sans', sans-serif;
    }

    .fin:focus {
      outline: none;
      border-color: var(--t4);
    }

    /* ============ TAGS ============ */
    .tg {
      display: inline-block;
      padding: 2px 7px;
      border-radius: 5px;
      font-size: 10px;
      font-weight: 600;
    }

    .ti {
      background: var(--sb2);
      color: var(--sc);
      border: 1px solid #b8e0cc;
    }

    .to {
      background: var(--db);
      color: var(--dn);
      border: 1px solid #f0c0bb;
    }

    .ts2 {
      background: var(--t0);
      color: var(--t6);
      border: 1px solid var(--t2);
      font-family: 'DM Mono', monospace;
    }

    /* ============ POS ============ */
    .cat-bar {
      padding: 8px 12px;
      background: var(--bp);
      border-bottom: 1px solid var(--bd);
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
      flex-shrink: 0;
    }

    .ct {
      padding: 5px 12px;
      border-radius: 16px;
      background: rgba(255, 255, 255, .6);
      color: var(--ts);
      border: 1px solid var(--bd);
      cursor: pointer;
      font-size: 11px;
      font-weight: 500;
      transition: all .15s;
    }

    .ct:hover {
      border-color: var(--t3);
      color: var(--t6);
    }

    .ct.active {
      background: var(--t4);
      color: #fff;
      border-color: var(--t4);
    }

    .pos-body {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    .menu-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 10px 10px 10px 10px;
      background: var(--bp);
    }

    .mg {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(110px, 130px));
      gap: 8px;
      overflow-y: auto;
      flex: 1;
      padding: 4px;
    }

    @media(min-width:480px) {
      .mg {
        grid-template-columns: repeat(auto-fill, minmax(120px, 140px));
      }
    }

    /* WHITE menu cards */
    .mc {
      background: #ffffff;
      border: 1px solid var(--bd);
      border-radius: 10px;
      padding: 12px;
      cursor: pointer;
      transition: all .15s;
      aspect-ratio: 1/1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .mc:hover {
      border-color: var(--t3);
      box-shadow: 0 3px 12px rgba(32, 128, 128, .18), 0 0 0 1.5px var(--t3);
    }

    .mc:active {
      transform: scale(.97);
    }

    .mcn {
      font-size: 12px;
      font-weight: 600;
      color: var(--tp);
      margin-bottom: 4px;
      line-height: 1.3;
    }

    .mcp {
      font-size: 13px;
      color: var(--t5);
      font-weight: 700;
      font-family: 'DM Mono', monospace;
    }

    .mcc {
      font-size: 9px;
      color: var(--tm);
      margin-top: 2px;
      text-transform: uppercase;
      letter-spacing: .4px;
    }

    /* Order slip */
    .os {
      background: var(--bc);
      border-left: 1px solid var(--bd);
      display: flex;
      flex-direction: column;
      padding: 12px;
      overflow: hidden;
      width: 260px;
      min-width: 260px;
      flex-shrink: 0;
    }

    @media(min-width:1100px) {
      .os {
        width: 285px;
        min-width: 285px;
      }
    }

    @media(max-width:550px) {
      .os {
        width: 200px;
        min-width: 200px;
      }
    }

    .oh {
      margin-bottom: 10px;
      padding-bottom: 9px;
      border-bottom: 1px solid var(--bd);
    }

    .on-lbl {
      font-size: 10px;
      color: var(--tm);
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .on-lbl span {
      color: var(--t5);
      font-weight: 600;
      font-family: 'DM Mono', monospace;
    }

    .ost {
      font-size: 10px;
      color: var(--tm);
      margin-top: 2px;
    }

    .ost span {
      color: var(--ts);
      font-weight: 500;
    }

    .oi {
      flex: 1;
      overflow-y: auto;
      margin-bottom: 8px;
    }

    .orow {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 6px 0;
      border-bottom: 1px solid var(--bs);
    }

    .orn {
      flex: 1;
      font-size: 11px;
      color: var(--tp);
      line-height: 1.3;
    }

    .qc {
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .qb {
      width: 19px;
      height: 19px;
      border-radius: 5px;
      border: 1px solid var(--bd);
      background: var(--bs);
      color: var(--tp);
      cursor: pointer;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .12s;
    }

    .qb:hover {
      background: var(--t4);
      color: #fff;
      border-color: var(--t4);
    }

    .qv {
      font-size: 12px;
      font-weight: 600;
      min-width: 17px;
      text-align: center;
      font-family: 'DM Mono', monospace;
    }

    .ip {
      font-size: 11px;
      color: var(--t6);
      min-width: 50px;
      text-align: right;
      font-weight: 600;
      font-family: 'DM Mono', monospace;
    }

    .rb {
      background: none;
      border: none;
      color: var(--tm);
      cursor: pointer;
      font-size: 13px;
      padding: 1px;
    }

    .rb:hover {
      color: var(--dn);
    }

    .stot {
      border-top: 1px solid var(--bd);
      padding-top: 8px;
      margin-bottom: 7px;
    }

    .tr2 {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      margin-bottom: 4px;
      color: var(--ts);
    }

    .tr2.m {
      color: var(--tp);
      font-size: 14px;
      font-weight: 700;
      padding-top: 5px;
      border-top: 1px solid var(--bd);
      margin-top: 3px;
    }

    .df {
      display: flex;
      gap: 5px;
      margin-bottom: 7px;
    }

    .df input {
      flex: 1;
      background: var(--bs);
      border: 1px solid var(--bd);
      border-radius: 7px;
      color: var(--tp);
      padding: 6px 9px;
      font-size: 11px;
      font-family: 'DM Sans', sans-serif;
    }

    .df input:focus {
      outline: none;
      border-color: var(--t4);
    }

    /* ============ MODAL ============ */
    .mo {
      position: fixed;
      inset: 0;
      background: rgba(13, 38, 38, .45);
      z-index: 500;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    @media(min-width:640px) {
      .mo {
        align-items: center;
      }
    }

    .md {
      background: var(--bc);
      border: 1px solid var(--bd);
      border-radius: 16px 16px 0 0;
      padding: 20px;
      width: 100%;
      max-height: 92vh;
      overflow-y: auto;
      box-shadow: 0 -4px 40px rgba(13, 38, 38, .15);
    }

    @media(min-width:640px) {
      .md {
        border-radius: 14px;
        max-width: 440px;
        width: 90%;
      }
    }

    .md h3 {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 14px;
      color: var(--tp);
    }

    .vg {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
      margin-bottom: 13px;
    }

    .vb {
      padding: 11px;
      border-radius: 9px;
      border: 1px solid var(--bd);
      background: var(--bs);
      color: var(--tp);
      cursor: pointer;
      text-align: center;
      transition: all .15s;
    }

    .vb:hover,
    .vb.sel {
      border-color: var(--t4);
      background: var(--t0);
      color: var(--t6);
    }

    .vbn {
      font-size: 12px;
      font-weight: 600;
    }

    .vbp {
      font-size: 11px;
      color: var(--tm);
      margin-top: 2px;
      font-family: 'DM Mono', monospace;
    }

    .vb.sel .vbp {
      color: var(--t5);
    }

    .po {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 7px;
      margin-bottom: 13px;
    }

    @media(max-width:360px) {
      .po {
        grid-template-columns: 1fr;
      }
    }

    .popt {
      padding: 12px 7px;
      border-radius: 9px;
      border: 1px solid var(--bd);
      background: var(--bs);
      color: var(--ts);
      cursor: pointer;
      text-align: center;
      transition: all .15s;
      font-size: 11px;
      font-weight: 500;
    }

    .popt:hover,
    .popt.sel {
      border-color: var(--t4);
      background: var(--t0);
      color: var(--t6);
    }

    .piw {
      width: 36px;
      height: 36px;
      border-radius: 9px;
      background: var(--bs);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 6px;
      border: 1px solid var(--bd);
      transition: all .15s;
    }

    .popt.sel .piw {
      background: var(--t0);
      border-color: var(--t3);
    }

    .ca {
      margin-bottom: 12px;
    }

    .ca label {
      font-size: 10px;
      color: var(--tm);
      margin-bottom: 4px;
      display: block;
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .ca input,
    .ca select {
      width: 100%;
      background: var(--bs);
      border: 1px solid var(--bd);
      border-radius: 7px;
      color: var(--tp);
      padding: 9px 11px;
      font-size: 16px;
      font-weight: 600;
      font-family: 'DM Mono', monospace;
    }

    .ca input:focus,
    .ca select:focus {
      outline: none;
      border-color: var(--t4);
    }

    .cd {
      background: var(--sb2);
      border: 1px solid #b8e0cc;
      border-radius: 9px;
      padding: 9px 13px;
      margin-bottom: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .cd span {
      font-size: 11px;
      color: var(--sc);
    }

    .cd strong {
      font-size: 16px;
      color: var(--sc);
      font-family: 'DM Mono', monospace;
    }

    .ma {
      display: flex;
      gap: 7px;
      justify-content: flex-end;
      margin-top: 14px;
      padding-top: 11px;
      border-top: 1px solid var(--bd);
      flex-wrap: wrap;
    }

    .err-msg {
      font-size: 11px;
      color: var(--dn);
      margin-top: 4px;
      display: none;
    }

    .var-profit {
      font-size: 11px;
      background: var(--sb2);
      border: 1px solid #b8e0cc;
      border-radius: 7px;
      padding: 7px 10px;
      margin-top: 6px;
      display: none;
      line-height: 1.6;
    }

    /* ============ FORMS ============ */
    .fg {
      margin-bottom: 11px;
    }

    .fl {
      font-size: 10px;
      color: var(--tm);
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: .5px;
      display: block;
    }

    .fi2 {
      width: 100%;
      background: var(--bs);
      border: 1px solid var(--bd);
      border-radius: 7px;
      color: var(--tp);
      padding: 7px 10px;
      font-size: 12px;
      font-family: 'DM Sans', sans-serif;
    }

    .fi2:focus {
      outline: none;
      border-color: var(--t4);
    }

    .fr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;
    }

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

    .fmd {
      max-height: 80vh;
      overflow-y: auto;
    }

    .rg {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
    }

    .ro {
      flex: 1;
      min-width: 80px;
      padding: 8px;
      border: 1px solid var(--bd);
      border-radius: 7px;
      cursor: pointer;
      text-align: center;
      font-size: 12px;
      color: var(--ts);
      transition: all .15s;
    }

    .ro.sel {
      border-color: var(--t4);
      color: var(--t6);
      background: var(--t0);
      font-weight: 500;
    }

    /* Module access checkboxes */
    .mod-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      margin-top: 4px;
    }

    .mod-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 8px;
      background: var(--bs);
      border: 1px solid var(--bd);
      border-radius: 6px;
      font-size: 11px;
      color: var(--tp);
      cursor: pointer;
    }

    .mod-item input[type=checkbox] {
      accent-color: var(--t4);
      width: 13px;
      height: 13px;
      cursor: pointer;
    }

    .mod-item.checked {
      background: var(--t0);
      border-color: var(--t2);
      color: var(--t6);
    }

    /* ============ KITCHEN ============ */
    .kg {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 11px;
    }

    .kc {
      background: var(--bc);
      border: 1px solid var(--bd);
      border-radius: 11px;
      overflow: hidden;
    }

    .kch {
      padding: 9px 13px;
      background: var(--t0);
      border-bottom: 1px solid var(--t1);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .kon {
      font-family: 'DM Mono', monospace;
      font-size: 12px;
      font-weight: 600;
      color: var(--t6);
    }

    .kt {
      font-size: 10px;
      color: var(--tm);
    }

    .ki {
      padding: 9px 13px;
    }

    .kir {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 3px 0;
      border-bottom: 1px solid var(--bs);
    }

    .kiq {
      font-family: 'DM Mono', monospace;
      font-size: 12px;
      font-weight: 700;
      color: var(--t5);
      min-width: 22px;
    }

    .kin {
      font-size: 11px;
      color: var(--tp);
      font-weight: 500;
    }

    .kcf {
      padding: 9px 13px;
      border-top: 1px solid var(--bd);
    }

    .sd {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-right: 3px;
    }

    .sq {
      background: var(--t4);
    }

    .sip {
      background: var(--wn);
      animation: pulse 1.2s infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .4
      }
    }

    /* ============ INVENTORY ============ */
    .ig {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 9px;
      margin-bottom: 14px;
    }

    @media(min-width:600px) {
      .ig {
        grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
        gap: 11px;
      }
    }

    .icard {
      background: var(--bc);
      border: 1px solid var(--bd);
      border-radius: 10px;
      padding: 13px;
      position: relative;
    }

    .icn {
      font-size: 12px;
      font-weight: 600;
      color: var(--tp);
      margin-bottom: 5px;
    }

    .is {
      font-size: 18px;
      font-weight: 700;
      color: var(--t5);
      font-family: 'DM Mono', monospace;
    }

    .iu {
      font-size: 10px;
      color: var(--tm);
    }

    .iv {
      font-size: 10px;
      color: var(--ts);
      margin-top: 3px;
    }

    .lsb {
      position: absolute;
      top: 8px;
      right: 8px;
      background: #fff4e0;
      color: #b07a00;
      font-size: 9px;
      padding: 2px 6px;
      border-radius: 8px;
      font-weight: 600;
      border: 1px solid #e8d890;
    }

    /* ============ PRODUCTS ============ */
    .pl {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .pi {
      background: var(--bc);
      border: 1px solid var(--bd);
      border-radius: 10px;
      padding: 12px;
      display: flex;
      align-items: center;
      gap: 11px;
      flex-wrap: wrap;
    }

    .pinfo {
      flex: 1;
      min-width: 130px;
    }

    .pn {
      font-size: 13px;
      font-weight: 600;
      color: var(--tp);
    }

    .pm {
      font-size: 10px;
      color: var(--tm);
      margin-top: 1px;
    }

    .pv {
      display: flex;
      gap: 5px;
      margin-top: 4px;
      flex-wrap: wrap;
    }

    .pvt {
      background: var(--t0);
      color: var(--t6);
      padding: 2px 7px;
      border-radius: 4px;
      font-size: 9px;
      border: 1px solid var(--t2);
      font-family: 'DM Mono', monospace;
    }

    .pvt-wrap {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      margin-bottom: 3px;
    }

    /* ============ SETTINGS ============ */
    .sg {
      display: grid;
      grid-template-columns: 1fr;
      gap: 13px;
    }

    @media(min-width:768px) {
      .sg {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }
    }

    @media(min-width:900px) {
      #stab-tax>div {
        grid-template-columns: 1fr 2fr;
      }
    }

    .ss {
      background: var(--bc);
      border: 1px solid var(--bd);
      border-radius: 11px;
      padding: 15px;
    }

    .ss h3 {
      font-size: 11px;
      font-weight: 600;
      color: var(--tp);
      margin-bottom: 13px;
      padding-bottom: 9px;
      border-bottom: 1px solid var(--bd);
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    /* ============ USERS ============ */
    .ul2 {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .ur {
      background: var(--bc);
      border: 1px solid var(--bd);
      border-radius: 10px;
      padding: 11px 13px;
      display: flex;
      align-items: flex-start;
      gap: 11px;
      flex-wrap: wrap;
    }

    .ura {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--t4);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .uri {
      flex: 1;
      min-width: 120px;
    }

    .urn {
      font-size: 13px;
      font-weight: 600;
      color: var(--tp);
    }

    .urm {
      font-size: 10px;
      color: var(--tm);
      margin-top: 1px;
    }

    .rb2 {
      display: inline-block;
      padding: 1px 7px;
      border-radius: 4px;
      font-size: 9px;
      font-weight: 600;
      margin-left: 4px;
    }

    .ro2 {
      background: var(--t0);
      color: var(--t6);
      border: 1px solid var(--t2);
    }

    .rm {
      background: #f0eeff;
      color: #5a4ab7;
      border: 1px solid #c8c0f0;
    }

    .rc {
      background: var(--sb2);
      color: var(--sc);
      border: 1px solid #b8e0cc;
    }

    .rk {
      background: var(--wb);
      color: var(--wn);
      border: 1px solid #e8d890;
    }

    .sa {
      color: var(--sc);
      font-size: 10px;
      font-weight: 600;
    }

    .ssp {
      color: var(--dn);

      f.sp2 {
        color: var(--wn);
      }

      font-size:10px;
      font-weight:600;
    }

    .mod-tags {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      margin-top: 5px;
    }

    .mod-tag {
      background: var(--bs);
      color: var(--ts);
      border: 1px solid var(--bd);
      padding: 1px 6px;
      border-radius: 4px;
      font-size: 9px;
    }

    /* ============ BILLING ============ */
    .bc2 {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }

    @media(min-width:768px) {
      .bc2 {
        grid-template-columns: 1fr 1fr;
      }
    }

    .bcard {
      background: var(--bc);
      border: 2px solid var(--t4);
      border-radius: 13px;
      padding: 20px;
    }

    .bname {
      font-size: 17px;
      font-weight: 700;
      color: var(--t6);
      margin-bottom: 3px;
    }

    .bprice {
      font-size: 28px;
      font-weight: 700;
      color: var(--tp);
      font-family: 'DM Mono', monospace;
    }

    .bprice span {
      font-size: 12px;
      color: var(--tm);
      font-family: 'DM Sans', sans-serif;
      font-weight: 400;
    }

    .bfl {
      margin-top: 14px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .bfi {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 11px;
      color: var(--ts);
    }

    .bfc {
      color: var(--sc);
      font-weight: 700;
      font-size: 12px;
      flex-shrink: 0;
    }

    /* ============ DASHBOARD ============ */
    .dg {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 9px;
      margin-bottom: 14px;
    }

    @media(min-width:900px) {
      .dg {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-bottom: 18px;
      }
    }

    .dc {
      background: var(--bc);
      border: 1px solid var(--bd);
      border-radius: 11px;
      padding: 13px;
    }

    .dl {
      font-size: 10px;
      color: var(--tm);
      margin-bottom: 5px;
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .dv {
      font-size: 18px;
      font-weight: 600;
      color: var(--tp);
      font-family: 'DM Mono', monospace;
    }

    .dt2 {
      font-size: 10px;
      margin-top: 4px;
      color: var(--tm);
    }

    .up {
      color: var(--sc);
    }

    /* ============ NET INCOME ============ */
    .ni-wrap {
      width: 100%;
    }

    .ni-row {
      display: flex;
      gap: 12px;
      padding: 9px 20px;
      font-size: 13px;
      border-bottom: 1px solid var(--bs);
    }

    .ni-row.head {
      background: var(--t0);
      font-weight: 600;
      color: var(--t6);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .5px;
      border-bottom: 1px solid var(--t1);
      padding: 9px 20px;
    }

    .ni-row.total {
      background: var(--sb2);
      font-weight: 700;
      font-size: 14px;
      color: var(--sc);
      border-bottom: none;
    }

    .ni-row.sub {
      background: var(--bc);
    }

    .ni-row.deduct {
      color: var(--dn);
      background: var(--bc);
    }

    .ni-row.result {
      background: var(--bs);
      font-weight: 600;
    }

    .ni-desc {
      flex: 1;
      font-size: 12px;
    }

    .ni-amt {
      font-family: 'DM Mono', monospace;
      font-size: 12px;
      min-width: 120px;
    }

    /* ============ FILTER TABS ============ */
    .ftab {
      padding: 5px 11px;
      border-radius: 14px;
      background: var(--bs);
      color: var(--ts);
      border: 1px solid var(--bd);
      cursor: pointer;
      font-size: 11px;
      font-weight: 500;
      transition: all .15s;
    }

    .ftab:hover {
      border-color: var(--t3);
    }

    .ftab.active {
      background: var(--t4);
      color: #fff;
      border-color: var(--t4);
    }

    /* ============ PRINT ============ */
    #pr-wrap {
      display: none;
    }

    @media print {
      body>* {
        display: none !important;
      }

      #pr-wrap {
        display: block !important;
        width: 100%;
        margin: 0;
        padding: 12mm 14mm;
        font-family: Arial, sans-serif;
      }

      @page {
        size: auto;
        margin: 0;
      }
    }

    #rc {
      width: 100%;
      font-family: Arial, sans-serif;
      font-size: 10pt;
      padding: 0;
    }

    .rln {
      display: flex;
      justify-content: space-between;
      margin-bottom: 4px;
      font-size: 10pt;
      gap: 6px;
    }

    .rln span:first-child {
      flex: 1;
    }

    .rln span:last-child {
      flex-shrink: 0;
      text-align: right;
      font-weight: 600;
    }

    .rct {
      text-align: center;
      margin-bottom: 5px;
      font-size: 10pt;
    }

    .rda {
      border-top: 1px solid #ccc;
      margin: 8px 0;
    }

    .rbold {
      font-weight: bold;
    }

    /* No spinners on number inputs */
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    input[type=number] {
      -moz-appearance: textfield;
    }

    /* ============ MISC ============ */
    .es {
      text-align: center;
      padding: 36px 16px;
      color: var(--tm);
    }

    .sb3 {
      background: var(--bc);
      border: 1px solid var(--bd);
      border-radius: 7px;
      color: var(--tp);
      padding: 7px 11px;
      font-size: 11px;
      font-family: 'DM Sans', sans-serif;
    }

    .sb3:focus {
      outline: none;
      border-color: var(--t4);
    }

    .toast {
      position: fixed;
      bottom: 16px;
      right: 14px;
      background: var(--bc);
      border: 1px solid var(--t3);
      color: var(--t6);
      padding: 9px 14px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
      z-index: 999;
      animation: sin .3s ease;
      box-shadow: 0 3px 14px rgba(32, 128, 128, .15);
      max-width: calc(100vw - 28px);
    }

    @keyframes sin {
      from {
        transform: translateY(18px);
        opacity: 0
      }

      to {
        transform: translateY(0);
        opacity: 1
      }
    }

    .divider {
      border: none;
      border-top: 1px solid var(--bd);
      margin: 10px 0;
    }

    /* Mobile hamburger button - shown on all pages */
    .mmb-btn {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--ts);
      padding: 5px 6px;
      border-radius: 6px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .mmb-btn:hover {
      background: var(--t0);
    }

    @media(max-width:767px) {
      .mmb-btn {
        display: flex;
      }
    }

    /* ===== OFFLINE STATUS BAR ===== */
    #conn-bar {
      display: none !important;
    }




    .cb-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      flex-shrink: 0;
    }

    #conn-bar.syncing .cb-dot {
      animation: cbp 1s ease-in-out infinite;
    }

    @keyframes cbp {

      0%,
      100% {
        opacity: .3
      }

      50% {
        opacity: 1
      }
    }

    #sync-pill {
      display: none;
      align-items: center;
      gap: 5px;
      background: #fdf8e6;
      border: 1px solid #ddc85a;
      color: #9a6c00;
      font-size: 10px;
      font-weight: 600;
      padding: 3px 9px;
      border-radius: 12px;
      cursor: pointer;
      white-space: nowrap;
      transition: all .15s;
    }

    #sync-pill:hover {
      background: #fef3b4;
    }

    #sync-pill.show {
      display: inline-flex;
    }

    .sp-spin {
      animation: spinR 1.2s linear infinite;
    }

    @keyframes spinR {
      to {
        transform: rotate(360deg)
      }
    }


    .photo-upload-zone:hover {
      border-color: var(--t4);
      background: var(--t0);
    }

    .photo-upload-zone input {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
      width: 100%;
      height: 100%;
    }

    .photo-thumb {
      width: 100%;
      aspect-ratio: 1/1;
      border-radius: 8px;
      object-fit: cover;
      display: block;
      border: 1px solid var(--bd);
    }

    .photo-actions {
      display: flex;
      gap: 6px;
      margin-top: 8px;
    }

    .photo-actions .btn {
      flex: 1;
      justify-content: center;
    }

    .var-entry {
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 12px;
      padding: 14px;
      position: relative;
    }

    .var-entry-hdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 10px;
      margin-bottom: 12px;
      border-bottom: 1px solid var(--bd);
    }

    .var-entry-hdr .ve-title {
      font-size: 10px;
      font-weight: 700;
      color: var(--t5);
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .var-list-wrap {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* ─── CROPPER ─── */
    .cropper-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .4);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .cropper-box {
      background: #fff;
      border-radius: 16px;
      width: min(480px, 95vw);
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    }

    .cropper-head {
      background: var(--tp);
      padding: 14px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .cropper-head h3 {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
    }

    .cropper-canvas-wrap {
      width: 100%;
      aspect-ratio: 1/1;
      background: #111;
      overflow: hidden;
      position: relative;
      cursor: grab;
    }

    .cropper-canvas-wrap.dragging {
      cursor: grabbing;
    }

    .cropper-canvas-wrap canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    .cropper-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
    }

    /* rule-of-thirds grid */
    .cropper-grid {
      position: absolute;
      inset: 0;
      pointer-events: none;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
    }

    .cropper-grid>div {
      border: 1px solid rgba(255, 255, 255, .12);
    }

    .cropper-zoom-row {
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      background: #f8f8f8;
      border-top: 1px solid #eee;
    }

    .cropper-zoom-row label {
      font-size: 11px;
      color: var(--ts);
      font-weight: 600;
      flex-shrink: 0;
    }

    .cropper-zoom-row input {
      flex: 1;
      accent-color: var(--t4);
    }

    .cropper-footer {
      padding: 12px 16px;
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      border-top: 1px solid #eee;
      background: #fff;
    }

    /* ─── POS CARD WITH PHOTO ─── */
    .mc-photo {
      width: 100%;
      aspect-ratio: 1/1;
      object-fit: cover;
      border-radius: 7px;
      margin-bottom: 6px;
      display: block;
    }

    .mc.with-photo {
      padding: 7px;
      justify-content: flex-start;
    }

    /* ─── PHOTO TOGGLE BUTTON ─── */
    .photo-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      border-radius: 7px;
      background: var(--bs);
      border: 1px solid var(--bd);
      cursor: pointer;
      font-size: 11px;
      font-weight: 600;
      color: var(--ts);
      transition: all .15s;
    }

    .photo-toggle.active {
      background: var(--t0);
      border-color: var(--t3);
      color: var(--t5);
    }

    .photo-toggle svg {
      flex-shrink: 0;
    }

    /* ── Toggle Switch ── */
    .sw-wrap {
      display: flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
      user-select: none;
    }

    .sw-wrap input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .sw-track {
      width: 36px;
      height: 20px;
      border-radius: 10px;
      background: #ccc;
      position: relative;
      transition: background .2s;
      flex-shrink: 0;
    }

    .sw-wrap input:checked+.sw-track {
      background: var(--t4);
    }

    .sw-thumb {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #fff;
      transition: transform .2s;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    }

    .sw-wrap input:checked+.sw-track .sw-thumb {
      transform: translateX(16px);
    }

    .sw-lbl {
      font-size: 11px;
      font-weight: 600;
      color: var(--ts);
    }

    /* ── Traffic Light Status ── */
    .tl-wrap {
      display: flex;
      align-items: center;
      gap: 9px;
      cursor: pointer;
      position: relative;
      padding: 9px 10px;
      border-radius: 7px;
      transition: background .15s;
      width: 100%;
      border: none;
      background: none;
    }

    .tl-wrap:hover {
      background: rgba(255, 255, 255, .07);
    }

    .tl-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      flex-shrink: 0;
      transition: background .4s;
      position: relative;
    }

    .tl-dot.online {
      background: #22c55e;
      box-shadow: 0 0 0 3px rgba(34, 197, 94, .25), 0 0 10px rgba(34, 197, 94, .6);
      animation: glowG 2s ease-in-out infinite;
    }

    .tl-dot.syncing {
      background: #f59e0b;
      box-shadow: 0 0 0 3px rgba(245, 158, 11, .25), 0 0 10px rgba(245, 158, 11, .6);
      animation: glowY 1s ease-in-out infinite;
    }

    .tl-dot.offline {
      background: #ef4444;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, .25), 0 0 10px rgba(239, 68, 68, .6);
      animation: glowR 1.5s ease-in-out infinite;
    }

    @keyframes glowG {

      0%,
      100% {
        box-shadow: 0 0 0 2px rgba(34, 197, 94, .2), 0 0 8px rgba(34, 197, 94, .5);
      }

      50% {
        box-shadow: 0 0 0 5px rgba(34, 197, 94, .15), 0 0 18px rgba(34, 197, 94, .7);
      }
    }

    @keyframes glowY {

      0%,
      100% {
        box-shadow: 0 0 0 2px rgba(245, 158, 11, .2), 0 0 8px rgba(245, 158, 11, .5);
      }

      50% {
        box-shadow: 0 0 0 5px rgba(245, 158, 11, .15), 0 0 18px rgba(245, 158, 11, .7);
      }
    }

    @keyframes glowR {

      0%,
      100% {
        box-shadow: 0 0 0 2px rgba(239, 68, 68, .2), 0 0 8px rgba(239, 68, 68, .5);
      }

      50% {
        box-shadow: 0 0 0 5px rgba(239, 68, 68, .15), 0 0 18px rgba(239, 68, 68, .7);
      }
    }

    .tl-label {
      font-size: 11px;
      font-weight: 600;
      color: rgba(255, 255, 255, .55);
    }

    .tl-tooltip {
      position: fixed;
      left: 228px;
      bottom: 56px;
      background: var(--tp);
      color: #fff;
      font-size: 11px;
      border-radius: 10px;
      padding: 12px 15px;
      pointer-events: none;
      opacity: 0;
      transition: opacity .18s;
      box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
      z-index: 9999;
      line-height: 1.75;
      width: 230px;
      text-align: left;
      white-space: normal;
    }

    .tl-tooltip::after {
      content: '';
      position: absolute;
      top: 50%;
      left: -11px;
      transform: translateY(-50%);
      border: 6px solid transparent;
      border-right-color: var(--tp);
    }

    .tl-wrap:hover .tl-tooltip,
    .tl-wrap:focus .tl-tooltip {
      opacity: 1;
    }

    .mc-no-photo {
      width: 100%;
      aspect-ratio: 1/1;
      border-radius: 7px;
      background: linear-gradient(145deg, #b8e8e8, #85d0d0);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 6px;
      flex-shrink: 0;
      overflow: hidden;
    }

    .mc-no-photo span {
      font-size: 10px;
      font-weight: 700;
      color: var(--tp);
      text-align: center;
      line-height: 1.45;
      padding: 6px;
      opacity: .85;
    }

    /* ── Var-entry photo upload zone ── */
    .var-upload-zone {
      width: 100%;
      border: 2px dashed var(--t2);
      border-radius: 10px;
      padding: 16px 14px;
      text-align: center;
      cursor: pointer;
      background: #fff;
      transition: border-color .2s, background .2s;
      box-sizing: border-box;
    }

    .var-upload-zone:hover,
    .var-upload-zone.dz-hover {
      border-color: var(--t4);
      background: var(--t0);
    }

    /* Main upload zone — enlarged to hold Requirements + Tips */
    .photo-upload-zone {
      width: 100%;
      border: 2px dashed var(--bd);
      border-radius: 10px;
      padding: 16px 14px;
      text-align: center;
      cursor: pointer;
      background: var(--bs);
      transition: border-color .2s, background .2s;
      box-sizing: border-box;
    }

    .photo-upload-zone:hover,
    .photo-upload-zone.dz-hover {
      border-color: var(--t3);
      background: var(--t0);
    }

body{font-family:Arial,sans-serif;padding:20px;color:#0d2626}'
          + 'h2{color:#208080;margin-bottom:4px}p{color:#7a9e9e;font-size:11px;margin-bottom:14px}'
          + 'table{border-collapse:collapse;width:100%}'
          + '@media print{@page{margin:12mm;size:auto}body{margin:10mm}}<\/style><scr' + 'ipt>if(document.title)document.title="";<\/scr' + 'ipt>'
          + '<\/head><body>'
          + '<h2>' + bname2 + '<\/h2>'
          + '<p>Generated: ' + fdt(new Date()) + '<\/p>'
          + '<table>' + trows + '<\/table>'
          + '<\/body><\/html>';
        pw.document.write(html2);
        pw.document.close();
        setTimeout(function () { pw.focus(); pw.print(); }, 400);
        closeMod({});
        toast('PDF print dialog opened');
      }
    }


    // ============ STOCKS EXPORT PICKER ============
    function openStocksExportPicker() {
      var h = '<h3>Stocks &amp; Ingredients — Export / Print</h3>'
        + '<p style="font-size:12px;color:var(--tm);margin-bottom:14px">Choose what you want to export:</p>'
        + '<div style="display:flex;flex-direction:column;gap:9px;margin-bottom:16px">'
        + '<label style="display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:var(--bs);border:1.5px solid var(--bd);border-radius:9px;cursor:pointer;font-size:13px">'
        + '<input type="radio" name="srep" value="stocks" checked style="accent-color:var(--t4);width:15px;height:15px;margin-top:2px;flex-shrink:0">'
        + '<span><strong>Stock On-Hand Items</strong><br><span style="font-size:11px;color:var(--tm)">Current stock list with quantity, cost per unit and estimated value</span></span>'
        + '</label>'
        + '<label style="display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:var(--bs);border:1.5px solid var(--bd);border-radius:9px;cursor:pointer;font-size:13px">'
        + '<input type="radio" name="srep" value="stocks_movement" style="accent-color:var(--t4);width:15px;height:15px;margin-top:2px;flex-shrink:0">'
        + '<span><strong>Stock Movement History</strong><br><span style="font-size:11px;color:var(--tm)">All restocks, waste logs, deductions and adjustments over time</span></span>'
        + '</label>'
        + '</div>'
        + '<div class="ma">'
        + '<button class="btn bs2" onclick="closeMod(event)">Cancel</button>'
        + '<button class="btn bp" onclick="stocksExportNext()">Next →</button>'
        + '</div>';
      openMod(h);
    }

    function stocksExportNext() {
      var sel = document.querySelector('input[name="srep"]:checked');
      if (!sel) { toast('Please select an export type'); return; }
      var repType = sel.value;
      closeMod({});
      setTimeout(function () { openExportModal(repType); }, 100);
    }

    // ============ ANALYTICS EXPORT PICKER ============
    function openAnalyticsExport() {
      var h = '<h3>Analytics &amp; Reports — Export / Print</h3>'
        + '<p style="font-size:12px;color:var(--tm);margin-bottom:14px">Choose what you want to export or print:</p>'
        + '<div style="display:flex;flex-direction:column;gap:9px;margin-bottom:16px">'
        + '<label style="display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:var(--bs);border:1.5px solid var(--bd);border-radius:9px;cursor:pointer;font-size:13px">'
        + '<input type="radio" name="arep" value="income" style="accent-color:var(--t4);width:15px;height:15px;margin-top:2px;flex-shrink:0">'
        + '<span><strong>Net Income Statement</strong><br><span style="font-size:11px;color:var(--tm)">Total Sales, COGS, Discounts, Waste, Net Income summary</span></span>'
        + '</label>'
        + '<label style="display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:var(--bs);border:1.5px solid var(--bd);border-radius:9px;cursor:pointer;font-size:13px">'
        + '<input type="radio" name="arep" value="detailed" style="accent-color:var(--t4);width:15px;height:15px;margin-top:2px;flex-shrink:0">'
        + '<span><strong>Detailed Sales &amp; Cost Report</strong><br><span style="font-size:11px;color:var(--tm)">Transaction-by-transaction breakdown with COGS and Gross Profit</span></span>'
        + '</label>'
        + '</div>'
        + '<div class="ma">'
        + '<button class="btn bs2" onclick="closeMod(event)">Cancel</button>'
        + '<button class="btn bp" onclick="analyticsPickDate()">Next →</button>'
        + '</div>';
      openMod(h);
    }

    function analyticsPickDate() {
      var sel = document.querySelector('input[name="arep"]:checked');
      if (!sel) { toast('Please select a report type'); return; }
      var repType = sel.value;
      closeMod({});
      setTimeout(function () { openExportModal('analytics_' + repType); }, 100);
    }

    // ============================================================
    // PHOTO UPLOAD & CROP ENGINE  (v18 clean – no inner quotes)
    // ============================================================

    // Server storage note (production):
    // POST /api/menu-photos  → /storage/app/public/menu-photos/{product_id}/{uuid}.jpg
    // Served at: https://yourapp.com/storage/menu-photos/{product_id}/{uuid}.jpg
    // Prototype: stored as base64 in products[] via IndexedDB.

    function sanitizeDesc(s) {
      return String(s).replace(/[^a-zA-Z\u00C0-\u024F0-9\s.,!\-]/g, '').substring(0, 300);
    }

    var _cropCanvas = null, _cropCtx = null;
    var _cropOffX = 0, _cropOffY = 0, _cropStartX = 0, _cropStartY = 0;
    var _cropScale = 1, _cropDragging = false;
    var _pendingPhotoData = null, _pendingPhotoApplyAll = true;

    function closeCropModal() {
      var el = document.getElementById('crop-modal');
      if (el) el.remove();
      // Always restore modal overlay interaction
      var mo = document.getElementById('modal-overlay');
      if (mo) mo.style.pointerEvents = '';
    }

    function _drawCrop() {
      var cv = _cropCanvas, ctx = _cropCtx;
      if (!cv || !ctx || !cv._img) return;
      ctx.clearRect(0, 0, cv._size, cv._size);
      ctx.drawImage(cv._img, _cropOffX, _cropOffY, cv._iw * cv._baseScale * _cropScale, cv._ih * cv._baseScale * _cropScale);
    }

    function _applyCrop(uid) {
      closeCropModal();
      if (!_cropCanvas || !_cropCanvas._img) {
        toast('Photo not ready — please try again');
        return;
      }
      _drawCrop();
      var sz = _cropCanvas._size;
      var out = document.createElement('canvas');
      out.width = 600; out.height = 600;
      out.getContext('2d').drawImage(_cropCanvas, 0, 0, sz, sz, 0, 0, 600, 600);
      var dataUrl = out.toDataURL('image/jpeg', 0.85);
      if (!dataUrl || dataUrl.length < 100) { toast('Crop failed — please try again'); return; }
      _pendingPhotoData = dataUrl;
      var prev = document.getElementById('photo-preview-' + uid);
      if (prev) { prev.src = dataUrl; prev.style.display = 'block'; }
      var empty = document.getElementById('photo-empty-' + uid);
      if (empty) empty.style.display = 'none';
      var acts = document.getElementById('photo-actions-' + uid);
      if (acts) acts.style.display = 'flex';
      toast('Photo saved ✓');
    }

    function openPhotoCropModal(src, uid) {
      // Reset state
      _cropCanvas = null; _cropCtx = null; _cropScale = 1; _cropOffX = 0; _cropOffY = 0;

      // Step 1: Load image FIRST — then build modal
      // This eliminates ALL async timing issues
      var img = new Image();
      img.onload = function () {
        _buildCropModal(img, uid);
      };
      img.onerror = function () { toast('Could not load image'); };
      img.src = src;
    }

    function _buildCropModal(img, uid) {
      var SIZE = 400; // fixed canvas size — no DOM measurement needed

      // Remove any existing crop modal
      var old = document.getElementById('crop-modal');
      if (old) old.remove();

      // Build modal
      var modal = document.createElement('div');
      modal.id = 'crop-modal';
      modal.style.cssText = 'position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;';

      var box = document.createElement('div');
      box.style.cssText = 'background:#fff;border-radius:16px;width:min(440px,95vw);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4);';

      // Header
      var head = document.createElement('div');
      head.style.cssText = 'background:#0d2626;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;';
      var h3 = document.createElement('h3');
      h3.textContent = 'Crop Photo — 1:1';
      h3.style.cssText = 'font-size:14px;font-weight:700;color:#fff;margin:0;';
      var xBtn = document.createElement('button');
      xBtn.innerHTML = '&times;';
      xBtn.style.cssText = 'background:none;border:none;color:rgba(255,255,255,.7);font-size:22px;cursor:pointer;line-height:1;padding:0 4px;';
      xBtn.onclick = closeCropModal;
      head.appendChild(h3); head.appendChild(xBtn);
      box.appendChild(head);

      // Canvas wrap
      var wrap = document.createElement('div');
      wrap.style.cssText = 'width:100%;background:#111;position:relative;overflow:hidden;cursor:grab;touch-action:none;';
      // Make it square using padding-top trick
      var canvasCtr = document.createElement('div');
      canvasCtr.style.cssText = 'position:relative;padding-top:100%;';
      var cv = document.createElement('canvas');
      cv.width = SIZE; cv.height = SIZE;
      cv.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;display:block;';
      // Grid lines
      var grid = document.createElement('div');
      grid.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;';
      for (var i = 0; i < 9; i++) { var gd = document.createElement('div'); gd.style.border = '1px solid rgba(255,255,255,.15)'; grid.appendChild(gd); }
      canvasCtr.appendChild(cv); canvasCtr.appendChild(grid); wrap.appendChild(canvasCtr);
      box.appendChild(wrap);

      // Zoom
      var zoomRow = document.createElement('div');
      zoomRow.style.cssText = 'padding:12px 16px;display:flex;align-items:center;gap:10px;background:#f8f8f8;border-top:1px solid #eee;';
      var zLabel = document.createElement('label');
      zLabel.textContent = 'Zoom';
      zLabel.style.cssText = 'font-size:11px;color:#4a7070;font-weight:600;flex-shrink:0;';
      var zSlider = document.createElement('input');
      zSlider.type = 'range'; zSlider.min = '1'; zSlider.max = '3'; zSlider.step = '0.05'; zSlider.value = '1';
      zSlider.style.cssText = 'flex:1;accent-color:#2a9d9d;cursor:pointer;';
      zoomRow.appendChild(zLabel); zoomRow.appendChild(zSlider);
      box.appendChild(zoomRow);

      // Footer
      var footer = document.createElement('div');
      footer.style.cssText = 'padding:12px 16px;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid #eee;background:#fff;';
      var cancelBtn = document.createElement('button');
      cancelBtn.type = 'button';
      cancelBtn.textContent = 'Cancel';
      cancelBtn.style.cssText = 'padding:7px 14px;border-radius:7px;border:1px solid #d4e8e8;background:#fff;color:#0d2626;font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;';
      var saveBtn = document.createElement('button');
      saveBtn.type = 'button';
      saveBtn.textContent = 'Crop & Save';
      saveBtn.style.cssText = 'padding:7px 18px;border-radius:7px;border:none;background:#2a9d9d;color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;';
      footer.appendChild(cancelBtn); footer.appendChild(saveBtn);
      box.appendChild(footer);

      modal.appendChild(box);
      document.body.appendChild(modal);

      // --- Init canvas with the pre-loaded image ---
      _cropCanvas = cv;
      _cropCtx = cv.getContext('2d');
      var iw = img.naturalWidth, ih = img.naturalHeight;
      var scale = Math.max(SIZE / iw, SIZE / ih);
      _cropOffX = (SIZE - iw * scale) / 2;
      _cropOffY = (SIZE - ih * scale) / 2;
      _cropScale = 1;
      cv._img = img; cv._baseScale = scale; cv._iw = iw; cv._ih = ih; cv._size = SIZE;
      _drawCrop();

      // --- Plain onclick — works on all browsers/devices ---
      cancelBtn.onclick = function () { closeCropModal(); };
      saveBtn.onclick = function () { _applyCrop(uid); };
      xBtn.onclick = function () { closeCropModal(); };

      // Zoom
      zSlider.oninput = function () { _cropScale = parseFloat(this.value); _drawCrop(); };

      // Drag to pan (mouse)
      var dragging = false, dsx = 0, dsy = 0;
      cv.addEventListener('mousedown', function (e) {
        e.preventDefault();
        dragging = true; dsx = e.clientX - _cropOffX; dsy = e.clientY - _cropOffY;
        wrap.style.cursor = 'grabbing';
      });
      document.addEventListener('mousemove', function (e) {
        if (!dragging) return;
        _cropOffX = e.clientX - dsx; _cropOffY = e.clientY - dsy; _drawCrop();
      });
      document.addEventListener('mouseup', function () {
        if (dragging) { dragging = false; wrap.style.cursor = 'grab'; }
      });

      // Drag to pan (touch)
      cv.addEventListener('touchstart', function (e) {
        e.preventDefault();
        var t = e.touches[0];
        dragging = true; dsx = t.clientX - _cropOffX; dsy = t.clientY - _cropOffY;
      }, { passive: false });
      cv.addEventListener('touchmove', function (e) {
        e.preventDefault();
        if (!dragging) return;
        var t = e.touches[0];
        _cropOffX = t.clientX - dsx; _cropOffY = t.clientY - dsy; _drawCrop();
      }, { passive: false });
      cv.addEventListener('touchend', function () { dragging = false; });
    }

    function triggerPhotoUpload(uid) {
      var inp = document.getElementById('ph-inp-' + uid);
      if (!inp) return;
      // Mobile-safe: attach handler then trigger
      inp.onchange = null;
      function handleChange(e) {
        inp.onchange = null;
        var f = e.target.files[0];
        if (!f) return;
        if (f.size > 5 * 1024 * 1024) { toast('Photo must be 5 MB or less'); inp.value = ''; return; }
        if (f.type !== 'image/jpeg' && f.type !== 'image/png') { toast('Only JPEG or PNG accepted'); inp.value = ''; return; }
        var reader = new FileReader();
        reader.onload = function (ev) { openPhotoCropModal(ev.target.result, uid); };
        reader.readAsDataURL(f);
      }
      inp.addEventListener('change', handleChange, { once: true });
      // For iOS: must be triggered by direct user gesture on input
      inp.click();
    }

    function removeProductPhoto(uid) {
      _pendingPhotoData = null;
      var prev = document.getElementById('photo-preview-' + uid);
      if (prev) { prev.src = ''; prev.style.display = 'none'; }
      var empty = document.getElementById('photo-empty-' + uid);
      if (empty) empty.style.display = 'block';
      var acts = document.getElementById('photo-actions-' + uid);
      if (acts) acts.style.display = 'none';
      toast('Photo removed');
    }

    function _applyPhotoToProduct() { }  // stub – logic now in _applyCrop



    function buildVarPhotoBlock(vi, existingPhoto) {
      var uid = 'var-ph-' + vi;
      var hasPh = existingPhoto && existingPhoto.length > 0;
      return '<div class="var-photo-wrap" id="vpw-' + vi + '" style="margin-top:12px">'
        + '<div class="var-upload-zone" id="photo-empty-' + uid + '" data-uid="' + uid + '" style="' + (hasPh ? 'display:none' : '') + '">'
        + '<input type="file" id="ph-inp-' + uid + '" accept=".jpg,.jpeg,.png" style="display:none">'
        + '<svg width="26" height="26" fill="none" stroke="var(--t4)" stroke-width="1.5" viewBox="0 0 24 24" style="margin-bottom:7px"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21,15 16,10 5,21"/></svg>'
        + '<div style="font-size:12px;font-weight:700;color:var(--t4);margin-bottom:3px">Click to browse or drag photo here</div>'
        + '<div style="font-size:9px;color:var(--tm);margin-bottom:12px">JPEG or PNG &bull; Max 5 MB &bull; 1:1 square crop</div>'
        + '<div style="width:100%;background:var(--t0);border:1px solid var(--t1);border-radius:8px;padding:9px 11px;margin-bottom:8px;text-align:left">'
        + '<div style="font-size:10px;font-weight:700;color:var(--t5);margin-bottom:5px">Photo Requirements</div>'
        + '<div style="font-size:9px;color:var(--ts);line-height:1.7">&#9679; JPEG or PNG only<br>&#9679; Max 5 MB per photo<br>&#9679; Cropped to 1:1 square<br>&#9679; Min 600×600 px recommended</div>'
        + '</div>'
        + '<div style="width:100%;background:#fffbf0;border:1px solid #f0e0a0;border-radius:8px;padding:9px 11px;text-align:left">'
        + '<div style="font-size:10px;font-weight:700;color:var(--gold);margin-bottom:5px">Pro Tips</div>'
        + '<div style="font-size:9px;color:#7a5500;line-height:1.7">&#9679; Natural lighting for rich colors<br>&#9679; Clean white or dark background<br>&#9679; Shoot from directly above<br>&#9679; High resolution = professional look</div>'
        + '</div>'
        + '</div>'
        + '<img id="photo-preview-' + uid + '" class="photo-thumb" src="' + (hasPh ? existingPhoto : '') + '" style="width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;' + (hasPh ? '' : 'display:none') + '" alt="">'
        + '<div id="photo-actions-' + uid + '" class="photo-actions" style="' + (hasPh ? '' : 'display:none') + '">'
        + '<button class="btn bs2 bxs" style="font-size:11px" data-uid="' + uid + '" onclick="triggerPhotoUpload(this.dataset.uid)">Replace</button>'
        + '<button class="btn bd2 bxs" style="font-size:11px" data-uid="' + uid + '" onclick="removeProductPhoto(this.dataset.uid)">Remove</button>'
        + '</div>'
        + '</div>';
    }
    function _wireVarZones() {
      document.querySelectorAll('.var-upload-zone').forEach(function (zone) {
        if (zone._wired) return;
        zone._wired = true;
        var uid = zone.dataset.uid;
        zone.addEventListener('click', function () { triggerPhotoUpload(uid); });
        zone.addEventListener('dragover', function (e) { e.preventDefault(); zone.classList.add('dz-hover'); });
        zone.addEventListener('dragleave', function () { zone.classList.remove('dz-hover'); });
        zone.addEventListener('drop', function (e) {
          e.preventDefault(); zone.classList.remove('dz-hover');
          var f = e.dataTransfer.files[0]; if (!f) return;
          if (f.size > 5 * 1024 * 1024) { toast('Photo must be 5 MB or less'); return; }
          if (f.type !== 'image/jpeg' && f.type !== 'image/png') { toast('Only JPEG or PNG accepted'); return; }
          var reader = new FileReader();
          reader.onload = function (ev) { openPhotoCropModal(ev.target.result, uid); };
          reader.readAsDataURL(f);
        });
      });
    }


    function buildPhotoBlock(prodId, existingPhoto) {
      return '';
    }
    function buildDescBlock(existingDesc) {
      return '<div class="fg" style="margin-top:8px">'
        + '<label class="fl">Description <span style="color:var(--tm);font-weight:400">(Optional)</span></label>'
        + '<textarea class="fi2" id="np-desc" rows="2" maxlength="300" style="resize:vertical;min-height:60px" placeholder="e.g. Freshly brewed espresso with steamed milk.">' + (existingDesc || '') + '</textarea>'
        + ''
        + '</div>';
    }



    // ============================================================
    // SELF-ORDERING QR MODULE
    // ============================================================
    var soQROrders = [];

    function getCafeSlug() {
      var name = (sett.businessName || 'cafename').toLowerCase().replace(/[^a-z0-9]/g, '');
      return name || 'cafename';
    }
    function getSOUrl() { return 'https://cafebuddy.ph/qr-order/' + getCafeSlug(); }

    function renderSelfOrderPage() {
      var tog = document.getElementById('so-toggle');
      if (tog) tog.checked = !!sett.selfOrderingActive;
      var urlEl = document.getElementById('so-url');
      if (urlEl) urlEl.textContent = getSOUrl();
      var cardUrl = document.getElementById('so-card-url');
      if (cardUrl) cardUrl.textContent = getSOUrl();
      var cardName = document.getElementById('so-card-cafename');
      if (cardName) cardName.textContent = (sett.businessName || 'Cafe Buddy').toUpperCase();
      // Preview via openSOPreview() inline modal
      // Payment toggles
      var qpm = sett.qrPayMethods || { cash: true, qr: true, card: false };
      var el;
      el = document.getElementById('qrpm-cash'); if (el) el.checked = !!qpm.cash;
      el = document.getElementById('qrpm-qr'); if (el) el.checked = !!qpm.qr;
      el = document.getElementById('qrpm-card'); if (el) el.checked = !!qpm.card;
      updateSOBanner();
      setTimeout(function () { drawSOQR('so-qr-canvas', 180); }, 150);
      renderSOIncoming();
    }

    function updateSOBanner() {
      var active = !!sett.selfOrderingActive;
      var dot = document.getElementById('so-banner-dot');
      var txt = document.getElementById('so-banner-txt');
      var badge = document.getElementById('so-badge');
      var banner = document.getElementById('so-banner');
      if (dot) { dot.style.background = active ? '#22c55e' : '#ccc'; dot.style.boxShadow = active ? '0 0 7px #22c55e' : ''; }
      if (txt) txt.textContent = active ? 'Self-ordering is ACTIVE — customers can scan and order now' : 'Self-ordering is INACTIVE — customers will see an unavailable page';
      if (banner) { banner.style.background = active ? '#f0faf4' : '#f5f5f5'; banner.style.borderColor = active ? '#b8e0cc' : '#eee'; banner.style.color = active ? '#1a7a4a' : '#888'; }
      if (badge) { badge.textContent = active ? 'ON' : 'OFF'; badge.style.background = active ? '#22c55e' : '#ef4444'; badge.style.display = 'inline-flex'; }
    }

    function toggleSelfOrdering(checked) {
      sett.selfOrderingActive = checked;
      updateSOBanner();
      // Sync to localStorage for customer page
      try {
        localStorage.setItem('cb_so_active_' + getCafeSlug(), checked ? '1' : '0');
        localStorage.setItem('cb_products_' + getCafeSlug(), JSON.stringify(products));
        localStorage.setItem('cb_categories_' + getCafeSlug(), JSON.stringify(categories));
        localStorage.setItem('cb_sett_' + getCafeSlug(), JSON.stringify({
          businessName: sett.businessName,
          qrPayMethods: sett.qrPayMethods || { cash: true, qr: true, card: false }
        }));
      } catch (e) { }
      toast(checked ? 'Self-ordering activated! Customers can now order.' : 'Self-ordering deactivated.');
    }

    function saveSOSettings() {
      sett.qrPayMethods = {
        cash: !!(document.getElementById('qrpm-cash') || {}).checked,
        qr: !!(document.getElementById('qrpm-qr') || {}).checked,
        card: !!(document.getElementById('qrpm-card') || {}).checked
      };
      try { localStorage.setItem('cb_sett_' + getCafeSlug(), JSON.stringify({ businessName: sett.businessName, qrPayMethods: sett.qrPayMethods })); } catch (e) { }
      toast('Payment settings saved');
    }

    function copySOLink() {
      var url = getSOUrl();
      if (navigator.clipboard) { navigator.clipboard.writeText(url).then(function () { toast('Link copied!'); }); }
      else { var ta = document.createElement('textarea'); ta.value = url; document.body.appendChild(ta); ta.select(); try { document.execCommand('copy'); } catch (e) { } document.body.removeChild(ta); toast('Link copied!'); }
    }

    function drawSOQR(canvasId, size) {
      var canvas = document.getElementById(canvasId);
      if (!canvas) return;
      canvas.width = size; canvas.height = size;
      var url = getSOUrl();
      var ctx = canvas.getContext('2d');
      ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, size, size);
      if (window.QRCode) {
        var tmp = document.createElement('div'); tmp.style.cssText = 'position:absolute;left:-9999px;top:-9999px';
        document.body.appendChild(tmp);
        try {
          new QRCode(tmp, { text: url, width: size, height: size, colorDark: '#0d2626', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.H });
          setTimeout(function () {
            var img = tmp.querySelector('img');
            if (img && img.complete && img.naturalWidth > 0) {
              ctx.drawImage(img, 0, 0, size, size);
            } else if (img) {
              img.onload = function () { ctx.drawImage(img, 0, 0, size, size); drawQRLogo(ctx, size); };
            }
            drawQRLogo(ctx, size);
            if (tmp.parentNode) tmp.parentNode.removeChild(tmp);
          }, 300);
        } catch (e) { if (tmp.parentNode) tmp.parentNode.removeChild(tmp); drawFallbackQR(canvas, url, size); }
      } else {
        drawFallbackQR(canvas, url, size);
      }
    }

    function drawQRLogo(ctx, size) {
      var ls = size * 0.2, lx = (size - ls) / 2, ly = (size - ls) / 2, r = ls * 0.2;
      ctx.save();
      ctx.shadowColor = 'rgba(0,0,0,.2)'; ctx.shadowBlur = 4;
      ctx.beginPath();
      if (ctx.roundRect) { ctx.roundRect(lx - 3, ly - 3, ls + 6, ls + 6, r + 3); }
      else { ctx.rect(lx - 3, ly - 3, ls + 6, ls + 6); }
      ctx.fillStyle = '#fff'; ctx.fill();
      ctx.shadowBlur = 0;
      ctx.beginPath();
      if (ctx.roundRect) { ctx.roundRect(lx, ly, ls, ls, r); }
      else { ctx.rect(lx, ly, ls, ls); }
      ctx.fillStyle = '#0d3535'; ctx.fill();
      ctx.fillStyle = '#fff';
      ctx.font = '700 ' + Math.round(ls * 0.54) + 'px DM Sans,system-ui,sans-serif';
      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
      ctx.fillText('C', lx + ls / 2, ly + ls / 2 + ls * 0.03);
      ctx.restore();
    }

    function drawFallbackQR(canvas, url, size) {
      var ctx = canvas.getContext('2d');
      ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, size, size);
      function sq(x, y, s, fill) { ctx.fillStyle = fill; ctx.fillRect(x, y, s, s); }
      function marker(ox, oy) {
        var m = Math.round(size * 0.18);
        sq(ox, oy, m, '#0d2626'); sq(ox + m * .14, oy + m * .14, m * .72, m * .72, '#fff'); sq(ox + m * .28, oy + m * .28, m * .44, m * .44, '#0d2626');
      }
      var p = Math.round(size * .1);
      marker(p, p); marker(size - p - Math.round(size * .18), p); marker(p, size - p - Math.round(size * .18));
      // data dots
      ctx.fillStyle = '#0d2626';
      var seed = 42;
      for (var i = 0; i < 180; i++) {
        seed = (seed * 1664525 + 1013904223) & 0xFFFFFFFF;
        var px = ((seed >>> 16) / (65536)) * size * .52 + size * .24;
        seed = (seed * 1664525 + 1013904223) & 0xFFFFFFFF;
        var py = ((seed >>> 16) / (65536)) * size * .52 + size * .24;
        ctx.fillRect(Math.round(px), Math.round(py), Math.round(size * .028), Math.round(size * .028));
      }
      drawQRLogo(ctx, size);
    }

    function downloadSOQR(type) {
      // Draw high-res QR before export
      drawSOQR('so-qr-canvas', 380);
      setTimeout(function () { _doDownloadSOQR(type); }, 600);
    }

    function _doDownloadSOQR(type) {
      var qc = document.getElementById('so-qr-canvas');
      if (!qc) { toast('QR not ready — wait a moment and try again'); return; }
      var cafeName = (sett.businessName || 'Cafe Buddy').toUpperCase();
      var url = getSOUrl().replace('https://', '');
      // Letter size canvas: 850×1100 (8.5"×11" at 100dpi)
      var W = 850, H = 1100;
      var canvas = document.createElement('canvas');
      canvas.width = W; canvas.height = H;
      var ctx = canvas.getContext('2d');

      // ── Background: dark teal gradient ──
      var bgGrad = ctx.createLinearGradient(0, 0, W, H);
      bgGrad.addColorStop(0, '#0b2e2e'); bgGrad.addColorStop(1, '#07201f');
      ctx.fillStyle = bgGrad; ctx.fillRect(0, 0, W, H);

      // ── Decorative dots grid ──
      ctx.save(); ctx.globalAlpha = 0.18; ctx.fillStyle = '#4db8b8';
      var gap = 80;
      for (var dx = 40; dx < W; dx += gap) { for (var dy = 40; dy < H; dy += gap) { ctx.beginPath(); ctx.arc(dx, dy, 3, 0, Math.PI * 2); ctx.fill(); } }
      ctx.restore();

      // ── Decorative large circles ──
      ctx.save(); ctx.globalAlpha = 0.07; ctx.fillStyle = '#2a9d9d';
      ctx.beginPath(); ctx.arc(-60, 180, 260, 0, Math.PI * 2); ctx.fill();
      ctx.beginPath(); ctx.arc(W + 60, H - 200, 280, 0, Math.PI * 2); ctx.fill();
      ctx.restore();

      // ── White card ──
      var cx = 40, cy = 60, cw = W - 80, ch = H - 120;
      ctx.fillStyle = '#ffffff';
      ctx.beginPath();
      if (ctx.roundRect) { ctx.roundRect(cx, cy, cw, ch, 28); }
      else {
        var r = 28;
        ctx.moveTo(cx + r, cy); ctx.lineTo(cx + cw - r, cy); ctx.arcTo(cx + cw, cy, cx + cw, cy + r, r);
        ctx.lineTo(cx + cw, cy + ch - r); ctx.arcTo(cx + cw, cy + ch, cx + cw - r, cy + ch, r);
        ctx.lineTo(cx + r, cy + ch); ctx.arcTo(cx, cy + ch, cx, cy + ch - r, r);
        ctx.lineTo(cx, cy + r); ctx.arcTo(cx, cy, cx + r, cy, r); ctx.closePath();
      }
      ctx.fill();

      // ── Teal accent bar at card top ──
      ctx.fillStyle = '#2a9d9d';
      ctx.fillRect(cx, cy, cw, 10);

      // ── CafeBuddy brand pill ──
      var pillW = 200, pillH = 44, pillX = W / 2 - pillW / 2, pillY = cy + 28;
      ctx.fillStyle = '#0d3535';
      ctx.beginPath();
      if (ctx.roundRect) { ctx.roundRect(pillX, pillY, pillW, pillH, 12); } else { ctx.rect(pillX, pillY, pillW, pillH); }
      ctx.fill();
      // C icon inside pill
      ctx.fillStyle = '#ffffff';
      ctx.beginPath();
      if (ctx.roundRect) { ctx.roundRect(pillX + 12, pillY + 8, 28, 28, 6); } else { ctx.rect(pillX + 12, pillY + 8, 28, 28); }
      ctx.fill();
      ctx.fillStyle = '#0d3535'; ctx.font = 'bold 16px system-ui,sans-serif';
      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
      ctx.fillText('C', pillX + 26, pillY + 22);
      // "Cafe" text
      ctx.fillStyle = '#ffffff'; ctx.font = 'bold 19px system-ui,sans-serif';
      ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
      ctx.fillText('Cafe', pillX + 48, pillY + 22);
      ctx.fillStyle = '#85d0d0';
      ctx.fillText('Buddy', pillX + 104, pillY + 22);

      // ── Cafe name ──
      ctx.fillStyle = '#0d2626'; ctx.font = '800 30px system-ui,sans-serif';
      ctx.textAlign = 'center'; ctx.textBaseline = 'top';
      var cn2 = cafeName.length > 24 ? cafeName.substring(0, 23) + '\u2026' : cafeName;
      ctx.fillText(cn2, W / 2, cy + 90);

      // ── Divider line ──
      ctx.strokeStyle = '#d4e8e8'; ctx.lineWidth = 1.5;
      ctx.beginPath(); ctx.moveTo(cx + 40, cy + 138); ctx.lineTo(cx + cw - 40, cy + 138); ctx.stroke();

      // ── TAP OR SCAN ──
      ctx.fillStyle = '#208080'; ctx.font = '900 40px system-ui,sans-serif';
      ctx.textBaseline = 'top';
      ctx.fillText('TAP OR SCAN', W / 2, cy + 158);
      ctx.fillStyle = '#4a7070'; ctx.font = '500 20px system-ui,sans-serif';
      ctx.fillText('TO PLACE YOUR ORDER', W / 2, cy + 210);

      // ── QR Code (generous padding, no text overlap) ──
      var qSz = 380, qPad = 20;
      var qX = (W - qSz) / 2, qY = cy + 260;
      // QR frame
      ctx.fillStyle = '#f0fafa';
      ctx.beginPath();
      if (ctx.roundRect) { ctx.roundRect(qX - qPad, qY - qPad, qSz + qPad * 2, qSz + qPad * 2, 18); } else { ctx.rect(qX - qPad, qY - qPad, qSz + qPad * 2, qSz + qPad * 2); }
      ctx.fill();
      ctx.strokeStyle = '#b8e8e8'; ctx.lineWidth = 2;
      ctx.beginPath();
      if (ctx.roundRect) { ctx.roundRect(qX - qPad, qY - qPad, qSz + qPad * 2, qSz + qPad * 2, 18); } else { ctx.strokeRect(qX - qPad, qY - qPad, qSz + qPad * 2, qSz + qPad * 2); }
      ctx.stroke();
      // Draw QR
      try { ctx.drawImage(qc, qX, qY, qSz, qSz); } catch (e) { }

      // ── URL (well below QR) ──
      var urlY = qY + qSz + qPad + 26;
      ctx.fillStyle = '#6b9090'; ctx.font = '500 18px system-ui,sans-serif';
      ctx.textBaseline = 'top'; ctx.textAlign = 'center';
      ctx.fillText(url, W / 2, urlY);

      // ── Separator dots ──
      var dotY = urlY + 50;
      ctx.strokeStyle = '#d4e8e8'; ctx.lineWidth = 1.5;
      ctx.beginPath(); ctx.moveTo(cx + 60, dotY); ctx.lineTo(W / 2 - 40, dotY); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(W / 2 + 40, dotY); ctx.lineTo(cx + cw - 60, dotY); ctx.stroke();
      [{ c: '#4db8b8' }, { c: '#85d0d0' }, { c: '#b8e8e8' }].forEach(function (d, i) {
        ctx.fillStyle = d.c; ctx.beginPath(); ctx.arc(W / 2 - 16 + i * 16, dotY, 5, 0, Math.PI * 2); ctx.fill();
      });

      // ── Self-ordering badge ──
      var badgeY = dotY + 22;
      var bw = 240, bh = 40, bx = W / 2 - bw / 2;
      ctx.fillStyle = '#0d3535';
      ctx.beginPath();
      if (ctx.roundRect) { ctx.roundRect(bx, badgeY, bw, bh, 20); } else { ctx.rect(bx, badgeY, bw, bh); }
      ctx.fill();
      ctx.fillStyle = '#ffffff'; ctx.font = '700 16px system-ui,sans-serif';
      ctx.textBaseline = 'middle'; ctx.textAlign = 'center';
      ctx.fillText('SELF ORDERING', W / 2, badgeY + bh / 2);

      if (type === 'image') {
        var dl = canvas.toDataURL('image/jpeg', 0.94);
        if (!dl || dl.length < 1000) { toast('Export failed — try again'); return; }
        var a = document.createElement('a');
        a.href = dl;
        a.download = 'CafeBuddy-QR-' + (sett.businessName || 'cafe').replace(/[^a-zA-Z0-9]+/g, '-') + '.jpg';
        document.body.appendChild(a); a.click(); document.body.removeChild(a);
        toast('QR standee downloaded!');
      } else {
        // PDF: open clean print window
        var imgData = canvas.toDataURL('image/png', 1.0);
        var pw = window.open('', '_blank', 'width=700,height=900');
        if (!pw) { toast('Allow pop-ups to print the standee'); return; }
        pw.document.open();
        pw.document.write('<!DOCTYPE html><html><head><title>QR Standee</title>'
          + '<style>*{margin:0;padding:0;box-sizing:border-box;}html,body{width:100%;height:100%;}body{background:#f0f4f4;display:flex;align-items:flex-start;justify-content:center;padding:20px;}'
          + 'img{width:100%;max-width:700px;display:block;border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.2);}'
          + '@media print{body{background:#fff;padding:0;width:8.5in;height:11in;}img{max-width:100%;width:100%;border-radius:0;box-shadow:none;page-break-inside:avoid;}}'
          + '