/* Vazirmatn — bundled locally, no CDN. It is the typeface the frontend-v3
   prototype is designed around and it covers Persian/Arabic and Latin in one
   file, so every panel (admin, representative, both login screens) renders the
   same way offline. Source: npm package vazirmatn@33.0.3, variable weight axis;
   licensed under the SIL Open Font License (see app/static/fonts/OFL.txt). */
@font-face {
  font-family: "Vazirmatn";
  src: url("/static/fonts/Vazirmatn-Variable.woff2") format("woff2-variations"),
       url("/static/fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
      color-scheme: light;
      --bg: #f5f7fb;
      --bg-elevated: #ffffff;
      --bg-soft: #f8faff;
      --sidebar-bg: #0b1220;
      --sidebar-elevated: #101a2b;
      --sidebar-text: #e2e8f0;
      --sidebar-muted: #94a3b8;
      --text: #152033;
      --muted: #667085;
      --line: #e7eaf0;
      --primary: #635bff;
      --primary-strong: #5046e5;
      --success: #16a34a;
      --warning: #d97706;
      --danger: #dc2626;
      --info: #2563eb;
      --focus-ring: 0 0 0 3px rgba(99, 91, 255, .28);
      --table-cell-y: 11px;
      --table-cell-x: 12px;
      --radius-xs: 10px;
      --radius-sm: 14px;
      --radius-md: 18px;
      --space-1: 8px;
      --space-2: 16px;
      --space-3: 24px;
      --space-4: 32px;
      --shadow-soft: 0 8px 24px rgba(15, 23, 42, .07);
      --shadow-panel: 0 12px 32px rgba(15, 23, 42, .1);
      --sidebar-width: 276px;
      --border: var(--line);
      --surface: var(--bg-elevated);
      --surface-soft: var(--bg-soft);
      --warning-text: #92400e;
      --bar-height: 28px;
      --v3-surface: var(--bg-elevated);
      --v3-surface-soft: var(--bg-soft);
      --v3-border: var(--line);
      --v3-primary: var(--primary);
      --v3-primary-strong: var(--primary-strong);
      --v3-accent: var(--primary);
      --v3-radius: var(--radius-md);
      --v3-radius-lg: var(--radius-md);
      --v3-content-max: 1680px;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: "Vazirmatn", "Segoe UI", Tahoma, Arial, sans-serif;
      line-height: 1.55;
    }

    a { color: inherit; }
    h1, h2, h3 { margin: 0; }

    .layout {
      display: flex;
      min-height: 100vh;
      align-items: stretch;
    }

    .sidebar {
      width: var(--sidebar-width);
      flex: 0 0 var(--sidebar-width);
      background: var(--sidebar-bg);
      color: var(--sidebar-text);
      border-left: 1px solid rgba(148, 163, 184, .2);
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
      padding: 18px 14px;
      scrollbar-gutter: stable;
    }

    .brand {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-1);
      margin-bottom: 6px;
    }

    .brand h2 { font-size: 19px; font-weight: 800; }

    .version-badge {
      border-radius: 999px;
      background: #1d4ed8;
      color: #fff;
      padding: 6px 11px;
      font-size: 12px;
      font-family: "Vazirmatn", sans-serif;
      direction: ltr;
      min-width: 74px;
      text-align: center;
    }

    .sidebar-intro {
      font-size: 13px;
      color: var(--sidebar-muted);
      margin-bottom: var(--space-2);
    }

    /* The workspace switch moved into the header (.context-switch), so the
       sidebar only reports the resolved workspace (.sidebar-context). */

    [data-sidebar-mode-panel][hidden] { display: none !important; }

    .nav-group {
      border: 1px solid rgba(148, 163, 184, .18);
      border-radius: var(--radius-sm);
      background: rgba(15, 23, 42, .36);
      margin-bottom: var(--space-2);
      overflow: hidden;
    }

    .nav-group summary {
      list-style: none;
      cursor: pointer;
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      color: #bfdbfe;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      border-bottom: 1px solid rgba(148, 163, 184, .16);
    }

    .nav-group summary::after {
      content: '▾';
      transition: transform .2s ease;
    }

    .nav-group:not([open]) summary::after { transform: rotate(90deg); }

    .nav-items {
      padding: 8px;
      display: grid;
      gap: 6px;
    }

    .nav-section-label {
      color: var(--sidebar-muted);
      font-size: 11px;
      font-weight: 800;
      padding: 8px 12px 2px;
    }

    .sidebar a {
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 8px;
      color: #dbeafe;
      border: 1px solid transparent;
      border-radius: 12px;
      padding: 10px 12px;
      font-size: 14px;
      transition: all .15s ease;
      min-height: 40px;
      background: rgba(255, 255, 255, .02);
    }

    .sidebar a:hover,
    .sidebar a:focus-visible {
      background: rgba(255, 255, 255, .08);
      border-color: rgba(148, 163, 184, .4);
      outline: none;
    }

    .sidebar a.active-link {
      background: var(--primary);
      border-color: rgba(147, 197, 253, .8);
      box-shadow: 0 10px 24px rgba(99, 91, 255, .25);
      color: #fff;
      font-weight: 700;
    }

    .icon {
      width: 20px;
      height: 20px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
    }

    .icon svg {
      width: 18px;
      height: 18px;
      fill: currentColor;
      opacity: .95;
    }

    .sidebar-admin {
      margin-top: var(--space-2);
      border-radius: var(--radius-sm);
      padding: 12px;
      background: var(--sidebar-elevated);
      border: 1px solid rgba(148, 163, 184, .24);
    }

    .sidebar-admin .mini { color: var(--sidebar-muted); margin-top: 6px; }

    .content {
      flex: 1;
      min-width: 0;
      padding: var(--space-3);
    }

    .content-shell { max-width: 1520px; margin: 0 auto; }

    .topbar {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) auto;
      gap: 12px;
      align-items: center;
      min-height: 88px;
      padding: 12px var(--space-2);
      margin-bottom: var(--space-2);
      border-radius: var(--radius-md);
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .92);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(8px);
    }

    .topbar-left { display: grid; gap: 6px; }

    .topbar-title { font-size: 24px; font-weight: 800; line-height: 1.2; }

    .breadcrumb {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      font-size: 12px;
      color: var(--muted);
    }

    .topbar-right {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 10px;
    }

        .chip {
      border-radius: 999px;
      border: 1px solid #dbe5f3;
      background: #fff;
      padding: 8px 12px;
      font-size: 12px;
      color: #1e293b;
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    
    .chip-button {
      background: #f8fbff;
      color: #0f172a;
      border-color: #c8d7f3;
      box-shadow: none;
      cursor: pointer;
      font-weight: 700;
    }

    .semantic-chip {
      background: #f8fafc;
      border-color: #cbd5e1;
      color: #1e293b;
    }

    .chip-warn {
      background: #fff7ed;
      border-color: #fed7aa;
      color: #9a3412;
    }

    .page-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }

    .page-header h1 {
      font-size: 24px;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .page-header .subtitle {
      color: var(--muted);
      font-size: 13px;
    }

    .stats-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
    .section-card { background: var(--bg-elevated); border:1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); padding: 16px; }
    .data-table { width: 100%; }
    .status-pill { display:inline-flex; }
    .danger-zone { border:1px solid #fecaca; background:#fef2f2; border-radius:16px; padding:16px; }
    .empty-state { border:1px dashed #c8d7f3; border-radius:16px; padding: 24px; text-align:center; color:var(--muted); }
    .empty-state strong { display:block; color:var(--text); margin-bottom:6px; }
    .empty-state p { margin:0 0 12px; }
    .error-state { border:1px solid #fecaca; background:#fef2f2; color:#991b1b; border-radius:16px; padding:16px; }
    .loading-state { display:flex; align-items:center; gap:10px; min-height:72px; color:var(--muted); }
    .skeleton { background: linear-gradient(90deg,#edf2ff 20%,#e2e8f0 40%,#edf2ff 60%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 12px; }
    @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

    .command-launcher {
      position: fixed;
      inset: 0;
      z-index: 120;
      background: rgba(15,23,42,.56);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding-top: 90px;
    }

    .command-launcher-card {
      width: min(560px, calc(100vw - 24px));
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: var(--shadow-panel);
      padding: 16px;
    }

    .command-launcher-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
    .command-links { display:grid; gap:8px; margin-top:10px; }
    .command-group-title { margin-top: 8px; color: var(--muted); font-size: 12px; font-weight: 800; }
    .command-link { display:block; text-decoration:none; border:1px solid #dbe5f3; border-radius:12px; padding:10px 12px; background:#f8fbff; }
    .command-link:hover { border-color:#82a1ff; background:#edf4ff; }

.field-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; direction:ltr; }

    .timestamp { display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:5px; direction:rtl; }
    .timestamp small { color:var(--muted); font-size:11px; }
    .timestamp-label { color:var(--muted); }
    .timestamp-empty { color:var(--muted); }
    .technical-details { margin-top:10px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-soft); }
    .technical-details summary { cursor:pointer; padding:10px 12px; font-weight:700; }
    .technical-details-body { padding:0 12px 12px; overflow-wrap:anywhere; }
    .progress-indicator { width:100%; height:10px; overflow:hidden; border-radius:999px; background:#e2e8f0; }
    .progress-indicator > span { display:block; height:100%; width:var(--progress, 0%); background:var(--primary); border-radius:inherit; }

    .chip-count {
      min-width: 20px;
      height: 20px;
      border-radius: 999px;
      background: #e0e7ff;
      color: #312e81;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      direction: ltr;
    }

    .page-head {
      margin-bottom: var(--space-2);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-2);
      flex-wrap: wrap;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: var(--space-2);
    }

    .grid.cols-2 {
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .span-2 {
      grid-column: 1 / -1;
    }

    .card {
      background: var(--bg-elevated);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-panel);
      padding: var(--space-2);
      margin-bottom: var(--space-2);
    }

    .row {
      display: grid;
      gap: var(--space-2);
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .toolbar {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: var(--space-2);
    }


    .filter-toolbar {
      display: grid;
      grid-template-columns: minmax(260px, 2fr) repeat(auto-fit, minmax(180px, 1fr));
      gap: 10px;
      align-items: end;
      padding: 12px;
      max-width: 100%;
    }

    .filter-toolbar.full-width {
      max-width: 100%;
      width: 100%;
    }

    .panel-grid {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .summary-card-grid {
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }

    .table-card {
      padding: 14px;
      overflow: hidden;
    }

    .responsive-table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .management-table th,
    .management-table td {
      vertical-align: middle;
    }

    .management-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

.drawer-tabs {
      border-bottom: 1px solid #dbe5f3;
      padding-bottom: 10px;
      margin-bottom: 12px;
    }

    .money-input {
      direction: ltr;
      text-align: left;
      font-family: "Vazirmatn", "Segoe UI", sans-serif;
    }

    .nowrap {
      white-space: nowrap;
    }

    .text-truncate {
      max-width: 280px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .filter-advanced {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 10px;
    }

    .field-hint {
      margin-top: 4px;
      font-size: 12px;
      color: var(--muted);
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .form-section {
      border: 1px solid #dbe5f3;
      border-radius: var(--radius-sm);
      background: #f8fbff;
      padding: 12px;
      margin-bottom: 12px;
    }

    .form-section h4 {
      margin: 0 0 10px;
      font-size: 14px;
    }

    .modal-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: flex-start;
      margin-top: 12px;
      flex-wrap: wrap;
    }

    .segmented-toggle {
      display: inline-flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .log-box {
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 12px;
      padding: 12px;
      min-height: 44px;
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 13px;
    }

    .log-box-compact {
      max-height: 132px;
      overflow: auto;
    }

    .row-ssl {
      align-items: start;
    }

    .ssl-form-card,
    .ssl-status-card {
      display: grid;
      gap: 16px;
    }

    .ssl-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .ssl-form-grid label {
      display: grid;
      gap: 8px;
    }

    .ssl-form-grid input[type="text"],
    .ssl-form-grid input[type="email"],
    .ssl-form-grid input[type="number"],
    .ssl-form-grid select {
      width: 100%;
    }

    .toggle-row {
      align-items: center;
      grid-template-columns: auto 1fr;
    }

    .toggle-row input[type="checkbox"] {
      width: 18px;
      height: 18px;
    }

    .ssl-confirm,
    .ssl-form-grid .modal-actions {
      grid-column: 1 / -1;
    }

    .ssl-checklist,
    .ssl-guide-grid {
      display: grid;
      gap: 12px;
    }

    .ssl-guide-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mini-card {
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--bg-soft);
      padding: 14px;
    }

    .mini-card p {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 13px;
    }

    .ssl-actions {
      display: grid;
      gap: 8px;
      min-width: 210px;
    }

    .ssl-actions form {
      margin: 0;
    }

    .toast {
      border-radius: 14px;
      padding: 12px 14px;
      margin-bottom: 12px;
      border: 1px solid transparent;
      background: #fff;
      box-shadow: var(--shadow-soft);
    }

    .toast-success {
      border-color: #86efac;
      background: #f0fdf4;
      color: #166534;
    }

    .toast-error {
      border-color: #fca5a5;
      background: #fef2f2;
      color: #991b1b;
    }

    .rep-setting-card {
      padding: 14px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: #fff;
    }

    .preview-box {
      display: grid;
      gap: 6px;
    }

    .mini-label {
      font-size: 12px;
      color: var(--muted);
      font-weight: 700;
    }

    .pagination {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 12px;
      direction: ltr;
    }

    .pagination .page-link {
      min-width: 40px;
      min-height: 40px;
      border-radius: 12px;
      border: 1px solid #c8d7f3;
      background: #fff;
      color: #1e293b;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      padding: 0 12px;
    }

    .pagination .page-link:hover { transform: translateY(-1px); }

    .pagination .page-link.current {
      color: #fff;
      border-color: transparent;
      background: linear-gradient(135deg, var(--primary), var(--primary-strong));
      box-shadow: 0 8px 18px rgba(49, 94, 251, .28);
      pointer-events: none;
    }

    .pagination .page-dots {
      color: var(--muted);
      min-width: 24px;
      text-align: center;
    }

    .modal-card.compact-modal {
      max-width: min(920px, calc(100vw - 28px));
    }

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

    .muted { color: var(--muted); font-size: 13px; }
    .mini { font-size: 12px; }

    .flash {
      border-radius: 12px;
      border: 1px solid #bae6fd;
      background: #ecfeff;
      padding: 12px;
      margin-bottom: 12px;
    }

    .flash.error {
      border-color: #fecaca;
      background: #fef2f2;
    }

    .mt-2 { margin-top: 10px; }

    .metric {
      margin-top: 8px;
      font-size: 30px;
      font-weight: 800;
      font-family: "Vazirmatn", "Segoe UI", sans-serif;
      direction: ltr;
    }

    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: #fff;
      overflow: hidden;
      box-shadow: var(--shadow-soft);
    }

    th, td {
      padding: 12px 10px;
      text-align: right;
      font-size: 13px;
      border-bottom: 1px solid #ebf1fb;
      vertical-align: top;
      white-space: normal;
    }

    th {
      background: #f7faff;
      color: #334155;
      position: sticky;
      top: 0;
      z-index: 1;
    }

    tr:nth-child(even) td { background: #fcfdff; }
    tr:last-child td { border-bottom: none; }

    .pill {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      border: 1px solid #cfe0ff;
      background: #edf4ff;
      color: #1e3a8a;
      padding: 4px 10px;
      font-size: 12px;
      gap: 6px;
    }

    .ok { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
    .bad { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
    .warn { background: #fef3c7; color: #92400e; border-color: #fde68a; }

    input, select, textarea {
      width: 100%;
      min-height: 40px;
      border-radius: 12px;
      border: 1px solid #c9d8ef;
      background: #fff;
      color: var(--text);
      padding: 10px 12px;
      font: inherit;
      transition: border-color .18s, box-shadow .18s;
    }

    input:focus, select:focus, textarea:focus,
    button:focus-visible, .btn:focus-visible, .chip:focus-visible {
      outline: none;
      border-color: #82a1ff;
      box-shadow: 0 0 0 3px rgba(130, 161, 255, .2);
    }

    textarea { min-height: 96px; resize: vertical; }

    label {
      display: block;
      margin-bottom: 6px;
      font-size: 12px;
      font-weight: 700;
      color: #334155;
    }

    button,
    .btn,
    a.btn,
    button.btn {
      border: 1px solid transparent;
      border-radius: 12px;
      min-height: 40px;
      padding: 9px 14px;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #fff;
      font-weight: 700;
      background: linear-gradient(135deg, var(--primary), var(--primary-strong));
      box-shadow: 0 10px 20px rgba(49, 94, 251, .24);
      transition: transform .15s ease, filter .15s ease;
    }

    button:hover,
    .btn:hover,
    a.btn:hover,
    button.btn:hover {
      transform: translateY(-1px);
      filter: brightness(1.03);
    }

    .btn-secondary,
    a.btn-secondary,
    button.btn-secondary {
      color: #1e293b;
      background: #fff;
      border-color: #c8d7f3;
      box-shadow: none;
    }

    .tab-btn,
    a.tab-btn,
    button.tab-btn {
      border: 1px solid #c8d7f3;
      border-radius: 12px;
      min-height: 40px;
      padding: 9px 14px;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #1e293b;
      background: #fff;
      box-shadow: none;
      font-weight: 700;
      transition: transform .15s ease, filter .15s ease;
    }

    .tab-btn:hover { transform: translateY(-1px); }

    .tab-btn.active,
    .tab-btn.btn-success {
      color: #fff;
      border-color: transparent;
      background: linear-gradient(135deg, var(--primary), var(--primary-strong));
      box-shadow: 0 8px 18px rgba(49, 94, 251, .28);
    }

    .tab-btn.btn-secondary {
      color: #1e293b;
      background: #fff;
      border-color: #c8d7f3;
    }

    .btn-danger,
    a.btn-danger,
    button.btn-danger {
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: #fff;
      border-color: transparent;
    }
    .btn-success { background: linear-gradient(135deg, #22c55e, #15803d); }

    /* A modal is a top-level overlay, so it must paint above every full-screen
       shell that a page can open: the server workspace (140), the representative
       access workspace (90), the side drawer (160) and the command palette (180).
       At z-index 70 every modal launched from inside the server-management
       workspace — edit connection settings, inbound editor, client editor, link
       and debug panels — rendered behind that workspace, which looked like a
       button that did nothing. */
    .modal {
      position: fixed;
      inset: 0;
      z-index: 240;
      padding: 24px 14px;
      overflow: auto;
      background: rgba(15, 23, 42, .62);
      display: none;
    }

    .modal.open { display: block; }
    .modal.show,
    .modal.active { display: block; }

    .modal-card {
      max-width: 1024px;
      margin: 0 auto;
      border-radius: 20px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
      padding: var(--space-2);
    }

    .pagination .page-link.disabled { opacity:.52; cursor:not-allowed; pointer-events:none; }

    .referral-policy-modal-card {
      max-width: min(1040px, calc(100vw - 28px));
      max-height: calc(100vh - 40px);
      overflow: auto;
    }

    .referral-policy-modal-card .modal-head {
      position: sticky;
      top: 0;
      z-index: 2;
      padding-bottom: 12px;
      margin-bottom: 12px;
      background: #fff;
    }

    .referral-policy-modal-card .modal-actions {
      position: sticky;
      bottom: 0;
      z-index: 2;
      padding-top: 12px;
      margin-top: 12px;
      background: linear-gradient(180deg, rgba(255,255,255,0), #fff 20%);
      border-top: 1px solid var(--line);
    }

    #referralPolicyForm {
      display: grid;
      gap: var(--space-2);
    }

    #referralPolicyForm .operation-filter-card {
      margin-bottom: 0;
    }

    .modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: var(--space-2);
    }

    .switch {
      position: relative;
      display: inline-flex;
      width: 48px;
      height: 28px;
      min-height: 28px;
      padding: 0;
      border-radius: 999px;
      background: #9baac4;
      border: 1px solid #93a4c3;
      transition: all .2s ease;
      cursor: pointer;
      vertical-align: middle;
      box-shadow: none;
    }

    .switch::after {
      content: "";
      position: absolute;
      top: 3px;
      right: 3px;
      width: 20px;
      height: 20px;
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
      transition: transform .2s ease;
    }

    .switch.on { background: var(--success); border-color: var(--success); }
    .switch.on::after { transform: translateX(-20px); }
    .switch[aria-busy="true"] { pointer-events: none; opacity: .7; }

.mobile-nav-btn {
      display: none;
      margin-bottom: 12px;
      width: 100%;
    }


    @media (max-width: 860px) {
      .filter-toolbar { grid-template-columns: 1fr; }
      .pagination { justify-content: flex-start; }
      .modal-card.compact-modal { max-width: calc(100vw - 22px); }
    }

    @media (max-width: 1240px) {
      .layout { flex-direction: column; }
      .sidebar {
        width: 100%;
        height: auto;
        position: static;
        max-height: 100vh;
      }
      .content { padding-top: 0; }
      .mobile-nav-btn { display: inline-flex; }
      .sidebar.collapsed { display: none; }
      .topbar { grid-template-columns: 1fr; }
      .topbar-right { justify-content: flex-start; }
      .quick-search { max-width: 100%; min-width: 100%; }
    }

    @media (max-width: 768px) {
      .content { padding: 12px; }
      .card { overflow-x: auto; }
      th, td { font-size: 12px; }
    }

.logout-form { margin-top: 10px; }
.hidden { display: none !important; }
.autofill-trap {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  clip-path: inset(50%) !important;
  pointer-events: none !important;
}
.user-tabs, .rep-tab-strip { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.inline-form { display: inline; }

.side-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(900px, 96vw);
  max-width: 900px;
  background: #fff;
  z-index: 90;
  transform: translateX(100%);
  transition: transform .22s ease;
  box-shadow: -20px 0 50px rgba(15, 23, 42, .18);
  display: grid;
  grid-template-rows: auto 1fr;
}

.representative-management-drawer {
  width: min(96vw, 1500px);
  max-width: 1500px;
}

.filter-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.status-chip-filter {
  flex: 1 0 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.status-chip-filter legend {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}

.inline-icon-btn { min-height: 28px; padding: 2px 8px; border-radius: 8px; font-size: 12px; }
.compact-btn,
a.compact-btn,
button.compact-btn {
  min-height: 32px;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 12px;
}

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg-soft);
}

.auth-card {
  width: min(440px, 100%);
}

.auth-card .modal-head {
  margin-bottom: 14px;
}
.rep-checklist {
  display: grid;
  gap: 12px;
}

.rep-checklist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.rep-checklist-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

@media (max-width: 860px) {
  .rep-checklist-item {
    flex-direction: column;
    align-items: flex-start;
  }
}
.plan-bulk-check {
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  border-radius: 5px;
  display: inline-block;
  vertical-align: middle;
}

@media (max-width: 860px) {
  .subscriptions-table thead { display: none; }
  .subscriptions-table,
  .subscriptions-table tbody,
  .subscriptions-table tr,
  .subscriptions-table td { display: block; width: 100%; }
  .subscriptions-table tr {
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 10px;
    background: #fff;
    padding: 8px;
  }
  .subscriptions-table td {
    border: none;
    border-bottom: 1px dashed #e6edf5;
    padding: 8px 4px;
  }
  .subscriptions-table td:last-child { border-bottom: none; }
  .subscriptions-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-bottom: 4px;
  }
}
.side-drawer.open { transform: translateX(0); }
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: rgba(15, 23, 42, .54);
  display: none;
}
.drawer-backdrop.open { display: block; }
.drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid #dbe5f3;
}
.drawer-body {
  padding: 14px;
  overflow: auto;
  overscroll-behavior: contain;
}

.representative-management-drawer .drawer-body {
  display: grid;
  gap: 10px;
  align-content: start;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

.representative-management-drawer .rep-tab-strip,
.representative-management-drawer .drawer-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-elevated, #fff);
  border-bottom: 1px solid var(--line, #dbe5f3);
  padding-top: 8px;
  padding-bottom: 10px;
  margin-top: 0;
  margin-bottom: 12px;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.rep-tab-strip .tab-btn {
  white-space: nowrap;
}

.representative-management-drawer .rep-tab-panels {
  position: relative;
  z-index: 1;
  display: block;
  clear: both;
  min-height: 240px;
}

.representative-management-drawer [data-rep-panel] {
  position: static;
  display: block;
  padding-top: 12px;
}

.representative-management-drawer [data-rep-panel].hidden {
  display: none !important;
}

.representative-management-drawer [data-rep-panel="wallet"] {
  overflow: visible;
}

.representative-management-drawer .responsive-table-wrap {
  overflow: auto;
}

.representative-management-drawer [data-rep-panel="wallet"] .responsive-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.representative-management-drawer .management-table th,
.representative-management-drawer .management-table td {
  white-space: nowrap;
  vertical-align: top;
}

.representative-management-drawer .management-table td.actions {
  white-space: normal;
  min-width: 220px;
}

.representative-management-drawer .management-table td.actions .actions,
.representative-management-drawer .management-table td.actions .action-menu {
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
}

.representative-management-drawer .management-table td.actions .btn-secondary,
.representative-management-drawer .management-table td.actions .btn-danger,
.representative-management-drawer .management-table td.actions .tab-btn {
  min-width: 0;
}

.representative-management-drawer .management-table td.text-truncate {
  max-width: 260px;
  white-space: normal;
  word-break: break-word;
}

.representative-management-drawer .filter-toolbar.full-width {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.representative-management-drawer .filter-toolbar.full-width .modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

.representative-management-drawer .form-section .row {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

[data-user-panel="profile"] .row > div {
  margin-bottom: 8px;
}
[data-user-panel="profile"] .form-section label {
  margin-bottom: 8px;
}
[data-user-panel="profile"] .form-section label + input,
[data-user-panel="profile"] .form-section label + select,
[data-user-panel="profile"] .form-section label + textarea {
  margin-bottom: 12px;
}

.user-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.table-wrap { overflow-x: auto; }
.spaced-top { margin-top: 10px; }
.section-spaced { margin-bottom: 12px; }
.no-margin { margin: 0 !important; }

.data-table .col-compact,
.data-table .col-status,
.data-table .col-actions,
.data-table .col-mono {
  white-space: nowrap;
}

.data-table .col-wrap {
  white-space: normal;
  word-break: break-word;
}

.data-table .col-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  direction: ltr;
  text-align: left;
}

.mini-bars { display: grid; gap: 6px; }
.mini-bar-row { display:flex; align-items:center; gap:8px; margin: 6px 0; }
.mini-bar-label { min-width: 48px; font-size: 12px; }
.mini-bar-track { flex:1; background:#e8efff; border-radius:999px; height:10px; overflow:hidden; }
.mini-bar-fill { height:10px; background:linear-gradient(90deg,#315efb,#6b8bff); }
.mini-bar-value {
  min-width: 80px;
  text-align: left;
  font-family: "Vazirmatn", "Segoe UI", sans-serif;
  direction: ltr;
}

.status-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-status-block {
  grid-column: 1 / -1;
}
.filter-status-block .status-chip-group {
  width: 100%;
}
.no-wrap-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
}
.no-wrap-chips .tab-btn { white-space: nowrap; }
.event-trace-modal {
  padding: 14px;
  overflow: hidden;
}

.event-trace-modal-card {
  width: min(1320px, calc(100vw - 28px));
  max-width: 1320px;
  height: min(920px, calc(100vh - 28px));
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.event-trace-modal-head {
  flex: 0 0 auto;
  padding: 16px 18px;
  margin: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.event-trace-id-row,
.event-trace-summary-counts,
.event-trace-chip-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.event-trace-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px;
}

.event-trace-loading {
  min-height: 220px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 700;
}

.event-trace-loading::before {
  content: "";
  width: 28px;
  height: 28px;
  margin-inline-end: 10px;
  border: 3px solid var(--line);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: event-trace-spin .8s linear infinite;
}

@keyframes event-trace-spin {
  to { transform: rotate(360deg); }
}

.event-trace-overview {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.event-trace-overview > div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft, #f8fafc);
}

.event-trace-overview span,
.event-trace-id-summary span {
  color: var(--muted);
  font-size: .82rem;
}

.event-trace-summary {
  margin-bottom: 14px;
}

.event-trace-id-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.event-trace-id-summary > div {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.event-trace-main-error {
  margin-bottom: 16px;
}

.event-trace-error-message {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.event-trace-failure-context {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(220, 38, 38, .22);
}

.event-trace-timeline {
  position: relative;
  padding-inline-start: 24px;
}

.event-trace-timeline::before {
  content: "";
  position: absolute;
  inset-block: 46px 10px;
  inset-inline-start: 8px;
  width: 2px;
  background: var(--line);
}

.event-trace-item {
  position: relative;
  margin: 0 0 12px;
}

.event-trace-marker {
  position: absolute;
  inset-inline-start: -22px;
  top: 18px;
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 0 1px var(--line);
}

.event-trace-item.tone-ok .event-trace-marker { background: #16a34a; }
.event-trace-item.tone-warn .event-trace-marker { background: #d97706; }
.event-trace-item.tone-bad .event-trace-marker { background: #dc2626; }

.event-trace-item-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.event-trace-item.tone-bad .event-trace-item-card {
  border-color: rgba(220, 38, 38, .4);
  background: rgba(254, 242, 242, .55);
}

.event-trace-item-head,
.event-trace-item-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.event-trace-item-head > div,
.event-trace-item-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.event-trace-item-card details {
  margin-top: 10px;
}

.event-trace-kv {
  display: grid;
  gap: 0;
  margin: 10px 0 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.event-trace-kv-row {
  display: grid;
  grid-template-columns: minmax(130px, 220px) minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}

.event-trace-kv-row:last-child { border-bottom: 0; }

.event-trace-kv dt,
.event-trace-kv dd {
  min-width: 0;
  margin: 0;
  padding: 8px 10px;
  overflow-wrap: anywhere;
}

.event-trace-kv dt {
  background: var(--surface-soft, #f8fafc);
  color: var(--muted);
  font-weight: 700;
}

.event-trace-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.event-trace-section-grid > section,
.event-trace-nested-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow-x: auto;
}

.event-trace-section-grid h5 {
  margin: 0 0 8px;
}

.event-trace-error-section {
  border-color: rgba(220, 38, 38, .45) !important;
}

.event-trace-long-text {
  margin-top: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.event-trace-nested-list {
  display: grid;
  gap: 8px;
}

@media (max-width: 760px) {
  .event-trace-modal { padding: 5px; }
  .event-trace-modal-card {
    width: calc(100vw - 10px);
    height: calc(100vh - 10px);
    border-radius: 12px;
  }
  .event-trace-modal-head {
    align-items: flex-start;
    padding: 12px;
  }
  .event-trace-modal-head > .actions {
    justify-content: flex-end;
  }
  .event-trace-modal-body { padding: 10px; }
  .event-trace-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-trace-id-summary,
  .event-trace-section-grid { grid-template-columns: 1fr; }
  .event-trace-kv-row { grid-template-columns: 1fr; }
  .event-trace-kv dt { border-bottom: 1px dashed var(--line); }
}
.pre-wrap { white-space: pre-wrap; margin: 0; }
.proof-image {
  display: block;
  max-width: min(100%, 420px);
  width: 100%;
  border-radius: 12px;
  border: 1px solid #dbe5f3;
  margin: 0 auto;
}

.receipt-modal-body {
  display: grid;
  gap: 12px;
}

.receipt-section {
  display: grid;
  gap: 10px;
}

.receipt-section h4 {
  margin: 0;
  font-size: 15px;
}

.receipt-image {
  max-height: 68vh;
  object-fit: contain;
  background: #fff;
}

.order-timeline-preview {
  display: grid;
  gap: 6px;
}

.timeline-item {
  display: grid;
  gap: 3px;
}

.timeline-item .pill {
  width: fit-content;
  max-width: 100%;
  white-space: normal;
  line-height: 1.35;
}

#orderDetailsModal .compact-modal {
  max-height: min(86vh, 920px);
  overflow: auto;
}

.order-detail-timeline {
  display: grid;
  gap: 12px;
}

.order-timeline-group {
  display: grid;
  gap: 8px;
  border: 1px solid #dbe5f3;
  border-radius: 10px;
  padding: 10px;
  background: #f8fbff;
}

.order-timeline-group .section-head {
  margin-bottom: 0;
}

.order-timeline-row {
  display: grid;
  gap: 7px;
  border: 1px solid #dbe5f3;
  border-inline-start: 4px solid #94a3b8;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.order-timeline-row.success {
  border-inline-start-color: #16a34a;
}

.order-timeline-row.warning {
  border-inline-start-color: #d97706;
}

.order-timeline-row.error {
  border-inline-start-color: #dc2626;
}

.order-timeline-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.order-timeline-message {
  color: #334155;
  font-size: 13px;
  line-height: 1.7;
}

.context-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.order-context-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid #dbe5f3;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}

a.order-context-chip:hover,
a.order-context-chip:focus-visible {
  border-color: #8aa4d6;
  background: #eef4ff;
  outline: none;
}

.order-context-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.order-error-details {
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff7f7;
  padding: 8px 10px;
}

.order-error-details summary {
  cursor: pointer;
  color: #991b1b;
  font-weight: 700;
}

.order-error-details pre {
  margin-top: 8px;
  direction: ltr;
  text-align: left;
}

.progress-line {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
  margin-top: 6px;
}

.progress-line span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #60a5fa, #2563eb);
}

.help-btn {
  white-space: nowrap;
}

.help-modal {
  direction: rtl;
}

.help-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .62);
}

.help-modal-card {
  max-width: min(820px, calc(100vw - 28px));
}

.help-section {
  border: 1px solid #dbe5f3;
  border-radius: 14px;
  background: #f8fbff;
  padding: 14px;
  margin-bottom: 12px;
}

.help-section h4 {
  margin: 0 0 10px;
  font-size: 14px;
}

.help-section p,
.help-section li {
  font-size: 13px;
  color: #1e293b;
}

.help-list {
  margin: 0;
  padding: 0 18px 0 0;
  display: grid;
  gap: 8px;
}

.help-stack {
  display: grid;
  gap: 10px;
}

.help-example,
.help-warning {
  border-radius: 12px;
  padding: 12px;
  font-size: 13px;
}

.help-example {
  background: #eef4ff;
  border: 1px solid #c8d7f3;
  color: #1e3a8a;
}

.help-warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
}

.help-related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.help-related-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid #c8d7f3;
  border-radius: 12px;
  background: #fff;
  color: #1e293b;
  font-weight: 700;
}

.help-related-link:hover,
.help-related-link:focus-visible {
  background: #edf4ff;
  border-color: #82a1ff;
  outline: none;
}

.json-block {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  background: #f8fafc;
  border: 1px solid #dbe5f3;
  border-radius: 12px;
  padding: 10px;
  max-height: 320px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}

.stack-list {
  display: grid;
  gap: 10px;
}

.stack-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.stack-item-body {
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Operation pages */
.operation-page {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.operation-page > * {
  min-width: 0;
}

.operation-page-header {
  padding: 0;
  margin-bottom: 0;
}

.operation-page-header .page-actions,
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.flash-stack {
  display: grid;
  gap: 10px;
}

.alert {
  border-radius: 14px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1e3a8a;
  padding: 12px 14px;
}

.alert-danger {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.operation-kpis {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.kpi-card {
  display: grid;
  gap: 6px;
  min-height: 112px;
  text-decoration: none;
}

.kpi-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.kpi-value {
  font-family: "Vazirmatn", "Segoe UI", sans-serif;
  direction: ltr;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 850;
}

.kpi-hint {
  color: var(--muted);
  font-size: 12px;
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.section-head h3 {
  font-size: 16px;
  line-height: 1.35;
}

.operation-tabs,
.modal-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}

.operation-filter-card {
  margin-bottom: 0;
  align-items: end;
}

.operation-filter-header {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

.advanced-filters {
  grid-column: 1 / -1;
  border: 1px solid #dbe5f3;
  border-radius: 14px;
  background: #f8fbff;
  padding: 10px 12px;
}

.advanced-filters summary {
  cursor: pointer;
  color: #1e293b;
  font-weight: 800;
  list-style: none;
}

.advanced-filters summary::-webkit-details-marker {
  display: none;
}

.advanced-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.advanced-settings {
  grid-column: 1 / -1;
  border: 1px solid #dbe5f3;
  border-radius: 14px;
  background: #f8fbff;
  padding: 10px 12px;
}

.advanced-settings summary {
  cursor: pointer;
  color: #1e293b;
  font-weight: 800;
  list-style: none;
}

.advanced-settings summary::-webkit-details-marker {
  display: none;
}

.advanced-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.advanced-settings .form-section {
  margin-top: 12px;
}

.filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.plan-group-modal-card {
  max-width: min(1180px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.plan-group-modal-card .modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.plan-group-form {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plan-groups-page,
.rep-plan-groups-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.plan-group-modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline-end: 4px;
  display: grid;
  gap: 16px;
  max-height: calc(100vh - 190px);
}

.plan-group-form .form-section,
.plan-group-form .pg-card {
  margin-bottom: 16px;
}

.plan-group-modal-card .modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #fff;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.plan-group-template-preview {
  border: 1px dashed #c7d7ee;
  border-radius: 14px;
  background: #f8fbff;
  padding: 12px 14px;
  color: #1e293b;
  font-weight: 700;
  line-height: 1.8;
  word-break: break-word;
}

.pg-card {
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}

.pg-card-items {
  background: #ffffff;
}

.pg-advanced > summary {
  cursor: pointer;
  font-weight: 800;
  padding: 12px 14px;
  border-radius: 14px;
  background: #eef4ff;
  border: 1px solid #cfe0ff;
}

.pg-advanced .advanced-settings-grid {
  margin-top: 12px;
  display: grid;
  gap: 12px;
}

.role-picker-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.role-picker .status-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.role-option {
  position: relative;
  user-select: none;
}

.role-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.role-option-ui {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #dbe5f3;
  background: #fff;
  color: #334155;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.role-option input:checked + .role-option-ui {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}

.plan-group-items-table {
  min-width: 960px;
}

.plan-group-items-table input,
.plan-group-items-table select {
  min-width: 90px;
}

[data-plan-group-item-row].is-deleted {
  opacity: .45;
  background: #fff7ed;
}

.operation-table-card {
  overflow: hidden;
}

.table-actions,
.action-menu,
.advanced-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.action-menu {
  align-items: stretch;
}

.action-stack {
  display: grid;
  gap: 8px;
  align-content: start;
}

.danger-zone.collapsible,
.advanced-danger-actions {
  margin-top: 12px;
}

.danger-zone.collapsible summary,
.advanced-danger-actions summary {
  cursor: pointer;
  font-weight: 850;
  color: #991b1b;
  list-style: none;
}

.danger-zone.collapsible summary::-webkit-details-marker,
.advanced-danger-actions summary::-webkit-details-marker {
  display: none;
}

.empty-state.compact {
  padding: 14px;
  border-radius: 12px;
}

.detail-drawer,
.detail-panel {
  display: grid;
  gap: 12px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.detail-field {
  border: 1px solid #dbe5f3;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}

.detail-field label {
  color: var(--muted);
}

.table-meta-list {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.truncate-cell {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 360px;
}

.bulk-action-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  position: sticky;
  top: 8px;
  z-index: 4;
  border: 1px solid #c8d7f3;
  background: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--shadow-soft);
}

.bulk-action-bar.is-visible {
  display: flex;
}

.form-grid-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.form-field-wide,
.field-wide {
  grid-column: 1 / -1;
}

.storage-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}

.qr-preview {
  max-width: 220px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}

.progress-line.ok span {
  background: linear-gradient(90deg, #22c55e, #16a34a);
}

.progress-line.warn span {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.progress-line.danger span {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

.pill.muted {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}

.card,
.section-card {
  box-shadow: var(--shadow-soft);
}

.plan-group-context-tabs {
  flex: 0 0 auto;
  margin-bottom: 12px;
}

.provider-runtime-settings {
  margin-top: 16px;
}
.payment-method-modal-card {
  width: min(1100px, calc(100vw - 28px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
}
.payment-method-modal-card > .drawer-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
}
.channel-rule-modal-card {
  width: min(1050px, calc(100vw - 28px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
}
.channel-rule-context-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 12px;
}

#backup-delete-preview-form input[type="checkbox"] {
  width: 40px;
  height: 40px;
  accent-color: var(--primary);
}

.table-wrap,
.responsive-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.operation-page .card,
.operation-page .section-card {
  margin-bottom: 0;
}

.operation-page .data-table th {
  top: 0;
}

.operation-page .data-table td,
.operation-page .data-table th {
  vertical-align: top;
}

.operation-page .inline,
.operation-page .inline-form {
  display: inline-flex;
  margin: 0;
}

@media (max-width: 860px) {
  .operation-page {
    gap: 12px;
  }

  .operation-page-header .page-actions,
  .page-actions,
  .filter-actions,
  .table-actions,
  .action-menu {
    justify-content: flex-start;
    width: 100%;
  }

  .operation-filter-card,
  .filter-toolbar {
    grid-template-columns: 1fr;
  }

  .operation-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .operation-tabs .tab-btn {
    white-space: nowrap;
  }

  .plan-group-modal-card {
    max-width: calc(100vw - 18px);
    max-height: calc(100vh - 18px);
  }

  .plan-group-modal-body {
    max-height: calc(100vh - 180px);
  }

  .truncate-cell,
  .text-clamp {
    max-width: min(70vw, 340px);
  }

  .responsive-cards.data-table,
  .responsive-cards.data-table tbody,
  .responsive-cards.data-table tr,
  .responsive-cards.data-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .responsive-cards.data-table thead { display:none; }

  .responsive-cards.data-table tbody { display:grid; gap:12px; }

  .responsive-cards.data-table tr {
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    background:var(--bg-elevated);
    padding:10px 12px;
    box-shadow:var(--shadow-soft);
  }

  .responsive-cards.data-table td {
    display:grid;
    grid-template-columns:minmax(108px, 38%) minmax(0, 1fr);
    gap:10px;
    padding:8px 0;
    border-bottom:1px solid #edf2f7;
    overflow-wrap:anywhere;
  }

  /* Keep action controls inside card value column in RTL layouts. */
  .responsive-cards.data-table td > * {
    min-width: 0;
    max-width: 100%;
  }
  .responsive-cards.data-table td button,
  .responsive-cards.data-table td a.btn,
  .responsive-cards.data-table td .btn {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .responsive-cards.data-table td.col-actions {
    white-space: normal;
  }

  .responsive-cards.data-table td:last-child { border-bottom:0; }
  .responsive-cards.data-table td::before {
    content:attr(data-label);
    color:var(--muted);
    font-size:12px;
    font-weight:700;
  }
}

@media (max-width: 980px) {
  .representative-management-drawer {
    width: 100vw;
    max-width: 100vw;
  }
}

@media (max-width: 920px) {
  .ssl-form-grid,
  .ssl-guide-grid {
    grid-template-columns: 1fr;
  }
}

.ticket-thread {
  display: grid;
  gap: 12px;
  max-height: min(58vh, 620px);
  overflow: auto;
  padding: 4px;
}

.ticket-message {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface, #fff);
}

.ticket-message-user { border-inline-start: 4px solid var(--info); }

.ticket-message-admin,
.ticket-message-representative {
  border-inline-start: 4px solid var(--success);
  background: color-mix(in srgb, var(--success) 5%, var(--surface, #fff));
}

/* PR85 V3 phase one: scoped shell, dashboard, analytics and operational workspaces. */
.content-shell { max-width: var(--v3-content-max); min-width: 0; }
.content { padding: 24px; }
.sidebar { isolation: isolate; }
.sidebar > .sidebar-admin { margin-top: 20px; }
.sidebar-close svg, .mobile-nav-btn svg { width: 20px; height: 20px; fill: currentColor; }
.topbar {
  position: sticky;
  top: 8px;
  z-index: 35;
  min-height: 68px;
  grid-template-columns: minmax(220px, 1fr) auto;
  border-radius: 16px;
  backdrop-filter: blur(16px);
}
.topbar-left { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.topbar-left .mobile-nav-btn { grid-row: 1 / span 2; }
.topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.command-search-trigger {
  min-width: 250px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 7px 11px;
  border: 1px solid var(--v3-border);
  border-radius: 11px;
  background: #fff;
  color: var(--muted);
}
.command-search-trigger kbd { direction: ltr; border: 1px solid #d7dce5; border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; }
.admin-profile-chip { display: flex; align-items: center; gap: 8px; border: 1px solid var(--v3-border); border-radius: 12px; background: #fff; padding: 5px 7px; }
.admin-profile-chip > span:nth-child(2) { display: grid; line-height: 1.3; }
.admin-profile-chip small { color: var(--muted); }
.admin-avatar { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--v3-primary); background: #eeedff; font-weight: 800; }
.admin-profile-chip form { margin: 0; }
.profile-logout { min-height: 32px; padding: 4px 8px; color: var(--danger); background: #fff5f5; border: 1px solid #ffd9d9; border-radius: 8px; }
.sidebar-close, .sidebar-backdrop { display: none; }

.command-launcher { position: fixed; inset: 0; z-index: 180; background: rgba(15, 23, 42, .48); backdrop-filter: blur(3px); padding-top: 12vh; }
.command-launcher-card { width: min(680px, calc(100vw - 28px)); max-height: 72vh; margin: auto; overflow: hidden; display: flex; flex-direction: column; border-radius: 18px; background: #fff; box-shadow: 0 30px 90px rgba(15, 23, 42, .3); }
.command-search-label { padding: 12px 16px 3px; color: var(--muted); font-size: 12px; }
#command-launcher-search { margin: 0 16px 8px; width: calc(100% - 32px); }
.command-links { overflow: auto; padding: 8px; display: grid; gap: 3px; }
.command-link { display: flex; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
.command-link:hover, .command-link.active { background: #f0efff; color: var(--v3-primary-strong); }
.command-link small { direction: ltr; color: var(--muted); }
body.command-open, body.mobile-nav-open, body.drawer-open { overflow: hidden; }

/* Shared workflow primitives: explicit density, hierarchy, and mobile reflow. */
.ui-form-shell { width: min(100%, 960px); }
.ui-form-shell--sm { width: min(100%, 720px); }
.ui-form-shell--lg { width: min(100%, 1180px); }
.ui-form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.ui-span-12 { grid-column: span 12; }
.ui-span-8 { grid-column: span 8; }
.ui-span-6 { grid-column: span 6; }
.ui-span-4 { grid-column: span 4; }
.ui-span-3 { grid-column: span 3; }
.ui-field--sm { width: min(100%, 240px); }
.ui-field--md { width: min(100%, 420px); }
.ui-field--lg { width: min(100%, 640px); }
.ui-action-group { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ui-action-group--end { justify-content:flex-end; }
.btn-compact,
.compact-btn { min-height:34px; padding-block:5px; padding-inline:10px; font-size:12px; }
.icon-btn { width:40px; height:40px; min-width:40px; padding:0; display:inline-grid; place-items:center; }
.ui-modal-card {
  width:min(960px, calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  margin:auto;
  padding:0;
  display:grid;
  grid-template-rows:auto auto minmax(0, 1fr) auto;
  overflow:hidden;
}
.ui-modal-head { padding:16px 20px; border-bottom:1px solid var(--line); margin:0; }
.ui-modal-tabs { padding:10px 20px; overflow-x:auto; white-space:nowrap; scrollbar-width:thin; }
.ui-modal-body { min-height:0; overflow-y:auto; padding:18px 20px; overscroll-behavior:contain; }
.ui-modal-footer { border-top:1px solid var(--line); background:var(--bg-elevated); padding:12px 20px max(12px, env(safe-area-inset-bottom)); }
.detail-group + .detail-group { margin-top:18px; }
.detail-group-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.detail-group-head h4 { margin:0; }
.detail-list { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:0; }
.detail-list > div { min-width:0; padding:12px 14px; border-inline-end:1px solid var(--line); border-block-end:1px solid var(--line); }
.detail-list dt { color:var(--muted); font-size:12px; margin-bottom:4px; }
.detail-list dd { margin:0; font-weight:700; overflow-wrap:anywhere; }
.workflow-steps { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; margin:0 0 16px; padding:0; list-style:none; }
.workflow-step { display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--bg-soft); color:var(--muted); }
.workflow-step strong { width:26px; height:26px; display:grid; place-items:center; border-radius:999px; background:#dbe5f3; color:var(--text); }
.workflow-step.active { border-color:var(--primary); background:#eef3ff; color:var(--text); }
.workflow-step.active strong { background:var(--primary); color:#fff; }
.workflow-panel[hidden], [data-profile-field][hidden] { display:none !important; }
.workflow-panel { min-width:0; border:1px solid var(--line); border-radius:14px; padding:12px; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:12px; }
.workflow-panel legend { padding-inline:6px; color:var(--muted); font-size:12px; font-weight:800; }
.workflow-panel > div { grid-column:span 4; min-width:0; }
.workflow-nav { margin:10px 0; }
.workspace-subtabs { display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; }
.mobile-record-card { border:1px solid var(--line); border-radius:14px; background:var(--bg-elevated); padding:14px; }
.mobile-record-card + .mobile-record-card { margin-top:10px; }
.mobile-record-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.mobile-record-primary { margin-top:10px; font-weight:700; }
.mobile-record-meta { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:8px; color:var(--muted); font-size:12px; }
.mobile-record-footer { margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }
.entity-picker { display:grid; gap:6px; min-width:0; }
.entity-picker input[type="search"] { margin:0; }
.entity-picker-control { display:grid; gap:6px; min-width:0; }
.entity-picker select { margin-top:0; }
.technical-details { overflow:hidden; }
.drawer-tab-group-label { flex:0 0 100%; color:var(--muted); font-size:11px; font-weight:800; padding-top:6px; }
.user-tabs, .rep-tab-strip { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
[data-user-panel="profile"] input[disabled], [data-rep-panel="overview"] input[disabled],
[data-shell="representative"] .detail-readonly input[disabled] { background:transparent; border-color:transparent; box-shadow:none; padding-inline:0; color:var(--text); font-weight:700; }
.notification-composer { max-width:1180px; }
.notification-composer-grid { display:grid; grid-template-columns:minmax(280px,360px) minmax(0,1fr); gap:20px; align-items:start; }
.notification-audience, .notification-message { margin:0; height:100%; }
.notification-audience .segmented-toggle { margin-bottom:14px; }
.notification-target-field { display:grid; gap:6px; margin-top:12px; }
.notification-target-field[hidden] { display:none !important; }
.notification-message textarea { min-height:180px; max-width:880px; }
.danger-zone details > summary { color:#991b1b; }
.modal-card { max-height:calc(100dvh - 32px); overflow:auto; }
.ui-modal-card { overflow:hidden; }

@media (max-width:760px) {
  .notification-composer-grid { grid-template-columns:1fr; }
  html, body { max-width:100%; }
  .ui-form-grid > * { grid-column:1 / -1 !important; }
  .row, .form-grid { grid-template-columns:1fr !important; }
  .ui-form-shell, .ui-form-shell--sm, .ui-form-shell--lg,
  .ui-field--sm, .ui-field--md, .ui-field--lg { width:100%; max-width:none; }
  .btn, .tab-btn, button, select, input:not([type="checkbox"]):not([type="radio"]) { min-height:44px; }
  .compact-btn, .btn-compact { min-height:40px; }
  .icon-btn { width:44px; height:44px; }
  .ui-modal-card.ui-modal-card--complex { width:100vw; max-width:none; height:100dvh; max-height:100dvh; border-radius:0; }
  .ui-modal-head { padding:14px 12px; }
  .ui-modal-tabs { padding-inline:12px; }
  .ui-modal-body { padding:14px 12px; }
  .ui-modal-footer { padding-inline:12px; }
  .detail-list { grid-template-columns:1fr; }
  .detail-list > div { border-inline-end:0; }
  .workflow-panel > div { grid-column:1 / -1; }
  .drawer-tabs, .operation-tabs, .workspace-subtabs { flex-wrap:nowrap; overflow-x:auto; }
  .drawer-tab-group-label { flex:0 0 auto; align-self:center; padding-inline-start:4px; }
  .side-drawer, .representative-management-drawer { width:100vw; max-width:none; height:100dvh; }
}

@media (max-width:560px) {
  .ui-modal-footer .ui-action-group { display:grid; grid-template-columns:1fr; }
  .ui-modal-footer .btn, .ui-modal-footer button { width:100%; }
  .page-header .page-actions, .page-header .actions { width:100%; }
  .page-header .page-actions > *, .page-header .actions > * { width:100%; }
}
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid rgba(99, 91, 255, .28); outline-offset: 2px; }
.loading-spinner { width: 20px; height: 20px; flex: 0 0 20px; border: 2px solid #d9d7ff; border-top-color: var(--v3-primary); border-radius: 50%; animation: ui-spin .75s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.progress-block { display: grid; gap: 6px; min-width: 0; }
.progress-label { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.progress-block progress { width: 100%; height: 10px; accent-color: var(--v3-primary); }

.admin-v3-page { display: grid; gap: 16px; min-width: 0; }
.operation-page,
body[data-shell="representative"] main > .content-shell > section,
body[data-shell="representative"] main > .content-shell > div:not(.topbar) { min-width: 0; }
.operation-page > .card,
.operation-page > .section-card,
body[data-shell="representative"] .content-shell > .card,
body[data-shell="representative"] .content-shell > .section-card {
  border-color: var(--v3-border);
  box-shadow: 0 8px 28px rgba(24, 34, 52, .06);
}

@media (max-width: 640px) {
  .plan-group-modal-card {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }
  .plan-group-modal-body {
    max-height: none;
    min-height: 0;
  }
  .plan-group-context-tabs {
    margin-inline: -4px;
  }
  .payment-method-modal-card {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }
  .channel-rule-modal-card {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }
}
.command-search-icon { width: 18px; height: 18px; flex: 0 0 18px; fill: currentColor; }
@media (min-width: 1241px) { .command-search-icon { display: none; } }
.operation-filter-card,
body[data-shell="representative"] .filter-toolbar {
  border-color: var(--v3-border);
  background: var(--v3-surface);
  box-shadow: 0 8px 28px rgba(24, 34, 52, .05);
}
.operation-table-card { overflow: hidden; }
.operation-table-card > .responsive-table-wrap,
.operation-table-card > .table-wrap { margin-inline: -16px; }
.operation-table-card > .responsive-table-wrap > table,
.operation-table-card > .table-wrap > table { border-inline: 0; }
.operation-page .data-table tbody tr:hover td,
body[data-shell="representative"] .data-table tbody tr:hover td,
body.sidebar-mode-sales-bot .data-table tbody tr:hover td { background: #fafaff; }
.operation-page .data-table th,
body[data-shell="representative"] .data-table th,
body.sidebar-mode-sales-bot .data-table th { background: #fafbfc; color: #667085; }
.operation-page .modal-card,
body[data-shell="representative"] .modal-card { border-radius: var(--v3-radius); }
.operation-page .danger-zone,
body[data-shell="representative"] .danger-zone { border-color: #ffd4d4; background: #fff8f8; }
.v3-kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.v3-kpi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v3-kpi-card { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; padding: 16px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
a.v3-kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-panel); }
.v3-kpi-card .kpi-value { font-size: clamp(20px, 2vw, 28px); overflow-wrap: anywhere; }
.v3-dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.v3-grid-span-8 { grid-column: span 8; }
.v3-grid-span-7 { grid-column: span 7; }
.v3-grid-span-6 { grid-column: span 6; }
.v3-grid-span-5 { grid-column: span 5; }
.v3-grid-span-4 { grid-column: span 4; }
.v3-segmented { display: flex; gap: 4px; }
.v3-attention-list { display: grid; padding: 8px 16px 16px; }
.v3-attention-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--v3-border); text-decoration: none; }
.v3-attention-item:last-child { border-bottom: 0; }
.v3-sales-chart { min-height: 220px; display: flex; align-items: end; gap: 7px; padding: 24px 16px 14px; overflow-x: auto; }
.v3-chart-column { flex: 1 0 24px; min-width: 24px; height: 180px; display: grid; grid-template-rows: 1fr auto; gap: 7px; align-items: end; text-align: center; }
.v3-chart-column small { font-size: 10px; color: var(--muted); white-space: nowrap; }
.v3-chart-bar { width: 100%; height: 100%; display: flex; align-items: end; border: 0; background: transparent; padding: 0; }
.v3-chart-bar > span { display: block; width: 100%; height: var(--bar-height); min-height: 5px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #8179ff, var(--v3-primary)); transition: height .2s ease; }
.v3-chart-bar:focus-visible > span { outline: 3px solid rgba(91, 85, 231, .3); }

.v3-filter-toolbar { padding: 14px; display: flex; align-items: end; gap: 12px; flex-wrap: wrap; min-width: 0; }
.v3-filter-toolbar label { display: grid; gap: 5px; font-size: 12px; }
.v3-filter-search { flex: 1 1 260px; min-width: 0; }
.v3-preset-row, .v3-chip-filter, .active-filter-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.v3-chip-filter > span { color: var(--muted); font-size: 12px; }
.active-filter-chips { overflow-x: auto; flex-wrap: nowrap; }
.advanced-filter-grid {
  flex: 1 0 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
.advanced-filter-panel { flex: 1 0 100%; min-width: 0; border-top: 1px solid var(--v3-border); }
.advanced-filter-panel > summary { cursor: pointer; font-weight: 800; }
.advanced-toggle-group { align-content: start; padding-top: 2px; }
.advanced-toggle-group label { min-height: 36px; }
.rep-dashboard-page > * { order: 3; }
.rep-dashboard-page > .page-header { order: 0; }
.rep-dashboard-page > .toast { order: 1; }
.rep-dashboard-page > .rep-readiness-card { order: 2; }
.rep-dashboard-page > .rep-dashboard-kpis { order: 3; }
.rep-dashboard-page > .rep-dashboard-comparison { order: 4; }
.rep-dashboard-page > .row { order: 5; }
.rep-plans-page .management-actions {
  min-width: 150px;
}
.rep-plans-page .field-error {
  min-height: 16px;
  color: var(--danger);
}
.rep-plans-page .data-table small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}
.v3-collapsible { padding: 14px 16px; }
.v3-collapsible > summary, .advanced-run-details > summary { cursor: pointer; font-weight: 800; }
.responsive-card-table small { display: block; color: var(--muted); margin-top: 3px; }
.clickable-row { cursor: pointer; }
/* `.inline` POST forms must keep their inline row layout on every page, not
   only inside `.operation-page`. */
.inline, .inline-form { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.inline > form, .inline-form > form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.action-menu { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .inline, .inline-form, .inline > form, .inline-form > form { display: flex; flex-wrap: wrap; width: 100%; }
  .inline .btn, .inline button, .inline-form .btn, .inline-form button { flex: 1 1 auto; }
}
.clickable-row:focus-visible { outline: 3px solid rgba(49, 94, 251, .24); outline-offset: -3px; }
.error-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 540px; }

.drawer-shell { display: none; position: fixed; inset: 0; z-index: 160; }
.drawer-shell.open { display: block; }
.drawer-shell .drawer-backdrop { display: block; z-index: 0; border: 0; width: 100%; }
.drawer-shell .side-drawer { z-index: 1; transform: none; width: min(680px, 94vw); }
.error-detail-drawer .drawer-body { overflow: auto; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.detail-item { min-width: 0; padding: 10px 11px; border: 1px solid var(--v3-border); border-radius: 11px; background: var(--v3-surface-soft); }
.detail-item span { display: block; color: var(--muted); font-size: 11px; }
.detail-item strong { display: block; margin-top: 3px; overflow-wrap: anywhere; }
.drawer-section { padding: 15px 0; border-bottom: 1px solid var(--v3-border); }

.representative-workspace {
  inset: 3vh max(18px, calc((100vw - 1420px) / 2));
  width: auto;
  max-width: 1420px;
  height: 94vh;
  border-radius: 22px;
  transform: translateY(14px) scale(.99);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.representative-workspace.open { transform: none; opacity: 1; pointer-events: auto; }
.representative-workspace .drawer-body { grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: stretch; padding: 0; gap: 0; overflow: hidden; }
.representative-workspace #rep-summary-skeleton,
.representative-workspace #rep-summary-card { grid-column: 1 / -1; margin: 12px 16px 0; }
.representative-fixed-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.representative-fixed-summary > div { min-width: 0; padding: 8px 10px; border: 1px solid var(--v3-border); border-radius: 10px; background: var(--v3-surface-soft); }
.representative-fixed-summary label { display: block; color: var(--muted); font-size: 11px; }
.representative-fixed-summary div, .representative-fixed-summary small { overflow-wrap: anywhere; }
.representative-workspace .rep-tab-strip { grid-column: 1; grid-row: 2; position: static; display: flex; flex-direction: column; align-items: stretch; border: 0; border-left: 1px solid var(--v3-border); background: var(--v3-surface-soft); padding: 12px; overflow: auto; }
/* The shell is the floating card; the drawer inside it must fill it instead of
   escaping to a fixed full-viewport box (which discarded the inset/radius). */
.representative-workspace .side-drawer { position: static; width: 100%; height: 100%; max-width: none; transform: none; }
.representative-workspace .rep-tab-strip .tab-btn { width: 100%; text-align: right; }
/* `flex:0 0 100%` makes a group label a full row in the horizontal strip, but in
   this vertical rail 100% of the height would stretch every label over the whole
   column and push every tab out of view. */
.representative-workspace .rep-tab-strip .drawer-tab-group-label { flex: 0 0 auto; }
.representative-workspace .rep-tab-panels { grid-column: 2; grid-row: 2; min-height: 0; overflow: auto; padding: 6px 18px 24px; }
.representative-access-workspace { position: fixed; inset: 3vh max(18px, calc((100vw - 1320px) / 2)); z-index: 90; width: auto; max-width: 1320px; height: 94vh; border: 1px solid var(--v3-border); border-radius: 22px; background: var(--v3-surface); box-shadow: var(--shadow-panel); overflow: hidden; }
.representative-access-workspace .drawer-head { min-height: 68px; }
.representative-access-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); height: calc(100% - 68px); min-height: 0; }
.representative-access-rail { display: flex; flex-direction: column; align-items: stretch; gap: 7px; padding: 14px; overflow: auto; border-left: 1px solid var(--v3-border); background: var(--v3-surface-soft); }
.representative-access-rail .tab-btn { width: 100%; text-align: right; }
.representative-access-panels { min-width: 0; overflow: auto; padding: 18px; }
.operation-split-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.v3-context-tabs { display: flex; gap: 7px; margin: 0 0 14px; overflow-x: auto; overscroll-behavior-inline: contain; }
.v3-context-tabs .tab-btn { flex: 0 0 auto; white-space: nowrap; }
.compact-detail-list { display: grid; gap: 6px; margin-top: 9px; }
.compact-detail-list > div { display: grid; grid-template-columns: minmax(80px, .35fr) minmax(0, 1fr); gap: 8px; }
.compact-detail-list dt { color: var(--muted); }
.compact-detail-list dd { margin: 0; overflow-wrap: anywhere; }
.payment-proof-preview { display: block; width: auto; max-width: 100%; max-height: 58vh; margin-inline: auto; border: 1px solid var(--v3-border); border-radius: 12px; object-fit: contain; }
.reconciliation-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.reconciliation-steps > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: center; padding: 12px; border: 1px solid var(--v3-border); border-radius: 12px; background: var(--v3-surface-soft); color: var(--muted); }
.reconciliation-steps > div.active { border-color: var(--v3-accent); color: var(--text); }
.reconciliation-steps span { display: grid; grid-row: 1 / span 2; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--v3-border); font-weight: 800; }
.reconciliation-steps .active span { background: var(--v3-accent); color: #fff; }
.reconciliation-steps small { color: var(--muted); }
.representative-service-summary, .representative-action-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.representative-service-summary > div, .representative-action-summary > div { padding: 12px; border: 1px solid var(--v3-border); border-radius: 12px; background: var(--v3-surface-soft); }
.representative-service-summary span, .representative-action-summary span { display: block; color: var(--muted); font-size: 11px; }
.representative-service-summary strong, .representative-action-summary strong { display: block; margin-top: 5px; font-size: 17px; }
.representative-service-progress progress { width: 100%; }
.representative-service-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.advanced-run-details { border-top: 1px solid var(--v3-border); padding-top: 14px; }

.v3-workspace {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius);
  background: var(--v3-surface);
  box-shadow: 0 8px 28px rgba(24, 34, 52, .05);
}
.v3-workspace-rail {
  min-width: 0;
  padding: 12px;
  border-left: 1px solid var(--v3-border);
  background: var(--v3-surface-soft);
}
.v3-workspace-rail [role="tablist"] { display: grid; gap: 6px; position: sticky; top: 92px; }
.v3-workspace-rail .tab-btn { width: 100%; min-height: 42px; justify-content: flex-start; text-align: right; }
.v3-workspace-rail .tab-btn.active {
  color: var(--primary);
  border-color: transparent;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .08);
  font-weight: 800;
}
.v3-workspace-body { min-width: 0; padding: 18px; }
.v3-workspace-panel { min-width: 0; }
.v3-workspace-panel[hidden] { display: none !important; }
.v3-workspace-panel > :first-child { margin-top: 0; }
.v3-workspace-panel > :last-child { margin-bottom: 0; }
.server-workspace-backdrop {
  position: fixed;
  inset: 0;
  z-index: 138;
  background: rgba(15, 23, 42, .52);
  backdrop-filter: blur(2px);
}
body.server-workspace-open {
  overflow: hidden;
}
.server-workspace-shell {
  position: fixed;
  z-index: 140;
  inset: 3vh max(18px, calc((100vw - 1420px) / 2));
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: 1420px;
  height: 94dvh;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--v3-border);
  border-radius: 22px;
  background: var(--v3-surface);
  box-shadow: 0 24px 80px rgba(15, 23, 42, .28);
}
.server-workspace-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--v3-border);
  background: var(--v3-surface);
}
.server-workspace-head h2 { margin: 0; }
.server-fixed-summary {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--v3-border);
  background: var(--v3-surface-soft);
}
.server-summary-metrics { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 12px; }
.server-v3-workspace { flex: 1 1 auto; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.server-v3-workspace .v3-workspace-rail,
.server-v3-workspace .v3-workspace-body { min-height: 0; overflow: auto; }
.inbound-scan-list { display: grid; gap: 10px; }
.inbound-workspace-card { padding: 0; border: 1px solid var(--v3-border); border-radius: 14px; background: var(--v3-surface); }
.inbound-workspace-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; cursor: pointer; list-style: none; }
.inbound-workspace-card > summary::-webkit-details-marker { display: none; }
.inbound-workspace-card > summary > div:first-child { min-width: 0; }
.inbound-workspace-card > summary strong,
.inbound-workspace-card > summary small { display: block; overflow-wrap: anywhere; }
.inbound-workspace-card > summary small { margin-top: 3px; color: var(--muted); }
.inbound-workspace-card[open] { padding-bottom: 14px; }
.inbound-workspace-card[open] > :not(summary) { margin-inline: 14px; }
.inbound-scan-metrics { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: 12px; }
.inbound-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.compact-number-input { width: 100px; }
.compact-select { width: min(180px, 100%); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.v3-sticky-action-bar {
  position: sticky;
  z-index: 25;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid var(--v3-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 36px rgba(24, 34, 52, .14);
  backdrop-filter: blur(12px);
}
.v3-sticky-action-bar[hidden] { display: none; }
.v3-sticky-action-bar .actions { margin-inline-start: auto; }
.telegram-settings-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.settings-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.settings-field-card { min-width: 0; margin: 0; padding: 14px; box-shadow: none; }
.settings-field-head { align-items: flex-start; margin-bottom: 9px; }
.settings-field-head label { margin: 0; }
.settings-related-links { margin-bottom: 14px; }
.settings-related-links > .card { margin: 0; }
.plan-workspace-modal { width: min(1180px, calc(100vw - 28px)); max-width: 1180px; max-height: 94dvh; overflow: auto; }
.plan-workspace-modal .v3-workspace { min-height: 480px; }
.plan-preview-box { margin: 0; box-shadow: none; }

@media (max-width: 1240px) {
  .v3-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v3-kpi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .command-search-trigger { min-width: 44px; }
  .command-search-trigger > span { display: none; }
}

@media (min-width: 901px) {
  .layout { flex-direction: row; }
  .sidebar { width: var(--sidebar-width); flex: 0 0 var(--sidebar-width); height: 100vh; position: sticky; top: 0; }
  .content { padding: 24px; }
  .mobile-nav-btn { display: none; }
}

@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid > * { min-width: 0; overflow-wrap: anywhere; }
  .mobile-nav-btn { width: 40px; min-width: 40px; margin: 0; padding: 0; justify-content: center; }
  .sidebar {
    position: fixed;
    z-index: 120;
    inset: 0 0 0 auto;
    width: min(var(--sidebar-width), 100vw);
    max-width: 100vw;
    height: 100dvh;
    transform: translateX(105%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .2s ease;
    box-shadow: none;
  }
  .sidebar:not(.open) { display: none; }
  .sidebar.open { transform: none; visibility: visible; pointer-events: auto; box-shadow: -20px 0 60px rgba(15, 23, 42, .35); }
  .sidebar-close { display: grid; place-items: center; position: absolute; top: 12px; left: 12px; z-index: 2; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; background: #17233a; color: #fff; font-size: 22px; }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 110; border: 0; background: rgba(15,23,42,.5); opacity: 0; visibility: hidden; pointer-events: none; transition: .2s; }
  .sidebar-backdrop.open { opacity: 1; visibility: visible; pointer-events: auto; }
  .topbar { top: 4px; grid-template-columns: 1fr; }
  .topbar-right { justify-content: flex-start; }
  .content { width: 100%; }
  .v3-dashboard-grid { display: block; }
  .v3-dashboard-grid > * { margin-bottom: 14px; }
  .representative-workspace { inset: 10px; width: auto; height: calc(100dvh - 20px); max-width: none; }
  .representative-workspace .drawer-body { display: flex; flex-direction: column; }
  .representative-workspace #rep-summary-skeleton,
  .representative-workspace #rep-summary-card { margin: 10px 12px 0; }
  .representative-fixed-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .representative-workspace .rep-tab-strip { flex: 0 0 auto; flex-direction: row; border-left: 0; border-bottom: 1px solid var(--v3-border); overflow-x: auto; overflow-y: hidden; }
  .representative-workspace .rep-tab-strip .tab-btn { width: auto; flex: 0 0 auto; text-align: center; }
  /* The rail is a row again at this width, so a group label should own its line. */
  .representative-workspace .rep-tab-strip .drawer-tab-group-label { flex: 0 0 100%; }
  .representative-workspace .rep-tab-panels { flex: 1 1 auto; padding: 4px 12px 20px; }
  .representative-access-workspace { inset: 10px; height: calc(100dvh - 20px); max-width: none; }
  .representative-access-body { display: flex; flex-direction: column; }
  .representative-access-rail { flex: 0 0 auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-left: 0; border-bottom: 1px solid var(--v3-border); }
  .representative-access-rail .tab-btn { flex: 0 0 auto; width: auto; text-align: center; }
  .representative-access-panels { flex: 1 1 auto; padding: 14px; }
  .responsive-card-table { min-width: 0; }
  .responsive-card-table thead { display: none; }
  .responsive-card-table tbody, .responsive-card-table tr, .responsive-card-table td { display: block; width: 100%; }
  .responsive-card-table tr { padding: 10px 12px; border-bottom: 1px solid var(--v3-border); }
  .responsive-card-table td { border: 0; padding: 6px 0; display: grid; grid-template-columns: minmax(90px, 38%) minmax(0, 1fr); gap: 10px; }
  .responsive-card-table td::before { content: attr(data-label); color: var(--muted); font-size: 11px; font-weight: 700; }
  .responsive-card-table td[colspan] { display: block; }
  .responsive-card-table td[colspan]::before { content: none; }
  .v3-workspace { display: block; }
  .v3-workspace-rail { padding: 9px 10px; border-left: 0; border-bottom: 1px solid var(--v3-border); }
  .v3-workspace-rail [role="tablist"] { position: static; display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
  .v3-workspace-rail .tab-btn { width: auto; flex: 0 0 auto; justify-content: center; text-align: center; white-space: nowrap; }
  .v3-workspace-body { padding: 14px; }
  .server-workspace-shell { inset: 10px; width: auto; height: calc(100dvh - 20px); }
  .server-v3-workspace { display: flex; flex-direction: column; }
  .server-v3-workspace .v3-workspace-rail { flex: 0 0 auto; overflow-y: hidden; }
  .server-v3-workspace .v3-workspace-body { flex: 1 1 auto; }
  .settings-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .user-management-drawer {
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
  .user-management-drawer .drawer-head { padding-top: max(12px, env(safe-area-inset-top)); }
  .user-management-drawer .drawer-body { padding-bottom: max(18px, env(safe-area-inset-bottom)); overflow-x: hidden; }
  .content-shell > *, .section-card, .card { min-width: 0; }
  .section-card .grid, .section-card .row { grid-template-columns: minmax(0, 1fr) !important; }
  .responsive-card-table td, .responsive-card-table td > * { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
  .field-mono { max-width: 100%; }
  .topbar { min-height: 60px; }
  .breadcrumb, .command-search-trigger kbd, .admin-profile-chip > span:nth-child(2) { display: none; }
  .admin-profile-chip { margin-inline-start: auto; }
  .v3-kpi-grid, .v3-kpi-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .v3-kpi-card { padding: 12px; }
  .v3-filter-toolbar { align-items: stretch; }
  .advanced-filter-grid { grid-template-columns: 1fr; }
  .v3-preset-row, .v3-chip-filter, .active-filter-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  .detail-grid, .representative-service-summary, .representative-action-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .representative-fixed-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 34dvh; overflow: auto; }
  .representative-workspace { inset: 0; width: 100vw; height: 100dvh; border-radius: 0; }
  .representative-access-workspace { inset: 0; width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .representative-access-workspace .drawer-head { padding-top: max(12px, env(safe-area-inset-top)); }
  .representative-access-panels { padding: 10px 10px max(18px, env(safe-area-inset-bottom)); overflow-x: hidden; }
  .operation-split-grid { grid-template-columns: 1fr; }
  .reconciliation-steps { grid-template-columns: 1fr; }
  .representative-workspace .drawer-head { padding-top: max(12px, env(safe-area-inset-top)); }
  .representative-workspace .rep-tab-panels { padding-bottom: max(18px, env(safe-area-inset-bottom)); overflow-x: hidden; }
  .drawer-shell .side-drawer { width: 100vw; }
  .content { padding: 10px; }
  .page-header h1 { font-size: 20px; }
  .page-header .actions, .page-actions { width: 100%; }
  .page-header .actions > *, .page-actions > * { flex: 1 1 auto; text-align: center; }
  .operation-page .modal-actions, body[data-shell="representative"] .modal-actions { align-items: stretch; }
  .operation-page .modal-actions > *, body[data-shell="representative"] .modal-actions > * { flex: 1 1 100%; }
  .v3-workspace-body { padding: 10px; }
  .server-workspace-shell { inset: 0; width: 100vw; height: 100dvh; border-radius: 0; }
  .server-workspace-head { padding-top: max(12px, env(safe-area-inset-top)); }
  .server-v3-workspace .v3-workspace-body { padding-bottom: max(18px, env(safe-area-inset-bottom)); overflow-x: hidden; }
  .server-fixed-summary { align-items: flex-start; flex-direction: column; }
  .inbound-workspace-card > summary { align-items: flex-start; flex-direction: column; }
  .inbound-scan-metrics { justify-content: flex-start; }
  .inbound-detail-grid { grid-template-columns: 1fr; }
  .v3-sticky-action-bar { bottom: max(6px, env(safe-area-inset-bottom)); align-items: stretch; flex-direction: column; }
  .v3-sticky-action-bar .actions { width: 100%; margin-inline-start: 0; }
  .v3-sticky-action-bar .actions > * { flex: 1 1 auto; }
}

@media (max-width: 360px) {
  .stats-grid, .v3-kpi-grid, .v3-kpi-grid-4, .detail-grid, .representative-service-summary, .representative-action-summary { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .modal.ui-modal-overlay--complex {
    padding: 0;
    overflow: hidden;
  }

  .modal.ui-modal-overlay--complex > .ui-modal-card.ui-modal-card--complex {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
}

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

.ticket-message-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.ticket-message-body { overflow-wrap: anywhere; }
.password-field{display:flex;gap:8px;align-items:center}.password-field input{flex:1}.password-field button{min-width:72px}.caps-warning{display:block;color:var(--warning-text,#92400e);font-size:.82rem;margin-top:6px}

.sales-bot-operation-page .operation-split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sales-bot-operation-page .sales-trend-bars {
  display: grid;
  gap: 10px;
}

.sales-bot-operation-page .sales-trend-row {
  display: grid;
  grid-template-columns: 96px minmax(140px, 1fr) minmax(110px, auto);
  align-items: center;
  gap: 12px;
}

.sales-bot-operation-page .sales-trend-row .progress-label { display: none; }
.compact-detail-section:empty { display: none; }

.referral-advanced-filter[open] {
  position: fixed;
  z-index: 1200;
  inset: 50% auto auto 50%;
  width: min(760px, calc(100vw - 32px));
  max-height: min(720px, calc(100dvh - 32px));
  overflow: auto;
  transform: translate(-50%, -50%);
  padding: 20px;
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-lg);
  background: var(--surface);
  box-shadow: 0 24px 70px rgb(15 23 42 / 28%);
}

body.referral-filter-open { overflow: hidden; }

@media (max-width: 900px) {
  .sales-bot-operation-page .operation-split-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .sales-bot-operation-page .sales-trend-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .referral-advanced-filter[open] {
    inset: 0;
    width: 100vw;
    max-height: 100dvh;
    min-height: 100dvh;
    transform: none;
    border-radius: 0;
    padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  }
}

/* V3 authentication and access-management surfaces */
.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.section-heading h2 { font-size: 17px; }
.section-heading .subtitle { margin: 4px 0 0; }
.permission-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.permission-chip-grid .role-chip {
  width: 100%;
  height: 100%;
  text-align: right;
  overflow-wrap: anywhere;
}
.permission-matrix-wrap { max-height: min(62vh, 680px); }

body.auth-page {
  min-height: 100dvh;
  padding: 24px;
  background:
    radial-gradient(circle at 12% 15%, rgba(99, 91, 255, .14), transparent 34%),
    radial-gradient(circle at 88% 88%, rgba(37, 116, 217, .12), transparent 30%),
    var(--bg);
}
.auth-shell {
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface, #fff);
  box-shadow: 0 30px 90px rgba(15, 23, 42, .16);
}
.auth-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: clamp(32px, 6vw, 68px);
  color: #fff;
  background: linear-gradient(145deg, #17134f, var(--primary) 62%, #8179ff);
}
.auth-brand-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 16px;
  background: rgba(255, 255, 255, .13);
  font-size: 24px;
  font-weight: 900;
}
.auth-eyebrow { margin: 0 0 8px; color: #d9d7ff; font: 700 12px/1.5 "Vazirmatn", sans-serif; direction: ltr; text-align: right; }
.auth-brand h1 { font-size: clamp(27px, 4vw, 40px); }
.auth-brand p { color: #efefff; }
.auth-feature-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.auth-feature-list li { position: relative; padding-right: 22px; color: #f6f5ff; }
.auth-feature-list li::before { content: '✓'; position: absolute; right: 0; color: #bff6df; font-weight: 900; }
.auth-card {
  width: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vw, 58px);
}
.auth-card-head { margin-bottom: 20px; }
.auth-card-head h2 { margin-top: 14px; font-size: 24px; }
.auth-card-head .subtitle { margin: 6px 0 0; }
.auth-form { display: grid; gap: 8px; }
.auth-form label { margin: 8px 0 0; }
.auth-submit { width: 100%; margin-top: 12px; }
.auth-message { margin-bottom: 14px; }
.info-state {
  padding: 12px 14px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
  color: #1e3a8a;
}
.payment-runtime-settings-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.payment-runtime-setting-card { margin: 0; padding: 12px; box-shadow: none; }
.payment-provider-test-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: 12px; }
.payment-provider-test-card { margin: 0; }
.payment-runtime-actions { margin-top: 14px; }
.skeleton-line { height: 18px; margin-bottom: 8px; }
.skeleton-line-short { width: 65%; }
.skeleton-block-compact { height: 48px; }

@media (max-width: 720px) {
  body.auth-page { padding: 12px; align-items: flex-start; }
  .auth-shell { grid-template-columns: 1fr; border-radius: 18px; }
  .auth-brand { padding: 24px; gap: 14px; }
  .auth-feature-list { display: none; }
  .auth-card { padding: 24px; }
  .permission-chip-grid { grid-template-columns: 1fr; }
  .section-heading { flex-direction: column; }
}

@media (max-width: 360px) {
  body.auth-page { padding: 0; }
  .auth-shell { min-height: 100dvh; border: 0; border-radius: 0; }
  .auth-brand, .auth-card { padding: 20px 16px; }
}

/* ==========================================================================
   V3 design-language parity layer
   Ports the FRONTEND-V3 prototype design language (styles.css) onto the
   production class vocabulary so every panel page renders identically.
   Rules below intentionally come last so they win at equal specificity, and
   the responsive re-declarations keep earlier mobile behaviour intact.
   ========================================================================== */

/* --- Semantic status tones -------------------------------------------------
   `pill` tones (ok/warn/bad/info/purple/muted) are used across the templates
   but previously had no colour rules, so every status rendered neutral blue. */
.pill {
  border: 0;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.6;
  background: #f2f4f7;
  color: #475467;
  gap: 4px;
}
.pill.ok { background: #eaf9f3; color: #0a7b54; }
.pill.warn { background: #fff7e8; color: #a86806; }
.pill.bad { background: #fff0f0; color: #b92f2f; }
.pill.info { background: #edf5ff; color: #1f64b3; }
.pill.purple { background: #f0efff; color: #564dd6; }
.pill.muted { background: #f2f4f7; color: #475467; }
.pill.lg { padding: 6px 12px; font-size: 12px; }

.status-pill.ok, .status-pill.warn, .status-pill.bad, .status-pill.info,
.status-pill.purple, .status-pill.muted { border: 0; }
.status-pill.ok { background: #eaf9f3; color: #0a7b54; }
.status-pill.warn { background: #fff7e8; color: #a86806; }
.status-pill.bad { background: #fff0f0; color: #b92f2f; }
.status-pill.info { background: #edf5ff; color: #1f64b3; }
.status-pill.purple { background: #f0efff; color: #564dd6; }
.status-pill.muted { background: #f2f4f7; color: #475467; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border: 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  background: #f2f4f7;
  color: #475467;
}
.badge.ok { background: #eaf9f3; color: #0a7b54; }
.badge.warn { background: #fff7e8; color: #a86806; }
.badge.bad { background: #fff0f0; color: #b92f2f; }
.badge.info { background: #edf5ff; color: #1f64b3; }
.badge.purple { background: #f0efff; color: #564dd6; }
.pill-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* --- Surfaces: the V3 look is flat and light, not heavy elevation --------- */
.card,
.section-card,
.operation-page > .card,
.operation-page > .section-card,
body[data-shell="representative"] .content-shell > .card,
body[data-shell="representative"] .content-shell > .section-card,
.operation-filter-card,
body[data-shell="representative"] .filter-toolbar,
.v3-workspace {
  box-shadow: 0 2px 10px rgba(24, 34, 52, .025);
}
.card:hover,
.section-card:hover { box-shadow: 0 2px 10px rgba(24, 34, 52, .025); }
.modal-card { box-shadow: 0 30px 90px rgba(16, 24, 40, .25); }

/* --- Buttons: flat primary, soft secondary/danger ------------------------- */
button,
.btn,
a.btn,
button.btn {
  border-radius: 11px;
  font-weight: 650;
  background: var(--primary);
  box-shadow: 0 5px 15px rgba(99, 91, 255, .18);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
button:hover,
.btn:hover,
a.btn:hover,
button.btn:hover {
  transform: none;
  filter: none;
  background: var(--primary-strong);
}
.btn-secondary,
a.btn-secondary,
button.btn-secondary,
.tab-btn,
a.tab-btn,
button.tab-btn {
  color: #344054;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  font-weight: 650;
  box-shadow: none;
}
.btn-secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover,
.tab-btn:hover,
a.tab-btn:hover,
button.tab-btn:hover {
  transform: none;
  background: #f8fafc;
  border-color: #d7dce5;
}
.tab-btn.active,
.tab-btn.btn-success {
  color: #fff;
  border-color: transparent;
  background: var(--primary);
  box-shadow: 0 5px 15px rgba(99, 91, 255, .18);
}
.tab-btn.btn-secondary { color: #344054; background: #fff; border-color: var(--line); }
.btn-danger,
a.btn-danger,
button.btn-danger {
  background: #fff1f1;
  color: var(--danger);
  border: 1px solid #ffd4d4;
  box-shadow: none;
}
.btn-danger:hover,
a.btn-danger:hover,
button.btn-danger:hover { background: #ffe7e7; color: #b92f2f; }
.btn-success { background: #eaf9f3; color: #0a7b54; border: 1px solid #cdeedd; box-shadow: none; }
.btn-success:hover { background: #ddf5ec; }
.btn.btn-ghost,
.btn-ghost { background: transparent; color: #475467; border: 1px solid transparent; box-shadow: none; }
.btn.small,
.btn-small { padding: 6px 10px; font-size: 12px; border-radius: 9px; min-height: 32px; }
.btn:disabled, button:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* --- Fields --------------------------------------------------------------- */
label {
  font-size: 12px;
  font-weight: 650;
  color: #5e6878;
}
input, select, textarea {
  border: 1px solid #dfe3ea;
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: #a8a0ff;
  box-shadow: 0 0 0 3px rgba(99, 91, 255, .08);
}
.field-hint { color: #8b94a4; font-size: 11px; line-height: 1.7; }
.field-mono, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; direction: ltr; }
.tiny { font-size: 11px; }
.small { font-size: 12px; }
.strong { font-weight: 700; }
.ltr { direction: ltr; text-align: left; }
.hide-mobile { display: initial; }

/* --- Tables: V3 uses hover highlight instead of zebra striping ------------ */
table { box-shadow: none; }
th, td { padding: 11px 13px; border-bottom: 1px solid #eef0f4; }
th { background: #fafbfc; color: #7b8493; font-size: 11px; font-weight: 700; }
tr:nth-child(even) td { background: transparent; }
tbody tr:hover td { background: #fbfcfe; }
.operation-page .data-table tbody tr:hover td,
body[data-shell="representative"] .data-table tbody tr:hover td,
body.sidebar-mode-sales-bot .data-table tbody tr:hover td { background: #fbfcfe; }
.operation-page .data-table th,
body[data-shell="representative"] .data-table th,
body.sidebar-mode-sales-bot .data-table th { background: #fafbfc; color: #7b8493; }
.cell-title { font-weight: 700; }
.cell-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.table-wrap, .responsive-table-wrap { max-width: 100%; }

/* --- Page header / sections ---------------------------------------------- */
.page-header h1 { font-size: 24px; font-weight: 800; line-height: 1.45; }
.page-header .subtitle { color: var(--muted); max-width: 780px; }
.section-head { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.section-head h3 { font-size: 15px; }
.section-card > .section-head:first-child,
.card > .section-head:first-child { margin-bottom: 14px; }
.operation-table-card > .section-head { padding: 16px 18px 12px; margin-bottom: 0; }
.section-heading h2 { font-size: 15px; }
.metric { font-size: 24px; font-weight: 800; letter-spacing: -.4px; }
.kpi-card { min-height: 0; }
.kpi-label { font-size: 12px; font-weight: 650; color: var(--muted); }
.kpi-value { font-size: 24px; font-weight: 800; letter-spacing: -.4px; }
.kpi-hint { font-size: 11px; color: #8992a3; }

/* --- Empty / loading / error states -------------------------------------- */
.empty-state {
  border: 0;
  border-radius: 14px;
  background: var(--bg-soft, #f8faff);
  padding: 34px 18px;
  color: #7d8797;
  text-align: center;
}
.empty-state strong { color: var(--text); }
.empty-state.compact { padding: 18px 14px; }
.empty { padding: 34px 18px; text-align: center; color: #7d8797; }

/* --- Alerts --------------------------------------------------------------- */
.alert {
  border-radius: 13px;
  border: 1px solid #d9e8ff;
  background: #f1f7ff;
  color: #245d9b;
}
.alert.warn, .alert-warning { background: #fff8eb; border-color: #f9e4b7; color: #8a5a08; }
.alert.bad, .alert-danger { background: #fff1f1; border-color: #ffd4d4; color: #a63434; }
.alert.ok, .alert-success { background: #effaf5; border-color: #cdeedd; color: #116b4d; }

/* --- Toasts --------------------------------------------------------------- */
.toast {
  border-radius: 12px;
  background: #152033;
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 12px 35px rgba(16, 24, 40, .22);
}
.toast-success { background: #126b4d; color: #fff; }
.toast-warn { background: #9b650d; color: #fff; }
.toast-error { background: #a73535; color: #fff; }

/* --- Tabs / chips --------------------------------------------------------- */
.chip { min-height: 34px; padding: 7px 11px; border: 1px solid var(--line); color: #596579; }
.chip.active { border-color: #c8c3ff; background: #f2f0ff; color: #5146db; }
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.search-input { flex: 1; min-width: 180px; position: relative; }
.kbd, kbd {
  font-size: 10px;
  border: 1px solid #d9dee8;
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 1px 6px;
  color: #8a93a3;
}

/* --- Drawers and modals --------------------------------------------------- */
.drawer-sticky { position: sticky; top: -18px; background: #fff; z-index: 4; padding-top: 2px; padding-bottom: 12px; }
.modal-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: #fff;
  position: sticky;
  bottom: 0;
  flex-wrap: wrap;
}
.close { border: 0; background: #f2f4f7; width: 32px; height: 32px; border-radius: 9px; }
.drawer-section:last-child { border-bottom: 0; }

/* --- Summaries, details, notes, timeline --------------------------------- */
.summary-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.summary-item { min-width: 0; padding: 11px; background: #f8fafc; border: 1px solid #edf0f4; border-radius: 12px; }
.summary-item span { display: block; font-size: 10px; color: #7b8493; }
.summary-item strong { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.detail { padding: 10px 11px; background: #fafbfc; border: 1px solid #edf0f3; border-radius: 11px; min-width: 0; }
.detail span { display: block; font-size: 10px; color: #7a8494; }
.detail strong { display: block; margin-top: 3px; font-size: 12px; overflow-wrap: anywhere; }
.metric-box { min-width: 0; padding: 12px; border: 1px solid #e8edf3; border-radius: 12px; background: #fafbfc; }
.metric-box span { display: block; color: #7a8494; font-size: 10px; }
.metric-box strong { display: block; font-size: 14px; margin-top: 5px; overflow-wrap: anywhere; }
.note-history { display: grid; gap: 8px; }
.note-history article { padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfc; overflow-wrap: anywhere; }
.note-history small { display: block; color: #7a8494; margin-top: 5px; }
.timeline { display: flex; flex-direction: column; gap: 12px; }
.timeline-item { position: relative; padding-right: 23px; }
.timeline-item::before { content: ''; position: absolute; right: 4px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #8076ff; }
.timeline-item::after { content: ''; position: absolute; right: 7px; top: 16px; bottom: -18px; width: 1px; background: #e2e5eb; }
.timeline-item:last-child::after { display: none; }
.progress { height: 6px; background: #edf0f5; border-radius: 99px; overflow: hidden; margin: 7px 0 4px; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, #6a60ff, #8a7cff); border-radius: 99px; }
.progress.warn span { background: #e2a128; }
.progress.bad span { background: #d64a4a; }
.danger-box { border: 1px solid #ffd4d4; background: #fff8f8; border-radius: 14px; padding: 14px; margin-top: 14px; }
.danger-box summary { cursor: pointer; font-weight: 800; }
.review-box { padding: 14px; background: #f4f3ff; border: 1px solid #dcd8ff; border-radius: 14px; margin-top: 14px; }
.compact-control { max-width: 110px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }

/* --- Health grid (V3 system overview / server health) -------------------- */
.health-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.health-node { position: relative; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: #fff; min-width: 0; }
.health-node::before {
  content: '';
  position: absolute;
  top: 15px;
  right: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(20, 159, 109, .1);
}
.health-node.warn::before { background: var(--warning); box-shadow: 0 0 0 4px rgba(217, 139, 18, .1); }
.health-node.bad::before { background: var(--danger); box-shadow: 0 0 0 4px rgba(209, 67, 67, .1); }
.health-node strong { display: block; margin-right: 18px; overflow-wrap: anywhere; }
.health-node .small, .health-node .muted { margin-top: 6px; color: var(--muted); }

/* --- Layout helpers ------------------------------------------------------- */
.section-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.action-grid .btn { width: 100%; }
.qr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.qr-mock {
  min-height: 145px;
  border: 1px dashed #cdd3dd;
  background: repeating-linear-gradient(45deg, #f5f6f8 0, #f5f6f8 8px, #fff 8px, #fff 16px);
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 14px;
  font-weight: 800;
  color: #566175;
}
.receipt-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(200px, .7fr); gap: 14px; }
.receipt-proof { padding: 14px; border: 1px solid var(--line); background: #fafbfc; border-radius: 14px; }
.proof-placeholder {
  min-height: 210px;
  border: 1px dashed #cbd2dd;
  border-radius: 12px;
  display: grid;
  place-items: center;
  text-align: center;
  background: repeating-linear-gradient(135deg, #f4f6f8, #f4f6f8 10px, #fff 10px, #fff 20px);
  font-size: 18px;
  font-weight: 800;
  color: #667085;
  margin-bottom: 10px;
}
.inbound-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  background: #fbfcfe;
  min-width: 0;
}
.inbound-metrics { display: flex; gap: 8px; flex-wrap: wrap; }
.inbound-metrics span { padding: 7px 9px; background: #fff; border: 1px solid var(--line); border-radius: 10px; font-size: 11px; }
.toggle-row-v2 { display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(90px, auto); align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.toggle-row-v2:last-child { border-bottom: 0; }

/* --- Sidebar identity ----------------------------------------------------- */
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #6e62ff, #8a7cff);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 8px 25px rgba(99, 91, 255, .35);
}
.brand-title { color: #fff; font-size: 16px; font-weight: 800; }
.brand-sub, .sidebar-intro { font-size: 11px; color: #8591a6; }
.nav-label, .nav-section-label {
  display: block;
  padding: 0 10px 7px;
  color: #66758d;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .7px;
}
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #32c48d; margin-inline-start: 5px; box-shadow: 0 0 0 4px rgba(50, 196, 141, .1); }
.dot-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg);
}
.avatar { width: 30px; height: 30px; border-radius: 9px; background: #e9e7ff; color: var(--primary); display: grid; place-items: center; font-weight: 800; }
.sidebar .brand { display: flex; align-items: center; gap: 10px; }
.sidebar .brand .brand-text { display: grid; gap: 2px; min-width: 0; }
.sidebar-foot { display: grid; gap: 8px; }
.sidebar-runtime-pill { width: 100%; justify-content: flex-start; text-decoration: none; }
.sidebar-runtime-pill .online-dot { flex: 0 0 auto; }
.sidebar-foot .logout-form { margin-top: 2px; }
.sidebar-foot .logout-form .btn-danger { width: 100%; }

/* --- Settings primitives -------------------------------------------------- */
.settings-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; }
.settings-nav { padding: 10px; height: max-content; position: sticky; top: 85px; }
.settings-nav button { width: 100%; text-align: right; border: 0; background: transparent; padding: 9px 10px; border-radius: 10px; color: #667085; }
.settings-nav button.active { background: #efefff; color: #5147d9; font-weight: 700; }
.settings-group { display: none; }
.settings-group.active { display: block; }
.setting-row { display: grid; grid-template-columns: minmax(190px, 1.1fr) minmax(230px, 1.4fr); gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border-bottom: 0; }
.setting-meta h4 { margin: 0 0 4px; font-size: 13px; }
.source { font-size: 10px; color: #7b8493; margin-top: 7px; }
.sticky-save {
  position: sticky;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(24, 34, 52, .07);
  z-index: 8;
}

/* --- Utilities and legacy aliases used across templates ------------------
   These class names appear in the production templates but had no rule, so the
   elements rendered unstyled. Values follow the V3 design language. */
.btn-primary, a.btn-primary, button.btn-primary { background: var(--primary); color: #fff; border-color: transparent; box-shadow: 0 5px 15px rgba(99, 91, 255, .18); }
.btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover { background: var(--primary-strong); color: #fff; }
.alert-info { background: #f1f7ff; border-color: #d9e8ff; color: #245d9b; }
.text-danger, .danger-text { color: var(--danger); }
.text-success { color: var(--success); }
.text-muted { color: var(--muted); }
.text-wrap { white-space: normal; overflow-wrap: anywhere; }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cols-3 > * { min-width: 0; }
.align-end { align-items: end; }
.inline-check { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.inline-check input { width: auto; min-height: 0; }
.field-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.compact-input, .audit-select, .job-select, .client-search { max-width: 100%; min-width: 0; }
.audit-select, .job-select { width: auto; min-width: 130px; }
.client-search { min-width: 200px; }
.label, .field-label { display: block; font-size: 12px; font-weight: 650; color: #5e6878; }
.tabs { display: flex; align-items: center; gap: 5px; overflow-x: auto; padding: 4px; background: #f2f4f7; border-radius: 12px; max-width: 100%; }
.tabs .tab { border: 0; background: transparent; padding: 7px 11px; border-radius: 9px; color: #667085; white-space: nowrap; }
.tabs .tab.active { background: #fff; color: #2c3443; box-shadow: 0 1px 5px rgba(24, 34, 52, .08); font-weight: 700; }
.tab-panel[hidden] { display: none !important; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.switch-row:last-child { border-bottom: 0; }
.stat-card { min-width: 0; }
.collapsible-card { padding: 0; overflow: hidden; }
.collapsible-card > summary { cursor: pointer; padding: 14px 16px; font-weight: 700; }
.safe-json-view { max-height: 420px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; direction: ltr; text-align: left; }
.help-sections-stack, .help-sections-wrap { display: grid; gap: 14px; }
.sales-bot-primary-kpis, .sales-bot-analytics-overview, .rep-orders-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;
}
.sales-bot-attention, .rep-dashboard-attention { display: grid; gap: 8px; }
.sales-bot-detail-tabs, .telegram-tabs, .provider-runtime-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sales-bot-analytics-extra { margin-top: 14px; }
.workspace-modal-card { width: min(1180px, calc(100vw - 28px)); max-width: 1180px; max-height: 94dvh; overflow: auto; }
.reconciliation-flow { display: grid; gap: 14px; }
.bulk-preview-list { display: grid; gap: 8px; max-height: 340px; overflow: auto; }
.cjr-action-chip, .rep-cjr-action-chip, .pm-role-chip, .r_perm_chip, .role-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 11px; color: #475467;
}
.representative-service-access-card, .pg-card-main, .payment-tab, .expiry-label { min-width: 0; }
.settings-v3-page, .telegram-runtime-page, .plans-v3-page, .rep-operation-page { min-width: 0; }

@media (max-width: 900px) {
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cols-3 { grid-template-columns: minmax(0, 1fr); }
  .switch-row { flex-wrap: wrap; }
  .audit-select, .job-select, .client-search { width: 100%; min-width: 0; }
}

/* --- V3 responsive parity ------------------------------------------------- */
@media (max-width: 1100px) {
  .health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inbound-card { grid-template-columns: 1fr auto; }
  .inbound-metrics { grid-column: 1 / -1; grid-row: 2; }
}
/* Unify the mobile card systems.
   `setupResponsiveTables()` in admin.js adds `.responsive-card-table` to every
   `main .data-table`, so the legacy `.responsive-cards` rules below 860px and
   the `.responsive-card-table` rules below 900px used to BOTH apply and draw a
   double card border. The legacy layer is now reduced to a no-op marker and
   `.responsive-card-table` is the single card implementation. */
@media (max-width: 900px) {
  .responsive-cards.data-table thead { display: table-header-group; }
  .responsive-cards.data-table tbody { display: table-row-group; }
  .responsive-cards.data-table tr { border: 0; border-radius: 0; background: transparent; padding: 0; }
  .responsive-cards.data-table td { display: table-cell; width: auto; padding: 11px 13px; border-bottom: 1px solid #eef0f4; }
  .responsive-cards.data-table td::before { content: none; }
  .responsive-cards.data-table:not(.responsive-card-table) thead { display: none; }
  .responsive-cards.data-table:not(.responsive-card-table) tbody { display: grid; gap: 10px; }
  .responsive-cards.data-table:not(.responsive-card-table) tr {
    display: block;
    padding: 10px 12px;
    border: 1px solid var(--v3-border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
  }
  .responsive-cards.data-table:not(.responsive-card-table) td {
    display: grid;
    grid-template-columns: minmax(108px, 38%) minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    padding: 7px 0;
    overflow-wrap: anywhere;
  }
  .responsive-cards.data-table:not(.responsive-card-table) td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
  }
  .responsive-card-table { min-width: 0; }
  .responsive-table { min-width: 0; }
  .responsive-table thead { display: none; }
  .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; }
  .responsive-table tr { padding: 10px 12px; border-bottom: 1px solid var(--v3-border); }
  .responsive-table td { border: 0; padding: 6px 0; display: grid; grid-template-columns: minmax(90px, 38%) minmax(0, 1fr); gap: 10px; }
  .responsive-table td::before { content: attr(data-label); color: var(--muted); font-size: 11px; font-weight: 700; }
  .responsive-table td[colspan] { display: block; }
  .responsive-table td[colspan]::before { content: none; }
}
@media (max-width: 900px) {
  .section-grid { display: block; }
  .section-grid > [class*="span-"] { margin-bottom: 14px; }
  .settings-layout { display: block; }
  .settings-nav { position: static; display: flex; gap: 6px; overflow: auto; margin-bottom: 12px; }
  .settings-nav button { width: auto; white-space: nowrap; }
  .setting-row { grid-template-columns: 1fr; }
  .receipt-layout { grid-template-columns: 1fr; }
  .hide-mobile { display: none !important; }
}
@media (max-width: 640px) {
  .page-header h1 { font-size: 20px; }
  .metric, .kpi-value { font-size: 20px; }
  .empty-state { padding: 22px 14px; }
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-group .detail-grid, .drawer-section .detail-grid { grid-template-columns: 1fr; }
  .health-grid { grid-template-columns: 1fr; }
  .action-grid { grid-template-columns: 1fr; }
  .qr-grid { grid-template-columns: 1fr; }
  .inbound-card { grid-template-columns: 1fr; }
  .inbound-card > .btn { width: 100%; }
  .toggle-row-v2 { grid-template-columns: 1fr auto; }
  .toggle-row-v2 strong { grid-column: 1 / -1; }
  .sticky-save { flex-direction: column; align-items: stretch; }
  .sticky-save .actions, .sticky-save > * { width: 100%; }
  .modal-foot { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex: 1 1 140px; }
  .drawer-tabs, .modal-tabs, .operation-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
  .drawer-tabs > *, .modal-tabs > *, .operation-tabs > * { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 360px) {
  .summary-strip { grid-template-columns: 1fr; }
}

/* ============================================================================
   Admin header — rebuilt to match the frontend-v3 prototype

   The prototype keeps the workspace switch, the quick search and the account
   actions in one sticky bar. The panel header instead carried a static title
   plus a breadcrumb, and the workspace switch was duplicated in the sidebar.
   New structure: workspace switch, current-page pill and quick search on the
   start side; icon actions and the profile chip on the end side. The sidebar now
   only reports the resolved workspace, so the two can never disagree.
   ============================================================================ */
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-left .mobile-nav-btn { grid-row: auto; }

.context-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--v3-border);
  border-radius: 12px;
  background: var(--bg-soft);
  flex: 0 0 auto;
}
.context-switch button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-weight: 650;
}
.context-switch button svg { width: 17px; height: 17px; fill: currentColor; flex: 0 0 auto; }
.context-switch button:hover { background: #fff; color: var(--text); }
.context-switch button.active { background: #fff; color: var(--v3-primary-strong); box-shadow: 0 2px 8px rgb(15 23 42 / 8%); }

.topbar-page-pill {
  display: grid;
  min-width: 0;
  padding: 4px 12px;
  border: 1px solid var(--v3-border);
  border-radius: 11px;
  background: #fff;
}
.topbar-page-label { color: var(--muted); font-size: 12px; line-height: 1.4; }
.topbar-page-pill strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar-icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--v3-border);
  border-radius: 11px;
  background: #fff;
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
  flex: 0 0 auto;
}
.topbar-icon-btn:hover { background: var(--bg-soft); }
.topbar-icon-btn svg { width: 19px; height: 19px; fill: currentColor; }
.topbar-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  border: 2px solid #fff;
  background: var(--v3-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  direction: ltr;
}
.topbar-badge.warn { background: #d98b12; }

.sidebar-context {
  display: grid;
  gap: 2px;
  margin-bottom: var(--space-2);
  padding: 9px 11px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 11px;
  background: var(--sidebar-elevated);
}
.sidebar-context-label { color: var(--sidebar-muted); font-size: 12px; }
.sidebar-context strong { color: #fff; font-size: 14px; }

@media (max-width: 1400px) {
  .topbar-page-pill { display: none; }
}
@media (max-width: 1100px) {
  .command-search-trigger { min-width: 44px; justify-content: center; gap: 0; }
  .command-search-trigger span, .command-search-trigger kbd { display: none; }
}
@media (max-width: 640px) {
  .topbar-left { gap: 7px; }
  .context-switch button { padding: 6px 9px; }
  .topbar-icon-btn { display: none; }
}

/* ============================================================================
   Readability pass — base text 15px (operator request)

   The V3 port reused the prototype's compact typography: table text at 13px and
   labels, hints, meta rows and column headers at 10-12px. In Persian RTL at 100%
   zoom that reads too small. This block raises font sizes only — no padding,
   gap, width, radius or breakpoint is touched — so responsive behaviour and
   column layouts stay exactly as they were. It sits last in the file so it wins
   on equal specificity without rewriting the ~90 individual rules above.
   ============================================================================ */
body { font-size: 15px; }

/* primary content ----------------------------------------------------------- */
th, td { font-size: 15px; }
th { font-size: 13px; }
.page-header h1 { font-size: 26px; }
.section-head h3, .section-heading h2, .setting-meta h4 { font-size: 16px; }
.kpi-value, .metric { font-size: 26px; }
.kpi-label { font-size: 13px; }
.muted, .detail strong { font-size: 14px; }
.summary-item strong, .metric-box strong { font-size: 15px; }

/* supporting text ----------------------------------------------------------- */
.tiny, .small, .mini, .field-hint, .kpi-hint, .cell-sub, .source,
.detail span, .detail-item span, .summary-item span, .metric-box span,
.representative-fixed-summary label, .representative-service-summary span,
.representative-action-summary span, .server-summary-metrics,
.inbound-scan-metrics, .inbound-metrics span, .progress-label,
.mobile-record-meta, .detail-list dt, .v3-filter-toolbar label,
.v3-chip-filter > span, .command-group-title, .command-search-label,
.mini-bar-label, .timestamp small, .drawer-tab-group-label,
.brand-sub, .sidebar-intro, .label, .field-label, .pill, .pill.lg, .badge,
.chip, .cjr-action-chip, .rep-cjr-action-chip, .pm-role-chip, .r_perm_chip,
.role-chip, .btn-small, .compact-btn, .inline-icon-btn { font-size: 13px; }
.v3-chart-column small { font-size: 13px; }

/* table card labels --------------------------------------------------------- */
.responsive-card-table td::before,
.responsive-table td::before,
.responsive-cards.data-table:not(.responsive-card-table) td::before,
.subscriptions-table td::before { font-size: 13px; }

/* micro chrome: still compact, but no longer sub-12px ---------------------- */
.kbd, kbd, .nav-label, .nav-section-label { font-size: 12px; }

@media (max-width: 768px) {
  /* the previous mobile override shrank table text to 12px */
  th, td { font-size: 14px; }
  th { font-size: 13px; }
  .page-header h1 { font-size: 22px; }
  .kpi-value, .metric { font-size: 22px; }
}

/* ============================================================================
   V3 modal shell — popup structure parity with the frontend-v3 prototype

   The port reused the prototype's colours and radii but not its popup
   structure: a modal was one long card whose head and action row scrolled away
   with the fields, tabs were a wrapping button cloud, and there was no single
   close affordance. This block gives every `.modal` in both panels the same
   three-part structure the prototype uses:

     .modal-card  →  .modal-head   (sticky title/subtitle + icon close)
                     .modal-body   (the only padded region)
                     .modal-actions (sticky footer, always reachable)

   It is intentionally additive and scoped to `.modal`, because `modal-head`,
   `modal-actions` and `operation-tabs` are also used as plain section chrome on
   settings, telegram, database and ssl pages — those must not become sticky.
   The card keeps `overflow:auto`, so a popup whose content is not wrapped in
   `.modal-body` still scrolls instead of clipping; every popup of every route is
   checked by `scripts/smoke_panel_ui.py --check-popups`.
   ============================================================================ */
:root {
  --modal-gutter: clamp(10px, 3vh, 28px);
  --modal-head-h: 62px;
}

.modal {
  padding: var(--modal-gutter) 14px;
  background: rgba(10, 18, 32, .56);
  backdrop-filter: blur(3px);
  overscroll-behavior: contain;
}

/* Auto margins on the card centre it while leaving the overlay scrollable, so a
   popup taller than the viewport can still be scrolled from its first line. */
.modal.open,
.modal.show,
.modal.active {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.modal .modal-card {
  /* The card keeps its own padding so any legacy content that is not wrapped in
     `.modal-body` still keeps its inset, while the head/body/actions cancel that
     padding with negative margins and span the full card width themselves.

     `--modal-pad` therefore means "the inset the shell has to cancel", and both
     sticky rows are offset by it: a sticky element is clamped to the scrollport's
     content box, so a header with `top: 0` would stop one padding step below the
     card's edge and let the scrolling content show through in that band. */
  --modal-pad: var(--space-2);
  --modal-inline: 20px;
  width: 100%;
  margin: auto;
  padding: var(--modal-pad);
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - (2 * var(--modal-gutter)));
  overflow: auto;
  overscroll-behavior: contain;
  scroll-padding-top: var(--modal-head-h);
}

.modal .modal-head {
  position: sticky;
  /* One padding step above the card's content box: that is the card's own edge,
     so the header seals the top of the popup instead of leaving a gap where the
     content scrolling underneath stays visible. */
  top: calc(-1 * var(--modal-pad));
  z-index: 4;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin: calc(-1 * var(--modal-pad)) calc(-1 * var(--modal-pad)) 0;
  padding: 15px var(--modal-inline) 13px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.modal .modal-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.modal .modal-head h1,
.modal .modal-head h2,
.modal .modal-head h3,
.modal .modal-head h4 {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}

.modal .modal-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.modal .modal-head .actions {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.modal .modal-close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
  color: #475569;
  font-size: 21px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.modal .modal-close:hover {
  background: #eef2f7;
  border-color: #d8dfe9;
  color: #0f172a;
  transform: none;
  box-shadow: none;
}

.modal .modal-body {
  flex: 0 0 auto;
  margin: var(--modal-pad) calc(-1 * var(--modal-pad)) 0;
  padding: 0 var(--modal-inline);
  min-width: 0;
}

.modal .modal-body > :first-child { margin-top: 0; }
.modal .modal-body > :last-child { margin-bottom: 0; }

/* A tab rail that ended up as the first element of the body still has to reach
   the card edges and sit right under the head, like the ones that are siblings
   of the body. */
.modal .modal-body > .operation-tabs:first-child {
  margin-top: calc(-1 * var(--modal-pad));
}

.modal .modal-body > .operation-tabs {
  margin-inline: calc(-1 * var(--modal-inline));
}

.modal .modal-actions {
  position: sticky;
  /* Mirrors the sticky header: the action row seals the bottom edge of the card
     instead of stopping one padding step short of it. */
  bottom: calc(-1 * var(--modal-pad));
  z-index: 3;
  flex: 0 0 auto;
  margin: var(--modal-pad) calc(-1 * var(--modal-pad)) calc(-1 * var(--modal-pad));
  padding: 12px var(--modal-inline) max(12px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  background: #fff;
  border-top: 1px solid var(--line);
}

.modal .modal-actions.is-end,
.modal .modal-actions .ui-action-group--end { justify-content: flex-end; }

/* A footer with a leading hint and a trailing action group (plan editor). */
.modal .modal-actions.is-between { justify-content: space-between; }

/* A popup whose action row sits mid-content (before a second, destructive form)
   must not pin itself over the content that follows it. */
.modal .modal-actions--inline {
  position: static;
  margin: 12px 0 0;
  padding: 0;
  border-top: 0;
  background: transparent;
}

/* Complex popups (service/order/user workspaces) already carried the prototype's
   ui-modal-* row model. They now live inside the same shell, so the rows only
   need to keep behaving when the card scrolls instead of clipping: dropping the
   shell's negative margins here would pull the head inside the card's padding and
   leave a borderless, differently indented header. */
.modal .ui-modal-head { margin: calc(-1 * var(--modal-pad)) calc(-1 * var(--modal-pad)) 0; }

/* Some popups wrap the body and the action row in their <form>, sometimes behind
   another grid like `.row`. The form is a transport shell, not a card of its own,
   so it must not re-inset rows the shell has already aligned: otherwise the body
   content no longer lines up with the head and the popup reads as two mismatched
   frames. */
.modal .modal-card form:has(> .modal-body) {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Tab rail: one horizontally scrollable strip pinned under the sticky head, so a
   seven-tab popup keeps its navigation while the operator reads the pane. The
   offset comes from the measured head height (admin.js), with a sane fallback,
   minus the padding step the header itself travels. */
.modal .operation-tabs {
  position: sticky;
  top: calc(var(--modal-head-h) - var(--modal-pad));
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 9px var(--modal-inline);
  background: #fff;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}

/* A rail that is a direct child of the card has no `.modal-body` around it to
   cancel the card padding, so the shell has to do it or the rail stays inset
   while the head and the action row are flush. */
.modal .modal-card > .operation-tabs {
  margin-inline: calc(-1 * var(--modal-pad));
}

.modal .operation-tabs > * {
  flex: 0 0 auto;
  white-space: nowrap;
}

.modal .receipt-modal-body,
.modal .event-trace-modal-body {
  min-width: 0;
  overscroll-behavior: contain;
}

@media (max-width: 640px) {
  .modal { padding: 0; }

  .modal .modal-card {
    --modal-pad: 12px;
    --modal-inline: 14px;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    /* The home-indicator inset belongs to the action row: padding it here would
       leave a band below the sticky row that the content could scroll through. */
    padding-bottom: var(--modal-pad);
    border: 0;
    border-radius: 0;
  }

  .modal .modal-head { padding: max(12px, env(safe-area-inset-top)) 14px 11px; }
  .modal .modal-head h1,
  .modal .modal-head h2,
  .modal .modal-head h3,
  .modal .modal-head h4 { font-size: 16px; }
  .modal .modal-close { width: 40px; height: 40px; min-width: 40px; }
  .modal .modal-body { padding: 0 14px; }
  .modal .modal-actions { padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); }
  .modal .operation-tabs { padding-inline: 14px; }
}

@media (max-width: 560px) {
  .modal .modal-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .modal .modal-actions > *,
  .modal .modal-actions .ui-action-group > * { width: 100%; }
}