@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

    :root{
      --bg1:#eef3f9;
      --bg2:#f6f9fd;
      --bg3:#ffffff;
      --app-bg: linear-gradient(180deg, var(--bg1), var(--bg2) 45%, var(--bg3));
      --app-overlay:
        radial-gradient(900px 420px at 10% 0%, rgba(37,99,235,.08), transparent 60%),
        radial-gradient(800px 420px at 95% 0%, rgba(79,70,229,.06), transparent 60%);
      --login-bg:
        radial-gradient(900px 520px at 14% 18%, rgba(16,185,129,.20), transparent 60%),
        radial-gradient(760px 460px at 82% 58%, rgba(59,130,246,.18), transparent 55%),
        linear-gradient(135deg, #0b1020, #1a1031);
      --card:#ffffff;
      --ink:#1f2a44;
      --muted:#6b7a90;

      --green:#22c55e;
      --green2:#16a34a;
      --yellow:#fbbf24;
      --orange:#f59e0b;
      --red:#ef4444;
      --purple:#4f46e5;
      --cyan:#2563eb;

      --shadow: 0 10px 24px rgba(20,35,70,.08);
      --shadow2: 0 6px 16px rgba(20,35,70,.06);
      --radius: 12px;
      --radius2: 10px;

      --stroke: rgba(31, 42, 68, 0.10);
      --stroke2: rgba(31, 42, 68, 0.16);

      --font: "Manrope", "Segoe UI", Arial, sans-serif;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    html{
      -webkit-text-size-adjust:100%;
      text-size-adjust:100%;
    }
    body{
      margin:0;
      font-family:var(--font);
      color:var(--ink);
      background: var(--app-bg);
      overflow-x:hidden;
      font-synthesis:none;
    }

    body:before{
      content:"";
      position:fixed; inset:0;
      pointer-events:none;
      background: var(--app-overlay);
      opacity:1;
    }

    html.theme-loginbg{
      --app-bg: var(--login-bg);
      --app-overlay: none;
    }
    html.theme-loginbg .footerNote,
    html.theme-loginbg .footerShortcuts{
      color: rgba(229,231,235,.86);
      text-shadow: 0 10px 26px rgba(0,0,0,.45);
    }

    /* ===== Layout mais "tela cheia" ===== */
    .wrap{
      width: min(98vw, 1680px);
      margin: 10px auto;
      padding: 14px;
      min-height: calc(100dvh - 20px);
      display:flex;
      flex-direction:column;
    }

    /* Top Bar */
    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
      gap:14px;
      margin-bottom:14px;
    }

    .brand{
      display:flex; align-items:center; gap:12px;
      padding:12px 14px;
      background: #ffffff;
      border: 1px solid rgba(37,99,235,.18);
      border-radius: 10px;
      box-shadow: var(--shadow);
      min-width: 260px;
    }

    /* Logo */
    .logoImg{
      width:46px;height:46px;
      border-radius:10px;
      box-shadow: 0 8px 14px rgba(37,99,235,.25);
      border: 1px solid rgba(37,99,235,.25);
      background: linear-gradient(135deg, #2563eb, #3b82f6);
      display:grid;
      place-items:center;
      overflow:hidden;
      font-weight:900;
      color:#fff;
      letter-spacing:.5px;
    }
    .logoImg img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .logoImg span{
      width:100%;
      height:100%;
      display:grid;
      place-items:center;
      font-weight:900;
      color:#fff;
      letter-spacing:.5px;
      font-size:13px;
    }

    .brand h1{
      margin:0;
      font-size:15px;
      letter-spacing:.4px;
      color:#1f2a44;
      line-height:1.1;
      font-weight:800;
      text-transform:uppercase;
    }

    .right-tools{
      display:grid;
      gap:8px;
      justify-items:end;
      flex: 1 1 auto;
      min-width: 0;
      max-width: 100%;
    }
    .mobileMenuBtn{
      display:none;
      border:1px solid rgba(37,99,235,.28);
      background: linear-gradient(135deg, #2563eb, #3b82f6);
      color:#fff;
      border-radius:10px;
      padding:8px 12px;
      font-weight:900;
      font-size:12px;
      letter-spacing:.2px;
      box-shadow: 0 10px 20px rgba(37,99,235,.24);
      cursor:pointer;
    }
    .mobileQuickBar{
      display:none;
    }
    .mobileClockPill{
      display:none;
    }
    .mobileMenuHead{
      display:none;
    }
    .mobileMenuClose{
      border:1px solid rgba(18,28,65,.16);
      background:#fff;
      color:#1f2a44;
      border-radius:10px;
      padding:6px 10px;
      font-weight:900;
      cursor:pointer;
    }
    .mobileMenuBackdrop{
      display:none;
    }
    .rt-row{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
      min-width:0;
    }

    .pill{
      display:flex; align-items:center; gap:10px;
      padding:10px 12px;
      border-radius:10px;
      background: #ffffff;
      border:1px solid rgba(37,99,235,.18);
      color:#1f2a44;
      box-shadow: var(--shadow2);
      font-weight:700;
      font-size:13px;
      letter-spacing:.2px;
      cursor:pointer;
      user-select:none;
      touch-action:manipulation;
      max-width:100%;
    }
    .pill span{
      min-width:0;
    }
    .dot{
      width:10px;height:10px;border-radius:999px;
      background: var(--green);
      box-shadow: 0 0 0 6px rgba(59,226,106,.18);
    }
    .dot.closed{
      background: var(--red);
      box-shadow: 0 0 0 6px rgba(255,77,109,.16);
    }
    .dot.role-operator{
      background: var(--orange);
      box-shadow: 0 0 0 6px rgba(255,122,61,.18);
    }
    .dot.role-manager{
      background: var(--green);
      box-shadow: 0 0 0 6px rgba(59,226,106,.18);
    }

    .btn{
      cursor:pointer;
      user-select:none;
      touch-action:manipulation;
      border:0;
      padding:12px 14px;
      border-radius:10px;
      font-weight:700;
      letter-spacing:.3px;
      color:#ffffff;
      background: linear-gradient(135deg, #2563eb, #3b82f6);
      box-shadow: 0 10px 20px rgba(37,99,235,.28);
      border: 1px solid rgba(37,99,235,.35);
      display:flex; align-items:center; gap:10px;
    }
    .btn .icon{
      width:34px;height:34px;border-radius:14px;
      background: rgba(255,255,255,.22);
      display:grid;place-items:center;
      box-shadow: 0 8px 16px rgba(37,99,235,.18);
      border: 1px solid rgba(255,255,255,.35);
    }
    .slimBtn{
      padding:6px 10px;
      font-size:11px;
      border-radius:8px;
      gap:8px;
      letter-spacing:.15px;
    }
    .slimBtn .icon{
      width:22px;
      height:22px;
      border-radius:9px;
      font-size:11px;
    }

    /* Layout */
    .grid{
      display:grid;
      grid-template-columns: 1.45fr .90fr;
      gap:14px;
    }
    @media (max-width: 980px){
      .grid{grid-template-columns:1fr}
      .right-tools{justify-items:start}
      .rt-row{justify-content:flex-start}
    }
    @media (max-width: 720px){
      .wrap{
        width: 100%;
        margin: 0;
        padding: 10px;
      }
      .topbar{
        flex-direction:column;
        align-items:stretch;
      }
      .brand{
        min-width:0;
        width:100%;
        justify-content:center;
      }
      .right-tools{
        width:100%;
        justify-items:stretch;
      }
      .rt-row{
        justify-content:flex-start;
      }
      .pill{
        width:100%;
        justify-content:space-between;
      }
      .rt-bottom .btn{
        width:100%;
      }
      .grid{
        gap:10px;
      }
      .card{
        border-radius:12px;
      }
      .products{
        grid-template-columns:1fr;
      }
      .cart{
        position:static;
        top:auto;
      }
      .modal{
        width:100%;
        max-height: calc(100vh - 20px);
      }
      .modalBody{
        max-height: calc(100vh - 140px);
      }
      .formGrid{
        grid-template-columns:1fr;
      }
      .ctaRow{
        grid-template-columns:1fr;
      }
      .cta{
        width:100%;
      }
      .toastStack{
        right:10px;
        left:10px;
      }
    }

    /* Cards */
    .card{
      background: var(--card);
      border: 1px solid rgba(226,232,240,.9);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .card:before{ display:none; }

    .card-head{
      padding:16px 16px 12px 16px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
    }
    .title{
      margin:0;
      font-size:18px;
      letter-spacing:.2px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 12px;
      border-radius:10px;
      font-weight:700;
      font-size:12px;
      letter-spacing:.35px;
      color:#1f2a44;
      background: rgba(37,99,235,.08);
      box-shadow: 0 8px 18px rgba(20,35,70,.08);
      border:1px solid rgba(37,99,235,.18);
      white-space:nowrap;
    }

    .card-body{padding:0 16px 16px 16px}

    /* Search + categories */
    .searchRow{
      display:flex; gap:10px; flex-wrap:wrap;
      margin-top:10px;
      align-items:center;
    }
    .search{
      flex: 1 1 280px;
      display:flex; align-items:center; gap:10px;
      padding:12px 14px;
      border-radius: 10px;
      border: 1px solid rgba(226,232,240,.9);
      background:#fff;
      box-shadow: 0 8px 16px rgba(20,35,70,.06);
    }
    .search input{
      border:0; outline:0; width:100%;
      font-size:14px; font-weight:900;
    }
    .chips{
      display:block;
      margin-top:12px;
    }
    .chipRow{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .chipRow.subRow{
      margin-top:8px;
    }
    .chip{
      padding:10px 12px;
      border-radius:10px;
      font-weight:700;
      font-size:12px;
      border:1px solid rgba(226,232,240,.9);
      background: rgba(255,255,255,.95);
      box-shadow: 0 8px 14px rgba(20,35,70,.05);
      cursor:pointer;
      user-select:none;
    }
    .chip.active{
      background: rgba(37,99,235,.12);
      border-color: rgba(37,99,235,.35);
    }

    /* Product list */
    .products{
      margin-top:14px;
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap:12px;
    }
    @media (max-width: 540px){
      .products{grid-template-columns:1fr}
    }

    .prod{
      background:#fff;
      border:1px solid rgba(226,232,240,.9);
      border-radius: 12px;
      box-shadow: 0 10px 18px rgba(20,35,70,.08);
      overflow:hidden;
      position:relative;
    }
    .prod .inner{
      padding:14px;
      display:grid;
      gap:10px;
    }
    .prod h3{
      margin:0;
      font-size:15px;
      letter-spacing:.2px;
    }
    .priceRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .price{
      font-weight:1000;
      font-size:16px;
    }
    .mini{
      color:var(--muted);
      font-weight:800;
      font-size:12px;
    }
    .add{
      border:0;
      cursor:pointer;
      padding:10px 12px;
      border-radius: 10px;
      font-weight:700;
      letter-spacing:.2px;
      background: linear-gradient(135deg, #2563eb, #3b82f6);
      color:#ffffff;
      box-shadow: 0 10px 18px rgba(37,99,235,.25);
      border: 1px solid rgba(37,99,235,.35);
      display:flex; align-items:center; gap:8px;
      justify-content:center;
    }
    .add span{
      width:26px; height:26px;
      border-radius:12px;
      display:grid; place-items:center;
      background: rgba(255,255,255,.35);
      border: 1px solid rgba(255,255,255,.6);
    }

    .prodActions{
      display:flex;
      gap:8px;
      justify-content:flex-end;
      margin-top:2px;
    }
    .miniBtn{
      border:1px solid rgba(226,232,240,.9);
      background: rgba(255,255,255,.95);
      box-shadow: 0 8px 14px rgba(20,35,70,.05);
      border-radius: 10px;
      padding:8px 10px;
      cursor:pointer;
      font-weight:700;
      font-size:12px;
      color:#1a1f2f;
    }
    .miniBtn.danger{
      border-color: rgba(239,68,68,.28);
      background: rgba(239,68,68,.08);
    }

    /* Cart */
    .cart{
      position:sticky;
      top:14px;
      align-self:start;
    }
    .cartBox{
      padding:14px;
      display:grid;
      gap:12px;
    }
    .cartHeader{
      display:block;
    }
    .big{
      margin:0;
      font-size:18px;
      letter-spacing:.2px;
    }
    .orderMeta{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:8px;
      margin-top:6px;
      width:100%;
    }
    .meta{
      padding:8px 10px;
      border-radius:999px;
      background: rgba(123,60,255,.12);
      border:1px solid rgba(123,60,255,.18);
      font-weight:1000;
      color:#2a1c59;
      font-size:12px;
      width:100%;
      min-width:0;
      min-height:34px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
    }
    .cartTotalTag{
      padding:8px 10px;
      border-radius:999px;
      font-weight:1000;
      font-size:13px;
      letter-spacing:.2px;
      grid-column:1 / -1;
      width:100%;
      min-height:38px;
      justify-content:center;
    }
    .cartItems{
      display:grid; gap:10px;
    }
    .item{
      display:flex;
      gap:10px;
      align-items:center;
      padding:12px;
      background:#fff;
      border:1px solid rgba(18,28,65,.16);
      border-radius:16px;
      box-shadow: 0 12px 22px rgba(0,0,0,.08);
    }
    .emoji{
      width:46px;height:46px;
      border-radius:16px;
      display:grid; place-items:center;
      background: linear-gradient(135deg, rgba(255,216,74,.35), rgba(255,122,61,.22));
      border:1px solid rgba(255,122,61,.22);
      font-size:22px;
    }
    .item h4{margin:0;font-size:14px}
    .item p{margin:2px 0 0 0; font-size:12px; color:var(--muted); font-weight:900}
    .qty{
      margin-left:auto;
      display:flex; align-items:center; gap:8px;
      background: rgba(24,214,255,.10);
      border:1px solid rgba(24,214,255,.18);
      padding:8px 10px;
      border-radius:999px;
      font-weight:1000;
      color:#0b3a44;
    }
    .qty button{
      width:28px;height:28px;
      border-radius:12px;
      border:1px solid rgba(24,214,255,.22);
      background:#fff;
      cursor:pointer;
      font-weight:1000;
    }

    .totals{
      margin-top:4px;
      padding:12px;
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(255,216,74,.22), rgba(59,226,106,.18), rgba(24,214,255,.14));
      border: 1px solid rgba(18, 28, 65, 0.10);
      display:grid;
      gap:8px;
    }
    .line{
      display:flex;
      justify-content:space-between;
      font-weight:1000;
      color:#1b2338;
    }
    .line small{color:var(--muted); font-weight:900}
    .grand{
      font-size:18px;
      letter-spacing:.2px;
    }

    .ctaRow{
      display:grid;
      gap:10px;
      margin-top:2px;
    }
    .cta{
      border:0;
      cursor:pointer;
      padding:14px 14px;
      border-radius: 18px;
      font-weight:1100;
      letter-spacing:.2px;
      box-shadow: 0 16px 30px rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.55);
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
    }
    .cta.primary{
      background: linear-gradient(135deg, var(--yellow), var(--orange));
      color:#15121b;
    }
    .cta.secondary{
      background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.78));
      color:#1a1f2f;
    }
    .cta .bubble{
      width:34px;height:34px;border-radius:14px;
      background: rgba(255,255,255,.35);
      border:1px solid rgba(255,255,255,.55);
      display:grid; place-items:center;
    }

    .emptyState{
      padding:14px;
      border-radius:16px;
      border:1px dashed rgba(18,28,65,.22);
      background: rgba(255,255,255,.7);
      color: var(--muted);
      font-weight:1000;
      text-align:center;
    }

    .footerNote{
      margin-top:auto;
      padding-top:10px;
      text-align:center;
      color: #1f2a44;
      font-weight:900;
      font-size:12px;
    }
    .footerShortcuts{
      margin-top:6px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:center;
      font-size:11px;
      color: #1f2a44;
      font-weight:900;
      line-height:1.4;
    }
    kbd{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:4px 6px;
      border-radius:8px;
      background: #ffffff;
      border:1px solid rgba(226,232,240,.9);
      color:#1f2a44;
      font-weight:1000;
      font-size:10px;
      min-width:24px;
      box-shadow: 0 6px 12px rgba(20,35,70,.08);
    }

    /* ===== Toasts ===== */
    .toastStack{
      position:fixed;
      right:16px;
      bottom:16px;
      display:grid;
      gap:8px;
      z-index:2000;
      pointer-events:none;
    }
    .toast{
      min-width:220px;
      max-width:320px;
      background:#fff;
      border:1px solid rgba(18,28,65,.16);
      border-left:6px solid rgba(24,214,255,.65);
      border-radius:14px;
      padding:10px 12px;
      box-shadow: 0 12px 24px rgba(0,0,0,.16);
      display:flex;
      gap:10px;
      align-items:flex-start;
      font-weight:900;
      font-size:12px;
      pointer-events:auto;
      animation: toastIn .18s ease-out;
    }
    .toast .ticon{
      width:22px;height:22px;
      border-radius:8px;
      display:grid;place-items:center;
      background: rgba(24,214,255,.14);
      border:1px solid rgba(24,214,255,.25);
      font-size:12px;
    }
    .toast.success{ border-left-color: rgba(59,226,106,.9); }
    .toast.success .ticon{ background: rgba(59,226,106,.18); border-color: rgba(59,226,106,.35); }
    .toast.error{ border-left-color: rgba(255,77,109,.9); }
    .toast.error .ticon{ background: rgba(255,77,109,.18); border-color: rgba(255,77,109,.35); }
    .toast.info{ border-left-color: rgba(24,214,255,.9); }
    @keyframes toastIn{
      from{transform:translateY(6px);opacity:.0}
      to{transform:translateY(0);opacity:1}
    }

    .signatureMark{
      position:fixed !important;
      inset:auto 10px 8px auto;
      display:block;
      width:24px;
      max-width:2.8vw;
      height:auto;
      z-index:50;
      pointer-events:none;
      user-select:none;
      opacity:.9;
      filter:
        grayscale(100%)
        contrast(230%)
        brightness(108%)
        drop-shadow(0 0 .55px rgba(0,0,0,.95))
        drop-shadow(0 0 .55px rgba(0,0,0,.95));
    }
    @media (max-width: 900px){
      .signatureMark{ display:none !important; }
    }
    @media print{
      .signatureMark{ display:none !important; }
    }

    /* ===== Loading ===== */
    .loading{
      position:relative;
      pointer-events:none;
      opacity:.85;
    }
    .loading::after{
      content:"";
      position:absolute;
      right:10px;
      top:50%;
      width:14px;height:14px;
      border-radius:50%;
      border:2px solid rgba(0,0,0,.15);
      border-top-color: rgba(0,0,0,.55);
      transform: translateY(-50%);
      animation: spin .9s linear infinite;
    }
    @keyframes spin{ to{ transform: translateY(-50%) rotate(360deg);} }

    .invalid{
      border-color: rgba(255,77,109,.75) !important;
      box-shadow: 0 0 0 2px rgba(255,77,109,.15) !important;
    }

    .locked{
      opacity:.55;
      cursor:not-allowed;
    }
    #systemModal .locked{
      filter:none;
    }

    /* ===== Sistema ===== */
    #systemModal .modal{
      width:min(1040px, 100%);
    }
    #systemModal .modalHeader{
      padding:18px 20px;
      border-bottom:1px solid rgba(18,28,65,.12);
    }
    #systemModal .modalHeader h3{
      font-size:19px;
      letter-spacing:.2px;
      color:#121a30;
      font-weight:1000;
    }
    #systemModal #systemClose{
      min-width:56px;
      min-height:56px;
      border-radius:18px;
      font-size:24px;
      font-weight:1000;
      background:#fff;
      border:1px solid rgba(18,28,65,.16);
      box-shadow: 0 10px 20px rgba(20,35,70,.08);
      display:grid;
      place-items:center;
      padding:0;
    }
    #systemModal .modalBody{
      padding:18px;
      gap:14px;
      background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.98));
    }
    #systemModal .formGrid{
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    .sysBrandCard{
      border:1px solid rgba(18,28,65,.10);
      border-radius:20px;
      padding:12px;
      background:#fff;
      box-shadow: 0 12px 24px rgba(20,35,70,.07);
      display:grid;
      gap:10px;
    }
    .sysBrandTitle{
      font-size:17px;
      line-height:1.1;
      color:#1f2a44;
      font-weight:1000;
      letter-spacing:.2px;
    }
    .sysBrandIntro{
      display:grid;
      grid-template-columns: 84px minmax(0,1fr);
      gap:10px;
      align-items:center;
    }
    .sysBrandPreview{
      width:84px;
      height:84px;
      border-radius:16px;
      border:1px solid rgba(18,28,65,.12);
      background:#f3f5f8;
      object-fit:cover;
      box-shadow: 0 8px 18px rgba(20,35,70,.10);
    }
    .sysBrandIntroText{
      margin:0;
      color:#1f2a44;
      font-size:16px;
      line-height:1.25;
      font-weight:1000;
    }
    .sysBrandActions{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap:10px;
    }
    .sysBrandActions.single{
      grid-template-columns:minmax(0,1fr);
      max-width:calc(50% - 5px);
    }
    #systemModal .sysBrandActions .btn,
    #systemModal .sysBrandActions .btnGhost{
      width:100%;
      justify-content:center;
      min-height:42px;
      border-radius:14px;
      font-size:15px;
      font-weight:1000;
      transition:transform .12s ease, box-shadow .12s ease, background-color .15s ease, border-color .15s ease;
    }
    #systemModal .sysBrandActions .btn:active,
    #systemModal .sysBrandActions .btnGhost:active{
      transform:translateY(1px);
    }
    #companyNameSaveBtn{
      background: linear-gradient(135deg, #2563eb, #3b82f6);
      color:#ffffff;
      border:1px solid rgba(37,99,235,.35);
      box-shadow: 0 10px 20px rgba(37,99,235,.28);
    }
    #companyNameSaveBtn:hover{
      background: linear-gradient(135deg, #1d4ed8, #2563eb);
      border-color: rgba(29,78,216,.45);
    }
    #companyLogoUploadBtn,
    #companyLogoRemoveBtn{
      background:#ffffff;
      color:#1f2a44;
      border:1px solid rgba(18,28,65,.12);
      box-shadow:none;
    }
    #companyLogoUploadBtn:hover{
      color:#121a30;
      border-color:rgba(18,28,65,.20);
      background:#fbfcfe;
    }
    #companyLogoRemoveBtn{
      background: rgba(239,68,68,.06);
      border-color: rgba(239,68,68,.22);
      color: rgba(153,27,27,.96);
    }
    #companyLogoRemoveBtn:hover{
      background: rgba(239,68,68,.10);
      border-color: rgba(239,68,68,.32);
      color: rgba(127,29,29,.98);
    }
    #companyLogoUploadBtn[disabled],
    #companyLogoRemoveBtn[disabled],
    #companyNameSaveBtn[disabled]{
      opacity:.65;
      cursor:not-allowed;
      box-shadow:none;
    }
    #companyNameInput{
      font-size:17px;
      line-height:1.1;
      color:#1f2a44;
      border-radius:14px;
      padding:11px 14px;
      font-weight:1000;
      text-transform:uppercase;
      letter-spacing:.3px;
      background:#f7f8fb;
      border:1px solid rgba(18,28,65,.10);
      box-shadow:none;
    }
    #companyNameInput::placeholder{
      color:#c4c8cf;
      font-weight:900;
      text-transform:none;
    }
    .sysBrandCard .hint{
      font-size:12px;
      color:#1f2a44;
      font-weight:1000;
    }
    .sysGrid{
      display:block;
      column-count:2;
      column-gap:14px;
    }
    .sysGrid > .sysCard{
      break-inside: avoid;
      margin:0 0 14px 0;
    }
    .sysGrid > .sysCard:last-child{
      margin-bottom:0;
    }
    @media (max-width: 860px){
      .sysGrid{column-count:1}
      .sysBrandIntroText{
        font-size:15px;
      }
    }
    @media (max-width: 560px){
      #systemModal .modalHeader{
        padding:14px 14px;
      }
      #systemModal .modalBody{
        padding:12px;
        gap:12px;
      }
      #systemModal .formGrid{
        grid-template-columns:1fr;
      }
      #systemModal #systemClose{
        min-width:46px;
        min-height:46px;
        border-radius:14px;
        font-size:20px;
      }
      .sysBrandCard{
        border-radius:14px;
        padding:10px;
      }
      .sysBrandTitle{
        font-size:15px;
      }
      .sysBrandIntro{
        grid-template-columns:60px minmax(0,1fr);
        gap:8px;
      }
      .sysBrandPreview{
        width:60px;
        height:60px;
        border-radius:12px;
      }
      .sysBrandIntroText{
        font-size:14px;
      }
      .sysBrandActions{
        grid-template-columns:1fr;
      }
      .sysBrandActions.single{
        max-width:none;
      }
      #systemModal .sysBrandActions .btn,
      #systemModal .sysBrandActions .btnGhost{
        min-height:40px;
        border-radius:12px;
        font-size:14px;
      }
      #companyNameInput{
        font-size:15px;
        border-radius:12px;
        padding:10px 12px;
      }
      .sysBrandCard .hint{
        font-size:11px;
      }
    }
    .sysCard{
      background:#fff;
      border:1px solid rgba(18,28,65,.16);
      border-radius:16px;
      padding:12px;
      box-shadow: 0 12px 22px rgba(0,0,0,.08);
      display:grid;
      gap:10px;
    }
    .sysCard.compact{
      padding:10px;
      gap:8px;
    }
    .sysTitle{
      font-weight:1000;
      font-size:14px;
    }
    #systemModal .sysCard,
    #systemModal .sysBrandCard{
      border-color: rgba(18,28,65,.12);
      box-shadow: 0 16px 34px rgba(20,35,70,.10);
    }
    #systemModal .sysCard{
      border-radius:18px;
      padding:14px;
      gap:12px;
    }
    #systemModal .sysCard.compact{
      padding:12px;
      gap:10px;
    }
    #systemModal .sysTitle{
      font-size:12px;
      letter-spacing:.35px;
      text-transform:uppercase;
      color: rgba(31,42,68,.86);
    }
    #systemModal .hint{
      color: rgba(31,42,68,.78);
    }
    @media (max-width: 560px){
      #systemModal .sysCard{
        padding:12px;
        border-radius:14px;
        gap:10px;
      }
      #systemModal .sysCard.compact{
        padding:10px;
        gap:8px;
      }
    }
    .diagBox{
      padding:10px;
      border-radius:12px;
      border:1px dashed rgba(18,28,65,.25);
      background: rgba(255,255,255,.7);
      font-size:11px;
      color:#1a1f2f;
      font-weight:900;
      white-space:pre-wrap;
    }
    .logList{
      max-height:180px;
      overflow:auto;
      border:1px solid rgba(18,28,65,.16);
      border-radius:12px;
      background:#fff;
      font-size:11px;
    }
    .logRow{
      padding:8px 10px;
      border-bottom:1px solid rgba(18,28,65,.08);
      display:grid;
      gap:4px;
    }
    .logRow:last-child{border-bottom:0}
    .logMeta{
      display:flex;
      justify-content:space-between;
      font-weight:1000;
      color:#111;
    }
    .logMsg{
      color:var(--muted);
      font-weight:900;
      word-break:break-word;
    }

    .shortcutList{
      display:grid;
      gap:8px;
      font-size:12px;
      font-weight:900;
      color:#1a1f2f;
    }
    .sysMini{
      margin-top:8px;
      padding:10px;
      border-radius:10px;
      border:1px dashed rgba(226,232,240,.9);
      background: rgba(255,255,255,.8);
      display:grid;
      gap:6px;
    }
    .sysMini div{
      display:flex;
      justify-content:space-between;
      font-size:11px;
      color: var(--muted);
      font-weight:800;
    }
    .sysMini b{
      color:#1f2a44;
      font-weight:900;
    }
    .switchRow{
      display:flex;
      align-items:center;
      gap:10px;
      padding:8px 10px;
      border-radius:10px;
      border:1px solid rgba(226,232,240,.9);
      background:#fff;
      font-size:12px;
      font-weight:800;
      color:#1f2a44;
    }
    .switchRow input[type="checkbox"]{
      width:18px;
      height:18px;
    }
    #systemModal .formGrid{
      grid-template-columns: 1fr;
    }
    #systemModal .btn,
    #systemModal .btnGhost{
      border-radius:10px;
      width:100%;
      justify-content:center;
    }
    #systemModal .btnGhost{
      font-weight:700;
    }
    #systemModal .sysBtnGrid{
      display:grid;
      gap:8px;
    }
    #systemModal .sysBtnGrid2,
    #systemModal .sysBtnGrid2x2{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #systemModal .sysBtnGrid .btn,
    #systemModal .sysBtnGrid .btnGhost{
      min-height:38px;
      padding:8px 10px;
      border-radius:12px;
      font-size:12px;
      font-weight:1000;
      letter-spacing:.2px;
      gap:8px;
      box-shadow:none;
    }
    #systemModal .sysBtnGrid .btn .icon{
      width:26px;
      height:26px;
      border-radius:10px;
      box-shadow:none;
    }
    .addonCategoryRow{
      display:grid;
      grid-template-columns:minmax(0, 1fr) auto;
      gap:8px;
      align-items:start;
    }
    .addonCategoryDeleteBtn{
      min-width:148px;
      white-space:nowrap;
    }
    .catEditor{
      display:grid;
      gap:10px;
    }
    .catRow{
      display:grid;
      grid-template-columns: 38px minmax(0, 1fr) minmax(120px, 160px) auto 86px;
      gap:8px;
      align-items:center;
      padding:8px;
      border:1px solid rgba(18,28,65,.12);
      border-radius:12px;
      background:#fff;
    }
    .catPreview{
      width:34px;height:34px;
      border-radius:10px;
      display:grid;place-items:center;
      background: rgba(24,214,255,.12);
      border:1px solid rgba(24,214,255,.2);
      font-size:16px;
    }
    .catRow input{
      width:100%;
      min-width:0;
      padding:8px 10px;
      border-radius:10px;
      font-size:12px;
      font-weight:900;
    }
    .catEmojiChooseBtn{
      white-space:nowrap;
    }
    .catRow .miniBtn{
      min-width:0;
      justify-content:center;
      text-align:center;
    }
    #categoryModal .modal{
      width:min(860px, 100%);
      max-width:calc(100vw - 16px);
    }
    #categoryModal .modalBody{
      overflow-x:hidden;
    }
    #categoryModal .modalFooter{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap:8px;
    }
    #categoryModal .modalFooter .btn,
    #categoryModal .modalFooter .btnGhost{
      width:100%;
      min-width:0;
      justify-content:center;
      text-align:center;
      white-space:normal;
    }
    .emojiRow{
      display:flex;
      gap:8px;
      align-items:center;
    }
    .emojiRow input{flex:1}
    .emojiGrid{
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
      gap:8px;
    }
    .emojiBtn{
      width:34px;height:34px;
      border-radius:10px;
      border:1px solid rgba(18,28,65,.18);
      background:#fff;
      cursor:pointer;
      font-size:16px;
      display:grid;place-items:center;
      box-shadow: 0 6px 12px rgba(0,0,0,.08);
    }
    @media (max-width: 520px){
      .catRow{
        grid-template-columns: 34px 1fr;
      }
      .catRow input[data-field="label"]{ grid-column: 2 / -1; }
      .catRow input[data-field="emoji"]{ grid-column: 1 / -1; }
      .catEmojiChooseBtn{ grid-column: 1 / -1; }
      .catRow .miniBtn{
        grid-column: 1 / -1;
        width:100%;
        justify-content:center;
      }
      #categoryModal .modalFooter{
        grid-template-columns: 1fr;
      }
    }

    /* ===== Modais ===== */
    .modalOverlay{
      position:fixed; inset:0;
      background: rgba(15,23,42,.55);
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
      z-index:999;
      overflow-y:auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    /* ===== Acesso (Login) ===== */
    #accessLoginModal{
      z-index:3000;
      --access-card-w: clamp(320px, 34vw, 420px);
      padding:0;
      align-items:stretch;
      justify-content:center;
      background: var(--login-bg);
    }
    html.access-locked #accessLoginModal{
      display:flex;
    }
    html.access-locked body{
      overflow:hidden;
    }
    html.access-locked .wrap{
      filter: blur(6px);
      pointer-events:none;
      user-select:none;
    }
    html.access-locked #signatureMark{
      pointer-events:none;
      opacity:.2;
    }
    #accessLoginModal .accessLayout{
      width:min(1120px, 100%);
      min-height:100vh;
      min-height:100dvh;
      display:grid;
      grid-template-columns: 1.15fr var(--access-card-w);
      grid-template-rows: auto auto;
      align-items:start;
      align-content:center;
      column-gap: clamp(18px, 4vw, 48px);
      row-gap: 18px;
      padding: clamp(18px, 4vw, 44px);
      margin:0 auto;
    }
    #accessLoginModal .accessHero{ display: contents; }
    #accessLoginModal .accessHeroCopy{ grid-column: 1; grid-row: 1; }
    #accessLoginModal .accessHeroArt{ grid-column: 1; grid-row: 2; }
    #accessLoginModal .accessCard{ grid-column: 2; grid-row: 2; }
    @media (max-width: 920px){
      #accessLoginModal{ padding:18px; }
      #accessLoginModal .accessLayout{
        min-height:auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        align-items:start;
        align-content:center;
        gap:18px;
        padding:0;
      }
      #accessLoginModal .accessHero{ display:none; }
      #accessLoginModal .accessCard{ grid-column: 1; grid-row: 1; min-height:auto; }
    }
    #accessLoginModal .accessHero{
      color:#e5e7eb;
    }
    #accessLoginModal .accessHeroCopy{
      display:grid;
      gap:10px;
    }
    #accessLoginModal .accessHeroLead{
      font-size:32px;
      line-height:1.04;
      font-weight:1000;
      color: rgba(229,231,235,.92);
      letter-spacing:.2px;
    }
    #accessLoginModal .accessHeroTitle{
      font-size:44px;
      line-height:1.03;
      font-weight:1000;
      letter-spacing:.2px;
      color: rgba(52,211,153,.96);
      text-shadow: 0 16px 40px rgba(16,185,129,.12);
    }
    #accessLoginModal .accessHeroText{
      font-size:14px;
      font-weight:900;
      max-width:42ch;
      color: rgba(229,231,235,.72);
    }
    #accessLoginModal .accessHeroArt{
      display:flex;
      align-items:flex-start;
      justify-content:center;
    }
    #accessLoginModal #accessLogoPreview{
      display:block;
      box-sizing:border-box;
      width:100%;
      max-width:var(--access-card-w);
      height:auto;
      border-radius:24px;
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.10);
      padding:14px;
      box-shadow: 0 34px 70px rgba(0,0,0,.38);
    }
    #accessLoginModal .accessCard{
      background: linear-gradient(180deg, rgba(41,37,72,.92), rgba(17,24,39,.82));
      border:1px solid rgba(255,255,255,.10);
      border-radius:22px;
      box-shadow: 0 34px 70px rgba(0,0,0,.44);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      overflow:hidden;
      box-sizing:border-box;
      display:flex;
      flex-direction:column;
      min-height: var(--access-card-w);
    }
    #accessLoginModal .accessCardHead{
      padding:18px 18px 0 18px;
      display:grid;
      gap:6px;
      text-align:center;
    }
    #accessLoginModal #accessLoginTitle{
      margin:0;
      font-size:22px;
      font-weight:1000;
      letter-spacing:.25px;
      color: rgba(52,211,153,.96);
    }
    #accessLoginModal .accessCardSub{
      font-size:12px;
      font-weight:900;
      letter-spacing:.25px;
      color: rgba(229,231,235,.70);
    }
    #accessLoginModal .accessCardBody{
      padding:16px 18px 18px 18px;
      display:grid;
      gap:12px;
      flex:1 1 auto;
      align-content:center;
    }
    #accessLoginModal [hidden]{
      display:none !important;
    }
    #accessLoginModal .accessHelperRow{
      display:flex;
      width:100%;
      justify-content:center;
      align-items:center;
      min-height:20px;
      margin-top:2px;
    }
    #accessLoginModal .accessTextBtn{
      appearance:none;
      border:0;
      background:transparent;
      padding:0;
      display:inline-flex;
      width:auto;
      text-align:center;
      justify-content:center;
      color: rgba(110,231,183,.96);
      font-size:13px;
      font-weight:900;
      letter-spacing:.18px;
      cursor:pointer;
      transition: color .16s ease, transform .16s ease;
    }
    #accessLoginModal .accessTextBtn:hover{
      color:#a7f3d0;
    }
    #accessLoginModal .accessTextBtn:active{
      transform: translateY(1px);
    }
    #accessLoginModal .accessTextBtn:focus-visible{
      outline:2px solid rgba(52,211,153,.72);
      outline-offset:4px;
      border-radius:8px;
    }
    #accessLoginModal label{
      color: rgba(229,231,235,.86);
    }
    #accessLoginModal input{
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);
      color:#e5e7eb;
      box-shadow:none;
    }
    #accessLoginModal input::placeholder{
      color: rgba(229,231,235,.36);
    }
    #accessLoginModal input:focus{
      border-color: rgba(52,211,153,.55);
      box-shadow: 0 0 0 4px rgba(52,211,153,.16);
    }
    #accessLoginModal input:disabled{
      opacity:.7;
      cursor:not-allowed;
    }
    #accessLoginModal .btn{
      width:100%;
      justify-content:center;
      border-radius:14px;
      font-weight:1000;
      letter-spacing:.5px;
    }
    #accessLoginModal #accessLoginBtn{
      background: linear-gradient(135deg, #10b981, #22c55e);
      border: 1px solid rgba(34,197,94,.45);
      box-shadow: 0 18px 30px rgba(16,185,129,.18);
    }
    #accessLoginModal #accessLoginBtn:hover{
      filter: brightness(1.03);
    }
    #accessLoginModal #accessLoginBtn:active{
      transform: translateY(1px);
    }
    #accessLoginModal .btnGhost{
      width:100%;
      justify-content:center;
      border-radius:14px;
      color: rgba(229,231,235,.90);
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);
      box-shadow:none;
    }
    #accessLoginModal .diagBox{
      color: rgba(229,231,235,.92);
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
    }
    #accessLoginModal .hint{
      text-align:center;
    }
    #accessLoginMsg.error{
      border-color: rgba(255,77,109,.55);
      background: rgba(255,77,109,.12);
    }
    #accessSignupModal{
      z-index:3100;
      align-items:center;
      justify-content:center;
      padding:18px;
      background: rgba(8,10,25,.52);
    }
    #accessSignupModal .accessCard{
      width:min(460px, 100%);
      max-width:calc(100vw - 20px);
      background: linear-gradient(180deg, rgba(41,37,72,.96), rgba(17,24,39,.90));
      border:1px solid rgba(255,255,255,.10);
      border-radius:22px;
      box-shadow: 0 34px 70px rgba(0,0,0,.44);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      overflow:hidden;
      box-sizing:border-box;
      display:flex;
      flex-direction:column;
      max-height: calc(100vh - 36px);
      max-height: calc(100dvh - 36px);
    }
    #accessSignupModal .accessCardHead{
      padding:18px 18px 0 18px;
      display:grid;
      gap:6px;
      text-align:center;
    }
    #accessSignupModal #accessSignupTitle{
      margin:0;
      font-size:22px;
      font-weight:1000;
      letter-spacing:.25px;
      color: rgba(52,211,153,.96);
    }
    #accessSignupModal .accessCardSub{
      font-size:12px;
      font-weight:900;
      letter-spacing:.25px;
      color: rgba(229,231,235,.70);
    }
    #accessSignupModal .accessCardBody{
      padding:16px 18px 18px 18px;
      display:grid;
      gap:12px;
      align-content:start;
      overflow-y:auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    #accessSignupModal label{
      color: rgba(229,231,235,.86);
    }
    #accessSignupModal input{
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);
      color:#e5e7eb;
      box-shadow:none;
    }
    #accessSignupModal input::placeholder{
      color: rgba(229,231,235,.36);
    }
    #accessSignupModal input:focus{
      border-color: rgba(52,211,153,.55);
      box-shadow: 0 0 0 4px rgba(52,211,153,.16);
    }
    #accessSignupModal .btn{
      width:100%;
      justify-content:center;
      border-radius:14px;
      font-weight:1000;
      letter-spacing:.5px;
      background: linear-gradient(135deg, #10b981, #22c55e);
      border:1px solid rgba(34,197,94,.45);
      box-shadow: 0 18px 30px rgba(16,185,129,.18);
    }
    #accessSignupModal .btnGhost{
      width:100%;
      justify-content:center;
      border-radius:14px;
      color: rgba(229,231,235,.90);
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);
      box-shadow:none;
    }
    #accessSignupModal .diagBox{
      color: rgba(229,231,235,.92);
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
    }
    #accessSignupModal .diagBox.error{
      border-color: rgba(255,77,109,.55);
      background: rgba(255,77,109,.12);
    }
    #accessSignupModal .hint{
      text-align:center;
    }
    #confirmModal,
    #choiceModal{
      z-index:1200;
    }
    #promptModal{
      z-index:3200;
    }
    #promptModal.accessPromptTheme{
      background: var(--login-bg);
      align-items:center;
      justify-content:center;
      padding:18px;
    }
    #promptModal.accessPromptTheme .modal{
      background: linear-gradient(180deg, rgba(41,37,72,.96), rgba(17,24,39,.90));
      border:1px solid rgba(255,255,255,.10);
      box-shadow: 0 34px 70px rgba(0,0,0,.44);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    #promptModal.accessPromptTheme .modalHeader{
      border-bottom:1px solid rgba(255,255,255,.10);
    }
    #promptModal.accessPromptTheme .modalHeader h3{
      color: rgba(52,211,153,.96);
      font-weight:1000;
    }
    #promptModal.accessPromptTheme .closeX{
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: rgba(229,231,235,.90);
    }
    #promptModal.accessPromptTheme .modalBody{
      color:#e5e7eb;
    }
    #promptModal.accessPromptTheme .diagBox{
      color: rgba(229,231,235,.92);
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
    }
    #promptModal.accessPromptTheme label{
      color: rgba(229,231,235,.86);
    }
    #promptModal.accessPromptTheme input{
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);
      color:#e5e7eb;
      box-shadow:none;
    }
    #promptModal.accessPromptTheme input::placeholder{
      color: rgba(229,231,235,.36);
    }
    #promptModal.accessPromptTheme input:focus{
      border-color: rgba(52,211,153,.55);
      box-shadow: 0 0 0 4px rgba(52,211,153,.16);
    }
    #promptModal.accessPromptTheme .btn{
      background: linear-gradient(135deg, #10b981, #22c55e);
      border:1px solid rgba(34,197,94,.45);
      color:#ffffff;
      box-shadow: 0 18px 30px rgba(16,185,129,.18);
    }
    #promptModal.accessPromptTheme .btnGhost{
      color: rgba(229,231,235,.90);
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);
      box-shadow:none;
    }
    .modal{
      width:min(720px, 100%);
      max-width:calc(100vw - 16px);
      background: #ffffff;
      border: 1px solid rgba(226,232,240,.9);
      border-radius: 12px;
      box-shadow: 0 18px 36px rgba(20,35,70,.18);
      position:relative;
      display:flex;
      flex-direction:column;
      overflow:hidden;
      max-height: calc(100vh - 36px);
      max-height: calc(100dvh - 36px);
    }
    .modalCompact{
      width:min(560px, 100%);
      border-radius:16px;
      box-shadow: 0 20px 38px rgba(20,35,70,.20);
    }
    .modalCompact .modalHeader{
      padding:12px 14px;
    }
    .modalCompact .modalBody{
      padding:14px;
      gap:10px;
    }
    .modalCompact .modalFooter{
      padding:10px 14px 14px 14px;
      gap:8px;
    }
    .modalCompact .diagBox{
      border-radius:12px;
      font-size:13px;
      padding:10px 12px;
    }
    .modalCompact .btn,
    .modalCompact .btnGhost{
      min-height:40px;
      padding:10px 14px;
      border-radius:12px;
      justify-content:center;
    }
    .choiceOptions{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap:8px;
      margin-top:8px;
      align-items:start;
    }
    .choiceOptions .btn,
    .choiceOptions .btnGhost{
      width:100%;
      margin:0;
      font-size:15px;
      letter-spacing:.15px;
      box-shadow: 0 6px 14px rgba(20,35,70,.12);
      border-radius:12px;
      justify-content:center;
    }
    #choiceModal .modalFooter,
    #confirmModal .modalFooter,
    #promptModal .modalFooter{
      justify-content:flex-end;
    }
    #choiceModal .btnGhost,
    #confirmModal .btnGhost,
    #promptModal .btnGhost{
      background:#f7f9fc;
      border-color: rgba(18,28,65,.20);
    }
    .modal:before{
      display:none;
    }
    .modalHeader{
      padding:14px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      border-bottom:1px solid rgba(18,28,65,.10);
    }
    .modalHeader h3{
      margin:0;
      font-size:16px;
      letter-spacing:.2px;
    }
    .modalActions{
      display:flex;
      align-items:center;
      gap:8px;
    }
    .closeX{
      border:1px solid rgba(18,28,65,.16);
      background: rgba(255,255,255,.9);
      border-radius: 14px;
      padding:8px 10px;
      cursor:pointer;
      font-weight:1000;
    }
    .modalBody{
      padding:16px;
      display:grid;
      gap:12px;
      flex:1 1 auto;
      min-height:0;
      max-height: calc(100vh - 140px);
      max-height: calc(100dvh - 140px);
      overflow-y:auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      scroll-padding-bottom: 96px;
    }
    .formGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
    }
    @media (max-width: 520px){
      .formGrid{grid-template-columns:1fr}
    }
    .field{
      display:grid;
      gap:6px;
    }
    label{
      font-weight:1000;
      color:#1b2338;
      font-size:12px;
      letter-spacing:.25px;
    }
    input, select, textarea{
      width:100%;
      border:1px solid rgba(18,28,65,.16);
      border-radius: 14px;
      padding:12px 12px;
      font-weight:900;
      font-size:14px;
      outline:none;
      box-shadow: 0 10px 18px rgba(0,0,0,.06);
      background: #fff;
    }
    textarea{min-height:80px;resize:vertical}
    .modalFooter{
      padding:14px 16px 16px 16px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:flex-end;
    }
    .modalFooter .btn,
    .modalFooter .btnGhost{
      min-width:0;
      max-width:100%;
    }
    .btnGhost{
      border:1px solid rgba(18,28,65,.16);
      background: rgba(255,255,255,.88);
      border-radius: 999px;
      padding:12px 14px;
      cursor:pointer;
      font-weight:1000;
      touch-action:manipulation;
    }
    .printModal .modal{
      width:min(420px, 100%);
    }
    .printBody{
      padding:12px;
    }
    .printFrame{
      width:100%;
      height:70vh;
      border:1px solid rgba(18,28,65,.16);
      border-radius:14px;
      background:#fff;
      box-shadow: 0 10px 18px rgba(0,0,0,.06);
    }

    /* Segmented buttons */
    .seg{
      display:flex; gap:10px; flex-wrap:wrap;
    }
    .seg button{
      border:1px solid rgba(18,28,65,.16);
      background: rgba(255,255,255,.92);
      border-radius: 999px;
      padding:10px 12px;
      cursor:pointer;
      font-weight:1000;
      box-shadow: 0 10px 18px rgba(0,0,0,.06);
    }
    .seg button.active{
      background: linear-gradient(135deg, rgba(59,226,106,.25), rgba(24,214,255,.18));
      border-color: rgba(24,214,255,.35);
    }
    .hint{
      font-size:12px;
      color: var(--muted);
      font-weight:900;
    }
    .addonCheckList{
      display:grid;
      gap:8px;
      max-height:180px;
      overflow:auto;
      padding:10px;
      border:1px solid rgba(18,28,65,.16);
      border-radius:14px;
      background:#fff;
      box-shadow: 0 10px 18px rgba(0,0,0,.06);
    }
    .addonCheck{
      display:flex;
      align-items:flex-start;
      gap:8px;
      font-size:13px;
      font-weight:900;
      color:#1f2a44;
    }
    .addonCheck input[type="checkbox"]{
      width:18px;
      height:18px;
      margin-top:1px;
      padding:0;
      border:0;
      border-radius:0;
      background:transparent;
      accent-color:#0ea5e9;
      box-shadow:none;
    }
    .paymentSplitSwitch{
      margin-top:2px;
      justify-content:space-between;
      align-items:center;
      flex-wrap:wrap;
    }
    .paymentSplitToggleLine{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:220px;
    }
    .paymentSplitPeopleInline{
      display:flex;
      align-items:center;
      gap:8px;
      margin-left:auto;
    }
    .paymentSplitPeopleInline input{
      width:78px;
      padding:8px 10px;
      border-radius:10px;
      font-weight:900;
    }
    .paymentSplitStepper{
      display:grid;
      grid-template-columns: 36px minmax(70px, 88px) 36px;
      gap:6px;
      align-items:center;
    }
    .paymentSplitStepper input{
      width:100%;
      text-align:center;
    }
    .stepBtn{
      min-height:36px;
      border:1px solid rgba(18,28,65,.16);
      border-radius:10px;
      background:#fff;
      color:#1f2a44;
      font-size:18px;
      font-weight:1000;
      cursor:pointer;
      box-shadow: 0 8px 16px rgba(0,0,0,.06);
    }
    .stepBtn:disabled{
      opacity:.5;
      cursor:not-allowed;
      box-shadow:none;
    }
    #paymentMethodSingleWrap{
      display:grid;
    }
    .paymentSplitWrap{
      display:grid;
      gap:8px;
    }
    .checkoutCashWrap{
      display:grid;
      gap:8px;
      margin-top:10px;
      padding-top:10px;
      border-top:1px dashed rgba(18,28,65,.16);
    }
    #checkoutCashChange[readonly]{
      background: rgba(15,23,42,.04);
    }
    .checkoutCashHintError{
      color:#b91c1c;
    }
    .paymentSplitList{
      display:grid;
      gap:8px;
    }
    .paymentSplitCard{
      display:grid;
      gap:8px;
      padding:10px;
      border:1px solid rgba(18,28,65,.12);
      border-radius:12px;
      background:#fff;
      box-shadow: 0 8px 16px rgba(0,0,0,.04);
    }
    .paymentSplitRow{
      display:grid;
      grid-template-columns: minmax(140px,1.5fr) minmax(120px,1fr) minmax(110px,.9fr);
      gap:8px;
      align-items:end;
    }
    .paymentSplitCashRow{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:8px;
    }
    .splitChange[readonly]{
      background: rgba(15,23,42,.04);
    }
    .splitCashHintError{
      color:#b91c1c;
    }
    .paymentSplitRow > *{
      min-width:0;
    }
    #paymentRow{
      grid-template-columns:minmax(0,1fr) 170px;
      align-items:start;
    }
    #paymentRow #paymentBlock{
      min-width:0;
    }
    .paymentSplitHintMismatch{
      color:#b91c1c;
    }
    @media (max-width: 900px){
      .paymentSplitRow{
        grid-template-columns: 1fr 1fr;
      }
      .paymentSplitCashRow{
        grid-template-columns: 1fr 1fr;
      }
      .paymentSplitRow .splitPerson{
        grid-column:1 / -1;
      }
      .paymentSplitRow .splitMethod{
        grid-column:1 / 2;
      }
      .paymentSplitRow .splitAmount{
        grid-column:2 / 3;
      }
      .paymentSplitPeopleInline{
        width:100%;
        justify-content:flex-start;
        margin-left:0;
      }
      .paymentSplitStepper{
        grid-template-columns: 34px minmax(74px, 88px) 34px;
      }
    }
    @media (max-width: 620px){
      .paymentSplitRow{
        grid-column:1 / -1;
        grid-template-columns:1fr;
      }
      .paymentSplitCashRow{
        grid-template-columns:1fr;
      }
      .paymentSplitRow .splitMethod{
        grid-column:1 / -1;
      }
      .paymentSplitRow .splitAmount{
        grid-column:1 / -1;
      }
    }
    @media (max-width: 560px){
      #paymentRow{
        grid-template-columns:1fr;
      }
    }

    /* ===== Mesas/Cozinha ===== */
    #opsTablesModal,
    #opsKitchenModal,
    #deliveryModal,
    #receivableModal{
      background: rgba(15,23,42,.22);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    #opsTablesModal .modal,
    #opsKitchenModal .modal,
    #deliveryModal .modal,
    #receivableModal .modal{
      width:min(940px, 100%);
      border-radius:30px;
      border:1px solid rgba(226,232,240,.96);
      background: linear-gradient(180deg, #ffffff, #f8fbff 52%, #f4f8ff);
      box-shadow: 0 28px 70px rgba(15,23,42,.18);
      overflow:hidden;
    }
    #opsTablesModal .modalHeader,
    #opsKitchenModal .modalHeader,
    #deliveryModal .modalHeader,
    #receivableModal .modalHeader{
      padding:18px 22px;
      border-bottom:1px solid rgba(226,232,240,.95);
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
    }
    #opsTablesModal .modalHeader h3,
    #opsKitchenModal .modalHeader h3,
    #deliveryModal .modalHeader h3,
    #receivableModal .modalHeader h3{
      font-size:17px;
      font-weight:1000;
      color:#1f2a44;
      letter-spacing:.1px;
    }
    #opsTablesModal .modalHeader > div,
    #opsKitchenModal .modalHeader > div,
    #deliveryModal .modalHeader > div,
    #receivableModal .modalHeader > div{
      display:flex;
      align-items:center;
      gap:10px;
    }
    #opsTablesModal .modalBody,
    #opsKitchenModal .modalBody,
    #deliveryModal .modalBody,
    #receivableModal .modalBody{
      padding:18px 20px 22px;
      background: transparent;
      gap:14px;
    }
    #opsTablesModal .modalHeader .btnGhost,
    #opsKitchenModal .modalHeader .btnGhost,
    #deliveryModal .modalHeader .btnGhost,
    #receivableModal .modalHeader .btnGhost{
      min-height:42px;
      padding:10px 16px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.30);
      background:#ffffff;
      box-shadow: 0 8px 18px rgba(15,23,42,.06);
    }
    #opsTablesModal .modalHeader .btnGhost:hover,
    #opsKitchenModal .modalHeader .btnGhost:hover,
    #deliveryModal .modalHeader .btnGhost:hover,
    #receivableModal .modalHeader .btnGhost:hover{
      background:#f8fbff;
      border-color:rgba(96,165,250,.32);
    }
    #opsTablesModal .closeX,
    #opsKitchenModal .closeX,
    #deliveryModal .closeX,
    #receivableModal .closeX{
      width:42px;
      height:42px;
      padding:0;
      display:grid;
      place-items:center;
      border-radius:999px;
      background:#ffffff;
      box-shadow: 0 8px 18px rgba(15,23,42,.06);
    }
    #opsTables,
    #opsKitchen,
    #opsKitchenHistory,
    #deliveryList,
    #deliveryHistoryList,
    #receivableList{
      display:grid;
      gap:12px;
      align-items:start;
    }
    #opsTables{
      grid-template-columns:1fr;
    }
    #opsKitchen{
      grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    }
    #opsKitchenHistory{
      grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    }
    #deliveryList{
      grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    }
    #deliveryHistoryList{
      grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    }
    #receivableList{
      grid-template-columns:1fr;
    }
    #opsTables .opsEmpty,
    #opsKitchen .opsEmpty,
    #opsKitchenHistory .opsEmpty,
    #deliveryList .opsEmpty,
    #deliveryHistoryList .opsEmpty,
    #receivableList .opsEmpty{
      grid-column:1 / -1;
    }
    .opsCard{
      background:#fff;
      border:1px solid rgba(18,28,65,.16);
      border-radius:16px;
      padding:12px;
      box-shadow: 0 12px 22px rgba(0,0,0,.08);
      display:grid;
      gap:10px;
    }
    #opsTablesModal .opsCard,
    #opsKitchenModal .opsCard,
    #deliveryModal .opsCard,
    #receivableModal .opsCard{
      position:relative;
      overflow:hidden;
      border-radius:20px;
      padding:16px;
      gap:12px;
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      border:1px solid rgba(226,232,240,.95);
      box-shadow: 0 12px 24px rgba(15,23,42,.06);
    }
    #opsTablesModal .opsCard::before,
    #opsKitchenModal .opsCard::before,
    #deliveryModal .opsCard::before,
    #receivableModal .opsCard::before{
      display:none;
    }
    #opsTablesModal .opsCard > .opsTitle,
    #opsKitchenModal .opsCard > .opsTitle,
    #deliveryModal .opsCard > .opsTitle,
    #receivableModal .opsCard > .opsTitle{
      color:#1f2a44;
    }
    #opsTablesModal .opsCard > .hint,
    #opsKitchenModal .opsCard > .hint,
    #deliveryModal .opsCard > .hint,
    #receivableModal .opsCard > .hint{
      color:#64748b;
    }
    .opsItem{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      padding:10px;
      border-radius:12px;
      background: rgba(24,214,255,.10);
      border:1px solid rgba(24,214,255,.18);
    }
    .opsTitle{
      font-weight:1000;
      font-size:13px;
    }
    .opsMeta{
      font-size:11px;
      color: var(--muted);
      font-weight:900;
      margin-top:2px;
    }
    .opsItems{
      margin-top:4px;
      display:grid;
      gap:2px;
    }
    .opsItem .miniBtn{
      margin-top:6px;
    }
    .opsEmpty{
      padding:10px;
      border-radius:12px;
      border:1px dashed rgba(18,28,65,.22);
      background: rgba(255,255,255,.7);
      color: var(--muted);
      font-weight:1000;
      text-align:center;
      font-size:12px;
    }
    .opsList{
      display:grid;
      gap:8px;
    }
    .opsItem .miniBtn{
      white-space:nowrap;
    }
    .mesaCard{
      display:grid;
      align-content:start;
      justify-items:stretch;
      gap:0;
      padding:0;
      border-radius:22px;
      background: linear-gradient(180deg, #ffffff, #fbfdff);
      border:1px solid rgba(148,163,184,.22);
      box-shadow: 0 10px 22px rgba(15,23,42,.05);
      min-height:unset;
      text-align:left;
      position:relative;
      overflow:hidden;
      color:#1f2a44;
    }
    .mesaCard::before{
      display:none;
    }
    .mesaCard > .opsMeta,
    .mesaCard > .mesaActions,
    .mesaCard > .opsItems{
      width:100%;
    }
    .mesaHeaderRow{
      display:flex;
      align-items:center;
      gap:10px;
      padding:14px 16px;
      width:100%;
    }
    .mesaTrigger{
      width:auto;
      flex:1 1 auto;
      min-width:0;
      border:0;
      background:transparent;
      display:grid;
      grid-template-columns:auto minmax(0, 1fr) auto;
      align-items:center;
      gap:14px;
      padding:0;
      text-align:left;
      cursor:pointer;
      color:inherit;
    }
    .mesaTriggerId{
      display:grid;
      gap:3px;
      min-width:72px;
    }
    .mesaTriggerId span{
      font-size:10px;
      font-weight:1000;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:#64748b;
    }
    .mesaTriggerId strong{
      font-size:23px;
      line-height:1;
      font-weight:1000;
      color:#1f2a44;
    }
    .mesaTriggerSummary{
      display:grid;
      gap:4px;
      min-width:0;
    }
    .mesaTriggerTotal{
      font-size:17px;
      line-height:1.2;
      font-weight:1000;
      color:#1f2a44;
    }
    .mesaTriggerMeta{
      font-size:11px;
      line-height:1.45;
      font-weight:900;
      color:#64748b;
      word-break:break-word;
    }
    .mesaTriggerChevron{
      width:12px;
      height:12px;
      border-right:2px solid #64748b;
      border-bottom:2px solid #64748b;
      transform: rotate(45deg);
      transition: transform .22s ease;
      margin-right:4px;
    }
    .mesaCard.is-expanded .mesaTriggerChevron{
      transform: rotate(225deg);
      margin-top:6px;
    }
    .mesaDetails{
      max-height:0;
      overflow:hidden;
      opacity:0;
      transition:max-height .28s ease, opacity .18s ease;
    }
    .mesaCard.is-expanded .mesaDetails{
      max-height:960px;
      opacity:1;
    }
    .mesaDetailsInner{
      display:grid;
      gap:12px;
      padding:0 16px 16px;
      border-top:1px solid rgba(226,232,240,.90);
    }
    .mesaStats{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:8px;
    }
    .mesaStat{
      display:grid;
      gap:4px;
      padding:10px 12px;
      border-radius:14px;
      background:#ffffff;
      border:1px solid rgba(226,232,240,.95);
      box-shadow:none;
    }
    .mesaStat span{
      font-size:9px;
      font-weight:1000;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:#64748b;
    }
    .mesaStat strong{
      font-size:15px;
      line-height:1;
      font-weight:1000;
      color:#1f2a44;
    }
    .mesaGuestLine{
      display:grid;
      gap:5px;
      padding:10px 12px;
      border-radius:14px;
      background:#f8fbff;
      border:1px solid rgba(191,219,254,.70);
    }
    .mesaGuestLine span{
      font-size:9px;
      font-weight:1000;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:#64748b;
    }
    .mesaGuestLine strong{
      font-size:12px;
      line-height:1.4;
      color:#1f2a44;
      word-break:break-word;
    }
    .mesaMoment{
      font-size:11px;
      line-height:1.4;
      font-weight:800;
      color:#64748b;
    }
    .mesaItemsBlock{
      display:grid;
      gap:8px;
    }
    .mesaItemsTitle{
      font-size:10px;
      font-weight:1000;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:#64748b;
    }
    .mesaActions{
      display:flex;
      justify-content:flex-end;
      margin-left:auto;
    }
    .mesaActions .miniBtn{
      margin-top:0;
      min-width:120px;
      min-height:38px;
      justify-content:center;
      padding:8px 16px;
      border-radius:12px;
      border-color:rgba(14,165,233,.16);
      background: rgba(255,255,255,.90);
      box-shadow: 0 12px 18px rgba(14,165,233,.10);
    }
    .mesaActions .miniBtn{
      color:#ffffff;
      border-color:transparent;
      background: linear-gradient(135deg, #0ea5e9, #22c55e);
      box-shadow: 0 14px 22px rgba(14,165,233,.24);
    }
    .mesaQuickAction{
      margin-top:0;
      margin-left:auto;
      min-width:108px;
      min-height:38px;
      justify-content:center;
      padding:8px 16px;
      border-radius:12px;
      color:#ffffff;
      border:0;
      background: linear-gradient(135deg, #0ea5e9, #22c55e);
      box-shadow: 0 14px 22px rgba(14,165,233,.24);
      white-space:nowrap;
    }
    .mesaCard .opsItems{
      margin-top:0;
      padding:10px 12px;
      border-radius:14px;
      background:#ffffff;
      border:1px solid rgba(226,232,240,.95);
      text-align:left;
      gap:6px;
    }
    .mesaCard .opsItems .opsMeta{
      margin-top:0;
      font-size:11px;
      line-height:1.4;
      color:#475569;
    }
    .mesaItemsEmpty{
      margin-top:0;
      font-size:11px;
      color:#64748b;
    }
    .deliveryCard{
      display:grid;
      align-content:start;
      gap:8px;
      border-radius:22px;
      background: linear-gradient(180deg, #ffffff, #fbfdff);
      border:1px solid rgba(148,163,184,.22);
      box-shadow: 0 10px 22px rgba(15,23,42,.05);
      position:relative;
      overflow:hidden;
      color:#1f2a44;
    }
    .deliveryCard::before{
      display:none;
    }
    .deliveryHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin-bottom:2px;
    }
    .deliveryStatus{
      border-radius:999px;
      padding:5px 10px;
      font-size:11px;
      font-weight:1000;
      letter-spacing:.25px;
      text-transform:uppercase;
    }
    .deliveryStatus.is-prep{
      color:#0f4b64;
      background: rgba(6,182,212,.14);
      border:1px solid rgba(6,182,212,.22);
    }
    .deliveryStatus.is-dispatched{
      color:#155e2c;
      background: rgba(34,197,94,.14);
      border:1px solid rgba(34,197,94,.24);
    }
    .deliveryStatus.is-finalized{
      color:#4c1d95;
      background: rgba(167,139,250,.18);
      border:1px solid rgba(167,139,250,.30);
    }
    .deliveryTotal{
      font-size:14px;
      font-weight:1000;
      color:#1f2a44;
    }
    .deliveryCard .opsTitle{
      color:#1f2a44;
    }
    .deliveryCard .opsMeta{
      color:#64748b;
    }
    .deliveryCard .miniBtn{
      width:100%;
      justify-content:center;
      margin-top:4px;
    }
    .receivableToolbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .receivableToolbar .opsTitle{
      font-size:13px;
      font-weight:1000;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:#1f2a44;
    }
    .receivableToolbar .btn{
      min-height:42px;
      padding:10px 16px;
      border-radius:16px;
      box-shadow: 0 12px 24px rgba(37,99,235,.14);
    }
    .receivableCard{
      display:grid;
      align-content:start;
      gap:0;
      padding:0;
      border-radius:18px;
      background:#ffffff;
      border:1px solid rgba(148,163,184,.22);
      box-shadow: 0 10px 22px rgba(15,23,42,.05);
      position:relative;
      overflow:hidden;
    }
    .receivableCard::before{
      display:none;
    }
    .receivableTrigger{
      width:100%;
      border:0;
      background:transparent;
      display:grid;
      grid-template-columns:minmax(0, 1fr) auto auto;
      gap:12px;
      align-items:center;
      padding:14px;
      text-align:left;
      cursor:pointer;
      color:inherit;
    }
    .receivableTriggerMain{
      min-width:0;
    }
    .receivableIdentity{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    .receivableAvatar{
      width:48px;
      height:48px;
      border-radius:14px;
      display:grid;
      place-items:center;
      flex:0 0 auto;
      font-size:17px;
      font-weight:1000;
      color:#0f3d57;
      background: linear-gradient(180deg, #eff6ff, #e0f2fe);
      border:1px solid rgba(125,211,252,.50);
      box-shadow:none;
    }
    .receivableIdentityText{
      display:grid;
      gap:2px;
      min-width:0;
    }
    .receivableEyebrow{
      font-size:10px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:#64748b;
    }
    .receivableName{
      font-size:20px;
      font-weight:1000;
      line-height:1.1;
      color:#1f2a44;
      word-break:break-word;
    }
    .receivableTriggerMeta{
      font-size:12px;
      line-height:1.4;
      font-weight:800;
      color:#64748b;
      word-break:break-word;
    }
    .receivableTriggerSide{
      min-width:108px;
      display:grid;
      gap:5px;
      justify-items:end;
      text-align:right;
    }
    .receivableTriggerTotal{
      font-size:16px;
      line-height:1.1;
      font-weight:1000;
      color:#1f2a44;
    }
    .receivableTriggerChevron{
      width:10px;
      height:10px;
      border-right:2px solid #64748b;
      border-bottom:2px solid #64748b;
      transform: rotate(45deg);
      transition: transform .22s ease;
      margin-right:2px;
    }
    .receivableCard.is-expanded .receivableTriggerChevron{
      transform: rotate(225deg);
      margin-top:4px;
    }
    .receivableDetails{
      max-height:0;
      overflow:hidden;
      opacity:0;
      transition:max-height .28s ease, opacity .18s ease;
    }
    .receivableCard.is-expanded .receivableDetails{
      max-height:960px;
      opacity:1;
    }
    .receivableDetailsInner{
      display:grid;
      gap:12px;
      padding:0 14px 14px;
      border-top:1px solid rgba(226,232,240,.90);
      background:#fcfdff;
    }
    .receivableStatus{
      border-radius:999px;
      padding:5px 10px;
      font-size:10px;
      font-weight:1000;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:#0369a1;
      background: rgba(14,165,233,.10);
      border:1px solid rgba(125,211,252,.45);
      width:max-content;
      justify-self:end;
    }
    .receivableTimestamp{
      font-size:11px;
      line-height:1.4;
      font-weight:800;
      color:#64748b;
    }
    .receivableStats{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:8px;
    }
    .receivableStat{
      display:grid;
      gap:4px;
      padding:10px 12px;
      border-radius:12px;
      background:#ffffff;
      border:1px solid rgba(226,232,240,.95);
      box-shadow:none;
    }
    .receivableStat span{
      font-size:9px;
      font-weight:1000;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:#64748b;
    }
    .receivableStat strong{
      font-size:15px;
      line-height:1;
      font-weight:1000;
      color:#1f2a44;
    }
    .receivableItemsBlock{
      display:grid;
      gap:8px;
    }
    .receivableItemsTitle{
      font-size:10px;
      font-weight:1000;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:#64748b;
    }
    .receivableActions{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:8px;
      justify-content:stretch;
    }
    .receivableActions .miniBtn{
      margin-top:0;
      width:100%;
      justify-content:center;
      min-height:40px;
      min-width:0;
      padding:8px 14px;
      border-radius:12px;
      border-color:rgba(148,163,184,.28);
      background:#ffffff;
      box-shadow:none;
      color:#1f2a44;
    }
    .receivableActions .wide{
      color:#ffffff;
      border-color:transparent;
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      box-shadow: 0 10px 18px rgba(37,99,235,.20);
    }
    .receivableCard .opsItems{
      margin-top:0;
      padding:10px 12px;
      border-radius:12px;
      background:#ffffff;
      border:1px solid rgba(226,232,240,.95);
      text-align:left;
      gap:6px;
    }
    .receivableCard .opsItems .opsMeta{
      margin-top:0;
      font-size:11px;
      line-height:1.4;
      color:#475569;
    }
    .receivableItemsEmpty{
      margin-top:0;
      font-size:11px;
      color:#64748b;
    }
    .kitchenCard{
      display:grid;
      align-content:start;
      gap:8px;
      border-radius:22px;
      background: linear-gradient(180deg, #ffffff, #fbfdff);
      border:1px solid rgba(148,163,184,.22);
      box-shadow: 0 10px 22px rgba(15,23,42,.05);
      position:relative;
      overflow:hidden;
      color:#1f2a44;
    }
    .kitchenCard::before{
      display:none;
    }

    .mesaQuickAction,
    .deliveryCard .miniBtn,
    .kitchenCard .miniBtn,
    .receivableActions .wide{
      color:#ffffff;
      border:1px solid rgba(37,99,235,.35);
      background: linear-gradient(135deg, #2563eb, #3b82f6);
      box-shadow: 0 10px 18px rgba(37,99,235,.25);
    }
    .kitchenHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin-bottom:2px;
    }
    .kitchenStatus{
      border-radius:999px;
      padding:5px 10px;
      font-size:11px;
      font-weight:1000;
      letter-spacing:.25px;
      text-transform:uppercase;
      color:#7c2d12;
      background: rgba(251,146,60,.18);
      border:1px solid rgba(251,146,60,.30);
    }
    .kitchenStatus.is-ready{
      color:#166534;
      background: rgba(34,197,94,.16);
      border:1px solid rgba(34,197,94,.28);
    }
    .kitchenQty{
      font-size:14px;
      font-weight:1000;
      color:#1f2a44;
    }
    .kitchenCard .opsTitle{
      color:#1f2a44;
    }
    .kitchenCard .opsMeta{
      color:#64748b;
    }
    .kitchenCard .miniBtn{
      width:100%;
      justify-content:center;
      margin-top:4px;
    }
    @media (max-width: 760px){
      #opsTables{
        grid-template-columns:1fr;
      }
      #opsKitchen{
        grid-template-columns:1fr;
      }
      #opsKitchenHistory{
        grid-template-columns:1fr;
      }
      #deliveryList{
        grid-template-columns:1fr;
      }
      #deliveryHistoryList{
        grid-template-columns:1fr;
      }
      #receivableList{
        grid-template-columns:1fr;
      }
      .receivableTrigger{
        grid-template-columns:1fr auto;
        gap:10px;
      }
      .receivableTriggerSide{
        grid-column:1 / 2;
        justify-items:start;
        text-align:left;
        min-width:0;
      }
      .receivableStatus{
        justify-self:start;
      }
      .receivableTriggerChevron{
        grid-row:1 / span 2;
        justify-self:end;
      }
      .mesaTrigger{
        grid-template-columns:minmax(0, 1fr) auto;
        gap:10px;
      }
      .mesaTriggerId{
        min-width:0;
      }
      .mesaTriggerSummary{
        grid-column:1 / 2;
      }
      .mesaTriggerChevron{
        grid-row:1 / span 2;
        justify-self:end;
      }
      .mesaHeaderRow{
        align-items:center;
        gap:8px;
      }
      .mesaActions{
        justify-content:flex-end;
      }
      .receivableActions{
        grid-template-columns:1fr;
        justify-content:stretch;
      }
      .mesaStats,
      .receivableStats{
        grid-template-columns:1fr 1fr;
      }
    }
    @media (max-width: 560px){
      .mesaStats,
      .receivableStats{
        grid-template-columns:1fr;
      }
      .mesaActions .miniBtn{
        width:auto;
        min-width:110px;
      }
      .mesaHeaderRow{
        flex-wrap:wrap;
      }
      .mesaQuickAction{
        justify-self:end;
      }
      .receivableActions .miniBtn{
        width:100%;
        min-width:0;
      }
    }

    @media (max-width: 720px){
      #opsTablesModal .modal,
      #opsKitchenModal .modal,
      #deliveryModal .modal,
      #receivableModal .modal{
        width:100%;
        max-width:none;
        max-height:calc(100vh - 16px);
        max-height:calc(100dvh - 16px);
        border-radius:20px;
      }
      #opsTablesModal .modalHeader,
      #opsKitchenModal .modalHeader,
      #deliveryModal .modalHeader,
      #receivableModal .modalHeader{
        align-items:stretch;
        gap:10px;
      }
      #opsTablesModal .modalHeader h3,
      #opsKitchenModal .modalHeader h3,
      #deliveryModal .modalHeader h3,
      #receivableModal .modalHeader h3{
        font-size:16px;
        line-height:1.25;
      }
      #opsTablesModal .modalHeader > div,
      #opsKitchenModal .modalHeader > div,
      #deliveryModal .modalHeader > div,
      #receivableModal .modalHeader > div{
        width:100%;
        justify-content:space-between;
        flex-wrap:wrap;
      }
      #opsTablesModal .modalHeader .btnGhost,
      #opsKitchenModal .modalHeader .btnGhost,
      #deliveryModal .modalHeader .btnGhost,
      #receivableModal .modalHeader .btnGhost{
        flex:1 1 0;
        min-width:0;
      }
      #opsTablesModal .closeX,
      #opsKitchenModal .closeX,
      #deliveryModal .closeX,
      #receivableModal .closeX{
        flex:0 0 42px;
      }
      #opsTablesModal .modalBody,
      #opsKitchenModal .modalBody,
      #deliveryModal .modalBody,
      #receivableModal .modalBody{
        padding:12px;
        gap:12px;
      }
      #opsTablesModal .opsCard,
      #opsKitchenModal .opsCard,
      #deliveryModal .opsCard,
      #receivableModal .opsCard{
        padding:12px;
        border-radius:16px;
      }
      .receivableToolbar .btn{
        width:100%;
        justify-content:center;
      }
      .receivableTrigger{
        grid-template-columns:1fr auto;
        gap:10px;
      }
      .receivableTriggerSide{
        min-width:0;
      }
      .receivableTriggerChevron{
        display:none;
      }
      .receivableActions{
        grid-template-columns:1fr;
      }
      .receivableName{
        font-size:17px;
      }
      .deliveryCard,
      .kitchenCard,
      .mesaCard{
        border-radius:18px;
      }
      .deliveryHead,
      .kitchenHead{
        flex-wrap:wrap;
        align-items:flex-start;
      }
      .deliveryCard .miniBtn,
      .kitchenCard .miniBtn,
      .mesaQuickAction{
        min-height:44px;
      }
    }

    @media (max-width: 560px){
      #opsTablesModal .modalHeader,
      #opsKitchenModal .modalHeader,
      #deliveryModal .modalHeader,
      #receivableModal .modalHeader{
        padding:12px;
      }
      #opsTablesModal .modalHeader > div,
      #opsKitchenModal .modalHeader > div,
      #deliveryModal .modalHeader > div,
      #receivableModal .modalHeader > div{
        display:grid;
        grid-template-columns:minmax(0, 1fr) auto;
        gap:8px;
        align-items:center;
      }
      #opsTablesModal .modalHeader .btnGhost,
      #opsKitchenModal .modalHeader .btnGhost,
      #deliveryModal .modalHeader .btnGhost,
      #receivableModal .modalHeader .btnGhost{
        width:100%;
        padding-inline:12px;
      }
      .mesaHeaderRow{
        display:grid;
        grid-template-columns:minmax(0, 1fr) auto;
        gap:6px;
        align-items:center;
        padding:10px 12px;
      }
      .mesaTrigger{
        width:100%;
        display:flex;
        align-items:center;
        gap:8px;
        min-width:0;
      }
      .mesaTriggerId{
        display:inline-flex;
        align-items:baseline;
        gap:4px;
        min-width:0;
        flex:0 0 auto;
      }
      .mesaTriggerId span{
        display:inline;
        font-size:10px;
        font-weight:1000;
        letter-spacing:.12em;
        text-transform:uppercase;
        color:#64748b;
      }
      .mesaTriggerId strong{
        font-size:18px;
        white-space:nowrap;
      }
      .mesaTriggerSummary{
        display:inline-flex;
        align-items:center;
        justify-content:flex-end;
        min-width:0;
        flex:1 1 auto;
      }
      .mesaTriggerTotal{
        font-size:15px;
        white-space:nowrap;
      }
      .mesaTriggerMeta{
        display:none;
      }
      .mesaTriggerChevron{
        width:10px;
        height:10px;
        margin-right:0;
      }
      .mesaQuickAction{
        width:auto;
        margin-left:0;
        min-width:82px;
        min-height:36px;
        padding:8px 12px;
        font-size:13px;
        border-radius:10px;
        justify-self:end;
      }
      .mesaCard.is-expanded .mesaTriggerChevron{
        margin-top:0;
      }
      .deliveryHead{
        gap:6px;
      }
      .deliveryStatus,
      .deliveryTotal,
      .kitchenStatus,
      .kitchenQty{
        max-width:100%;
      }
      .deliveryCard .opsMeta,
      .kitchenCard .opsMeta,
      .mesaMoment{
        font-size:10px;
        line-height:1.45;
      }
      .opsItem .miniBtn{
        white-space:normal;
      }
    }

    @media (max-width: 720px){
      #opsKitchenModal{
        align-items:flex-start;
        justify-content:center;
        overflow-y:auto;
        padding-top:max(8px, env(safe-area-inset-top));
        padding-bottom:max(8px, env(safe-area-inset-bottom));
      }
      #deliveryModal{
        align-items:flex-start;
        justify-content:center;
        overflow-y:auto;
        padding-top:max(8px, env(safe-area-inset-top));
        padding-bottom:max(8px, env(safe-area-inset-bottom));
      }
      #opsKitchenModal .modal{
        margin:0 auto;
        height:auto;
        max-height:none;
      }
      #deliveryModal .modal{
        margin:0 auto;
        width:100%;
        max-height:none;
      }
      #opsKitchenModal .modalBody{
        display:grid;
        overflow:visible;
        -webkit-overflow-scrolling:touch;
        touch-action:pan-y pinch-zoom;
      }
      #deliveryModal .modalBody{
        display:grid;
        overflow:visible;
        -webkit-overflow-scrolling:touch;
        touch-action:pan-y pinch-zoom;
      }
      #opsKitchenModal .opsCard{
        min-height:0;
      }
      #deliveryModal .opsCard{
        min-height:0;
        width:100%;
      }
      #opsKitchen,
      #opsKitchenHistory{
        align-content:start;
      }
      #deliveryList,
      #deliveryHistoryList{
        width:100%;
        grid-template-columns:1fr;
        align-content:start;
      }
      .deliveryCard{
        width:100%;
        box-sizing:border-box;
      }
    }

    /* ===== Relatórios ===== */
    .reportGrid{
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap:12px;
    }
    @media (max-width: 640px){
      .reportGrid{grid-template-columns:1fr}
    }
    .reportCard{
      background:#fff;
      border:1px solid rgba(18,28,65,.16);
      border-radius:16px;
      padding:12px;
      box-shadow: 0 12px 22px rgba(0,0,0,.08);
      display:grid;
      gap:10px;
      align-content:start;
      grid-template-rows:minmax(0, 1fr) auto;
      min-height:122px;
    }
    .reportTitle{
      font-weight:1000;
      font-size:14px;
    }
    .reportMeta{
      font-size:12px;
      color: var(--muted);
      font-weight:900;
    }
    .reportCard .btn{
      width:100%;
      justify-content:center;
    }
    .reportActions{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
      margin-top:auto;
    }
    .reportBtnThin{
      padding:8px 10px;
      min-height:36px;
      border-radius:10px;
      font-size:12px;
      font-weight:900;
      letter-spacing:.1px;
      box-shadow: 0 8px 16px rgba(37,99,235,.22);
    }
    @media (max-width: 560px){
      .reportActions{
        grid-template-columns:1fr;
      }
    }

    #expensesModal .modal{
      width:min(980px, 100%);
    }
    #cashModal .cashModalDialog{
      width:min(1120px, 100%);
    }
    #cashModal .modalBody{
      gap:16px;
      background:
        radial-gradient(1000px 300px at -10% -10%, rgba(37,99,235,.08), transparent 45%),
        radial-gradient(900px 260px at 120% 0%, rgba(24,214,255,.08), transparent 45%);
    }
    .cashSummaryHead{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .cashWorkspace{
      display:grid;
      grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
      gap:14px;
      align-items:start;
    }
    .cashSidebar{
      display:grid;
      gap:14px;
      align-self:start;
      position:sticky;
      top:0;
    }
    .cashActionStack{
      display:grid;
      gap:14px;
    }
    .cashCardHead{
      display:grid;
      gap:4px;
    }
    .cashSummaryCard{
      border:1px solid rgba(37,99,235,.18);
      box-shadow: 0 14px 24px rgba(37,99,235,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.98));
    }
    .cashStatusCard{
      border:1px solid rgba(37,99,235,.24);
      box-shadow: 0 14px 24px rgba(37,99,235,.12);
      background: linear-gradient(165deg, rgba(255,255,255,.98), rgba(241,247,255,.98));
    }
    .cashStatusCard .diagBox{
      border-style:solid;
      border-color: rgba(37,99,235,.24);
      background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,250,255,.94));
      font-size:12px;
      line-height:1.45;
    }
    .cashQuickActions{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
    }
    .cashQuickActions .btnGhost{
      width:100%;
      justify-content:center;
    }
    .cashLaunchCard{
      border:1px solid rgba(18,28,65,.16);
      box-shadow: 0 12px 24px rgba(0,0,0,.08);
      background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(250,252,255,.98));
      min-height:100%;
      align-content:start;
    }
    #cashOpenCard,
    #cashCloseCard{
      border-color: rgba(18,28,65,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(247,250,255,.98));
    }
    .cashLaunchHead{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
    }
    #cashOpenCard .cashActionBtnSlim{
      width:98%;
      min-width:0;
      max-width:100%;
      justify-content:center;
      justify-self:start;
      align-self:start;
      flex:0 0 auto;
      min-height:36px;
      padding:7px 16px;
      border-radius:14px;
      gap:9px;
      font-size:12px;
      box-shadow: 0 8px 14px rgba(37,99,235,.18);
    }
    #cashOpenCard .cashActionBtnSlim .icon{
      width:22px;
      height:22px;
      border-radius:8px;
      font-size:11px;
    }
    #cashCloseCard .btnGhost{
      width:100%;
      justify-content:center;
      min-height:40px;
      border-radius:14px;
    }
    .expensesSummary{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap:8px;
    }
    .expenseStat{
      position:relative;
      overflow:hidden;
      border:1px solid rgba(37,99,235,.16);
      border-radius:14px;
      padding:12px;
      background: linear-gradient(160deg, #ffffff, #f4f9ff);
      box-shadow: 0 10px 18px rgba(37,99,235,.09);
      display:grid;
      gap:6px;
    }
    .expenseStat::before{
      content:"";
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:3px;
      background: linear-gradient(90deg, #2563eb, #3b82f6, #24d6ff);
    }
    .expenseStat b{
      font-size:17px;
      color:#1f2a44;
      letter-spacing:.2px;
    }
    .expenseStat span{
      font-size:10px;
      color:#586178;
      font-weight:1000;
      text-transform:uppercase;
      letter-spacing:.5px;
    }
    .expenseList{
      display:grid;
      gap:8px;
    }
    .expenseRow{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:12px;
      align-items:center;
      padding:12px;
      border:1px solid rgba(18,28,65,.10);
      border-radius:14px;
      background:#fff;
      box-shadow: 0 8px 16px rgba(15,23,42,.04);
    }
    .expenseMeta{
      font-size:11px;
      color:var(--muted);
      font-weight:900;
      margin-top:2px;
    }
    .expenseAmount{
      font-weight:1000;
      white-space:nowrap;
      color:#1f2a44;
    }
    .expenseRowActions{
      display:grid;
      gap:6px;
      justify-items:end;
      align-items:center;
    }
    .inviteList{
      display:grid;
      gap:8px;
      margin-top:4px;
    }
    .inviteRow{
      align-items:start;
    }
    .inviteCodeRow{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }
    .inviteCodeValue{
      font-family:"Courier New", Courier, monospace;
      font-size:13px;
      letter-spacing:.3px;
      word-break:break-all;
    }
    .inviteBadge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:24px;
      padding:0 10px;
      border-radius:999px;
      font-size:11px;
      font-weight:1000;
      letter-spacing:.3px;
      text-transform:uppercase;
      border:1px solid rgba(18,28,65,.12);
      background:#eef2ff;
      color:#1d4ed8;
    }
    .inviteBadge.is-active{
      background:#eafaf1;
      color:#138a4b;
      border-color:rgba(19,138,75,.18);
    }
    .inviteBadge.is-inactive{
      background:#fff1f2;
      color:#be123c;
      border-color:rgba(190,18,60,.18);
    }
    .inviteRowActions{
      min-width:122px;
    }
    .expenseMenu{
      position:relative;
    }
    .expenseMenu summary{
      list-style:none;
      cursor:pointer;
      user-select:none;
    }
    .expenseMenu summary::-webkit-details-marker{
      display:none;
    }
    .expenseMenuList{
      position:absolute;
      top:100%;
      right:0;
      margin-top:6px;
      z-index:8;
      min-width:118px;
      display:grid;
      gap:6px;
      padding:8px;
      border-radius:10px;
      border:1px solid rgba(18,28,65,.16);
      background:#fff;
      box-shadow: 0 10px 18px rgba(0,0,0,.10);
    }
    .expenseMenuList .miniBtn{
      width:100%;
      justify-content:center;
      display:flex;
      align-items:center;
      gap:6px;
    }
    @media (max-width: 980px){
      .cashWorkspace{
        grid-template-columns:1fr;
      }
      .cashSidebar{
        position:static;
      }
    }
    @media (max-width: 760px){
      .cashQuickActions{
        grid-template-columns:1fr;
      }
      .expenseRow{
        grid-template-columns:1fr;
        align-items:start;
      }
      .expenseRowActions{
        width:100%;
        justify-items:start;
      }
      .inviteRowActions{
        min-width:0;
        width:100%;
      }
    }

    /* ===== Presets Mobile por Plataforma ===== */
    @media (max-width: 1024px){
      html.platform-ios input,
      html.platform-ios select,
      html.platform-ios textarea{
        font-size:16px !important;
      }
      html.platform-ios .modalOverlay{
        padding-left:max(10px, env(safe-area-inset-left));
        padding-right:max(10px, env(safe-area-inset-right));
        padding-bottom:max(10px, env(safe-area-inset-bottom));
      }
      html.platform-ios .modal{
        max-height:calc(100dvh - 14px);
      }
      html.platform-ios .modalBody{
        max-height:calc(100dvh - 132px - env(safe-area-inset-bottom));
      }
      html.platform-ios .modalFooter{
        padding-bottom:calc(12px + env(safe-area-inset-bottom));
      }

      html.platform-android .pill,
      html.platform-android .btn,
      html.platform-android .btnGhost,
      html.platform-android .cta,
      html.platform-android .add{
        min-height:46px;
      }
      html.platform-android .modal{
        width:min(calc(100vw - 12px), 760px);
      }
      html.platform-android .modalBody{
        scroll-padding-bottom:96px;
      }
      html.platform-android .modalFooter .btn,
      html.platform-android .modalFooter .btnGhost{
        min-height:46px;
      }
    }

    /* ===== Mobile Responsivo (sem alterar layout original) ===== */
    @media (max-width: 720px){
      .wrap{width:100%; margin:0; padding:10px}
      .topbar{flex-direction:column; align-items:stretch; gap:10px}
      .brand{min-width:0; width:100%; justify-content:flex-start}
      .right-tools{width:100%; justify-items:stretch}
      .rt-row{width:100%; justify-content:stretch}
      .pill, .btn{width:100%; justify-content:center}
      .grid{grid-template-columns:1fr}
      .card-head{flex-direction:column; align-items:flex-start}
      .searchRow{flex-direction:column; align-items:stretch}
      .search{width:100%; flex:0 0 auto}
      .products{grid-template-columns:1fr}
      .cart{position:static}
      .ctaRow{grid-template-columns:1fr}
      .formGrid{grid-template-columns:1fr}
      .reportGrid{grid-template-columns:1fr}
      .modal{width:min(95vw, 720px)}
      .card:before{opacity:0}
    }

    @media (max-width: 420px){
      .brand h1{font-size:13px}
      .title, .big{font-size:16px}
      .tag{font-size:11px}
      .price{font-size:15px}
      .qty button{width:26px; height:26px}
    }

    /* ===== Mobile Hardening ===== */
    @media (max-width: 900px){
      .wrap{
        width:100%;
        margin:0;
        padding:10px;
      }
      .grid{
        grid-template-columns:1fr;
        gap:10px;
      }
      .cart{
        position:static;
        top:auto;
      }
      .topbar{
        flex-direction:column;
        align-items:stretch;
        gap:10px;
      }
      .right-tools,
      .rt-row{
        width:100%;
      }
      .rt-row{
        justify-content:flex-start;
      }
    }

    @media (max-width: 720px){
      .card-head{
        padding:12px;
      }
      .card-body{
        padding:0 12px 12px 12px;
      }
      .search{
        padding:10px 12px;
      }
      .chip{
        padding:8px 10px;
        font-size:11px;
      }
      .products{
        grid-template-columns:1fr;
        gap:10px;
      }
      .priceRow{
        flex-wrap:wrap;
        align-items:flex-start;
      }
      .priceRow .add{
        width:100%;
      }
      .prodActions{
        flex-wrap:wrap;
      }
      .prodActions .miniBtn{
        flex:1 1 120px;
        text-align:center;
      }
      .item{
        display:grid;
        grid-template-columns: 40px minmax(0, 1fr);
        gap:8px;
      }
      .item .qty{
        grid-column:1 / -1;
        margin-left:0;
        width:100%;
        justify-content:space-between;
      }
      .modalOverlay{
        padding:10px;
      }
      .modal{
        width:100%;
        border-radius:10px;
        max-height:calc(100vh - 20px);
        max-height:calc(100dvh - 20px);
      }
      .modalHeader{
        padding:12px;
      }
      .modalBody{
        padding:12px;
        flex:1 1 auto;
        min-height:0;
        max-height:none;
        padding-bottom:calc(18px + env(safe-area-inset-bottom));
      }
      .modalFooter{
        padding:12px;
        padding-bottom:calc(12px + env(safe-area-inset-bottom));
        flex-wrap:wrap;
        position:static;
        bottom:auto;
        z-index:auto;
        background:transparent;
      }
      .modalFooter .btn,
      .modalFooter .btnGhost{
        flex:1 1 140px;
        justify-content:center;
      }
      #opsTables{
        grid-template-columns:1fr;
      }
      #opsKitchen,
      #opsKitchenHistory,
      #deliveryHistoryList,
      #deliveryList{
        grid-template-columns:1fr;
      }
      .opsCard,
      .sysCard,
      .reportCard{
        padding:10px;
        border-radius:14px;
      }
      input, select, textarea{
        font-size:16px;
      }
    }

    @media (max-width: 560px){
      .brand{
        padding:10px 12px;
      }
      .logoImg{
        width:40px;
        height:40px;
      }
      .brand h1{
        font-size:13px;
      }
      .title,
      .big{
        font-size:16px;
      }
      .reportMeta,
      .hint{
        font-size:11px;
      }
      .pill,
      .btn,
      .btnGhost,
      .add,
      .cta{
        min-height:44px;
        padding:10px 12px;
      }
      .btn .icon{
        width:28px;
        height:28px;
        border-radius:10px;
      }
      .slimBtn .icon{
        width:22px;
        height:22px;
      }
      .tag{
        width:100%;
        justify-content:center;
      }
      .search input{
        font-size:13px;
      }
      .footerShortcuts{
        display:none;
      }
      .orderMeta{
        display:grid;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:6px;
      }
      .meta{
        padding:6px 8px;
        font-size:11px;
        text-align:center;
      }
      .cartTotalTag{
        grid-column:1 / -1;
        width:100%;
        justify-content:center;
        padding:7px 9px;
        font-size:12px;
        border-radius:999px;
      }
      .paymentSplitToggleLine{
        min-width:0;
        width:100%;
      }
      .addonCategoryRow{
        grid-template-columns:1fr;
      }
      .addonCategoryDeleteBtn{
        min-width:0;
      }
      .switchRow{
        flex-wrap:wrap;
      }
      .toast{
        min-width:0;
        width:min(100%, 360px);
      }
      #itemModal .modalFooter,
      #pizzaModal .modalFooter,
      #checkoutModal .modalFooter{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
      }
      #itemModal .modalFooter .btn,
      #itemModal .modalFooter .btnGhost,
      #pizzaModal .modalFooter .btn,
      #pizzaModal .modalFooter .btnGhost,
      #checkoutModal .modalFooter .btn,
      #checkoutModal .modalFooter .btnGhost{
        width:100%;
        justify-content:center;
      }
    }

    @media (max-width: 420px){
      .wrap{
        padding:8px;
      }
      .modalOverlay{
        padding:6px;
      }
      .modalHeader h3{
        font-size:14px;
      }
      .closeX{
        padding:6px 8px;
        border-radius:10px;
      }
      input, select, textarea{
        padding:10px;
        font-size:16px;
        border-radius:12px;
      }
      .grand{
        font-size:16px;
      }
      .mesaBubble{
        width:68px;
        height:68px;
        font-size:12px;
      }
    }

    /* ===== Carrinho flutuante (mobile) ===== */
    .mobileCartFab{
      position:fixed;
      left:auto;
      right:max(8px, env(safe-area-inset-right));
      bottom:max(8px, calc(8px + env(safe-area-inset-bottom)));
      transform:translate(0, 14px);
      width:auto;
      min-width:clamp(124px, 34vw, 160px);
      max-width:min(192px, calc(100dvw - max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right))));
      border:1px solid rgba(37,99,235,.35);
      border-radius:999px;
      background: linear-gradient(135deg, #2563eb, #3b82f6);
      color:#fff;
      box-shadow: 0 16px 30px rgba(37,99,235,.30);
      display:none;
      align-items:center;
      justify-content:flex-start;
      gap:6px;
      padding:clamp(7px, 1.8vw, 9px) clamp(10px, 2.5vw, 12px);
      cursor:pointer;
      opacity:0;
      pointer-events:none;
      transition: opacity .18s ease, transform .18s ease;
      z-index:160;
    }
    .mobileCartFab.is-visible{
      opacity:1;
      pointer-events:auto;
      transform:translate(0, 0);
    }
    .mobileCartFab.is-empty{
      background: linear-gradient(135deg, #2563eb, #3b82f6);
      border-color: rgba(37,99,235,.35);
      box-shadow: 0 16px 30px rgba(37,99,235,.30);
    }
    .mobileCartFabIcon{
      width:28px;
      height:28px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background: rgba(255,255,255,.22);
      border:1px solid rgba(255,255,255,.35);
      font-size:14px;
      flex:0 0 auto;
    }
    .mobileCartFabText{
      min-width:0;
      display:grid;
      gap:1px;
      text-align:left;
      font-weight:900;
    }
    .mobileCartFabText b{
      line-height:1;
      font-size:11px;
      letter-spacing:.15px;
      font-weight:1000;
    }
    .mobileCartFabText small{
      opacity:.95;
      font-size:9px;
      line-height:1.1;
      letter-spacing:.2px;
      font-weight:900;
    }
    .mobileCartFabText b,
    .mobileCartFabText small{
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    @media (max-width: 900px){
      .mobileQuickBar{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        margin-bottom:10px;
      }
      .mobileClockPill{
        display:flex;
        align-items:center;
        gap:8px;
        padding:8px 12px;
        border-radius:10px;
        border:1px solid rgba(37,99,235,.18);
        background:#fff;
        color:#1f2a44;
        box-shadow: var(--shadow2);
        font-weight:900;
        font-size:12px;
      }
      .mobileMenuBtn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
      }
      .mobileMenuBackdrop{
        position:fixed;
        inset:0;
        background: rgba(15,23,42,.55);
        z-index:850;
        opacity:0;
        pointer-events:none;
        transition:opacity .2s ease;
      }
      .mobileMenuHead{
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
        margin-bottom:4px;
      }
      .right-tools{
        position:fixed;
        top:0;
        right:0;
        width:min(360px, 90vw);
        height:100dvh;
        max-height:100dvh;
        overflow-y:auto;
        padding:14px;
        background:#ffffff;
        border-left:1px solid rgba(37,99,235,.18);
        box-shadow: -14px 0 30px rgba(15,23,42,.24);
        transform:translateX(102%);
        transition:transform .24s ease;
        z-index:900;
      }
      .rt-row{
        width:100%;
        justify-content:stretch;
      }
      .rt-row .pill,
      .rt-row .btn{
        width:100%;
        justify-content:center;
      }
      body.mobile-menu-open .right-tools{
        transform:translateX(0);
      }
      body.mobile-menu-open .mobileMenuBackdrop{
        display:block;
        opacity:1;
        pointer-events:auto;
      }
      .mobileCartFab{
        display:flex;
      }
      .wrap{
        padding-bottom:calc(90px + env(safe-area-inset-bottom));
      }
      .toastStack{
        left:max(10px, env(safe-area-inset-left));
        right:auto;
        bottom:max(10px, calc(10px + env(safe-area-inset-bottom)));
      }
      .toast{
        max-width:min(280px, calc(100vw - 20px));
      }
    }
    @media (max-width: 420px){
      .mobileCartFab{
        right:max(6px, env(safe-area-inset-right));
        max-width:min(182px, calc(100dvw - max(6px, env(safe-area-inset-left)) - max(6px, env(safe-area-inset-right))));
      }
    }

    body.modal-open{
      position:fixed;
      width:100%;
      overflow:hidden;
      overscroll-behavior:none;
    }
    body.mobile-menu-open{
      overflow:hidden;
      overscroll-behavior:none;
    }

    @media (max-width: 900px){
      body.modal-open{
        position:static;
        inset:auto;
      }
    }