@font-face {
      font-family: "Vazir";
      src: url("/static/fonts/Vazir-Regular.woff2") format("woff2");
      font-style: normal;
      font-weight: 400;
      font-display: swap;
    }
    @font-face {
      font-family: "Vazir";
      src: url("/static/fonts/Vazir-Bold.woff2") format("woff2");
      font-style: normal;
      font-weight: 700 900;
      font-display: swap;
    }

:root {
      --primary: #087a55;
      --primary-strong: #07583f;
      --primary-soft: #e8f7f0;
      --accent: #12b981;
      --ink: #10231c;
      --muted: #64746d;
      --surface: #ffffff;
      --surface-soft: #f6f9f8;
      --line: #dce7e2;
      --danger: #dc3f4d;
      --danger-soft: #fff0f2;
      --warning: #d9820d;
      --warning-soft: #fff8e8;
      --success: #087a55;
      --shadow-sm: 0 8px 24px rgba(15, 50, 38, .07);
      --shadow-md: 0 18px 46px rgba(9, 56, 41, .10);
      --shadow-lg: 0 28px 80px rgba(9, 56, 41, .14);
      --radius-sm: 16px;
      --radius-md: 24px;
      --radius-lg: 34px;
      --font: "Vazir", Tahoma, Arial, sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      overflow-x: hidden;
      direction: rtl;
      color: var(--ink);
      font-family: var(--font);
      font-size: 18px;
      line-height: 1.65;
      background:
        radial-gradient(circle at 95% 0%, rgba(18, 185, 129, .15), transparent 28rem),
        radial-gradient(circle at 5% 88%, rgba(8, 122, 85, .09), transparent 30rem),
        #f3f8f5;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body.modal-open { overflow: hidden; }
    button, input, select, textarea { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    button { border: 0; }
    a { color: inherit; }
    [hidden] { display: none !important; }

    .skip-link {
      position: fixed;
      top: -80px;
      right: 20px;
      z-index: 5000;
      padding: 10px 18px;
      border-radius: 0 0 14px 14px;
      color: #fff;
      background: var(--primary-strong);
      text-decoration: none;
      transition: top .2s ease;
    }
    .skip-link:focus { top: 0; }

    .ambient-shape {
      position: fixed;
      z-index: -1;
      border-radius: 999px;
      pointer-events: none;
    }
    .ambient-shape.one {
      width: 240px; height: 240px; top: -90px; right: -75px;
      background: rgba(18, 185, 129, .1);
    }
    .ambient-shape.two {
      width: 300px; height: 300px; bottom: -130px; left: -100px;
      background: rgba(8, 122, 85, .07);
    }

    /* Login */
    .login-shell {
      width: min(1160px, calc(100% - 36px));
      min-height: min(760px, calc(100vh - 48px));
      margin: 24px auto;
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.88);
      border-radius: 40px;
      background: rgba(255,255,255,.84);
      box-shadow: var(--shadow-lg);
      backdrop-filter: blur(18px);
    }

    .login-showcase {
      position: relative;
      isolation: isolate;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 100%;
      padding: clamp(34px, 5vw, 62px);
      overflow: hidden;
      color: #fff;
      background: linear-gradient(145deg, #064934 0%, #087a55 58%, #13a673 100%);
    }
    .login-showcase::before,
    .login-showcase::after {
      content: "";
      position: absolute;
      z-index: -1;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.13);
    }
    .login-showcase::before { width: 470px; height: 470px; top: -235px; left: -120px; }
    .login-showcase::after { width: 310px; height: 310px; bottom: -150px; right: -80px; }

    .brand-lockup { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: 28px; }
    .brand-lockup img { width: 54px; height: 54px; object-fit: contain; padding: 7px; border-radius: 18px; background: rgba(255,255,255,.95); }
    .brand-lockup small { display: block; margin-top: -4px; opacity: .72; font-size: 14px; font-weight: 400; }

    .showcase-copy { max-width: 590px; margin: 52px 0; }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 7px 13px; border: 1px solid rgba(255,255,255,.22);
      border-radius: 999px; background: rgba(255,255,255,.09);
      font-size: 15px;
    }
    .showcase-copy h1 { margin: 20px 0 14px; font-size: clamp(40px, 5vw, 66px); line-height: 1.18; letter-spacing: -.7px; }
    .showcase-copy p { margin: 0; max-width: 520px; color: rgba(255,255,255,.82); font-size: 21px; }

    .showcase-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .showcase-feature {
      min-height: 112px; padding: 17px;
      border: 1px solid rgba(255,255,255,.14); border-radius: 22px;
      background: rgba(255,255,255,.08); backdrop-filter: blur(8px);
    }
    .showcase-feature i { font-size: 21px; margin-bottom: 9px; }
    .showcase-feature strong { display: block; font-size: 17px; }
    .showcase-feature span { display: block; margin-top: 3px; color: rgba(255,255,255,.67); font-size: 13px; line-height: 1.5; }

    .login-panel { display: flex; align-items: center; padding: clamp(30px, 5vw, 68px); background: rgba(255,255,255,.92); }
    .login-card { width: 100%; max-width: 430px; margin: auto; }
    .mobile-brand { display: none; margin-bottom: 32px; color: var(--primary-strong); }
    .login-card h2 { margin: 0 0 8px; font-size: 34px; line-height: 1.3; }
    .login-card > p { margin: 0 0 30px; color: var(--muted); font-size: 17px; }

    .form-group { margin-bottom: 17px; }
    .form-group label { display: block; margin: 0 3px 8px; color: #40554c; font-size: 15px; font-weight: 700; }
    .input-wrap { position: relative; }
    .input-wrap > i {
      position: absolute; top: 50%; right: 17px; transform: translateY(-50%);
      z-index: 1; color: #809088; font-size: 17px; pointer-events: none;
    }
    .input-wrap input {
      width: 100%; height: 56px; padding: 0 48px 0 48px;
      border: 1px solid var(--line); border-radius: 18px;
      color: var(--ink); background: #fbfdfc; outline: none;
      transition: border-color .2s, box-shadow .2s, background .2s;
    }
    .input-wrap input::placeholder { color: #9aa8a2; }
    .input-wrap input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgba(18,185,129,.12); }
    .password-toggle {
      position: absolute; top: 50%; left: 7px; transform: translateY(-50%);
      width: 42px; height: 42px; display: grid; place-items: center;
      border-radius: 13px; color: #718179; background: transparent; cursor: pointer;
    }
    .password-toggle:hover { background: var(--primary-soft); color: var(--primary); }

    .primary-btn, .secondary-btn, .danger-btn, .ghost-btn, .icon-btn {
      min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
      padding: 11px 20px; border-radius: 16px; cursor: pointer; text-decoration: none;
      font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, background .18s ease;
    }
    .primary-btn { color: #fff; background: linear-gradient(135deg, var(--primary), #10a873); box-shadow: 0 14px 28px rgba(8,122,85,.2); }
    .primary-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 32px rgba(8,122,85,.28); }
    .primary-btn:active, .secondary-btn:active, .danger-btn:active, .ghost-btn:active, .icon-btn:active { transform: scale(.98); }
    .primary-btn:disabled { opacity: .62; cursor: wait; transform: none; }
    .secondary-btn { color: var(--primary-strong); background: var(--primary-soft); }
    .danger-btn { color: #a72b38; background: var(--danger-soft); }
    .ghost-btn { color: #42564e; background: #f0f4f2; }
    .wide-btn { width: 100%; }
    .icon-btn { width: 46px; min-height: 46px; padding: 0; color: #42564e; background: #f1f5f3; }
    .icon-btn:hover { color: var(--primary); background: var(--primary-soft); }

    .server-status {
      margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 7px;
      color: var(--muted); font-size: 14px;
    }
    .security-note {
      margin-top: 24px; padding: 14px 16px; display: flex; gap: 11px;
      color: #566860; background: #f5f8f7; border: 1px solid #e4ece8; border-radius: 17px;
      font-size: 14px;
    }
    .back-home { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; color: var(--primary); text-decoration: none; font-size: 15px; font-weight: 700; }

    /* App */
    .hidden-section { display: none; }
    .app-shell { width: min(1240px, calc(100% - 40px)); margin: 22px auto 110px; }
    .topbar {
      position: sticky; top: 14px; z-index: 80;
      display: flex; align-items: center; justify-content: space-between; gap: 18px;
      min-height: 76px; padding: 12px 16px 12px 20px;
      border: 1px solid rgba(255,255,255,.88); border-radius: 26px;
      background: rgba(255,255,255,.87); box-shadow: var(--shadow-sm); backdrop-filter: blur(18px);
    }
    .topbar-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .topbar-brand img { width: 48px; height: 48px; object-fit: contain; padding: 6px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
    .topbar-brand strong { display: block; font-size: 20px; line-height: 1.25; }
    .topbar-brand span { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 14px; }
    .topbar-actions { display: flex; align-items: center; gap: 9px; }
    .sync-chip {
      min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 14px; border-radius: 15px; color: #40554c; background: #f2f6f4; font-size: 14px;
    }
    .sync-status { width: 9px; height: 9px; display: inline-block; flex: 0 0 auto; border-radius: 50%; }
    .sync-connected { background: #13a66f; box-shadow: 0 0 0 5px rgba(19,166,111,.11); }
    .sync-disconnected { background: var(--danger); box-shadow: 0 0 0 5px rgba(220,63,77,.10); }
    .sync-connecting { background: var(--warning); box-shadow: 0 0 0 5px rgba(217,130,13,.11); animation: pulse 1s infinite alternate; }
    @keyframes pulse { from { opacity: .45; } to { opacity: 1; } }

    .merchant-hero {
      position: relative; isolation: isolate; overflow: hidden;
      margin: 22px 0; padding: clamp(28px, 4vw, 46px);
      display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px;
      color: #fff; border-radius: 34px;
      background: linear-gradient(135deg, #064934, #087a55 57%, #14a674);
      box-shadow: var(--shadow-md);
    }
    .merchant-hero::after {
      content: ""; position: absolute; z-index: -1; width: 330px; height: 330px; left: -120px; top: -175px;
      border: 1px solid rgba(255,255,255,.14); border-radius: 50%;
    }
    .hero-copy { min-width: 0; }
    .hero-label { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); font-size: 14px; }
    .merchant-hero h1 { margin: 14px 0 6px; font-size: clamp(30px, 4vw, 44px); line-height: 1.25; }
    .merchant-hero p { margin: 0; color: rgba(255,255,255,.76); font-size: 17px; }
    .hero-icon { width: 94px; height: 94px; display: grid; place-items: center; border-radius: 30px; font-size: 38px; color: var(--primary-strong); background: rgba(255,255,255,.94); box-shadow: 0 20px 36px rgba(0,0,0,.12); }

    .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: 22px; align-items: start; }
    .stack { display: grid; gap: 22px; }
    .panel-card {
      padding: clamp(22px, 3vw, 30px); border: 1px solid rgba(220,231,226,.9);
      border-radius: 28px; background: rgba(255,255,255,.92); box-shadow: var(--shadow-sm);
    }
    .panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
    .heading-copy { display: flex; align-items: flex-start; gap: 12px; }
    .heading-icon { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 15px; color: var(--primary); background: var(--primary-soft); }
    .panel-heading h2 { margin: 0; font-size: 24px; line-height: 1.3; }
    .panel-heading p { margin: 3px 0 0; color: var(--muted); font-size: 14px; }

    .payment-form .form-group { margin-bottom: 19px; }
    .payment-form label { display: flex; align-items: center; gap: 7px; margin: 0 3px 8px; color: #40554c; font-size: 15px; font-weight: 800; }
    .field-help { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 7px; color: #7b8983; font-size: 13px; }
    .amount-preview { color: var(--primary); font-weight: 800; }
    .quick-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 10px 0 22px; }
    .amount-chip {
      min-height: 42px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 14px;
      color: #40554c; background: #fbfdfc; cursor: pointer; font-weight: 700;
      transition: border-color .18s, color .18s, background .18s, transform .18s;
    }
    .amount-chip:hover { color: var(--primary); border-color: #a9dcca; background: var(--primary-soft); transform: translateY(-1px); }
    .action-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }

    .request-progress {
      margin-top: 18px; padding: 15px 16px; display: none; align-items: flex-start; gap: 12px;
      border-radius: 18px; border: 1px solid #e1ebe6; background: #f7faf8;
    }
    .request-progress[style*="display: block"] { display: flex !important; }
    .request-progress.status { text-align: right; }
    .request-progress.success { color: #12603f; border-color: #bde6d2; background: #ecfaf3; }
    .request-progress.error { color: #9f2834; border-color: #f1c3c8; background: #fff1f3; }
    .request-progress > i, .request-progress .loading { margin-top: 5px; flex: 0 0 auto; }
    .request-progress strong { display: block; }
    .request-progress small { display: block; margin-top: 2px; color: inherit; opacity: .75; }

    .qr-panel { position: sticky; top: 108px; }
    .qr-area { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .qr-frame {
      position: relative; width: min(100%, 330px); aspect-ratio: 1; display: grid; place-items: center;
      padding: 20px; border-radius: 28px; background: #fff; border: 1px solid #e1ebe6;
      box-shadow: inset 0 0 0 8px #f7faf8, 0 18px 34px rgba(13,65,47,.09);
    }
    .qr-frame::before, .qr-frame::after {
      content: ""; position: absolute; width: 34px; height: 34px; pointer-events: none;
      border-color: var(--accent); border-style: solid;
    }
    .qr-frame::before { top: 11px; right: 11px; border-width: 3px 3px 0 0; border-radius: 9px 9px 0 0; }
    .qr-frame::after { bottom: 11px; left: 11px; border-width: 0 0 3px 3px; border-radius: 0 0 9px 9px; }
    #qrcode {
      display: grid; place-items: center; width: min(100%, 250px); aspect-ratio: 1 / 1;
      overflow: visible; background: #fff;
    }
    #qrcode canvas, #qrcode img {
      display: block; width: 100% !important; height: 100% !important; max-width: 100%; max-height: 100%;
      object-fit: contain; object-position: center;
    }
    #qrcode canvas { image-rendering: pixelated; }
    .merchant-id-badge {
      max-width: 100%; margin-top: 17px; padding: 8px 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      border-radius: 999px; color: #315b4b; background: #edf5f1; font-size: 14px; font-weight: 700;
    }
    .qr-amount { margin-top: 12px; color: var(--primary); font-size: 25px; font-weight: 900; }
    .qr-description { max-width: 360px; margin: 6px auto 0; color: var(--muted); font-size: 14px; }
    .qr-actions { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 20px; }
    .qr-action { min-height: 44px; padding: 8px 10px; border-radius: 14px; color: #40554c; background: #f1f5f3; cursor: pointer; font-weight: 700; }
    .qr-action:hover { color: var(--primary); background: var(--primary-soft); }

    .status-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; }
    .status-main { display: flex; align-items: center; gap: 12px; }
    .status-main > i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: var(--primary); background: var(--primary-soft); }
    .status-main strong { display: block; font-size: 16px; }
    .status-main span { display: block; color: var(--muted); font-size: 13px; }
    #sync-error-msg { margin-top: 8px; color: var(--danger); font-size: 13px; }

    .activity-list { display: grid; gap: 10px; }
    .activity-empty { padding: 25px 16px; text-align: center; color: #84918b; border: 1px dashed #ccdcd5; border-radius: 18px; background: #fafcfb; }
    .activity-empty i { display: block; margin-bottom: 8px; color: #9aaba3; font-size: 25px; }
    .activity-item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid #e4ece8; border-radius: 17px; background: #fafcfb; }
    .activity-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; }
    .activity-item.success .activity-icon { color: var(--success); background: var(--primary-soft); }
    .activity-item.error .activity-icon { color: var(--danger); background: var(--danger-soft); }
    .activity-copy { min-width: 0; flex: 1; }
    .activity-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
    .activity-copy span { display: block; color: var(--muted); font-size: 12px; }
    .activity-amount { color: var(--primary); white-space: nowrap; font-weight: 900; }

    /* Sales log */
    .sales-log-panel { margin-top: 22px; }
    .sales-toolbar {
      display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(150px, .65fr)) auto;
      gap: 10px; align-items: end; margin-bottom: 18px;
    }
    .sales-toolbar .form-group { margin: 0; }
    .sales-toolbar input, .sales-toolbar select {
      width: 100%; height: 48px; padding: 0 14px;
      border: 1px solid var(--line); border-radius: 15px;
      color: var(--ink); background: #fbfdfc; outline: none;
    }
    .sales-toolbar input:focus, .sales-toolbar select:focus {
      border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgba(18,185,129,.12);
    }
    .sales-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .sales-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
    .sales-summary-card {
      padding: 15px 16px; border: 1px solid #e2ebe7; border-radius: 18px; background: #fafcfb;
    }
    .sales-summary-card span { display: block; color: var(--muted); font-size: 13px; }
    .sales-summary-card strong { display: block; margin-top: 3px; font-size: 20px; line-height: 1.35; }
    .sales-summary-card.success strong { color: var(--success); }
    .sales-summary-card.pending strong { color: var(--warning); }
    .sales-summary-card.failed strong { color: var(--danger); }
    .sales-table-wrap {
      max-height: 480px;
      overflow-x: auto;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      border: 1px solid #e1eae6;
      border-radius: 20px;
      background: #fff;
    }
    .sales-table { width: 100%; min-width: 1080px; border-collapse: collapse; }
    .sales-table th, .sales-table td { padding: 13px 14px; border-bottom: 1px solid #edf2ef; text-align: right; vertical-align: middle; }
    .sales-table th { position: sticky; top: 0; z-index: 1; color: #42564e; background: #f5f8f7; font-size: 14px; white-space: nowrap; }
    .sales-table td { font-size: 14px; }
    .sales-table tbody tr:hover { background: #fbfdfc; }
    .sales-table tbody tr:last-child td { border-bottom: 0; }
    .transaction-id { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: left; font-family: Tahoma, Arial, sans-serif; font-size: 12px; }
    .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
    .status-badge.confirmed { color: #086542; background: #e8f7f0; }
    .status-badge.pending { color: #9a5d08; background: #fff4d8; }
    .status-badge.rejected, .status-badge.expired, .status-badge.failed { color: #a72b38; background: #fff0f2; }
    .table-actions { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
    .table-action-btn {
      min-height: 34px; padding: 7px 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
      border: 1px solid #d8e4df; border-radius: 12px; color: var(--primary-strong); background: #f7fbf9;
      cursor: pointer; font-size: 13px; font-weight: 800; white-space: nowrap;
      transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
    }
    .table-action-btn:hover { transform: translateY(-1px); color: var(--primary); background: var(--primary-soft); border-color: #b8ddcd; }
    .table-action-btn:disabled { opacity: .6; cursor: wait; transform: none; }
    .table-action-btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
    .sales-empty { padding: 34px 18px; text-align: center; color: #7d8c85; }
    .sales-empty i { display: block; margin-bottom: 8px; font-size: 28px; color: #9baba4; }
    .sales-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 13px; }

    .toast {
      position: fixed; z-index: 4000; bottom: 26px; left: 50%;
      max-width: min(520px, calc(100% - 28px)); padding: 13px 20px;
      display: flex; align-items: center; gap: 9px;
      border-radius: 17px; color: #fff; background: #142820; box-shadow: 0 18px 46px rgba(0,0,0,.24);
      opacity: 0; visibility: hidden; transform: translate(-50%, 26px); transition: .25s ease;
      font-size: 15px;
    }
    .toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
    .toast.is-error { background: #8f2631; }

    .loading {
      width: 18px; height: 18px; display: inline-block; border: 2px solid currentColor;
      border-top-color: transparent; border-radius: 50%; animation: spin .65s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .install-pwa-btn {
      position: fixed; z-index: 1000; bottom: 20px; left: 20px;
      min-height: 48px; padding: 10px 18px; display: flex; align-items: center; gap: 8px;
      border-radius: 16px; color: #fff; background: var(--primary); box-shadow: 0 15px 34px rgba(8,122,85,.28);
      cursor: pointer; font-weight: 800;
    }

    .qr-modal {
      position: fixed; inset: 0; z-index: 3500; display: none; place-items: center;
      padding: 22px; background: rgba(4, 24, 17, .78); backdrop-filter: blur(12px);
    }
    .qr-modal.open { display: grid; }
    .qr-modal-card { width: min(520px, 100%); padding: 22px; border-radius: 30px; background: #fff; box-shadow: 0 35px 100px rgba(0,0,0,.3); }
    .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
    .modal-header strong { font-size: 22px; }
    .modal-qr {
      width: min(100%, 420px); aspect-ratio: 1; margin: auto; padding: 34px;
      display: grid; place-items: center; overflow: visible; background: #fff;
      border: 1px solid var(--line); border-radius: 24px;
    }
    .modal-qr canvas, .modal-qr img {
      display: block; width: 100% !important; height: 100% !important; max-width: 100%; max-height: 100%;
      object-fit: contain; object-position: center;
    }
    .modal-qr canvas { image-rendering: pixelated; }
    .modal-note { margin: 14px 0 0; text-align: center; color: var(--muted); }

    .mobile-nav {
      position: fixed; z-index: 900; right: 14px; bottom: 12px; left: 14px;
      display: none; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px;
      border: 1px solid rgba(255,255,255,.9); border-radius: 22px;
      background: rgba(255,255,255,.92); box-shadow: 0 18px 48px rgba(11,59,42,.18); backdrop-filter: blur(16px);
    }
    .mobile-nav button { min-height: 50px; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 15px; color: #6c7a74; background: transparent; cursor: pointer; font-size: 12px; }
    .mobile-nav button i { font-size: 17px; }
    .mobile-nav button.active { color: var(--primary); background: var(--primary-soft); }
    /* Keep mobile actions hidden until merchant authentication succeeds.
       The mobile media rule sets .mobile-nav to display:grid, so this
       auth-state rule must take precedence while hidden-section is present. */
    .mobile-nav.hidden-section { display: none !important; }

    @media (max-width: 980px) {
      .login-shell { grid-template-columns: 1fr; }
      .login-showcase { display: none; }
      .login-panel { min-height: calc(100vh - 48px); }
      .mobile-brand { display: flex; }
      .dashboard-grid { grid-template-columns: 1fr; }
      .qr-panel { position: static; }
    }

    @media (max-width: 720px) {
      body { font-size: 17px; }
      .login-shell { width: min(100% - 24px, 560px); margin: 12px auto; border-radius: 30px; }
      .login-panel { padding: 28px 22px; min-height: calc(100vh - 24px); }
      .login-card h2 { font-size: 30px; }
      .app-shell { width: min(100% - 24px, 680px); margin: 12px auto 100px; }
      .topbar { top: 8px; min-height: 68px; padding: 9px 11px; border-radius: 21px; }
      .topbar-brand img { width: 44px; height: 44px; }
      .topbar-brand strong { font-size: 17px; }
      .topbar-brand span { max-width: 145px; }
      .sync-chip { display: none; }
      .merchant-hero { grid-template-columns: 1fr auto; padding: 24px; border-radius: 28px; }
      .hero-icon { width: 70px; height: 70px; border-radius: 22px; font-size: 29px; }
      .merchant-hero h1 { font-size: 29px; }
      .panel-card { padding: 20px; border-radius: 24px; }
      .panel-heading h2 { font-size: 21px; }
      .quick-amounts { grid-template-columns: repeat(2, 1fr); }
      .action-row { grid-template-columns: 1fr; }
      .qr-actions { grid-template-columns: 1fr; }
      .status-card { align-items: flex-start; flex-direction: column; }
      .mobile-nav { display: grid; }
      .install-pwa-btn { bottom: 84px; left: 14px; }
      .toast { bottom: 84px; }
      .sales-toolbar { grid-template-columns: 1fr 1fr; }
      .sales-toolbar .search-field { grid-column: 1 / -1; }
      .sales-toolbar-actions { grid-column: 1 / -1; }
      .sales-summary { grid-template-columns: repeat(2, 1fr); }
      .sales-table-wrap { max-height: 56vh; -webkit-overflow-scrolling: touch; }
    }

    @media (max-width: 430px) {
      .topbar-actions .icon-btn:nth-child(2) { display: none; }
      .merchant-hero { padding: 21px; }
      .hero-icon { display: none; }
      .merchant-hero { grid-template-columns: 1fr; }
      .panel-heading { align-items: flex-start; }
      .heading-icon { width: 42px; height: 42px; }
      .qr-frame { max-width: 290px; }
      .sales-toolbar { grid-template-columns: 1fr; }
      .sales-toolbar .search-field, .sales-toolbar-actions { grid-column: auto; }
      .sales-summary { grid-template-columns: 1fr; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }

.merchant-support-center{display:grid!important;grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr);gap:18px;align-items:start}.merchant-support-head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid #e9f0ed}.merchant-support-head>div{display:grid;gap:4px}.merchant-support-head strong{font-size:16px;color:#173f33}.merchant-support-head strong i{margin-left:6px;color:#0e9569}.merchant-support-head span{font-size:12px;color:#73857e}.support-counter{min-width:30px;height:30px;display:grid!important;place-items:center;border-radius:999px;background:#e9f7f1;color:#0b805b!important;font-weight:900}.merchant-support-form{display:grid;gap:8px}.merchant-support-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.merchant-support-form input,.merchant-support-form textarea,.merchant-support-form select,.merchant-ticket-reply textarea{width:100%;box-sizing:border-box;border:1px solid #dce8e3;border-radius:12px;padding:10px 11px;background:#fff;color:#1b4034;font:inherit;outline:none}.merchant-support-form textarea{min-height:98px;resize:vertical}.merchant-support-form input:focus,.merchant-support-form textarea:focus,.merchant-support-form select:focus,.merchant-ticket-reply textarea:focus{border-color:#1da978;box-shadow:0 0 0 3px rgba(29,169,120,.1)}.merchant-ticket-submit{justify-content:center}.merchant-ticket-list{display:grid;gap:8px;max-height:360px;overflow:auto}.merchant-ticket-item{border:1px solid #e2ece7;border-radius:13px;background:#fff;padding:11px 12px;cursor:pointer;text-align:right;display:grid;gap:6px}.merchant-ticket-item:hover{border-color:#b9ddcf;background:#fafdfc}.merchant-ticket-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.merchant-ticket-title{font-weight:900;color:#274b3f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.merchant-ticket-meta{display:flex;justify-content:space-between;gap:8px;color:#7a8d85;font-size:11px}.merchant-ticket-status{font-size:11px;font-weight:900;padding:4px 8px;border-radius:999px;background:#eef3f1;color:#587068;white-space:nowrap}.merchant-ticket-status.open{background:#fff4d7;color:#8a6206}.merchant-ticket-status.in_progress{background:#e7f2ff;color:#245f9a}.merchant-ticket-status.waiting_user{background:#f0e9ff;color:#6842a0}.merchant-ticket-status.resolved{background:#e6f7ee;color:#16704d}.merchant-ticket-status.closed{background:#edf0f2;color:#69737a}.merchant-ticket-modal{position:fixed;inset:0;z-index:13000;background:rgba(8,32,24,.52);display:none;align-items:center;justify-content:center;padding:18px}.merchant-ticket-modal.show{display:flex}.merchant-ticket-dialog{width:min(700px,100%);max-height:92vh;background:#fff;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.18)}.merchant-ticket-dialog-head{padding:18px 20px;border-bottom:1px solid #e9f0ed;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.merchant-ticket-dialog-head h3{margin:0;color:#173f33}.merchant-ticket-dialog-head p{margin:5px 0 0;color:#7a8d85;font-size:12px}.merchant-ticket-dialog-head button{border:0;width:34px;height:34px;border-radius:10px;background:#edf4f1;cursor:pointer}.merchant-ticket-thread{padding:17px;overflow:auto;display:flex;flex-direction:column;gap:10px;background:#f7faf8;min-height:230px}.merchant-ticket-message{max-width:86%;padding:10px 12px;border-radius:15px;line-height:1.8;font-size:13px;white-space:pre-wrap}.merchant-ticket-message.mine{align-self:flex-start;background:#dff3ea;color:#1d4f3e;border-bottom-right-radius:5px}.merchant-ticket-message.admin{align-self:flex-end;background:#fff;border:1px solid #e1e9e5;color:#334d44;border-bottom-left-radius:5px}.merchant-ticket-message small{display:block;margin-top:5px;opacity:.65;font-size:10px}.merchant-ticket-reply{padding:14px 18px;border-top:1px solid #e9f0ed}.merchant-ticket-reply-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.merchant-ticket-reply-actions button{border:0;border-radius:11px;padding:9px 15px;font:inherit;font-weight:800;cursor:pointer}.merchant-ticket-reply-actions .send{background:#0c8d64;color:#fff}.merchant-ticket-reply-actions .close{background:#edf3f0;color:#315044}.ltr-input{direction:ltr;text-align:left}@media(max-width:780px){.merchant-support-center{grid-template-columns:1fr}.merchant-support-row{grid-template-columns:1fr}.merchant-ticket-message{max-width:94%}}

.merchant-operations-modal{position:fixed;inset:0;z-index:12000;background:rgba(8,32,24,.52);display:none;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(4px)}.merchant-operations-modal.show{display:flex}.merchant-operations-dialog{width:min(900px,100%);max-height:92vh;background:#fff;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 26px 80px rgba(0,0,0,.2)}.merchant-operations-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid #e8efec}.merchant-operations-head h2{margin:0;color:#173f33;font-size:20px}.merchant-operations-head p{margin:5px 0 0;color:#788a83;font-size:12px}.merchant-operations-head-actions{display:flex;gap:8px;align-items:center}.compact-operation-refresh{padding:8px 11px}.merchant-operations-close{border:0;width:36px;height:36px;border-radius:11px;background:#eef4f1;color:#35584c;cursor:pointer}.merchant-operations-tabs{display:flex;gap:8px;padding:12px 18px;border-bottom:1px solid #e8efec;background:#fbfdfc;overflow:auto}.merchant-operation-tab{display:flex;align-items:center;gap:7px;border:1px solid #dfe9e5;background:#fff;color:#5a7168;border-radius:11px;padding:9px 13px;font:inherit;font-weight:800;white-space:nowrap;cursor:pointer}.merchant-operation-tab.active{background:#e8f6f0;border-color:#a7d8c5;color:#0d7956}.merchant-operation-badge{min-width:20px;height:20px;display:grid;place-items:center;border-radius:999px;background:#d9eee6;color:#0f7254;font-size:10px}.merchant-operations-body{padding:18px;overflow:auto;background:#f7faf8}.merchant-operation-pane[hidden]{display:none!important}.merchant-operation-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:12px}.merchant-operation-card{background:#fff;border:1px solid #e1ebe7;border-radius:16px;padding:14px}.merchant-operation-card-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}.merchant-operation-card-title strong{color:#254b3f}.merchant-operation-card-title span{font-size:12px;color:#7d8f87}.merchant-staff-form{margin:0!important}.merchant-support-popup{margin:0!important;background:#fff;border:1px solid #e1ebe7;border-radius:16px;padding:14px}.merchant-support-popup .merchant-ticket-list{max-height:430px}@media(max-width:760px){.merchant-operations-modal{align-items:flex-end;padding:0}.merchant-operations-dialog{max-height:90vh;border-radius:24px 24px 0 0}.merchant-operations-head{padding:15px 16px}.merchant-operations-head p{display:none}.compact-operation-refresh{font-size:0}.compact-operation-refresh i{font-size:14px}.merchant-operations-tabs{padding:10px 12px}.merchant-operations-body{padding:12px}.merchant-operation-grid{grid-template-columns:1fr}.merchant-operation-card-title{display:grid}.merchant-support-popup{grid-template-columns:1fr!important}}

.merchant-support-topbar-btn{position:relative}.merchant-support-topbar-badge{position:absolute;top:-5px;left:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#0d8d65;color:#fff;font-size:9px;font-weight:900;display:grid;place-items:center;border:2px solid #fff;box-sizing:border-box}.merchant-support-dialog{width:min(880px,100%)}
    .merchant-ops-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.merchant-summary-item{background:linear-gradient(180deg,#fff,#f8fbfa);border:1px solid #e1ebe7;border-radius:15px;padding:13px;display:grid;gap:5px}.merchant-summary-item span{font-size:11px;color:#7a8d85}.merchant-summary-item strong{font-size:16px;color:#214b3d}.merchant-operation-card-title.enhanced-title{align-items:center}.merchant-operation-card-title.enhanced-title>div{display:grid;gap:4px}.merchant-section-count{background:#eef7f3;color:#26755b;border-radius:999px;padding:6px 10px;font-weight:800;white-space:nowrap}.merchant-staff-layout,.merchant-campaign-layout{display:grid;grid-template-columns:minmax(270px,.8fr) minmax(340px,1.2fr);gap:14px}.merchant-form-panel,.merchant-list-panel{border:1px solid #e3ece8;border-radius:15px;background:#fbfdfc;padding:14px}.merchant-form-panel-head,.merchant-list-panel-head{display:flex;align-items:center;gap:10px;margin-bottom:13px}.merchant-form-panel-head>i{width:38px;height:38px;border-radius:11px;background:#e9f6f0;color:#0d8c64;display:grid;place-items:center}.merchant-form-panel-head>div,.merchant-list-panel-head>div{display:grid;gap:3px}.merchant-form-panel-head strong,.merchant-list-panel-head strong{color:#244b3e}.merchant-form-panel-head span,.merchant-list-panel-head span{font-size:11px;color:#809089}.merchant-staff-form-grid,.merchant-campaign-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.merchant-staff-form-grid label,.merchant-campaign-form-grid label{display:grid;gap:6px}.merchant-staff-form-grid label>span,.merchant-campaign-form-grid label>span{font-size:11px;font-weight:800;color:#60736b}.merchant-staff-form-grid input,.merchant-staff-form-grid select,.merchant-campaign-form-grid input{width:100%;box-sizing:border-box;border:1px solid #dce7e2;border-radius:11px;padding:10px 11px;background:#fff;color:#1d4235;font:inherit;outline:none}.merchant-staff-form-grid input:focus,.merchant-staff-form-grid select:focus,.merchant-campaign-form-grid input:focus{border-color:#21a67a;box-shadow:0 0 0 3px rgba(33,166,122,.09)}.merchant-campaign-form-grid .wide{grid-column:1/-1}.merchant-full-action{justify-content:center;width:100%;margin-top:12px}.merchant-form-actions{display:flex;gap:8px;align-items:center}.merchant-form-actions .merchant-full-action{flex:1}.merchant-suffix-input{display:flex;align-items:center;border:1px solid #dce7e2;border-radius:11px;background:#fff;overflow:hidden}.merchant-suffix-input input{border:0!important;box-shadow:none!important}.merchant-suffix-input b{padding:0 10px;color:#6f817a}.merchant-staff-list,.merchant-campaign-list{display:grid;gap:9px;max-height:410px;overflow:auto;padding-left:2px}.merchant-staff-item,.merchant-campaign-item{border:1px solid #e1ebe7;background:#fff;border-radius:14px;padding:11px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.merchant-staff-main,.merchant-campaign-main{display:flex;align-items:center;gap:10px;min-width:0}.merchant-staff-avatar,.merchant-campaign-icon{width:38px;height:38px;border-radius:12px;background:#edf7f3;color:#117b5b;display:grid;place-items:center;font-weight:900;flex:0 0 auto}.merchant-staff-copy,.merchant-campaign-copy{display:grid;gap:4px;min-width:0}.merchant-staff-copy strong,.merchant-campaign-copy strong{color:#264b3f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.merchant-staff-meta,.merchant-campaign-meta{font-size:11px;color:#7c8d86;display:flex;gap:7px;flex-wrap:wrap}.merchant-status-pill{font-size:10px;font-weight:900;border-radius:999px;padding:4px 8px;background:#e8f7f0;color:#14704f}.merchant-status-pill.off{background:#f0f2f3;color:#68757a}.merchant-row-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}.merchant-mini-btn{border:1px solid #dce8e3;background:#fff;color:#35594c;border-radius:9px;padding:7px 9px;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.merchant-mini-btn:hover{background:#f5faf8}.merchant-mini-btn.primary{border-color:#b9dece;background:#edf8f3;color:#0d7a57}.merchant-empty-card{border:1px dashed #d6e4de;border-radius:13px;padding:22px 12px;text-align:center;color:#7d8e87;background:#fff;display:grid;gap:6px}.merchant-empty-card i{font-size:20px;color:#9eb1aa}
    @media(max-width:760px){.merchant-ops-summary{grid-template-columns:1fr}.merchant-staff-layout,.merchant-campaign-layout{grid-template-columns:1fr}.merchant-staff-form-grid,.merchant-campaign-form-grid{grid-template-columns:1fr}.merchant-campaign-form-grid .wide{grid-column:auto}.merchant-staff-item,.merchant-campaign-item{align-items:flex-start}.merchant-row-actions{flex-direction:column}.merchant-support-topbar-badge{top:-3px;left:-3px}}

/* PAYDAKHT_QR_FINAL_FIX_START */
/* Keep the payment QR optically separated from the scanner decoration and
   preserve a real square/quiet-zone at every viewport width. */
.qr-frame {
  width: min(100%, 330px) !important;
  aspect-ratio: 1 / 1 !important;
  padding: 30px !important;
  overflow: visible !important;
}
.qr-frame::before,
.qr-frame::after {
  display: none !important;
}
#qrcode {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}
#qrcode > img,
#qrcode > img.merchant-payment-qr {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  max-width: 240px !important;
  max-height: 240px !important;
  object-fit: contain !important;
  flex: none !important;
}
.modal-qr {
  padding: 36px !important;
  overflow: visible !important;
}
.modal-qr > img,
.modal-qr > img.merchant-payment-qr {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  max-width: 320px !important;
  max-height: 320px !important;
  object-fit: contain !important;
}
@media (max-width: 480px) {
  .qr-frame { padding: 28px !important; }
  #qrcode > img,
  #qrcode > img.merchant-payment-qr { max-width: 225px !important; max-height: 225px !important; }
}
/* PAYDAKHT_QR_FINAL_FIX_END */