:root {
      --blue: #0d2b4f;
      --blue-2: #143b6a;
      --orange: #f47b20;
      --orange-soft: #fff1e8;
      --bg: #f5f7fb;
      --card: #ffffff;
      --text: #142033;
      --muted: #6d7788;
      --line: #e6ebf2;
      --danger: #d92d20;
      --success: #138a43;
      --shadow: 0 14px 36px rgba(13, 43, 79, 0.1);
      --radius: 16px;
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 16% -8%, rgba(244,123,32,0.08), transparent 28%),
        linear-gradient(180deg, #fbfcff 0%, var(--bg) 42%, #eef3f9 100%);
      overflow-x: hidden;
    }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; border: 0; }
    img { max-width: 100%; }
    .hidden { display: none !important; }

    .login-shell {
      min-height: 100vh;
      display: grid;
      grid-template-columns: minmax(460px, 1.12fr) minmax(420px, 0.88fr);
      background:
        linear-gradient(90deg, transparent 0 55%, rgba(13,43,79,0.03) 55% 100%),
        #fff;
    }
    .brand-panel {
      position: relative;
      padding: clamp(32px, 5vw, 72px);
      color: #fff;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(13,43,79,0.92) 0%, rgba(20,59,106,0.84) 58%, rgba(13,43,79,0.88) 100%),
        url("../assets/login-brand-bg.png") center / cover no-repeat;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      isolation: isolate;
    }
    .brand-panel::after {
      content: "";
      position: absolute;
      right: -115px;
      bottom: -135px;
      width: min(44vw, 460px);
      height: min(44vw, 460px);
      border-radius: 50%;
      background: rgba(244,123,32,0.18);
      border: 1px solid rgba(255,255,255,0.16);
      z-index: -1;
    }
    .brand-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(135deg, rgba(0,0,0,0.72), transparent 78%);
      z-index: -1;
    }
    .brand-mark {
      width: 74px;
      height: 74px;
      border-radius: 22px;
      background: var(--orange);
      display: grid;
      place-items: center;
      font-size: 30px;
      font-weight: 900;
      box-shadow: 0 22px 48px rgba(0,0,0,0.22);
    }
    .brand-panel h1 { font-size: clamp(42px, 6.2vw, 86px); line-height: .98; margin: 48px 0 22px; letter-spacing: 0; }
    .brand-panel p { max-width: 690px; color: rgba(255,255,255,0.86); font-size: clamp(17px, 1.5vw, 22px); line-height: 1.65; }
    .login-kicker {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: rgba(255,255,255,0.86);
      background: rgba(255,255,255,0.11);
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 900;
      margin-top: 26px;
    }
    .login-chips {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 0;
    }
    .login-chips span {
      border-radius: 999px;
      padding: 9px 12px;
      background: rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.9);
      border: 1px solid rgba(255,255,255,0.14);
      font-size: 13px;
      font-weight: 800;
    }
    .demo-line {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      color: rgba(255,255,255,0.82);
      background: rgba(3,13,27,0.18);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 14px;
      padding: 12px 14px;
      width: fit-content;
      max-width: 100%;
    }
    .login-card {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(26px, 5vw, 72px);
      position: relative;
      overflow: hidden;
    }
    .login-card::before {
      content: "";
      position: absolute;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      top: 12%;
      right: 12%;
      background: rgba(244,123,32,0.08);
      filter: blur(2px);
    }
    .login-box {
      position: relative;
      width: min(500px, 100%);
      background: rgba(255,255,255,0.94);
      border: 1px solid rgba(214,223,236,0.9);
      border-radius: 24px;
      box-shadow: 0 28px 80px rgba(13, 43, 79, 0.14);
      padding: clamp(26px, 4vw, 44px);
      backdrop-filter: blur(12px);
    }
    .login-box::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 5px;
      border-radius: 24px 24px 0 0;
      background: linear-gradient(90deg, var(--orange), #ffb15f);
    }
    .login-box h2 { margin: 0 0 8px; font-size: clamp(30px, 3vw, 42px); color: var(--blue); }
    .login-subtitle { margin: 0 0 26px; font-size: 18px; }
    .muted { color: var(--muted); }
    .field { display: grid; gap: 7px; margin: 14px 0; }
    label { font-size: 13px; font-weight: 700; color: #29384d; }
    .password-wrap { position: relative; }
    .password-wrap input { padding-right: 72px; }
    .password-toggle {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 10px;
      min-height: 36px;
      padding: 0 10px;
      background: #eef3f9;
      color: var(--blue);
      font-size: 12px;
      font-weight: 900;
    }
    .login-box input {
      min-height: 56px;
      border-radius: 16px;
      font-size: 17px;
      background: #fbfdff;
    }
    .login-box .btn {
      min-height: 58px;
      border-radius: 15px;
      font-size: 17px;
      margin-top: 6px;
      box-shadow: 0 18px 36px rgba(244,123,32,0.2);
    }
    input, select, textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      padding: 12px 13px;
      color: var(--text);
      outline: none;
      transition: border-color .18s ease, box-shadow .18s ease;
    }
    input:focus, select:focus, textarea:focus {
      border-color: var(--orange);
      box-shadow: 0 0 0 4px rgba(244,123,32,0.14);
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 42px;
      border-radius: 12px;
      padding: 10px 14px;
      background: var(--blue);
      color: #fff;
      font-weight: 800;
      transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
    }
    .btn:hover { transform: translateY(-1px); background: var(--blue-2); box-shadow: 0 12px 26px rgba(13,43,79,0.18); }
    .btn.orange { background: var(--orange); }
    .btn.light { background: #eef3f9; color: var(--blue); box-shadow: none; }
    .btn.danger { background: var(--danger); }
    .btn.ghost { background: transparent; color: var(--blue); border: 1px solid var(--line); box-shadow: none; }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
    .btn.icon { width: 42px; padding: 0; }
    .alert {
      border-radius: 12px;
      padding: 11px 13px;
      margin-top: 12px;
      background: var(--orange-soft);
      color: #7b3908;
      font-weight: 700;
      font-size: 13px;
    }
    .attendance-user-card {
      display: grid;
      gap: 5px;
      margin: 12px 0;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #f8fafc;
    }
    .attendance-user-card small {
      color: var(--muted);
      font-weight: 900;
      text-transform: uppercase;
      font-size: 11px;
    }
    .attendance-user-card strong {
      color: var(--blue);
      font-size: 24px;
    }
    .attendance-user-card span {
      color: var(--orange);
      font-weight: 800;
      font-size: 13px;
    }

    .app {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 270px 1fr;
    }
    .sidebar {
      background: var(--blue);
      color: #fff;
      padding: 20px 16px;
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: auto;
    }
    .side-head {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 12px 18px;
      margin-bottom: 6px;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 18px;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)),
        rgba(255,255,255,0.03);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 16px 34px rgba(0,0,0,0.12);
    }
    .mini-mark {
      width: 58px;
      height: 58px;
      border-radius: 18px;
      background: var(--orange);
      display: grid;
      place-items: center;
      font-weight: 900;
      font-size: 22px;
      letter-spacing: 0;
      box-shadow: 0 12px 24px rgba(244,123,32,0.26);
      flex: 0 0 auto;
    }
    .side-head strong {
      display: block;
      font-size: 18px;
      line-height: 1.15;
      letter-spacing: 0;
      color: #fff;
    }
    .side-head span {
      display: block;
      margin-top: 6px;
      color: rgba(255,255,255,0.72);
      font-size: 13px;
      font-weight: 700;
    }
    .nav { display: grid; gap: 7px; padding-top: 18px; }
    .nav button {
      width: 100%;
      justify-content: flex-start;
      background: transparent;
      color: rgba(255,255,255,0.82);
      border-radius: 12px;
      padding: 12px;
      display: flex;
      align-items: center;
      font-weight: 800;
      text-align: left;
    }
    .nav button.active, .nav button:hover { background: rgba(255,255,255,0.12); color: #fff; }
    .main { min-width: 0; }
    .topbar {
      min-height: 72px;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
      position: sticky;
      top: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 22px;
      box-shadow: 0 8px 24px rgba(13,43,79,0.05);
    }
    .topbar h2 { margin: 0; color: var(--blue); font-size: 20px; }
    .top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
    .sync-btn {
      min-height: 42px;
      color: var(--blue);
      font-weight: 900;
      padding-inline: 13px;
    }
    .sync-btn::before {
      content: "";
      width: 14px;
      height: 14px;
      border: 2px solid var(--blue);
      border-right-color: transparent;
      border-radius: 50%;
      display: inline-block;
    }
    .sync-btn:hover::before {
      transform: rotate(180deg);
      transition: transform .28s ease;
    }
    .notify-icon {
      position: relative;
      overflow: visible;
    }
    .notify-icon span {
      position: relative;
      width: 16px;
      height: 18px;
      display: block;
      border: 2px solid var(--blue);
      border-bottom: 0;
      border-radius: 10px 10px 6px 6px;
    }
    .notify-icon span::before {
      content: "";
      position: absolute;
      left: 50%;
      top: -6px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--blue);
      transform: translateX(-50%);
    }
    .notify-icon span::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -6px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--blue);
      transform: translateX(-50%);
    }
    .notify-icon::after {
      content: "";
      position: absolute;
      right: 7px;
      top: 7px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--orange);
      border: 2px solid #eef3f9;
    }
    .role-pill, .status-pill {
      border-radius: 999px;
      background: var(--orange-soft);
      color: #8a410d;
      padding: 8px 11px;
      font-size: 12px;
      font-weight: 900;
    }
    .status-pill { background: #edf6ff; color: var(--blue); }
    .content {
      width: min(1720px, 100%);
      margin: 0 auto;
      padding: 22px;
    }
    .section { display: none; animation: fade .22s ease; }
    .section.active { display: block; }
    @keyframes fade { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
    .grid { display: grid; gap: 16px; }
    .stats { grid-template-columns: repeat(5, minmax(150px, 1fr)); }
    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 16px;
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }
    .card:hover {
      border-color: #d9e3ef;
      box-shadow: 0 18px 46px rgba(13,43,79,0.11);
    }
    .stat small { color: var(--muted); font-weight: 800; }
    .stat strong { display: block; margin-top: 9px; color: var(--blue); font-size: 26px; }
    .stat em { display: block; color: var(--orange); font-style: normal; font-size: 12px; margin-top: 5px; font-weight: 900; }
    .two-col { grid-template-columns: 1.3fr .7fr; align-items: start; }
    .chart-card {
      padding: 0;
      overflow: hidden;
    }
    .chart-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
      padding: 18px 18px 12px;
      border-bottom: 1px solid var(--line);
    }
    .chart-head h3 {
      margin: 0;
      color: var(--blue);
      font-size: 22px;
    }
    .chart-head p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }
    .chart-live {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border-radius: 999px;
      background: #e9f7ef;
      color: var(--success);
      padding: 8px 11px;
      font-size: 12px;
      font-weight: 900;
      flex: 0 0 auto;
    }
    .chart-live::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 0 4px rgba(19,138,67,0.12);
    }
    .chart-kpis {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      padding: 14px 18px 0;
    }
    .chart-kpi {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #ffffff;
      padding: 13px;
      min-width: 0;
      box-shadow: 0 8px 20px rgba(13,43,79,0.06);
    }
    .chart-kpi small {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }
    .chart-kpi strong {
      display: block;
      margin-top: 5px;
      color: var(--blue);
      font-size: 18px;
      overflow-wrap: anywhere;
    }
    .chart-wrap {
      height: clamp(260px, 34vw, 390px);
      margin: 16px 18px 18px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, rgba(13,43,79,0.08), rgba(244,123,32,0.18)) border-box;
      position: relative;
    }
    .chart-wrap canvas {
      width: 100% !important;
      height: 100% !important;
    }
    .chart-tooltip {
      position: absolute;
      pointer-events: none;
      transform: translate(-50%, calc(-100% - 16px));
      background: var(--blue);
      color: #fff;
      border-radius: 10px;
      padding: 12px 14px;
      box-shadow: 0 18px 36px rgba(13,43,79,0.22);
      opacity: 0;
      transition: opacity .12s ease, transform .12s ease;
      z-index: 3;
      min-width: 148px;
    }
    .chart-tooltip.visible { opacity: 1; }
    .chart-tooltip::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -7px;
      width: 14px;
      height: 14px;
      background: var(--blue);
      border-right: 1px solid rgba(255,255,255,0.16);
      border-bottom: 1px solid rgba(255,255,255,0.16);
      transform: translateX(-50%) rotate(45deg);
    }
    .chart-tooltip strong {
      display: block;
      font-size: 13px;
      margin-bottom: 7px;
    }
    .chart-tooltip span {
      display: block;
      font-size: 14px;
      font-weight: 800;
    }
    .section-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }
    .section-title h3 { margin: 0; color: var(--blue); }
    .toolbar {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    .toolbar > * { flex: 1 1 160px; }
    .toolbar .btn { flex: 0 0 auto; }
    .table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
    table { width: 100%; border-collapse: collapse; min-width: 760px; background: #fff; }
    th, td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; vertical-align: middle; }
    th { background: #f8fafd; color: var(--blue); font-size: 12px; text-transform: uppercase; letter-spacing: 0; }
    tr:hover td { background: #fffaf6; }
    .thumb {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      object-fit: cover;
      background: #eef3f9;
      display: grid;
      place-items: center;
      color: var(--blue);
      font-weight: 900;
    }
    .form-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; }
    .form-grid .wide { grid-column: span 2; }
    .modal {
      position: fixed;
      inset: 0;
      background: rgba(13, 43, 79, 0.42);
      z-index: 20;
      display: grid;
      place-items: center;
      padding: 18px;
    }
    .modal-panel {
      width: min(940px, 100%);
      max-height: 92vh;
      overflow: auto;
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 28px 80px rgba(0,0,0,0.25);
      padding: 18px;
    }
    .modal-panel.small-modal {
      width: min(520px, 100%);
    }
    .modal-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
      margin-top: 18px;
    }
    .pos-grid {
      display: grid;
      grid-template-columns: minmax(500px, 1.25fr) minmax(380px, 0.85fr);
      gap: 18px;
      align-items: start;
    }
    .pos-panel { padding: 0; overflow: hidden; }
    .pos-panel-head {
      padding: 18px;
      border-bottom: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }
    .pos-panel-head h3 { margin: 0; color: var(--blue); }
    .pos-panel-body { padding: 18px; }
    .customer-first {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #f8fafd;
      padding: 14px;
      margin-bottom: 14px;
    }
    .customer-first-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .customer-first-head strong { color: var(--blue); font-size: 15px; }
    .customer-fields {
      display: grid;
      grid-template-columns: 1fr 0.8fr;
      gap: 12px;
    }
    .customer-fields .field, .payment-fields .field { margin: 0; }
    .scan-zone {
      display: grid;
      gap: 12px;
    }
    .scan-input {
      min-height: 64px;
      font-size: 20px;
      font-weight: 900;
      border: 2px solid var(--orange);
      border-radius: 16px;
      background: #fffaf6;
    }
    .product-results {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
      gap: 12px;
      max-height: calc(100vh - 275px);
      min-height: 360px;
      overflow: auto;
      padding: 2px 6px 2px 2px;
    }
    .product-tile {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      padding: 14px;
      text-align: left;
      transition: transform .14s ease, border-color .14s ease;
      min-height: 150px;
      display: grid;
      align-content: start;
      box-shadow: 0 10px 24px rgba(13,43,79,0.05);
    }
    .product-tile:hover { transform: translateY(-2px); border-color: var(--orange); box-shadow: 0 16px 34px rgba(13,43,79,0.09); }
    .product-tile strong { display: block; color: var(--blue); margin-top: 10px; font-size: 17px; }
    .product-tile small { color: var(--muted); display: block; margin-top: 4px; }
    .bill-form {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .bill-form .full { grid-column: 1 / -1; }
    .payment-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 14px;
      border-top: 1px solid var(--line);
      padding-top: 14px;
    }
    .payment-fields .wide { grid-column: 1 / -1; }
    .cart-list { display: grid; gap: 10px; max-height: 300px; overflow: auto; margin-top: 14px; }
    .cart-item {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px;
      display: grid;
      gap: 8px;
      background: #fbfdff;
    }
    .cart-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
    .cart-title { min-width: 0; }
    .cart-title strong { color: var(--blue); }
    .cart-title small { display: block; color: var(--muted); margin-top: 3px; }
    .cart-controls {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      align-items: center;
    }
    .cart-discount {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }
    .cart-discount input, .cart-price-input {
      max-width: 100px;
      padding: 8px;
      min-height: 38px;
    }
    .qty {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #f5f7fb;
      border-radius: 999px;
      padding: 4px;
    }
    .qty button {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #fff;
      color: var(--blue);
      font-weight: 900;
      border: 1px solid var(--line);
    }
    .summary {
      display: grid;
      gap: 9px;
      margin-top: 14px;
      background: #f8fafd;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 14px;
    }
    .summary div { display: flex; justify-content: space-between; gap: 12px; }
    .summary .total { font-size: 22px; font-weight: 900; color: var(--orange); border-top: 1px solid var(--line); padding-top: 10px; }
    .checkout-btn { width: 100%; margin-top: 12px; min-height: 54px; }
    .day-close-layout {
      display: grid;
      grid-template-columns: minmax(420px, 1.15fr) minmax(320px, 0.85fr);
      gap: 18px;
      align-items: start;
    }
    .close-panel {
      padding: 0;
      overflow: hidden;
    }
    .close-hero {
      background:
        radial-gradient(circle at 90% 10%, rgba(244,123,32,0.26), transparent 30%),
        linear-gradient(135deg, var(--blue), var(--blue-2));
      color: #fff;
      padding: clamp(18px, 3vw, 28px);
    }
    .close-status-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }
    .close-status-row h3 {
      margin: 0;
      color: #fff;
      font-size: clamp(22px, 3vw, 32px);
    }
    .close-status-row .badge { background: rgba(255,255,255,0.14); color: #fff; }
    .close-net {
      margin-top: 18px;
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 18px;
    }
    .close-net small { display: block; color: rgba(255,255,255,0.72); font-weight: 900; }
    .close-net strong { display: block; margin-top: 5px; font-size: clamp(34px, 4vw, 48px); line-height: 1; }
    .close-net span { display: block; margin-top: 10px; color: rgba(255,255,255,0.72); font-weight: 800; font-size: 13px; }
    .close-date {
      text-align: right;
      color: rgba(255,255,255,0.78);
      font-size: 13px;
      font-weight: 800;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 14px;
      padding: 12px;
      min-width: 170px;
    }
    .close-date strong { font-size: 15px; line-height: 1.4; }
    .close-metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      padding: 16px;
    }
    .close-metric {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 13px;
      background: #fbfdff;
      min-width: 0;
    }
    .close-metric small { color: var(--muted); font-weight: 900; }
    .close-metric strong { display: block; margin-top: 8px; color: var(--blue); font-size: clamp(18px, 2vw, 22px); overflow-wrap: anywhere; }
    .close-metric span { display: block; margin-top: 6px; color: var(--orange); font-size: 12px; font-weight: 900; }
    .close-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 0 16px 16px;
    }
    .close-side-card {
      display: grid;
      gap: 14px;
    }
    .close-breakdown {
      display: grid;
      gap: 10px;
    }
    .close-breakdown div {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fbfdff;
      color: var(--muted);
      font-weight: 800;
    }
    .close-breakdown strong {
      color: var(--blue);
      overflow-wrap: anywhere;
      text-align: right;
    }
    .close-breakdown .net {
      background: var(--orange-soft);
      border-color: #ffd8bd;
      color: #8a420b;
    }
    .expense-form {
      display: grid;
      grid-template-columns: 1.2fr 0.7fr;
      gap: 12px;
      align-items: end;
    }
    .expense-form .full { grid-column: 1 / -1; }
    .expense-table table { min-width: 620px; }
    .expense-empty {
      padding: 18px;
      color: var(--muted);
      font-weight: 800;
    }
    .settings-layout {
      display: grid;
      grid-template-columns: minmax(320px, 0.85fr) minmax(520px, 1.35fr);
      gap: 18px;
      align-items: start;
    }
    .settings-card {
      padding: 0;
      overflow: hidden;
    }
    .settings-head {
      padding: 18px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .settings-head h3 { margin: 0; color: var(--blue); }
    .settings-body { padding: 18px; display: grid; gap: 12px; }
    .settings-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(180px, 1fr));
      gap: 12px;
    }
    .settings-grid .full { grid-column: 1 / -1; }
    .store-settings-layout {
      display: grid;
      grid-template-columns: minmax(300px, 0.75fr) minmax(520px, 1.25fr);
      gap: 18px;
      align-items: stretch;
    }
    .settings-preview {
      background: #fff;
      color: var(--blue);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 22px;
      min-height: 100%;
      display: grid;
      align-content: space-between;
      gap: 24px;
      box-shadow: 0 18px 40px rgba(13,43,79,0.08);
    }
    .settings-preview-logo {
      width: 82px;
      height: 82px;
      border-radius: 22px;
      background: var(--orange);
      display: grid;
      place-items: center;
      font-weight: 900;
      font-size: 28px;
      overflow: hidden;
    }
    .settings-preview-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .settings-preview h3 {
      margin: 18px 0 8px;
      color: var(--blue);
      font-size: clamp(26px, 4vw, 40px);
    }
    .settings-preview p {
      margin: 0;
      color: var(--muted);
      line-height: 1.6;
    }
    .receipt-preview {
      background: #f8fafc;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 14px;
      font-size: 13px;
    }
    .receipt-preview strong { display: block; color: var(--blue); margin-bottom: 5px; }
    .settings-form-card {
      padding: 0;
      overflow: hidden;
    }
    .settings-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(220px, 1fr));
      gap: 14px;
    }
    .settings-form-grid .full { grid-column: 1 / -1; }
    .settings-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding-top: 8px;
    }
    .user-create {
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      gap: 12px;
      align-items: end;
      padding: 18px;
      background: #f8fafd;
      border-bottom: 1px solid var(--line);
    }
    .permission-picker {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .permission-picker label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 8px 10px;
      background: #fff;
      color: var(--blue);
      font-size: 12px;
      font-weight: 900;
    }
    .permission-picker input {
      width: auto;
      min-height: auto;
      box-shadow: none;
      margin: 0;
    }
    .users-table table { min-width: 680px; }
    .permission-text {
      max-width: 360px;
      white-space: normal;
      color: var(--muted);
      line-height: 1.45;
    }
    .user-edit-fields {
      display: grid;
      grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr);
      gap: 8px;
      min-width: 280px;
    }
    .user-edit-fields input {
      min-height: 38px;
      padding: 8px 10px;
    }
    .user-permission-edit {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      max-width: 430px;
    }
    .user-permission-edit label {
      display: inline-flex;
      gap: 5px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 6px 8px;
      background: #fff;
      color: var(--blue);
      font-size: 11px;
      font-weight: 900;
    }
    .user-permission-edit input {
      width: auto;
      min-height: auto;
      margin: 0;
    }
    .user-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .settings-note {
      border: 1px solid var(--line);
      background: #fbfdff;
      border-radius: 14px;
      padding: 12px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }
    .badge { border-radius: 999px; padding: 5px 9px; background: #eef3f9; color: var(--blue); font-size: 12px; font-weight: 900; }
    .badge.warn { background: var(--orange-soft); color: #89410d; }
    .badge.good { background: #e9f7ef; color: var(--success); }
    .notification-panel {
      position: fixed;
      top: 82px;
      right: 22px;
      width: min(360px, calc(100vw - 30px));
      z-index: 12;
    }
    .notice { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
    .receipt {
      width: 80mm;
      background: #fff;
      color: #000;
      padding: 6mm;
      font-family: "Arial", sans-serif;
      font-size: 12px;
    }
    .receipt h1 { text-align: center; font-size: 17px; margin: 4px 0; }
    .receipt .center { text-align: center; }
    .receipt .line { border-top: 1px dashed #000; margin: 8px 0; }
    .receipt table { min-width: 0; border: 0; }
    .receipt th, .receipt td { border: 0; padding: 3px 0; color: #000; background: #fff; font-size: 11px; }
    .receipt img { max-height: 48px; display: block; margin: 0 auto 4px; }
    .receipt .receipt-meta div { display: flex; justify-content: space-between; gap: 8px; }
    .receipt .receipt-total-box {
      width: 62%;
      margin-left: auto;
      display: grid;
      gap: 3px;
      font-size: 12px;
    }
    .receipt .receipt-total-box div {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      text-align: right;
    }
    .receipt .receipt-grand {
      border-top: 1px solid #000;
      margin-top: 3px;
      padding-top: 4px;
      font-weight: 800;
      font-size: 13px;
    }
    .mobile-menu { display: none; }

    @media (max-width: 1120px) {
      .content { padding: 18px; }
      .stats { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
      .two-col, .pos-grid, .day-close-layout, .settings-layout, .store-settings-layout { grid-template-columns: 1fr; }
      .close-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .form-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
      .product-results { max-height: 520px; }
    }
    @media (max-width: 820px) {
      .login-shell { grid-template-columns: 1fr; }
      .brand-panel { min-height: 390px; padding: 34px; }
      .brand-panel h1 { margin-top: 32px; }
      .login-card { padding: 18px; }
      .login-box { margin-top: -72px; }
      .app { grid-template-columns: 1fr; }
      .sidebar {
        position: fixed;
        z-index: 15;
        inset: 0 auto 0 0;
        width: 282px;
        transform: translateX(-105%);
        transition: transform .22s ease;
      }
      .sidebar.open { transform: translateX(0); }
      .mobile-menu { display: inline-flex; }
      .topbar { padding: 12px; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
      .topbar h2 { font-size: 18px; }
      .content { padding: 14px; }
      .stats, .form-grid { grid-template-columns: 1fr; }
      .form-grid .wide { grid-column: auto; }
      .top-actions { gap: 7px; }
      .top-actions .role-pill { order: -1; flex: 1 1 100%; justify-content: center; }
      .chart-head { flex-direction: column; align-items: stretch; }
      .chart-live { width: fit-content; }
      .chart-kpis { grid-template-columns: 1fr; }
      .chart-wrap { height: 280px; padding: 12px; }
      .close-metrics, .close-actions, .expense-form, .settings-grid, .user-create { grid-template-columns: 1fr; }
      .close-net { align-items: stretch; flex-direction: column; }
      .close-date { min-width: 0; text-align: left; }
      .expense-form .full { grid-column: auto; }
      .settings-grid .full { grid-column: auto; }
      .settings-form-grid { grid-template-columns: 1fr; }
      .settings-form-grid .full { grid-column: auto; }
      .settings-actions { justify-content: stretch; }
      .settings-actions .btn { width: 100%; }
      .bill-form, .cart-controls { grid-template-columns: 1fr; }
      .bill-form .full { grid-column: auto; }
      .customer-fields, .payment-fields { grid-template-columns: 1fr; }
      .payment-fields .wide { grid-column: auto; }
      .product-results { grid-template-columns: 1fr; max-height: none; min-height: 0; }
      .cart-list { max-height: none; }
      .cart-discount { justify-content: space-between; }
    }
    @media (max-width: 560px) {
      :root { --radius: 14px; }
      .brand-panel { min-height: 330px; padding: 24px; }
      .brand-mark { width: 60px; height: 60px; border-radius: 18px; font-size: 24px; }
      .brand-panel h1 { font-size: 38px; }
      .login-chips, .demo-line { display: none; }
      .login-box { padding: 22px; border-radius: 18px; }
      .sidebar { width: min(300px, 86vw); padding: 16px 12px; }
      .side-head { padding: 12px; }
      .mini-mark { width: 50px; height: 50px; border-radius: 16px; }
      .top-actions { width: 100%; justify-content: stretch; }
      .top-actions .btn { flex: 1 1 auto; }
      .btn.icon { flex: 0 0 42px; }
      .card { padding: 14px; }
      .section-title { align-items: flex-start; flex-direction: column; }
      .toolbar .btn { width: 100%; }
      .scan-input { min-height: 58px; font-size: 16px; }
      .pos-panel-head, .pos-panel-body { padding: 14px; }
      .product-tile { min-height: 132px; }
      .summary .total { font-size: 20px; }
      th, td { padding: 10px; }
    }
    @media print {
      body * { visibility: hidden !important; }
      #printArea, #printArea * { visibility: visible !important; }
      #printArea { position: absolute; left: 0; top: 0; width: 80mm; }
      @page { size: 80mm auto; margin: 0; }
    }