:root {
  --bg: #eff4fb;
  --panel: #ffffff;
  --ink: #1d2a44;
  --muted: #7b89a8;
  --line: #d8e2f0;
  --nav: #1c1f44;
  --nav-active: #2d2f66;
  --red: #f72d55;
  --blue: #1273ea;
  --green: #7fe4c7;
  --amber: #ffc86f;
  --lilac: #f1ebff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at top left, #ffffff 0%, #f4f8ff 24%, #eff4fb 100%);
}

button, input, select { font: inherit; }

.app-shell {
  display: grid;
  grid-template-columns: 236px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: linear-gradient(180deg, #191c3d 0%, #11142d 100%);
  color: #fff;
  padding: 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #ff4b5a, #ff9d59);
  font-weight: 800;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand-name { font-size: 20px; font-weight: 800; }
.brand-subtitle { color: #9fb3de; font-size: 12px; }

.quick-search {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 10px;
  color: #b8c8ee;
  font-size: 14px;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-tree {
  display: grid;
  gap: 2px;
  margin: 0 2px;
  border-radius: 18px;
  transition: background 0.18s ease;
}
.nav-tree.expanded {
  background: rgba(255, 255, 255, 0.04);
}
.nav-tree.collapsed .nav-subgroup {
  display: none;
}
.nav-subgroup {
  display: grid;
  gap: 2px;
  margin: 0 10px 4px 18px;
  padding: 4px 0 4px 10px;
  border-left: 1px solid rgba(159, 179, 222, 0.24);
}
.nav-subitem {
  border: 0;
  background: transparent;
  color: #d7e3ff;
  text-align: left;
  padding: 10px 18px 10px 44px;
  border-radius: 14px;
  margin: 0 4px;
  cursor: pointer;
}
.nav-subitem.active,
.nav-subitem:hover {
  background: rgba(101, 108, 190, 0.35);
}

.nav-item {
  border: 0;
  background: transparent;
  color: #f3f6ff;
  text-align: left;
  padding: 14px 18px;
  border-radius: 14px;
  margin: 0 4px;
  cursor: pointer;
}

.nav-item-toggle {
  width: calc(100% - 8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-item-label {
  flex: 1;
}

.nav-item-caret {
  color: #9fb3de;
  font-size: 13px;
  line-height: 1;
  transition: transform 0.18s ease, color 0.18s ease;
}

.nav-tree.collapsed .nav-item-caret {
  transform: rotate(-90deg);
}

.nav-tree.expanded .nav-item-caret,
.nav-item-toggle.active .nav-item-caret,
.nav-item-toggle:hover .nav-item-caret {
  color: #f3f6ff;
}

.nav-item.active,
.nav-item:hover {
  background: rgba(101, 108, 190, 0.35);
}

.sidebar-card {
  margin-top: auto;
  background: linear-gradient(180deg, #fff2d8, #fffdf8);
  color: #1d2a44;
  border-radius: 18px;
  padding: 14px;
}

.sidebar-company-btn {
  margin: -6px 8px 0;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  cursor: pointer;
}

.sidebar-company-btn:hover {
  background: rgba(101, 108, 190, 0.35);
}

.sidebar-company-btn.active {
  background: rgba(101, 108, 190, 0.35);
}

.sidebar-company-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #c7d8ff;
  color: #284989;
  font-size: 12px;
}

.sidebar-company-arrow {
  margin-left: auto;
  color: #d5e2ff;
}

.trial-title { font-weight: 700; margin-bottom: 10px; }
.trial-copy {
  color: #586883;
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 12px;
}

.trial-bar {
  height: 8px;
  background: #fff;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}

.trial-bar span {
  display: block;
  width: 14%;
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #8be08b);
}

.premium-btn {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 12px;
  background: #2f3369;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.premium-btn.is-active {
  background: linear-gradient(135deg, #16a34a, #10986d);
}

.main-panel { padding: 18px; }
.status-menubar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 36px;
  margin-bottom: 12px;
  padding: 0 4px 4px;
}

.status-menu-cluster,
.status-menu-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.status-menu {
  position: relative;
}

.status-menu-btn,
.status-menu-refresh {
  border: 0;
  background: transparent;
  color: #243b63;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.status-menu-btn:hover,
.status-menu-btn.is-open,
.status-menu-refresh:hover {
  background: rgba(225, 235, 250, 0.9);
}

.status-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  border: 1px solid #dbe6f6;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(23, 47, 94, 0.12);
  padding: 8px;
  z-index: 40;
}

.status-menu-item {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #243b63;
  text-align: left;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
}

.status-menu-item:hover {
  background: #eef5ff;
}

.status-menu-link {
  color: #1f66d0;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.status-menu-link.muted {
  color: #5f7294;
}
.page-message {
  display: none;
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  font-weight: 700;
}
.page-message.show { display: block; }
.page-message.success { background: #ddfff0; color: #0b7d4c; }
.page-message.error { background: #fff0f2; color: #c1284a; }

.subscription-modal {
  width: min(860px, calc(100vw - 32px));
  max-width: 860px;
}

.subscription-modal-hero {
  display: grid;
  grid-template-columns: 1.4fr 180px;
  gap: 18px;
  padding: 18px;
  border: 1px solid #dce6f5;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(240, 247, 255, 0.96), rgba(255, 243, 236, 0.96));
  margin-bottom: 18px;
}

.subscription-modal-hero h3 {
  margin: 10px 0 8px;
  font-size: 28px;
  line-height: 1.15;
}

.subscription-modal-hero p {
  margin: 0;
  color: #617391;
  line-height: 1.6;
}

.subscription-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #eaf3ff;
  color: #26518c;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.subscription-badge.is-expired {
  background: #fff1f4;
  color: #c1284a;
}

.subscription-badge.is-active {
  background: #e8fff3;
  color: #118454;
}

.subscription-hero-meta {
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid #d8e4f5;
  text-align: center;
  padding: 18px;
}

.subscription-hero-value {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  color: #1d2a44;
}

.subscription-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.subscription-plan-card {
  display: grid;
  gap: 8px;
  border: 1px solid #d7e4f6;
  border-radius: 22px;
  background: #fff;
  padding: 18px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.subscription-plan-card:hover,
.subscription-plan-card.active {
  border-color: #2f7ae5;
  box-shadow: 0 14px 32px rgba(47, 122, 229, 0.14);
  transform: translateY(-1px);
}

.subscription-plan-kicker {
  color: #1f66d0;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.subscription-plan-price {
  font-size: 22px;
  font-weight: 800;
}

.subscription-plan-original {
  color: #8a98b4;
  font-size: 13px;
  text-decoration: line-through;
}

.subscription-plan-offer {
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: #e8fff3;
  color: #0f8b4d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.subscription-plan-tax {
  color: #32507f;
  font-size: 12px;
  font-weight: 700;
}

.subscription-plan-copy {
  color: #647594;
  line-height: 1.5;
}

.subscription-pricing-summary {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, #f7fbff 0%, #edf5ff 100%);
  border: 1px solid #d7e6fb;
}

.subscription-pricing-summary strong {
  font-size: 13px;
  color: #26406b;
}

.subscription-pricing-summary span {
  font-size: 24px;
  font-weight: 800;
  color: #16365f;
}

.subscription-pricing-summary small {
  color: #647594;
  font-size: 12px;
}

.subscription-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.subscription-feature-card {
  display: grid;
  gap: 6px;
  border-radius: 18px;
  background: #f5f9ff;
  border: 1px solid #dce7f7;
  padding: 14px;
}

.subscription-feature-card span {
  color: #647594;
  font-size: 13px;
  line-height: 1.45;
}

.subscription-gateway-hint {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #eef6ff;
  border: 1px solid #d6e7ff;
  color: #32507f;
  font-size: 13px;
  line-height: 1.5;
}

.subscription-activation-panel {
  margin-bottom: 14px;
  border: 1px solid #dce7f6;
  border-radius: 16px;
  background: #fbfdff;
  overflow: hidden;
}

.subscription-activation-panel summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #26406b;
}

.subscription-activation-panel summary::-webkit-details-marker {
  display: none;
}

.subscription-activation-panel[open] summary {
  border-bottom: 1px solid #e5edf8;
  background: #f5f9ff;
}

.subscription-activation-field {
  margin: 0;
  padding: 12px 14px 14px;
}

.stacked-field {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.stacked-field > span {
  font-size: 13px;
  font-weight: 700;
  color: #30466e;
}

.stacked-field input {
  width: 100%;
  border: 1px solid #cfdcf0;
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
}

.stacked-field select,
.stacked-field textarea {
  width: 100%;
  border: 1px solid #cfdcf0;
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
  font: inherit;
}

.stacked-field textarea {
  min-height: 92px;
  resize: vertical;
}

.subscription-status-box {
  min-height: 52px;
  border-radius: 16px;
  background: #f7fbff;
  border: 1px solid #dce7f6;
  color: #4c5f7d;
  padding: 14px 16px;
  margin-bottom: 16px;
  line-height: 1.5;
}

.subscription-status-box.is-success {
  background: #eafff2;
  border-color: #b8f2d1;
  color: #127447;
}

.subscription-status-box.is-error {
  background: #fff2f5;
  border-color: #ffc9d5;
  color: #ba274a;
}

.subscription-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.subscription-billing-grid,
.subscription-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.subscription-admin-note {
  grid-column: 1 / -1;
}

.subscription-records-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
  margin-bottom: 14px;
}

.subscription-record-card,
.subscription-admin-panel {
  border: 1px solid #dce7f6;
  border-radius: 20px;
  background: #fbfdff;
  padding: 16px;
}

.subscription-record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.subscription-record-head h3 {
  margin: 0;
  font-size: 18px;
}

.compact-grid {
  min-height: 120px;
}

.compact-grid .table-header,
.compact-grid .table-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.subscription-admin-panel {
  margin-top: 14px;
}

.subscription-modal.subscription-modal-compact {
  width: min(1000px, calc(100vw - 40px));
  max-width: 1000px;
  max-height: calc(100vh - 28px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.subscription-modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 10px;
  scrollbar-width: thin;
}

.subscription-modal-scroll::-webkit-scrollbar {
  width: 8px;
}

.subscription-modal-scroll::-webkit-scrollbar-thumb {
  background: #c9d8f0;
  border-radius: 999px;
}

.subscription-modal-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.subscription-modal-header {
  padding: 16px 18px;
  border-bottom: 1px solid #dfe8f6;
  margin-bottom: 0;
}

.subscription-modal-subtitle {
  margin: 6px 0 0;
  color: #6b7b96;
  font-size: 13px;
}

.subscription-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
  align-items: start;
}

.subscription-main-left {
  padding: 16px 18px 18px;
  border-right: 1px solid #e5edf8;
}

.subscription-main-right {
  padding: 16px 18px 18px;
  background: linear-gradient(180deg, #f9fbff 0%, #f4f8ff 100%);
}

.subscription-modal-hero.subscription-modal-hero-compact {
  grid-template-columns: 1fr 120px;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  margin-bottom: 14px;
}

.subscription-modal-hero.subscription-modal-hero-compact h3 {
  margin: 8px 0 6px;
  font-size: 23px;
}

.subscription-hero-meta {
  min-height: 98px;
}

.subscription-hero-value {
  font-size: 34px;
}

.subscription-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: #213b68;
}

.subscription-section-head strong {
  font-size: 14px;
}

.subscription-details-card {
  border: 1px solid #dce6f5;
  border-radius: 18px;
  background: #fff;
  padding: 14px;
  margin-bottom: 14px;
}

.subscription-details-accordion {
  padding: 0;
  overflow: hidden;
}

.subscription-details-accordion summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  color: #213b68;
}

.subscription-details-accordion summary::-webkit-details-marker {
  display: none;
}

.subscription-details-accordion summary::after {
  content: "⌃";
  font-size: 14px;
  color: #6380ad;
  transform: rotate(180deg);
  transition: transform 0.18s ease;
}

.subscription-details-accordion[open] summary::after {
  transform: rotate(0deg);
}

.subscription-details-body {
  padding: 0 14px 14px;
  border-top: 1px solid #e8eff9;
}

.subscription-billing-grid.compact {
  gap: 10px;
  margin-bottom: 8px;
}

.subscription-billing-grid.compact .stacked-field {
  margin-bottom: 0;
}

.subscription-form-note {
  color: #73839d;
  font-size: 12px;
  line-height: 1.45;
}

.subscription-pricing-panel {
  display: grid;
  gap: 14px;
  border: 1px solid #dce6f5;
  border-radius: 18px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 18px 40px rgba(24, 54, 102, 0.08);
}

.subscription-price-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.subscription-price-panel-head strong {
  display: block;
  font-size: 18px;
  color: #172c4c;
}

.subscription-selected-plan-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff4d2 0%, #fff7e6 45%, #ffffff 100%);
  border: 1px solid #efd29a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.subscription-selected-plan-card strong {
  font-size: 15px;
  color: #17335e;
}

.subscription-selected-plan-price {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.subscription-selected-plan-price strong {
  font-size: 28px;
  color: #182947;
}

.subscription-price-lines {
  display: grid;
  gap: 10px;
}

.subscription-pricing-meta-note {
  color: #6f809c;
  font-size: 12px;
  line-height: 1.45;
}

.subscription-saving-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #eef7ff 0%, #dff0ff 100%);
  border: 1px solid #c7e0ff;
  color: #1b5fc0;
  font-size: 12px;
  font-weight: 800;
}

.subscription-saving-ribbon::before {
  content: "🏷";
  font-size: 13px;
}

.subscription-price-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #3f5478;
  font-size: 14px;
}

.subscription-price-line strong {
  color: #1f3357;
}

.subscription-price-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #dfe8f6;
}

.subscription-price-total span {
  font-size: 15px;
  font-weight: 700;
  color: #243b68;
}

.subscription-price-total strong {
  font-size: 26px;
  color: #ff335f;
}

.subscription-actions.vertical {
  display: grid;
  gap: 10px;
}

.subscription-actions.vertical .pill.wide {
  width: 100%;
  justify-content: center;
  min-height: 40px;
  font-size: 16px;
}

.subscription-actions-row {
  display: flex;
  gap: 10px;
}

.subscription-actions-row .pill {
  flex: 1;
}

.subscription-feature-grid.compact {
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 0;
}

.subscription-feature-grid.compact .subscription-feature-card {
  padding: 12px;
  border-radius: 14px;
}

.subscription-gateway-hint {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
}

.subscription-activation-panel {
  margin-bottom: 10px;
  border-radius: 14px;
}

.subscription-activation-panel summary {
  font-size: 12px;
  padding: 10px 12px;
}

.subscription-status-box {
  min-height: 48px;
  margin-bottom: 0;
  padding: 12px 14px;
  font-size: 13px;
}

.subscription-tab-shell {
  margin: 0 18px 10px;
  border: 1px solid #dce6f5;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.subscription-tabs {
  display: flex;
  gap: 6px;
  padding: 8px;
  background: #f4f8ff;
  border-bottom: 1px solid #e5edf8;
  overflow-x: auto;
  scrollbar-width: thin;
}

.subscription-tab {
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #486184;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  min-height: 32px;
  padding: 7px 14px;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.subscription-tab:hover {
  background: #eaf2ff;
  color: #1f5fbf;
}

.subscription-tab.active {
  background: #fff;
  border-color: #b9cff4;
  color: #1f5fbf;
  box-shadow: 0 8px 18px rgba(47, 122, 229, 0.12);
}

.subscription-tab-panel {
  padding: 10px;
}

.subscription-collapse {
  margin: 0 18px 10px;
  border: 1px solid #dce6f5;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.subscription-collapse summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
  color: #213d69;
  background: #f8fbff;
  border-bottom: 1px solid #e5edf8;
}

.subscription-collapse summary::-webkit-details-marker {
  display: none;
}

.subscription-collapse summary::after {
  content: "⌃";
  float: right;
  color: #6781ab;
  transform: rotate(180deg);
  transition: transform 0.18s ease;
}

.subscription-collapse[open] summary::after {
  transform: rotate(0deg);
}

.subscription-records-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 10px;
}

.subscription-records-grid.compact .subscription-record-card {
  padding: 10px;
  border-radius: 14px;
}

.subscription-records-grid.compact .subscription-record-head {
  margin-bottom: 6px;
}

.subscription-records-grid.compact .subscription-record-head h3 {
  font-size: 14px;
}

.compact-grid {
  min-height: 56px;
  max-height: 136px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

.compact-grid .table-header,
.compact-grid .table-row {
  padding: 7px 9px;
  border-radius: 10px;
  font-size: 10px;
  line-height: 1.35;
}

.compact-grid .table-row + .table-row {
  margin-top: 4px;
}

.subscription-record-card.flat {
  border: 0;
  border-radius: 0;
  padding: 10px;
  background: transparent;
}

.subscription-admin-panel.subscription-collapse {
  margin-top: 0;
}

.subscription-admin-panel .subscription-admin-grid,
.subscription-admin-panel .subscription-actions {
  padding: 10px;
}

.subscription-admin-panel .subscription-actions {
  padding-top: 0;
}

.subscription-record-card,
.subscription-admin-panel {
  border-radius: 14px;
}

.subscription-admin-grid {
  gap: 10px;
  margin-bottom: 10px;
}

.subscription-admin-panel .stacked-field {
  gap: 6px;
  margin-bottom: 0;
}

.subscription-admin-panel .stacked-field > span {
  font-size: 12px;
}

.subscription-admin-panel .stacked-field input,
.subscription-admin-panel .stacked-field select,
.subscription-admin-panel .stacked-field textarea {
  padding: 10px 12px;
  border-radius: 12px;
}

.subscription-admin-panel .stacked-field textarea {
  min-height: 64px;
}

.subscription-record-head {
  gap: 8px;
}

.subscription-record-head h3 {
  font-size: 16px;
}

.subscription-record-head .muted {
  font-size: 11px;
}

.subscription-collapse > .subscription-record-card.flat .compact-grid,
.subscription-records-grid.compact .compact-grid {
  scrollbar-width: thin;
}

.subscription-details-accordion summary::after,
.subscription-collapse summary::after {
  content: "\2303";
}

.subscription-saving-ribbon::before {
  content: "%";
}

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

  .subscription-main-left {
    border-right: 0;
    border-bottom: 1px solid #e5edf8;
  }

  .subscription-records-grid.compact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .subscription-plan-grid.subscription-plan-grid-compact,
  .subscription-billing-grid.compact,
  .subscription-admin-grid {
    grid-template-columns: 1fr;
  }

  .subscription-modal.subscription-modal-compact {
    width: calc(100vw - 18px);
  }

  .subscription-main-left,
  .subscription-main-right {
    padding: 14px;
  }

  .subscription-actions-row,
  .subscription-actions {
    flex-direction: column;
  }

  .subscription-selected-plan-card,
  .subscription-price-line,
  .subscription-price-total,
  .subscription-price-panel-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .subscription-selected-plan-price {
    justify-items: start;
  }
}

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

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

.desktop-sync-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #dbe6f5;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 10px 24px rgba(25, 56, 115, 0.08);
}

.desktop-sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: #eff5ff;
  color: #244068;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.desktop-sync-pill::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #8ea4c9;
  box-shadow: 0 0 0 4px rgba(142, 164, 201, 0.18);
}

.desktop-sync-pill.is-online {
  background: #e8fff3;
  color: #0f7a4d;
}

.desktop-sync-pill.is-online::before {
  background: #20b26b;
  box-shadow: 0 0 0 4px rgba(32, 178, 107, 0.16);
}

.desktop-sync-pill.is-syncing {
  background: #fff7df;
  color: #9a6a06;
}

.desktop-sync-pill.is-syncing::before {
  background: #f4b73f;
  box-shadow: 0 0 0 4px rgba(244, 183, 63, 0.18);
}

.desktop-sync-pill.is-offline,
.desktop-sync-pill.is-error {
  background: #fff1f4;
  color: #c1284a;
}

.desktop-sync-pill.is-offline::before,
.desktop-sync-pill.is-error::before {
  background: #f04d75;
  box-shadow: 0 0 0 4px rgba(240, 77, 117, 0.16);
}

.desktop-sync-button[disabled] {
  opacity: 0.65;
  cursor: wait;
}

.desktop-sync-button.ghost {
  background: rgba(17, 43, 81, 0.06);
  color: #27406b;
}

.sync-status-modal {
  width: min(880px, calc(100vw - 36px));
}

.pos-shortcut-modal {
  width: min(1000px, calc(100vw - 48px));
  max-height: calc(100vh - 56px);
  overflow: auto;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 64px rgba(13, 33, 76, 0.26);
}

.pos-shortcut-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid #e2eaf6;
}

.pos-shortcut-head h2 {
  margin: 0;
  font-size: 22px;
  color: #1f2f4f;
}

.pos-shortcut-close {
  border: 1px solid #d3dded;
  border-radius: 10px;
  background: #f6f9ff;
  color: #5b6f92;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}

.pos-shortcut-close span {
  color: #8393b0;
  margin-left: 4px;
}

.pos-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.pos-shortcut-card {
  padding: 18px 18px 22px;
  border-right: 1px dashed #d7e2f1;
  border-bottom: 1px dashed #d7e2f1;
}

.pos-shortcut-card:nth-child(2n) {
  border-right: 0;
}

.pos-shortcut-card:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.pos-shortcut-card h3 {
  margin: 0 0 16px;
  font-size: 18px;
  color: #334765;
}

.pos-shortcut-list {
  display: grid;
  gap: 12px;
}

.pos-shortcut-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #4d6282;
  font-weight: 600;
}

.pos-shortcut-list kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 28px;
  padding: 0 10px;
  margin-left: 6px;
  border: 1px solid #aab7cc;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #eff4fb);
  box-shadow: inset 0 -1px 0 rgba(49, 76, 123, 0.12);
  color: #445875;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
}

.sync-status-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.sync-status-block {
  border: 1px solid #dbe6f4;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 16px 18px;
  margin-bottom: 16px;
}

.sync-status-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.sync-status-block-head h3 {
  margin: 0;
  font-size: 18px;
  color: #1f355a;
}

.sync-status-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.sync-status-metric {
  border: 1px solid #dbe6f4;
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
}

.sync-status-metric .muted {
  display: block;
  margin-bottom: 4px;
}

.sync-conflict-table .table-row {
  grid-template-columns: 1.05fr 0.95fr 1.6fr 1fr;
}

.utility-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.utility-table + .utility-table {
  margin-top: 16px;
}

.utility-preview-card {
  border: 1px solid #d9e4f2;
  border-radius: 16px;
  background: #fff;
  padding: 12px 14px;
}

.utility-preview-card .muted {
  display: block;
  margin-bottom: 4px;
}

.utility-preview-card strong {
  color: #1e365c;
  font-size: 22px;
}

.utility-preview-card.highlight {
  background: linear-gradient(180deg, #fff7ec 0%, #ffffff 100%);
  border-color: #ffd7a4;
}

.crumbs { color: var(--muted); font-size: 13px; margin-bottom: 4px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 36px; font-weight: 800; }

.top-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.pill, .icon-btn, .small-action, .wide-btn, .select-btn, .ghost-btn, .tool-chip, .toggle {
  border: 0;
  cursor: pointer;
}

.pill {
  border-radius: 999px;
  padding: 14px 20px;
  color: #fff;
  font-weight: 700;
}

.pill.primary { background: var(--blue); }
.pill.danger, .small-action.danger { background: var(--red); }
.pill.secondary { background: #233a61; }

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ddeafd;
  color: var(--blue);
  font-size: 22px;
}
.icon-btn.small {
  width: 40px;
  height: 40px;
  font-size: 18px;
}
.icon-btn.tiny {
  width: 34px;
  height: 34px;
  font-size: 14px;
  background: #f1f6fd;
}

.view { display: none; }
.view.active { display: block; }

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 0.9fr;
  gap: 14px;
}

.stat-card, .promo-card, .panel, .stack-card, .mini-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(111, 136, 175, 0.09);
}

.stat-card, .promo-card {
  padding: 24px;
  min-height: 178px;
}

.stat-label { color: var(--muted); margin-bottom: 10px; }
.stat-value { font-size: 42px; font-weight: 800; margin-bottom: 12px; }
.muted { color: var(--muted); line-height: 1.6; }
.promo-title { font-size: 24px; font-weight: 800; margin-bottom: 14px; }

.wide-btn {
  margin-top: 20px;
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  background: #dcecff;
  color: var(--blue);
  font-weight: 700;
}

.wide-btn.accent {
  background: var(--red);
  color: #fff;
}

.content-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 14px;
}

.panel { padding: 20px; }
.tall { min-height: 450px; }

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.cashbank-screen {
  display: none;
}
.cashbank-screen.active {
  display: block;
}
.bank-accounts-workspace,
.bank-account-form-panel {
  min-height: calc(100vh - 170px);
}
.bank-accounts-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.bank-accounts-more {
  color: #6d7e99;
}
.bank-accounts-empty {
  min-height: calc(100vh - 260px);
  border-top: 1px solid #e6edf7;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 26px;
  padding: 36px 20px 48px;
}
.bank-hero {
  text-align: center;
  display: grid;
  gap: 8px;
  justify-items: center;
}
.bank-hero-title {
  font-size: 32px;
  font-weight: 800;
  color: #223352;
}
.bank-hero-art {
  position: relative;
  width: 180px;
  height: 170px;
  margin-top: 18px;
}
.bank-hero-roof {
  width: 128px;
  height: 28px;
  background: linear-gradient(180deg, #f7fbff, #dce8f9);
  border: 4px solid #d4dde9;
  border-bottom: 0;
  transform: skew(-18deg);
  position: absolute;
  left: 26px;
  top: 0;
}
.bank-hero-pillars {
  position: absolute;
  left: 34px;
  top: 34px;
  width: 112px;
  display: flex;
  justify-content: space-between;
}
.bank-hero-pillars span {
  width: 22px;
  height: 88px;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #d9e4f2);
  border: 3px solid #d4dde9;
}
.bank-hero-base {
  position: absolute;
  left: 24px;
  top: 122px;
  width: 132px;
  height: 18px;
  border-radius: 8px;
  background: #d4dde9;
}
.bank-feature-grid {
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.bank-feature-card,
.bank-account-card {
  border: 1px solid #e3ecf8;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 30px rgba(34, 54, 91, 0.06);
}
.bank-feature-card {
  padding: 18px;
  display: grid;
  gap: 8px;
  text-align: left;
}
.bank-feature-card strong {
  color: #243758;
}
.bank-feature-card p {
  margin: 0;
  color: #6d7e99;
  font-size: 14px;
  line-height: 1.5;
}
.bank-accounts-list {
  border-top: 1px solid #e6edf7;
  padding-top: 18px;
}
.bank-accounts-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.bank-accounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.bank-account-card {
  padding: 18px;
  display: grid;
  gap: 10px;
}
.bank-account-card-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: #213351;
}
.bank-account-meta {
  color: #6c7d98;
  font-size: 14px;
}
.bank-account-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bank-tag {
  padding: 7px 10px;
  border-radius: 999px;
  background: #eef5fd;
  color: #466a9e;
  font-size: 12px;
  font-weight: 700;
}
.bank-account-form-header {
  padding-bottom: 14px;
  border-bottom: 1px solid #e6edf7;
  margin-bottom: 18px;
}
.bank-account-form {
  display: grid;
  gap: 20px;
}
.bank-account-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.bank-account-options {
  display: grid;
  gap: 12px;
}
.bank-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #495f80;
}
.bank-online-card {
  border: 1px solid #e6edf7;
  border-radius: 16px;
  background: #f8fbff;
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}
.bank-account-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: auto;
}
.cash-in-hand-workspace {
  min-height: calc(100vh - 170px);
  padding: 0;
  overflow: hidden;
}
.cash-in-hand-topbar {
  padding: 20px 22px;
  border-bottom: 1px solid #e6edf7;
}
.cash-in-hand-topbar h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #1f3354;
}
#cashInHandValue {
  color: #22b573;
  font-size: 22px;
  font-weight: 900;
}
.cash-in-hand-empty {
  min-height: calc(100vh - 270px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 22px;
  padding: 40px 20px 60px;
}
.cash-in-hand-art {
  position: relative;
  width: 220px;
  height: 170px;
}
.cash-bubble {
  position: absolute;
  left: 30px;
  top: 16px;
  width: 160px;
  height: 118px;
  border-radius: 56% 44% 54% 46% / 52% 48% 52% 48%;
  background: #dfeeff;
}
.cash-hand {
  position: absolute;
  left: 82px;
  top: 92px;
  width: 56px;
  height: 54px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ddb08d 0%, #ca8e6b 100%);
  box-shadow: 34px 0 0 0 #ddb08d;
}
.cash-hand::before,
.cash-hand::after {
  content: "";
  position: absolute;
  background: #7b5c46;
  border-radius: 3px;
}
.cash-hand::before {
  left: 6px;
  bottom: -10px;
  width: 44px;
  height: 12px;
}
.cash-hand::after {
  right: -28px;
  bottom: -10px;
  width: 44px;
  height: 12px;
}
.cash-notes {
  position: absolute;
  left: 74px;
  top: 36px;
  display: flex;
  gap: 8px;
}
.cash-notes span {
  width: 38px;
  height: 72px;
  border-radius: 8px;
  background: linear-gradient(180deg, #77d8a0 0%, #2fb26c 100%);
  border: 3px solid #2f9b61;
  transform-origin: bottom center;
  box-shadow: 0 12px 18px rgba(35, 128, 78, 0.16);
}
.cash-notes span:nth-child(1) {
  transform: rotate(-18deg);
}
.cash-notes span:nth-child(2) {
  transform: translateY(-10px);
}
.cash-notes span:nth-child(3) {
  transform: rotate(18deg);
}
.cash-in-hand-copy {
  max-width: 460px;
  text-align: center;
  line-height: 1.6;
}
.cash-adjust-modal {
  width: min(420px, 100%);
  min-height: auto;
  border-radius: 20px;
}
.cash-adjust-header {
  padding: 20px 22px 14px;
  border-bottom: 1px solid #e8eef7;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cash-adjust-header h2 {
  margin: 0;
  color: #223352;
}
.cash-adjust-form {
  display: grid;
  gap: 16px;
  padding: 18px 22px 22px;
}
.cash-adjust-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  color: #5e7496;
  font-weight: 700;
}
.cash-adjust-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cash-adjust-updated {
  color: #6a7d99;
  font-weight: 700;
}
.cash-adjust-updated strong {
  margin-left: 6px;
  color: #1f3354;
}
.cash-adjust-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
}
.loan-accounts-workspace {
  min-height: calc(100vh - 170px);
  padding: 0;
  overflow: hidden;
}
.loan-accounts-empty {
  min-height: calc(100vh - 250px);
  border-top: 1px solid #e6edf7;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 26px;
  padding: 38px 20px 54px;
}
.loan-hero-art {
  margin-top: 22px;
}
.loan-coin {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe08a 0%, #f8c532 60%, #dda314 100%);
  box-shadow: 0 12px 24px rgba(225, 171, 28, 0.25);
}
.loan-coin-a {
  left: 12px;
  top: 18px;
}
.loan-coin-b {
  right: 4px;
  top: 44px;
}
.loan-coin-c {
  left: -2px;
  top: 122px;
}
.loan-accounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.loan-account-card {
  padding: 18px;
}
.loan-account-modal {
  width: min(760px, 100%);
  min-height: auto;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #dbe5f3;
  box-shadow: 0 30px 80px rgba(20, 37, 67, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.loan-account-form {
  display: grid;
  gap: 20px;
  padding: 18px 22px 22px;
}
.loan-account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.loan-inline-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.loan-inline-field span {
  color: #6d7e99;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.tag, .filter-chip {
  background: #eaf2ff;
  color: #436a9e;
  padding: 10px 14px;
  border-radius: 999px;
}

.graph-placeholder {
  height: 360px;
  border-radius: 22px;
  border: 1px dashed #d3dded;
  background:
    linear-gradient(180deg, rgba(18, 115, 234, 0.08), rgba(18, 115, 234, 0.01)),
    repeating-linear-gradient(to bottom, transparent 0, transparent 68px, rgba(156, 181, 214, 0.38) 69px, transparent 70px);
  position: relative;
  overflow: hidden;
}
.summary-block {
  position: absolute;
  inset: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.summary-block > div {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  padding: 20px;
  border: 1px solid #d8e2f0;
}
.summary-block strong {
  display: block;
  margin-top: 8px;
  font-size: 34px;
}

.graph-line {
  position: absolute;
  left: 40px;
  right: 60px;
  bottom: 90px;
  height: 3px;
  background: linear-gradient(90deg, #83a6e5, #1273ea);
  transform: skewX(-20deg);
}

.graph-line.short { bottom: 160px; right: 180px; }
.graph-line.mid { bottom: 230px; right: 120px; }
.graph-line.long { bottom: 300px; right: 240px; }

.side-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stack-card { padding: 18px; min-height: 218px; }

.report-list, .report-cards, .quick-links, .settings-grid {
  display: grid;
  gap: 12px;
}
.report-list.single { grid-template-columns: 1fr; }

.report-list, .report-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.report-chip, .report-card, .setting-item {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: #fbfdff;
  font-weight: 700;
}
.reports-shell {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - 130px);
}
.reports-sidebar,
.reports-workspace {
  border-radius: 0;
}
.reports-sidebar {
  padding: 0;
  border-right: 1px solid #dce6f4;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.reports-catalog {
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}
.reports-group {
  border-bottom: 1px solid #edf2fa;
}
.reports-group-title {
  padding: 14px 16px;
  background: #eef9f7;
  color: #5c6b83;
  font-size: 14px;
}
.reports-link {
  width: 100%;
  border: 0;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 13px 16px 13px 18px;
  color: #253556;
  cursor: pointer;
  font-weight: 600;
  border-left: 3px solid transparent;
}
.reports-link-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eff4ff;
  color: #42699c;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  flex: 0 0 28px;
}
.reports-link-text {
  min-width: 0;
}
.reports-link:hover {
  background: #f6f9ff;
}
.reports-link.active {
  background: #eef0f7;
  color: #243758;
  border-left-color: #ff3153;
}
.reports-link.active .reports-link-icon {
  background: #ffebef;
  color: #d7234a;
}
.reports-workspace {
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 14px;
}
.reports-toolbar,
.reports-summary-grid,
.reports-table-head,
.reports-table-row,
.reports-footer-bar {
  display: grid;
  gap: 12px;
}
.reports-toolbar {
  grid-template-columns: minmax(240px, 420px) 160px 160px auto;
  align-items: end;
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(245,249,255,0.98) 0%, rgba(255,255,255,0.98) 100%);
  padding: 10px 0 12px;
  border-bottom: 1px solid #edf2fa;
}
.reports-toolbar-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}
.reports-filter-field {
  display: grid;
  gap: 6px;
}
.reports-filter-field span {
  color: #557093;
  font-size: 12px;
  font-weight: 800;
}
.reports-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.reports-print-header {
  display: none;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 0 0 10px;
  border-bottom: 1px solid #dfe7f3;
}
.reports-print-header h2 {
  margin: 0 0 6px;
  font-size: 24px;
  color: #203250;
}
.reports-print-header p {
  margin: 0;
  color: #607390;
  font-size: 13px;
}
.reports-print-company {
  color: #1d3456;
  font-size: 20px;
  font-weight: 900;
}
.report-metric-card {
  border: 1px solid #dfe8f6;
  border-radius: 18px;
  background: linear-gradient(180deg, #fefefe 0%, #f6fbff 100%);
  padding: 16px 18px;
  display: grid;
  gap: 8px;
  box-shadow: 0 12px 24px rgba(33, 53, 92, 0.05);
}
.report-metric-card span {
  color: #6b7d98;
  font-size: 12px;
  font-weight: 700;
}
.report-metric-card strong {
  color: #1f3454;
  font-size: 22px;
}
.reports-table-shell {
  border: 1px solid #e2eaf6;
  border-radius: 18px;
  overflow: hidden;
  min-height: 540px;
  background: #fff;
}
.reports-selected-title {
  padding: 16px 18px 10px;
  color: #263858;
  font-size: 24px;
  font-weight: 800;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.reports-table-head,
.reports-table-row {
  padding: 0 12px;
}
.reports-table-head {
  min-height: 48px;
  align-items: center;
  border-top: 1px solid #eef3fb;
  border-bottom: 1px solid #eef3fb;
  background: #fafcff;
  color: #6a7c98;
  font-size: 12px;
  font-weight: 800;
}
.reports-table-row {
  min-height: 52px;
  align-items: center;
  border-bottom: 1px solid #f1f5fb;
  color: #243656;
}
.reports-table-row:nth-child(even) {
  background: #fcfdff;
}
.reports-table-body.hidden {
  display: none;
}
.reports-empty {
  min-height: 320px;
  display: grid;
  place-items: center;
  color: #6f809b;
  font-weight: 600;
}
.reports-footer-bar {
  grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
  align-items: center;
}
.reports-footer-chip,
.reports-footer-note {
  border-radius: 999px;
  padding: 10px 14px;
  background: #f2f7ff;
  color: #4c6b9b;
  font-size: 13px;
  font-weight: 700;
}
.reports-footer-note {
  background: #fff7df;
  color: #906b00;
}
.reports-tax-modal {
  width: min(760px, calc(100vw - 48px));
}
.reports-tax-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.reports-tax-note {
  grid-column: 1 / -1;
}

@media print {
  body {
    background: #fff;
  }
  .sidebar,
  .topbar,
  .page-message,
  .reports-sidebar,
  .reports-toolbar-actions,
  .page-breadcrumb {
    display: none !important;
  }
  .app-shell,
  .main-area,
  .view.active,
  .reports-shell {
    display: block !important;
    min-height: auto;
    background: #fff;
  }
  .reports-workspace {
    padding: 0;
    gap: 10px;
  }
  .reports-toolbar {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0 0 10px;
    background: #fff;
    border-bottom: 1px solid #dfe7f3;
  }
  .reports-print-header {
    display: flex;
  }
  .reports-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .report-metric-card,
  .reports-table-shell {
    box-shadow: none;
    break-inside: avoid;
  }
  .reports-table-shell {
    border-color: #dbe3ef;
    min-height: auto;
  }
  .reports-table-row,
  .reports-table-head {
    break-inside: avoid;
  }
  .reports-footer-bar {
    margin-top: 12px;
  }
}

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

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

.quick-links button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  text-align: left;
  color: var(--ink);
  font-weight: 700;
}

.split-layout, .growth-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 14px;
}

.left-list { min-height: 720px; }
.stack-form {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.search-input, .form-grid input, .inline-fields input, .inline-fields select {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  padding: 14px 16px;
  border-radius: 16px;
  outline: none;
}

.list-table, .table-grid {
  display: grid;
  gap: 8px;
}

.list-row, .table-row {
  display: grid;
  gap: 12px;
  align-items: center;
  border-radius: 16px;
  padding: 14px 12px;
}

.list-row {
  grid-template-columns: 1fr auto;
  border: 1px solid var(--line);
}

.list-row.active { background: #dff0ff; }

.table-head {
  color: var(--muted);
  font-weight: 700;
  background: #f8fbff;
}

.table-row:not(.table-head) {
  border: 1px solid var(--line);
  background: #fff;
}

.toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tool-chip, .small-action, .toggle, .select-btn, .ghost-btn {
  padding: 12px 16px;
  border-radius: 14px;
  background: #eaf2ff;
  color: var(--blue);
  font-weight: 700;
}

.small-action {
  background: var(--blue);
  color: #fff;
}

.form-panel { min-height: 720px; }
.slim { padding: 0; overflow: hidden; }
.items-shell {
  display: grid;
  gap: 10px;
}
.items-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 2px solid #cad8ea;
  background: #fff;
}
.items-tab {
  border: 0;
  background: transparent;
  padding: 18px 10px 16px;
  font-weight: 800;
  color: #94a4bc;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}
.items-tab.active {
  color: #2d365f;
  border-bottom-color: #22a2ff;
}
.items-pane { display: none; }
.items-pane.active { display: block; }
.items-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 10px;
}
.barcode-layout {
  grid-template-columns: 360px 1fr;
}
.barcode-stats {
  display: grid;
  gap: 10px;
  padding: 0 12px 16px;
}
.barcode-stat-card {
  border: 1px solid #d8e4f3;
  border-radius: 16px;
  background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
  padding: 14px 16px;
  display: grid;
  gap: 4px;
}
.barcode-stat-card span {
  color: #7a8ba8;
  font-size: 13px;
}
.barcode-stat-card strong {
  color: #1d2c52;
  font-size: 28px;
}
.barcode-table .table-row {
  grid-template-columns: 1.25fr 1.05fr .95fr .75fr .95fr auto;
}
.barcode-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.barcode-code {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 13px;
  letter-spacing: .04em;
}
.barcode-empty {
  padding: 40px 20px;
  text-align: center;
  color: #7b8aa6;
}
.barcode-label-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.barcode-label-card {
  border: 1px solid #d8e4f3;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  padding: 14px;
  box-shadow: 0 10px 30px rgba(31, 61, 112, 0.08);
  display: grid;
  gap: 8px;
}
.barcode-label-name {
  font-weight: 800;
  color: #203150;
}
.barcode-label-meta {
  color: #7182a0;
  font-size: 12px;
}
.barcode-label-visual {
  border: 1px dashed #d5e1f1;
  border-radius: 14px;
  background: #fff;
  min-height: 90px;
  display: grid;
  place-items: center;
  padding: 10px;
}
.barcode-label-visual svg {
  width: 100%;
  height: 72px;
}
.barcode-label-code {
  text-align: center;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 12px;
  letter-spacing: .08em;
  color: #23345f;
}
.barcode-label-type {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #edf4ff;
  color: #3c5d92;
  font-size: 11px;
  font-weight: 700;
  width: fit-content;
}
.items-sidebar {
  border-right: 2px solid #cfe0f0;
}
.items-sidebar-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 10px 14px;
}
.items-sidebar-toolbar {
  justify-content: space-between;
}
.items-search-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.items-search-input {
  width: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font-weight: 600;
  color: #334866;
}
.round-search {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: #efefef;
  font-size: 20px;
}
.add-split {
  position: relative;
  display: inline-flex;
  margin-left: auto;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(179, 114, 10, 0.2);
}
.add-main,
.add-drop {
  border: 0;
  background: linear-gradient(180deg, #ffb343, #eb9518);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.add-main {
  padding: 14px 20px;
  border-radius: 14px 0 0 14px;
}
.add-main.solo {
  border-radius: 14px;
}
.add-drop {
  width: 36px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0 14px 14px 0;
}
.bulk-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 200px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #dde6f2;
  box-shadow: 0 18px 40px rgba(22, 38, 66, 0.18);
  overflow: hidden;
  z-index: 5;
}
.hidden { display: none !important; }
.bulk-menu-item {
  width: 100%;
  border: 0;
  background: #fff;
  text-align: left;
  padding: 14px 16px;
  cursor: pointer;
}
.bulk-menu-item:hover {
  background: #f4f8ff;
}
.compact .table-row {
  grid-template-columns: 1.5fr 0.7fr 24px;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}
.compact .table-head {
  background: #fff;
  border-top: 1px solid var(--line);
}
.items-content {
  display: grid;
  gap: 10px;
}
.item-detail-card {
  min-height: 140px;
}
.item-detail-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.item-detail-main {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.item-detail-image-shell {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, #eef5ff, #dae8fb);
  border: 1px solid #d5e2f4;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.item-detail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.item-detail-image-placeholder {
  color: #86a0bf;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.item-detail-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.item-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.item-detail-tag {
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef5ff;
  color: #5d7593;
  font-size: 12px;
  font-weight: 800;
}
.item-metrics {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  color: #516786;
}
.item-metrics small {
  color: #86a0bf;
}
.item-detail-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.item-detail-fact {
  border: 1px solid #dce6f2;
  border-radius: 16px;
  background: #f9fbff;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}
.item-detail-fact span {
  color: #8aa0bb;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.item-detail-fact strong {
  color: #213556;
  font-size: 14px;
}
.item-detail-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.item-detail-flag {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eff8f1;
  color: #167245;
  font-size: 12px;
  font-weight: 800;
}
.item-stock-summary {
  display: grid;
  justify-items: end;
  gap: 12px;
  color: #516786;
}
.item-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.item-stock-summary .small-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.danger-outline {
  background: #fff3f5;
  color: #d73052;
  border: 1px solid #ffd6de;
}
.item-detail-actions .ghost-btn:disabled,
.item-detail-actions .save-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.item-composer {
  min-height: 520px;
}
.item-composer-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.7fr;
  gap: 18px;
  margin-bottom: 24px;
}
.item-image-picker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -2px 0 22px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid #dbe6f5;
  background: #f9fbff;
}
.item-image-preview {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid #dbe6f5;
  background: #fff;
}
.item-image-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.item-image-meta strong {
  color: #243657;
}
.item-image-meta span {
  color: #6e84a3;
  font-size: 13px;
  word-break: break-word;
}
.item-inner-tabs {
  display: flex;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.inner-tab {
  border: 0;
  background: transparent;
  padding: 10px 14px 12px;
  font-weight: 800;
  color: #9aa9c0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
.inner-tab.active {
  color: #ff3153;
  border-bottom-color: #ff3153;
}
.inner-panel { display: none; }
.inner-panel.active { display: block; }
.composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 18px;
}
.transactions-search {
  max-width: 240px;
}
.item-transactions-table .table-row,
.items-products-table .table-row {
  grid-template-columns: 1.4fr 0.7fr 28px;
}
.items-products-table .table-row.item-row {
  grid-template-columns: 1.4fr 0.7fr 120px;
  align-items: center;
}
.item-row-actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: 6px;
}
.item-row-action {
  border: 1px solid #d9e5f5;
  border-radius: 10px;
  padding: 6px 10px;
  background: #fff;
  color: #3f5d84;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.item-row-action.ghost {
  background: #f6f9ff;
  color: #5072a1;
}
.item-row-action.danger {
  color: #d73052;
  border-color: #ffd2da;
  background: #fff4f6;
}
.service-empty-state {
  grid-column: 1 / -1;
}
.bulk-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.service-list-table .table-row,
#serviceListTable .table-row {
  grid-template-columns: 1.4fr 0.8fr 120px;
}
.item-transactions-table .table-row.table-head {
  grid-template-columns: 1.1fr 1fr 1.2fr 0.9fr 0.8fr 1fr 0.8fr;
}
.item-transactions-table .table-row:not(.table-head) {
  grid-template-columns: 1.1fr 1fr 1.2fr 0.9fr 0.8fr 1fr 0.8fr;
}
.item-adjust-modal {
  width: min(740px, calc(100vw - 48px));
  max-width: 740px;
}
.item-adjust-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 12px;
  border-bottom: 1px solid #e7eef8;
  background: #fff;
  align-items: flex-start;
}
.item-adjust-title-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.item-adjust-toggle {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #58718f;
  font-size: 14px;
  font-weight: 700;
}
.item-adjust-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.item-adjust-form {
  gap: 18px;
  padding: 16px 22px 22px;
  background: #fff;
}
.item-adjust-topline {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
}
.item-adjust-name-block {
  display: grid;
  gap: 8px;
}
.item-adjust-name-block strong {
  font-size: 18px;
  color: #1f3354;
}
.item-adjust-date {
  min-width: 200px;
  max-width: 200px;
}
.item-adjust-grid {
  display: grid;
  grid-template-columns: 160px 160px minmax(0, 1fr);
  gap: 18px;
  align-items: end;
}
.item-adjust-grid-extended {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.item-adjust-details {
  min-width: 0;
}
.item-adjust-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}
.item-adjust-actions .small-action {
  min-width: 92px;
}
.item-adjust-header h2 {
  margin: 0;
  font-size: 18px;
  color: #213556;
}
.empty-state-panel {
  min-height: 620px;
  display: grid;
  place-items: center;
  text-align: center;
}
.empty-art {
  font-size: 54px;
}
.smaller {
  width: min(700px, 100%);
  min-height: 520px;
}
.bulk-modal-body {
  padding: 12px 16px;
  display: grid;
  gap: 12px;
}
.between {
  justify-content: space-between;
}
.bulk-hint {
  color: #1273ea;
  background: #eaf4ff;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 700;
}
.tiny-modal {
  width: min(360px, 100%);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(20, 37, 67, 0.22);
}
.tiny-modal.wide {
  width: min(520px, 100%);
}
.tiny-form {
  display: grid;
  gap: 14px;
  padding: 18px;
}
.conversion-form {
  display: grid;
  grid-template-columns: 1fr 0.5fr 1fr;
  gap: 16px;
  padding: 18px;
}
.conversion-form .toolbar {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.ghost-btn {
  background: #fff3f4;
  color: var(--red);
}

.toggle.active {
  background: var(--blue);
  color: #fff;
}

.sub-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.mini-panel { padding: 20px; }
.mini-panel h3 { margin-bottom: 14px; }
.inline-fields { display: grid; gap: 12px; }
.item-inventory-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
  color: #506784;
  font-weight: 700;
}
.item-inventory-flags label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.filter-row, .summary-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.summary-card {
  min-width: 220px;
  border-radius: 18px;
  padding: 18px;
  border: 1px solid var(--line);
}

.summary-card strong {
  display: block;
  margin-top: 8px;
  font-size: 32px;
}
.sale-screen#sale-screen-estimate-quotation .sale-header-panel,
.sale-screen#sale-screen-payment-in .sale-workspace,
.cashbank-screen#cashbank-screen-cheques .purchase-workspace {
  position: relative;
  overflow: hidden;
}
.sale-screen#sale-screen-estimate-quotation .sale-header-panel::before,
.sale-screen#sale-screen-payment-in .sale-workspace::before,
.cashbank-screen#cashbank-screen-cheques .purchase-workspace::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, #8fd0ff 0%, #dcecff 55%, transparent 100%);
  pointer-events: none;
}
.summary-inline {
  color: #677a99;
  margin-top: 12px;
}
.sale-header-panel,
.sales-summary-panel {
  margin-bottom: 10px;
}
.sale-title-row,
.sale-filter-row,
.sale-actions,
.sale-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sale-title-row {
  justify-content: space-between;
}
.sale-screen#sale-screen-estimate-quotation .sale-filter-row,
.sale-screen#sale-screen-payment-in .sale-filter-row {
  border: 1px solid #dde9f7;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5fd 100%);
  padding: 14px 16px;
}
.sale-screen#sale-screen-estimate-quotation .filter-chip,
.sale-screen#sale-screen-payment-in .filter-chip {
  min-height: 40px;
  background: #fff;
  border: 1px solid #d6e4f4;
  box-shadow: 0 4px 14px rgba(52, 92, 146, 0.06);
}
.sale-screen#sale-screen-estimate-quotation .filter-chip.with-caret:hover,
.sale-screen#sale-screen-payment-in .filter-chip.with-caret:hover {
  border-color: #bcd3ee;
  transform: translateY(-1px);
}
.sale-page-picker {
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.sale-picker-menu,
.sale-dropdown {
  position: absolute;
  margin-top: 10px;
  min-width: 180px;
  background: #fff;
  border: 1px solid #dce5f1;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(22, 38, 66, 0.16);
  overflow: hidden;
  z-index: 8;
}
.sale-picker-menu {
  top: 100%;
  left: 0;
}
.sale-dropdown {
  top: calc(100% + 8px);
  left: 0;
}
.sale-picker-item,
.sale-dropdown-item {
  width: 100%;
  border: 0;
  background: #fff;
  text-align: left;
  padding: 12px 14px;
  cursor: pointer;
}
.sale-picker-item.active,
.sale-dropdown-item.active,
.sale-picker-item:hover,
.sale-dropdown-item:hover {
  background: #edf5ff;
}
.filter-label {
  color: #4d6388;
  font-weight: 700;
}
.with-caret {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.sale-screen {
  display: none;
}
.sale-screen.active {
  display: block;
}
.purchase-screen {
  display: none;
}
.purchase-screen.active {
  display: block;
}
.purchase-shell {
  display: grid;
}
.purchase-workspace {
  display: grid;
  gap: 10px;
}
.purchase-workspace-top {
  align-items: center;
}
.purchase-upload-split {
  display: inline-flex;
  align-items: stretch;
  border-radius: 999px;
  overflow: hidden;
}
.purchase-upload-split .pill {
  border-radius: 0;
}
.purchase-upload-split .pill.outline-danger {
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}
.purchase-upload-drop {
  border: 1px solid #f43e56;
  border-left: 0;
  background: #fff;
  color: #f43e56;
  padding: 0 16px;
  font-weight: 800;
  cursor: pointer;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}
.purchase-filter-strip,
.purchase-summary-band,
.purchase-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.purchase-filter-strip {
  background: #eef5fd;
  border: 1px solid #dce8f7;
  border-radius: 18px;
  padding: 20px;
}
.purchase-period-label {
  font-size: 22px;
  font-weight: 800;
  color: #23324f;
}
.filter-chip.muted {
  background: #c7bbb0;
  color: #fff;
}
.purchase-tools {
  margin-left: auto;
}
.icon-tool {
  border: 0;
  background: transparent;
  color: #263654;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 64px;
  font-size: 12px;
}
.outline-danger {
  background: #fff;
  color: #f43e56;
  border: 1px solid #f43e56;
}
.purchase-summary-band {
  padding: 10px 18px;
  background: #eef5fd;
  border: 1px solid #dce8f7;
  border-radius: 18px;
}
.purchase-summary-card {
  min-width: 150px;
  border-radius: 14px;
  padding: 16px 14px;
}
.purchase-summary-card strong {
  display: block;
  margin-top: 6px;
}
.purchase-summary-card.paid { background: #bdf1e1; }
.purchase-summary-card.unpaid { background: #cfe3ff; }
.purchase-summary-card.total { background: #ffd28b; }
.purchase-summary-op {
  font-size: 30px;
  font-weight: 800;
  color: #47556d;
}
.purchase-transactions-box {
  border: 1px solid #dce8f7;
  border-radius: 18px;
  padding: 16px 14px 20px;
  background: #fff;
}
.purchase-transactions-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cashbank-screen#cashbank-screen-cheques .purchase-transactions-toolbar {
  border: 1px solid #dde9f7;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5fd 100%);
  padding: 14px 16px;
}
.purchase-transactions-title {
  font-size: 28px;
  font-weight: 800;
}
.purchase-transaction-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.purchase-table-grid {
  align-content: start;
  gap: 0;
}
.purchase-table-head,
.purchase-table-row {
  grid-template-columns: 1fr 0.95fr 1.5fr 1fr 0.95fr 0.95fr 72px 72px;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}
.purchase-table-row span:nth-child(5),
.purchase-table-row span:nth-child(6) {
  text-align: right;
  font-weight: 800;
}
.purchase-table-row span:nth-child(7),
.purchase-table-row span:nth-child(8),
.purchase-table-head span:nth-child(7),
.purchase-table-head span:nth-child(8) {
  text-align: center;
}
.purchase-row-icon-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #63738a;
  font-size: 18px;
}
.purchase-lite-screen {
  min-height: 640px;
}
.single-card {
  justify-content: flex-start;
}
.purchase-empty-state {
  min-height: 360px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 12px;
  padding: 32px 24px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at top, rgba(231, 242, 255, 0.95) 0%, rgba(255, 255, 255, 1) 40%);
}
.purchase-empty-state::before,
.estimate-empty-panel::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(173, 214, 255, 0.22) 0%, rgba(173, 214, 255, 0) 68%);
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.purchase-print-modal {
  width: min(380px, 100%);
}
.purchase-table-empty {
  padding: 34px 10px;
  color: #7f8da3;
}
.purchase-preview-total {
  margin-top: 26px;
  text-align: right;
  font-size: 18px;
  font-weight: 800;
}
.purchase-picker-item.active {
  background: #edf5ff;
}
.purchase-editor {
  background: #fff;
  border: 1px solid #dce8f7;
  border-radius: 20px;
  padding: 22px 20px 18px;
  display: grid;
  gap: 18px;
  min-height: 720px;
}
.purchase-editor.hidden {
  display: none;
}
.purchase-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}
.purchase-editor-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.purchase-editor-title-wrap h2 {
  margin: 2px 0 0;
  font-size: 24px;
}
.purchase-editor-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 12px;
  min-width: min(100%, 520px);
}
.purchase-meta-field,
.purchase-party-field,
.purchase-side-field {
  display: grid;
  gap: 7px;
}
.purchase-meta-field span,
.purchase-party-field span,
.purchase-side-field span {
  font-size: 13px;
  color: #7483a1;
  font-weight: 700;
}
.purchase-meta-field input,
.purchase-meta-field select,
.purchase-party-field input,
.purchase-party-field select,
.purchase-side-field select,
.purchase-roundoff-row input,
.purchase-description-box textarea {
  border: 1px solid #d6e1ef;
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  background: #fff;
}
.purchase-editor-party-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 160px;
  gap: 18px;
  align-items: end;
}
.purchase-party-primary select {
  border-color: #2c7dff;
  box-shadow: 0 0 0 2px rgba(44, 125, 255, 0.08);
}
.purchase-entry-card {
  border: 1px solid #dce8f7;
  border-radius: 18px;
  overflow: hidden;
}
.purchase-entry-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.purchase-entry-table th,
.purchase-entry-table td {
  border-bottom: 1px solid #e6edf7;
  border-right: 1px solid #edf2f8;
  padding: 0;
  vertical-align: top;
}
.purchase-entry-table th:last-child,
.purchase-entry-table td:last-child {
  border-right: 0;
}
.purchase-entry-table th {
  font-size: 12px;
  font-weight: 800;
  color: #55657f;
  text-align: left;
  padding: 10px 10px;
  background: #f7faff;
}
.purchase-entry-table tbody td {
  background: #fff;
}
.purchase-entry-cell,
.purchase-entry-select,
.purchase-entry-price {
  width: 100%;
  border: 0;
  padding: 12px 10px;
  font: inherit;
  background: transparent;
}
.purchase-entry-cell:focus,
.purchase-entry-select:focus,
.purchase-entry-price:focus {
  outline: none;
  background: #f8fbff;
}
.purchase-entry-select {
  min-width: 100px;
}
.document-item-cell {
  display: grid;
  gap: 8px;
  padding: 8px 0;
}
.document-item-cell > .purchase-entry-cell {
  padding-top: 8px;
  padding-bottom: 8px;
}
.document-inventory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 10px 2px;
}
.inventory-meta-input {
  border: 1px solid #deebfa;
  border-radius: 10px;
  background: #f9fbff;
  min-height: 40px;
}
.document-inventory-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 10px 2px;
}
.inventory-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  border: 1px solid transparent;
}
.inventory-meta-pill.info {
  background: #eef5ff;
  color: #416485;
  border-color: #d7e7ff;
}
.inventory-meta-pill.ok {
  background: #ebfbf3;
  color: #21714d;
  border-color: #cdeedc;
}
.inventory-meta-pill.warning {
  background: #fff7df;
  color: #906400;
  border-color: #f5e1a0;
}
.inventory-meta-pill.danger {
  background: #fff0f2;
  color: #b4233b;
  border-color: #f2c5cd;
}
.document-inventory-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 10px 4px;
}
.document-inventory-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef5ff;
  color: #496788;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}
.purchase-entry-row-number {
  width: 48px;
  text-align: center;
  color: #6980a4;
  font-weight: 700;
  padding-top: 14px;
}
.purchase-entry-amount {
  min-width: 100px;
  text-align: right;
  padding: 12px 10px;
  font-weight: 800;
  color: #23324f;
}
.purchase-entry-remove {
  width: 100%;
  border: 0;
  background: transparent;
  color: #ef4760;
  font-size: 20px;
  cursor: pointer;
  padding: 10px 0;
}
.purchase-entry-price-wrap {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-width: 190px;
}
.purchase-entry-tax-wrap {
  display: grid;
  grid-template-columns: 1fr 80px;
  min-width: 170px;
}
.purchase-entry-cell.compact {
  text-align: right;
}
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.quantity-input[type="number"] {
  -moz-appearance: textfield;
}
@media (max-width: 1180px) {
  .document-inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .status-menubar {
    flex-direction: column;
    align-items: flex-start;
  }
  .pos-shortcut-grid {
    grid-template-columns: 1fr;
  }
  .pos-shortcut-card {
    border-right: 0;
  }
  .pos-shortcut-card:nth-last-child(-n + 2) {
    border-bottom: 1px dashed #d7e2f1;
  }
  .pos-shortcut-card:last-child {
    border-bottom: 0;
  }
  .document-inventory-grid {
    grid-template-columns: 1fr;
  }
}
.add-row-btn {
  border: 1px solid #2c7dff;
  border-radius: 8px;
  background: #fff;
  color: #2c7dff;
  padding: 8px 14px;
  font-weight: 800;
  margin: 10px;
  cursor: pointer;
}
.purchase-entry-footer {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}
.sale-credit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid #dce8f7;
  border-radius: 999px;
  background: #f7fbff;
}
.sale-credit-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #56708f;
}
.sale-invoice-table-grid .table-row {
  grid-template-columns: 110px 120px 1.5fr 1fr 1fr 120px 120px 130px;
}
.sale-status-filter {
  border: 0;
  appearance: none;
  cursor: pointer;
  font: inherit;
}
.sale-invoice-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.inline-table-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  opacity: 0.28;
  transition: opacity 0.18s ease, transform 0.18s ease;
  transform: translateX(6px);
}
.estimate-list-row:hover .inline-table-actions,
.paymentin-list-row:hover .inline-table-actions,
.cheque-list-row:hover .inline-table-actions,
.proforma-list-row:hover .inline-table-actions,
.delivery-list-row:hover .inline-table-actions,
.sale-return-list-row:hover .inline-table-actions,
.estimate-list-row:focus-within .inline-table-actions,
.paymentin-list-row:focus-within .inline-table-actions,
.cheque-list-row:focus-within .inline-table-actions,
.proforma-list-row:focus-within .inline-table-actions,
.delivery-list-row:focus-within .inline-table-actions,
.sale-return-list-row:focus-within .inline-table-actions {
  opacity: 1;
  transform: translateX(0);
}
.item-row-action.iconish {
  min-width: 36px;
  padding-inline: 10px;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.status-badge.success {
  background: #ecfbf1;
  color: #17824d;
  border: 1px solid #ccefd8;
}
.status-badge.warning {
  background: #fff7e7;
  color: #a86706;
  border: 1px solid #ffe3ad;
}
.status-badge.danger {
  background: #fff0f3;
  color: #d23959;
  border: 1px solid #ffd2da;
}
.status-badge.info {
  background: #edf6ff;
  color: #2463b6;
  border: 1px solid #d5e7ff;
}
.status-badge.neutral {
  background: #f3f6fb;
  color: #62728d;
  border: 1px solid #dde5f0;
}
.estimate-list-row .status-badge,
.paymentin-list-row .status-badge,
.cheque-list-row .status-badge,
.proforma-list-row .status-badge,
.delivery-list-row .status-badge,
.sale-return-list-row .status-badge {
  margin-inline: auto;
}
.estimate-list-row,
.paymentin-list-row,
.cheque-list-row,
.proforma-list-row,
.delivery-list-row,
.sale-return-list-row {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}
.table-row.estimate-list-row:not(.table-head),
.table-row.paymentin-list-row:not(.table-head),
.table-row.cheque-list-row:not(.table-head),
.table-row.proforma-list-row:not(.table-head),
.table-row.delivery-list-row:not(.table-head),
.table-row.sale-return-list-row:not(.table-head) {
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.table-row.estimate-list-row:not(.table-head):hover,
.table-row.paymentin-list-row:not(.table-head):hover,
.table-row.cheque-list-row:not(.table-head):hover,
.table-row.proforma-list-row:not(.table-head):hover,
.table-row.delivery-list-row:not(.table-head):hover,
.table-row.sale-return-list-row:not(.table-head):hover {
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  box-shadow: inset 3px 0 0 #99c9ff;
}
.estimate-list-row {
  grid-template-columns: 110px 120px 1.45fr 1.1fr 120px 110px 220px;
}
.proforma-list-row {
  grid-template-columns: 110px 120px 1.45fr 1.1fr 120px 110px 220px;
}
.paymentin-list-row {
  grid-template-columns: 110px 130px 1.45fr 1fr 120px 110px 220px;
}
.cheque-list-row {
  grid-template-columns: 110px 130px 1.35fr 0.9fr 120px 110px 220px;
}
.delivery-list-row {
  grid-template-columns: 110px 130px 1.4fr 1.05fr 120px 110px 220px;
}
.sale-return-list-row {
  grid-template-columns: 52px 110px 120px 1.25fr 1.1fr 120px 120px 130px 120px 220px;
}
.estimate-list-row span:nth-child(5),
.paymentin-list-row span:nth-child(5),
.cheque-list-row span:nth-child(5),
.proforma-list-row span:nth-child(5),
.delivery-list-row span:nth-child(5),
.sale-return-list-row span:nth-child(7),
.sale-return-list-row span:nth-child(8),
.sale-return-list-row span:nth-child(9) {
  text-align: right;
  font-weight: 800;
}
.estimate-list-row span:nth-child(7),
.paymentin-list-row span:nth-child(7),
.cheque-list-row span:nth-child(7),
.proforma-list-row span:nth-child(7),
.delivery-list-row span:nth-child(7),
.sale-return-list-row span:nth-child(10) {
  text-align: center;
}
.sale-invoice-row-cancelled {
  opacity: 0.72;
  background: #fff6f6;
}
.sale-preview-actions {
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.sale-preview-modal-card .save-secondary.danger {
  border-color: #f14a61;
  color: #f14a61;
}
.sale-preview-modal-card button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sale-payment-modal-card {
  width: min(720px, 100%);
  background: #fff;
  border-radius: 18px;
  border: 1px solid #dbe5f3;
  box-shadow: 0 30px 80px rgba(20, 37, 67, 0.24);
  overflow: hidden;
}
.sale-payment-modal-body {
  display: grid;
  gap: 20px;
}
.sale-payment-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.sale-payment-summary div {
  background: #f8fbff;
  border: 1px solid #dde7f4;
  border-radius: 14px;
  padding: 14px 16px;
  display: grid;
  gap: 8px;
}
.sale-payment-summary span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6c7c97;
  font-weight: 700;
}
.sale-payment-summary strong {
  color: #1f3559;
  font-size: 18px;
}
.sale-payment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.sale-payment-field {
  display: grid;
  gap: 8px;
}
.sale-payment-field span {
  font-size: 13px;
  color: #5f7190;
  font-weight: 700;
}
.sale-payment-field-wide {
  grid-column: 1 / -1;
}
.sale-payment-field textarea.modal-input {
  resize: vertical;
  min-height: 110px;
}
.sale-payment-modal-actions {
  justify-content: flex-end;
}
.purchase-entry-side {
  display: grid;
  gap: 12px;
  justify-items: start;
}
.purchase-side-link,
.purchase-side-upload {
  border: 1px solid #d6e1ef;
  background: #fff;
  color: #5d6d86;
  border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer;
  font-weight: 700;
}
.purchase-upload-name {
  font-size: 13px;
  color: #6c7c97;
}
.purchase-totals-panel {
  margin-left: auto;
  width: 100%;
  background: #f8fbff;
  border: 1px solid #dce8f7;
  border-radius: 18px;
  padding: 16px;
  display: grid;
  gap: 12px;
}
.purchase-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.purchase-total-row.grand {
  padding-top: 10px;
  border-top: 1px dashed #cedaeb;
  font-size: 18px;
}
.purchase-roundoff-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  color: #61718b;
  font-weight: 700;
}
.purchase-roundoff-row input[type="checkbox"] {
  margin-right: 8px;
}
.purchase-roundoff-row input[type="number"] {
  width: 92px;
  padding: 9px 10px;
}
.purchase-description-box textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
}
.purchase-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.purchase-return-dashboard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.purchase-return-filter {
  width: min(220px, 100%);
}
.purchase-return-meta {
  grid-template-columns: repeat(5, minmax(140px, 1fr));
}
.purchase-return-table-grid .table-row {
  grid-template-columns: 60px 120px 140px 1.2fr 1fr 1fr 120px 140px 120px;
}
.payment-out-workspace {
  gap: 16px;
}
.payment-out-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid #dbe7f6;
  border-radius: 18px;
  background: #fff;
}
.payment-out-filter-label,
.payment-out-filter-sep {
  color: #6d7e99;
  font-weight: 700;
}
.payment-out-overview-band {
  padding: 10px 0 4px;
  border-top: 1px solid #e2ebf8;
  border-bottom: 1px solid #e2ebf8;
}
.payment-out-stat-card {
  width: min(230px, 100%);
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid #efe6f0;
  background: linear-gradient(180deg, #fffafc 0%, #f7f1f8 100%);
  box-shadow: 0 10px 24px rgba(44, 59, 92, 0.06);
}
.payment-out-stat-head,
.payment-out-stat-subline,
.payment-out-paid-row,
.payment-out-modal-footer,
.payment-out-modal-header,
.payment-out-modal-top,
.payment-out-entry-grid,
.payment-out-side-actions,
.payment-out-share-group,
.payment-out-modal-tools {
  display: flex;
  align-items: center;
}
.payment-out-stat-head,
.payment-out-modal-top {
  justify-content: space-between;
}
.payment-out-stat-head,
.payment-out-stat-subline {
  color: #7383a0;
  font-size: 13px;
}
.payment-out-stat-card strong {
  display: block;
  margin: 10px 0 8px;
  font-size: 30px;
  color: #203252;
}
.payment-out-empty-state {
  min-height: 440px;
  display: grid;
  place-items: center;
  gap: 12px;
  text-align: center;
}
.payment-out-empty-art {
  width: 94px;
  height: 94px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #cde8ff, #92c4ff);
  position: relative;
  box-shadow: inset 0 -12px 20px rgba(255, 255, 255, 0.4);
}
.payment-out-empty-art span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  background: #fff;
  border-radius: 999px;
}
.payment-out-empty-art span:nth-child(1) {
  top: 24px;
  width: 38px;
  height: 10px;
}
.payment-out-empty-art span:nth-child(2) {
  top: 42px;
  width: 46px;
  height: 10px;
}
.payment-out-empty-art span:nth-child(3) {
  top: 60px;
  width: 28px;
  height: 10px;
}
.payment-out-table-grid {
  align-content: start;
  gap: 0;
}
.payment-out-table-grid .table-head,
.payment-out-table-grid .table-row {
  grid-template-columns: 1fr 1fr 1.4fr 1fr 1fr;
}
.payment-out-table-grid .table-row span:last-child,
.payment-out-table-grid .table-row span:nth-child(4),
.payment-out-table-grid .table-row span:nth-child(5) {
  text-align: right;
}
.payment-out-modal {
  width: min(720px, 100%);
  min-height: 0;
  padding: 0;
}
.payment-out-modal-header,
.payment-out-modal-footer {
  padding: 18px 20px;
}
.payment-out-modal-header {
  justify-content: space-between;
  border-bottom: 1px solid #e7eef8;
}
.payment-out-modal-body {
  padding: 18px 20px 24px;
  display: grid;
  gap: 18px;
}
.payment-out-modal-tools {
  gap: 10px;
}
.payment-out-tool-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #d6e2f1;
  background: #fff;
  color: #61728e;
  cursor: pointer;
}
.payment-out-tool-btn.close {
  font-size: 18px;
}
.payment-out-party-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 150px;
  gap: 18px;
}
.payment-out-meta-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 150px));
  gap: 18px;
  justify-content: end;
}
.payment-out-field {
  display: grid;
  gap: 8px;
}
.payment-out-field span {
  color: #73839e;
  font-size: 13px;
  font-weight: 700;
}
.payment-out-field input,
.payment-out-field select,
.payment-out-paid-row input {
  border: 1px solid #d5e1ef;
  border-radius: 8px;
  padding: 11px 12px;
  font: inherit;
  background: #fff;
}
.payment-out-entry-card {
  width: min(360px, 100%);
  border: 1px solid #dce6f4;
  border-radius: 10px;
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}
.payment-out-entry-grid {
  gap: 14px;
}
.payment-out-entry-grid > * {
  flex: 1;
}
.payment-out-link-btn {
  border: 0;
  padding: 0;
  background: transparent;
  color: #2c7dff;
  font-weight: 700;
  cursor: pointer;
  justify-self: start;
}
.payment-out-total-inline {
  margin-left: auto;
  color: #53647f;
  font-size: 13px;
  font-weight: 700;
}
.payment-out-side-actions {
  gap: 12px;
  flex-wrap: wrap;
}
.payment-out-side-btn {
  border: 1px solid #d5e1ef;
  background: #fff;
  color: #8a98b1;
  border-radius: 8px;
  padding: 12px 16px;
  font-weight: 800;
  cursor: pointer;
}
.payment-out-description textarea {
  width: 100%;
}
.payment-out-paid-row {
  justify-content: flex-end;
  gap: 18px;
  margin-top: 8px;
  color: #73839e;
  font-weight: 700;
}
.payment-out-paid-row input {
  width: 160px;
}
.payment-out-modal-footer {
  justify-content: flex-end;
  gap: 16px;
  border-top: 1px solid #e7eef8;
}
.payment-out-share-group {
  gap: 6px;
}
.expense-workspace {
  gap: 16px;
}
.expense-table-grid {
  align-content: start;
  gap: 0;
}
.expense-table-grid .table-head,
.expense-table-grid .table-row {
  grid-template-columns: 1fr 1fr 1.35fr 1fr 1fr 110px;
}
.expense-table-grid .table-row span:nth-child(4),
.expense-table-grid .table-row span:nth-child(5) {
  text-align: right;
}
.expense-table-grid .table-row span:nth-child(6),
.expense-table-grid .table-head span:nth-child(6) {
  text-align: center;
}
.expense-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.expense-modal {
  width: min(1220px, 100%);
  min-height: 0;
  padding: 0;
}
.expense-modal-header,
.expense-modal-footer {
  padding: 16px 18px;
}
.expense-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e7eef8;
}
.expense-modal-title {
  display: flex;
  align-items: center;
  gap: 22px;
}
.expense-gst-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #73839e;
  font-size: 13px;
  font-weight: 700;
}
.expense-modal-body {
  padding: 18px 18px 24px;
  display: grid;
  gap: 20px;
}
.expense-modal-top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: start;
}
.expense-category-field {
  min-width: min(100%, 300px);
}
.expense-entry-card {
  overflow: hidden;
}
.expense-entry-footer {
  grid-template-columns: 1fr 300px;
}
.expense-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  border-top: 1px solid #e7eef8;
}
.expense-category-modal {
  width: min(520px, 100%);
  min-height: 0;
}
.expense-category-modal-body {
  padding: 20px;
  display: grid;
  gap: 16px;
}
.expense-category-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}
.expense-category-list {
  display: grid;
  gap: 10px;
  max-height: 320px;
  overflow: auto;
}
.expense-category-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #d9e4f2;
  border-radius: 12px;
  background: #fff;
}
.expense-category-delete {
  color: #ef4760;
}
@media (max-width: 1200px) {
  .purchase-editor-meta,
  .purchase-editor-party-grid,
  .purchase-entry-footer {
    grid-template-columns: 1fr;
  }
  .purchase-return-dashboard-top,
  .purchase-return-meta {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }
  .expense-modal-top,
  .expense-modal-header {
    flex-direction: column;
    align-items: stretch;
  }
  .expense-entry-footer {
    grid-template-columns: 1fr;
  }
  .expense-category-form {
    grid-template-columns: 1fr;
  }
  .payment-out-modal-top,
  .payment-out-entry-grid,
  .payment-out-modal-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .payment-out-party-row,
  .payment-out-meta-box {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
}
.sale-form-grid {
  margin: 0 0 18px;
}
.empty-sale-panel {
  min-height: 320px;
  display: grid;
  align-content: start;
  gap: 12px;
}
.paymentin-list-panel {
  min-height: 720px;
}
.payment-summary-card small {
  display: block;
  margin-top: 12px;
  color: #6f80a0;
}
.paymentin-empty-panel {
  min-height: 420px;
}
.paymentin-modal-card {
  width: min(995px, 100%);
  min-height: 550px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(17, 31, 56, 0.24);
  display: flex;
  flex-direction: column;
}
.paymentin-modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid #e6edf7;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.paymentin-modal-tools {
  display: flex;
  gap: 10px;
}
.paymentin-modal-body {
  padding: 40px 26px 28px;
  flex: 1;
}
.paymentin-form-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
}
.paymentin-left {
  display: grid;
  align-content: start;
  gap: 16px;
}
.paymentin-right {
  display: flex;
  justify-content: flex-end;
}
.paymentin-party-block {
  max-width: 345px;
  position: relative;
}
.paymentin-party-menu {
  width: 345px;
  background: #fff;
  border: 1px solid #d9e3f1;
  border-top: 0;
  box-shadow: 0 12px 24px rgba(17, 31, 56, 0.12);
}
.paymentin-party-menu-list-row,
.paymentin-party-menu-head {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 10px;
  padding: 8px 12px;
}
.paymentin-party-menu-head {
  color: #7d8baa;
  font-size: 13px;
}
.paymentin-party-menu-list-row {
  cursor: pointer;
}
.paymentin-party-menu-list-row:hover {
  background: #f6f9ff;
}
.paymentin-inline-link {
  border: 0;
  background: transparent;
  color: #1273ff;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-weight: 500;
}
.paymentin-type-block {
  max-width: 150px;
}
.paymentin-type-select {
  width: 150px;
}
.paymentin-camera-btn {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #9aa4b7;
  font-size: 24px;
  padding: 0;
  cursor: pointer;
}
.paymentin-meta-grid {
  width: 280px;
  display: grid;
  gap: 22px;
}
.paymentin-meta-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: 14px;
  color: #7583a0;
}
.paymentin-meta-row.received {
  margin-top: 165px;
}
.paymentin-plain-input,
.paymentin-amount-input {
  border: 0;
  border-bottom: 1px solid #d6ddeb;
  padding: 6px 2px;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: #1a2c49;
}
.paymentin-modal-footer {
  border-top: 1px solid #e6edf7;
  padding: 18px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}
.paymentin-share-wrap {
  position: relative;
  display: flex;
}
.split-caret {
  min-width: 28px;
  padding-inline: 8px;
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.paymentin-share-wrap .save-secondary:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.paymentin-share-menu {
  position: absolute;
  right: 0;
  bottom: 52px;
  background: #fff;
  border: 1px solid #e1e8f3;
  border-radius: 8px;
  min-width: 172px;
  box-shadow: 0 18px 35px rgba(17, 31, 56, 0.16);
  overflow: hidden;
}
.paymentin-share-menu button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 14px 18px;
  cursor: pointer;
}
.paymentin-share-menu button:hover {
  background: #f5f8fd;
}
.estimate-empty-panel {
  min-height: 520px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 12px;
  padding: 38px 28px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at top, rgba(232, 243, 255, 0.95) 0%, rgba(255, 255, 255, 1) 42%);
}
.estimate-empty-art {
  width: 116px;
  height: 116px;
  border-radius: 32px;
  display: grid;
  place-items: center;
  font-size: 58px;
  color: #67b5ff;
  background: linear-gradient(180deg, #eff7ff 0%, #dcecff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 36px rgba(93, 143, 214, 0.16);
}
.estimate-empty-panel h3,
.purchase-empty-state h3 {
  margin: 4px 0 0;
  font-size: 28px;
  color: #1c3455;
}
.estimate-empty-panel .muted,
.purchase-empty-state .muted {
  max-width: 540px;
  line-height: 1.65;
  color: #6f819f;
}
.estimate-empty-panel .pill,
.purchase-empty-state .small-action,
.purchase-empty-state .pill {
  margin-top: 6px;
  min-width: 190px;
  box-shadow: 0 14px 30px rgba(245, 58, 89, 0.14);
}
.paymentin-empty-panel .estimate-empty-art {
  border-radius: 999px;
}
#paymentInEmptyState .estimate-empty-art::before {
  content: "₹";
  font-size: 42px;
  font-weight: 800;
}
#paymentInEmptyState .estimate-empty-art {
  color: transparent;
}
#chequesEmptyState .estimate-empty-art::before {
  content: "✓";
  font-size: 44px;
  font-weight: 900;
  color: #4f7f1e;
}
#chequesEmptyState .estimate-empty-art {
  color: transparent;
  background: linear-gradient(180deg, #f4fbde 0%, #e5f6b4 100%);
}
#estimateEmptyState .estimate-empty-art::before {
  content: "🧾";
  font-size: 50px;
}
#estimateEmptyState .estimate-empty-art {
  color: transparent;
}
.estimate-editor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.estimate-tab-chip {
  background: #fff;
  border: 1px solid #d7e2f0;
  border-radius: 10px 10px 0 0;
  padding: 10px 14px;
  font-weight: 700;
  width: fit-content;
}
.estimate-editor-panel {
  min-height: 760px;
  padding: 0;
  overflow: hidden;
}
.estimate-editor-header {
  padding: 18px 34px;
  border-bottom: 1px solid #e6edf7;
}
.estimate-meta-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 20px;
  padding: 30px 24px 24px;
}
.estimate-party-box {
  max-width: 360px;
}
.estimate-ref-box {
  margin-left: auto;
  width: 280px;
  display: grid;
  gap: 16px;
}
.estimate-ref-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #7183a2;
}
.estimate-ref-row strong {
  color: #10294b;
}
.estimate-table-wrap {
  border-top: 1px solid #e6edf7;
  border-bottom: 1px solid #e6edf7;
}
.estimate-table {
  width: 100%;
  border-collapse: collapse;
}
.estimate-table th,
.estimate-table td {
  border-right: 1px solid #dfe7f4;
  border-bottom: 1px solid #dfe7f4;
  padding: 10px 8px;
  text-align: left;
  vertical-align: middle;
}
.estimate-table th:last-child,
.estimate-table td:last-child {
  border-right: 0;
}
.estimate-table th {
  background: #fbfdff;
  font-size: 13px;
  color: #26456d;
}
.estimate-table th:first-child,
.estimate-table td:first-child {
  width: 68px;
  min-width: 68px;
  text-align: left;
}
.estimate-row-number-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.estimate-row-delete {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: #7a8ba8;
  font-size: 0;
  cursor: pointer;
  padding: 0;
}
.estimate-row-delete::before {
  content: "\1F5D1";
  font-size: 14px;
}
.estimate-row-delete:hover::before {
  color: #f05b63;
}
.estimate-input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  min-width: 80px;
}
.estimate-total-label {
  text-align: right !important;
  font-weight: 800;
}
.estimate-bottom-actions {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 34px 20px;
}
.estimate-side-buttons {
  display: grid;
  gap: 16px;
  align-content: start;
}
.muted-btn {
  background: #f4f6fa;
  color: #8e9ab1;
}
.estimate-total-box {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.roundoff-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #7183a2;
}
.estimate-mini-input {
  width: 52px;
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  padding: 8px;
}
.estimate-final-total {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.estimate-total-input {
  width: 190px;
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  padding: 10px 12px;
}
.estimate-footer-bar {
  margin-top: auto;
  padding: 18px 24px;
  border-top: 1px solid #e6edf7;
  display: flex;
  justify-content: flex-end;
}
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 27, 48, 0.28);
  display: none;
  justify-content: flex-end;
  z-index: 60;
}
.drawer-overlay.show {
  display: flex;
}
.drawer-panel {
  width: min(370px, 100%);
  background: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-shadow: -14px 0 40px rgba(16, 32, 57, 0.14);
}
.drawer-header,
.drawer-footer {
  padding: 18px 16px;
  border-bottom: 1px solid #e7edf7;
}
.drawer-body {
  padding: 16px;
  display: grid;
  gap: 16px;
}
.drawer-card {
  padding: 10px 12px;
  border-radius: 10px;
  background: #f6f7fb;
  font-weight: 800;
}
.drawer-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.toggle-pill {
  width: 26px;
  height: 14px;
  background: #d9d9ef;
  border-radius: 999px;
  display: inline-block;
}

.summary-card.lilac { background: #f8f3ff; }
.summary-card.green { background: #ddfff0; }
.summary-card.blue { background: #deecff; }
.summary-card.amber { background: #fff0cf; }
.sale-summary-card,
.payment-summary-card,
.cashbank-screen#cashbank-screen-cheques .purchase-summary-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #dce7f5;
  box-shadow: 0 10px 30px rgba(26, 50, 88, 0.06);
}
.sale-summary-card::after,
.payment-summary-card::after,
.cashbank-screen#cashbank-screen-cheques .purchase-summary-card::after {
  content: "";
  position: absolute;
  right: -22px;
  top: -22px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}
.sale-summary-card strong,
.payment-summary-card strong,
.cashbank-screen#cashbank-screen-cheques .purchase-summary-card strong {
  font-size: 30px;
  letter-spacing: -0.02em;
}

#salesTable .table-row, #purchaseTable .table-row {
  grid-template-columns: 1fr 1fr 1.2fr 1fr 1fr;
}
#itemsTable .table-row {
  grid-template-columns: 1.4fr 1fr 0.8fr 1fr 1fr 0.8fr;
}
.parties-shell {
  display: grid;
  gap: 14px;
}

.parties-head-row,
.party-detail-topbar,
.party-transactions-head,
.preview-modal-header,
.preview-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-title-with-drop,
.party-detail-title-wrap,
.parties-head-actions,
.party-toolbar,
.party-detail-socials {
  display: flex;
  align-items: center;
  gap: 10px;
}

.title-drop-btn {
  border: 0;
  background: transparent;
  font-size: 20px;
  color: #58708f;
  cursor: pointer;
}

.parties-dashboard-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  min-height: 640px;
}

.parties-left-panel,
.parties-right-panel {
  border-radius: 0;
}

.parties-left-panel {
  border-right: 1px solid #d6e1f0;
  padding: 0;
}

.parties-right-panel {
  padding: 0;
}

.parties-search-wrap {
  padding: 14px;
  border-bottom: 1px solid #e8eef7;
}

.parties-list-table {
  gap: 0;
}

.parties-list-head,
.parties-list-row {
  grid-template-columns: 1.35fr 0.65fr;
}

.parties-list-head {
  padding: 12px 14px;
}

#partyList {
  display: grid;
}

.parties-list-row {
  border: 0;
  border-bottom: 1px solid #eef3f9;
  background: #fff;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  width: 100%;
  color: var(--ink);
  font: inherit;
}

.parties-list-row span:last-child {
  text-align: right;
  font-weight: 800;
}

.positive { color: #0f9d58; }
.negative { color: #ee3b4c; }

.party-detail-topbar {
  padding: 14px 16px;
  border-bottom: 1px solid #dfe8f5;
}

.party-detail-topbar h3,
.party-transactions-head h4 {
  margin: 0;
}

.party-transactions-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 560px;
}

.party-transactions-head {
  padding: 14px 16px;
  border-bottom: 1px solid #dfe8f5;
}

.search-input.compact {
  max-width: 220px;
  margin: 0;
}

.party-transactions-table {
  align-content: start;
}

#partyLedgerTable .table-row {
  grid-template-columns: 1fr 0.8fr 0.9fr 1fr 1fr 40px;
}

.party-ledger-head,
.party-ledger-row {
  padding-inline: 14px;
}

.party-ledger-row span:nth-child(4),
.party-ledger-row span:nth-child(5) {
  text-align: right;
  font-weight: 800;
}

.party-ledger-row span:last-child {
  text-align: center;
  color: #6d7e99;
}

.party-ledger-empty {
  padding: 42px 14px;
  color: #7f8da3;
}

.party-print-modal {
  width: min(440px, 100%);
  min-height: 0;
}

.party-print-options-form {
  padding: 18px 26px 6px;
  gap: 14px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #22314d;
  font-weight: 700;
}

.tiny-modal-actions {
  justify-content: flex-end;
  padding: 0 24px 18px;
}

.preview-modal-card {
  width: min(1440px, 100%);
  max-height: calc(100vh - 60px);
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #dbe5f3;
  box-shadow: 0 30px 80px rgba(20, 37, 67, 0.25);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.preview-modal-header,
.preview-modal-footer {
  padding: 18px 20px;
  border-bottom: 1px solid #e6edf7;
}

.preview-modal-footer {
  border-top: 1px solid #e6edf7;
  border-bottom: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.preview-modal-body {
  overflow: auto;
  padding: 0;
  background: #fafcff;
}

.statement-sheet {
  background: #fff;
  margin: 0 auto;
  min-height: 100%;
  padding: 22px 26px 32px;
}

.statement-brand {
  display: grid;
  justify-content: center;
  text-align: center;
  gap: 4px;
  margin-bottom: 18px;
}

.statement-sheet h2,
.statement-sheet h3 {
  text-align: center;
}

.statement-sheet h3 {
  text-align: left;
  margin-top: 18px;
}

.statement-table,
.statement-subtable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
}

.statement-table th,
.statement-table td,
.statement-subtable th,
.statement-subtable td {
  border: 1px solid #d6dee9;
  padding: 8px;
  font-size: 12px;
}

.statement-table th,
.statement-subtable th {
  background: #eef2f7;
}

.statement-description {
  background: #fbfcfe;
}

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

  .parties-left-panel {
    border-right: 0;
    border-bottom: 1px solid #d6e1f0;
  }
}
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(29, 42, 68, 0.38);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 50;
}

.modal-overlay.show {
  display: flex;
}

.modal-card {
  width: min(960px, 100%);
  min-height: 640px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid #dbe5f3;
  box-shadow: 0 30px 80px rgba(20, 37, 67, 0.22);
  display: flex;
  flex-direction: column;
}

.modal-header,
.modal-footer {
  padding: 18px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header {
  border-bottom: 1px solid #e8eef7;
}

.modal-close {
  border: 0;
  background: transparent;
  color: #6d7e99;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
}

#partyForm {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.party-top-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 18px 26px 0;
}

.modal-input,
.modal-textarea {
  width: 100%;
  border: 1px solid #cfdcec;
  border-radius: 10px;
  padding: 13px 14px;
  background: #fff;
  outline: none;
  color: var(--ink);
}

.modal-textarea {
  min-height: 86px;
  resize: vertical;
}

.party-tabs {
  display: flex;
  gap: 16px;
  padding: 26px 26px 0;
  border-bottom: 1px solid #e8eef7;
}

.party-tab {
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  padding: 10px 12px 12px;
  color: #a1acbe;
  font-weight: 800;
  cursor: pointer;
}

.party-tab.active {
  color: #1273ea;
  border-bottom-color: #1273ea;
}

.tab-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 8px;
  background: #ff3153;
  color: #fff;
  font-size: 11px;
}

.party-tab-panel {
  display: none;
  padding: 20px 26px 30px;
  flex: 1;
}

.party-tab-panel.active {
  display: block;
}

.party-section-grid {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 24px;
}

.party-side-fields,
.address-grid,
.credit-grid,
.additional-list {
  display: grid;
  gap: 14px;
}

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

.field-caption {
  display: block;
  margin-bottom: -4px;
  color: #6d7e99;
  font-size: 13px;
  font-weight: 700;
}

.credit-grid {
  grid-template-columns: repeat(2, minmax(0, 290px));
  gap: 18px;
  align-items: end;
  margin-bottom: 14px;
}

.credit-limit-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}

.credit-label {
  font-weight: 800;
}

.credit-toggle-group {
  display: inline-flex;
  gap: 10px;
}

.credit-choice {
  border: 1px solid #cbd9ec;
  border-radius: 999px;
  background: #f3f8ff;
  color: #56739a;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
}

.credit-choice.active {
  background: #1273ea;
  color: #fff;
  border-color: #1273ea;
}

.credit-custom-box.hidden {
  display: none;
}

.additional-row {
  display: grid;
  grid-template-columns: 24px 1fr 1fr;
  gap: 14px;
  align-items: center;
}

.modal-footer {
  border-top: 1px solid #e8eef7;
  margin-top: auto;
  justify-content: flex-end;
  gap: 14px;
}

.save-secondary {
  border: 1px solid #1273ea;
  background: #fff;
  color: #1273ea;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 800;
  cursor: pointer;
}

.hero-panel {
  min-height: 640px;
  background: radial-gradient(circle at 20% 20%, #d9ebff 0%, #a9c8eb 100%);
  display: grid;
  place-items: center;
}

.hero-search {
  width: min(560px, 80%);
  border-radius: 999px;
  padding: 26px 34px;
  background: #fff;
  font-size: 54px;
  color: #2e466d;
  box-shadow: 0 20px 40px rgba(62, 98, 145, 0.16);
}

.pitch-panel {
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pitch-panel h2 {
  font-size: 48px;
  margin-bottom: 16px;
}

.pitch-list {
  color: var(--muted);
  line-height: 1.9;
}

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

.settings-backup-shell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.utilities-shell {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.utilities-stage {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.utilities-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.utility-screen {
  display: none;
  flex-direction: column;
  gap: 22px;
}

.utility-screen.active {
  display: flex;
}

.utility-screen-heading h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.utility-screen-heading p {
  margin: 0;
  color: #6b7a93;
}

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

.utility-setup-card {
  position: relative;
  align-items: start;
}

.utility-setup-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: #eef4ff;
  color: #4f6283;
  margin-bottom: 6px;
}

.utility-setup-status.success {
  background: #e6fff2;
  color: #198754;
}

.utility-setup-status.pending {
  background: #fff4df;
  color: #b46a00;
}

.utility-compact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.utility-card,
.utility-method-card {
  border: 1px solid #d9e4f2;
  border-radius: 18px;
  background: #fff;
  padding: 18px;
  color: #183153;
  text-align: left;
}

.utility-link-card {
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.utility-link-card:hover,
.utility-method-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(26, 47, 87, 0.08);
}

.utility-method-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.utility-method-card {
  position: relative;
  cursor: pointer;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.utility-method-card.active {
  border-color: #0c7cff;
  box-shadow: inset 0 0 0 1px #0c7cff;
}

.utility-method-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #e7fff0;
  color: #18a957;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.utility-method-visual {
  width: 98px;
  height: 98px;
  border-radius: 50%;
  background: linear-gradient(180deg, #d7eaff 0%, #c6defe 100%);
  color: #2270d7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 24px;
}

.utility-split-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
  gap: 18px;
}

.utility-form,
.utility-side-note {
  border: 1px solid #d9e4f2;
  border-radius: 18px;
  background: #fff;
  padding: 18px;
}

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

.utility-span-2 {
  grid-column: span 2;
}

.utility-side-note h4 {
  margin: 0 0 8px;
}

.utility-bullet-list {
  margin: 0;
  padding-left: 18px;
  color: #5b6d8a;
  display: grid;
  gap: 8px;
}

.utility-inline-actions {
  justify-content: flex-start;
}

.utility-table .table-row {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.utility-health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.utility-barcode-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.settings-backup-card {
  border: 1px solid #dce6f2;
  border-radius: 22px;
  background: linear-gradient(180deg, #fcfdff 0%, #f7faff 100%);
  padding: 22px;
  display: grid;
  gap: 16px;
}

.settings-backup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.settings-backup-head h3 {
  margin: 0 0 6px;
  font-size: 20px;
}

.settings-backup-head p,
.settings-backup-meta,
.settings-backup-status,
.settings-backup-file {
  margin: 0;
  color: #6f7f98;
  line-height: 1.6;
}

.settings-backup-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 6px 12px;
  background: #e7f1ff;
  color: #2363c9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.settings-backup-badge.alt {
  background: #fff0d9;
  color: #c17000;
}

.settings-backup-form {
  display: grid;
  gap: 12px;
}

.settings-backup-file,
.settings-backup-status {
  border: 1px dashed #d6e0ee;
  border-radius: 16px;
  background: #ffffff;
  padding: 12px 14px;
}

.settings-backup-status.error {
  border-color: #f4b7c0;
  background: #fff4f6;
  color: #b42339;
}

.settings-backup-status.success {
  border-color: #b9e4c8;
  background: #effcf3;
  color: #12703b;
}

.settings-backup-status.info {
  border-color: #cfe0f8;
  background: #f7fbff;
  color: #4c6285;
}

.company-profile-panel {
  padding: 0;
  min-height: calc(100vh - 150px);
  overflow: hidden;
}

.company-profile-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 26px 14px;
  border-bottom: 1px solid #dce6f2;
}

.company-profile-header h2 {
  font-size: 24px;
}

.company-profile-back {
  border: 0;
  background: #2d2f66;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.company-profile-form {
  min-height: calc(100vh - 220px);
  display: flex;
  flex-direction: column;
}

.company-profile-grid {
  padding: 26px 34px 32px;
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 72px;
  align-items: start;
  flex: 1;
}

.company-profile-column {
  display: grid;
  gap: 26px;
}

.company-logo-column {
  padding-right: 12px;
}

.company-logo-uploader {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #e5f1ff, #d2e7ff);
  border: 1px solid #d4e3f6;
  overflow: hidden;
  cursor: pointer;
}

.company-logo-uploader::after {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 4px solid #1273ea;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid transparent;
  border-radius: 50%;
}

.company-logo-placeholder {
  text-align: center;
  color: #8ea4c5;
  font-size: 18px;
  line-height: 1.3;
}

.company-logo-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.company-logo-edit {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #7685a1;
  box-shadow: 0 10px 18px rgba(62, 80, 113, 0.16);
  cursor: pointer;
}

.company-section {
  display: grid;
  gap: 12px;
}

.company-section h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

.company-address-box {
  min-height: 112px;
}

.company-signature-box {
  min-height: 114px;
  border: 1px dashed #c8d8ec;
  background: #fff;
  border-radius: 14px;
  display: grid;
  place-items: center;
  padding: 18px;
  cursor: pointer;
}

.company-signature-placeholder {
  color: #94a6c2;
  font-weight: 600;
}

.company-signature-preview {
  max-width: 100%;
  max-height: 84px;
  object-fit: contain;
}

.company-profile-footer {
  margin-top: auto;
  padding: 18px 20px;
  border-top: 1px solid #dce6f2;
  display: flex;
  justify-content: flex-end;
  gap: 14px;
}

@media (max-width: 1200px) {
  .stats-grid, .content-grid, .split-layout, .growth-layout, .sub-panels, .items-layout {
    grid-template-columns: 1fr;
  }

  .reports-shell,
  .reports-toolbar,
  .reports-summary-grid {
    grid-template-columns: 1fr;
  }

  .form-grid, .item-composer-grid, .conversion-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-block { grid-template-columns: 1fr; }
  .party-top-grid,
  .party-section-grid,
  .address-grid,
  .credit-grid,
  .additional-row,
  .estimate-meta-layout,
  .company-profile-grid,
  .utility-card-grid,
  .utility-method-grid,
  .utility-compact-grid,
  .utility-health-grid,
  .utility-barcode-grid,
  .utility-preview-grid,
  .utility-form-grid,
  .utility-split-panel,
  .sync-status-summary-grid,
  .sync-status-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 0; z-index: 10; }
  .topbar { flex-direction: column; }
  .form-grid, .report-list, .report-cards, .settings-grid, .quick-links, .items-tabs, .item-composer-grid, .conversion-form {
    grid-template-columns: 1fr;
  }
  .settings-backup-shell {
    grid-template-columns: 1fr;
  }
  .utility-span-2 {
    grid-column: auto;
  }
  .bank-feature-grid,
  .bank-account-grid,
  .loan-account-grid,
  .bank-accounts-list-head {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }
  .item-adjust-topline,
  .item-adjust-title-row,
  .item-detail-top,
  .item-detail-main {
    flex-direction: column;
    align-items: stretch;
  }
  .item-stock-summary,
  .item-detail-actions {
    justify-items: stretch;
    justify-content: stretch;
  }
  .item-detail-facts,
  .item-adjust-grid {
    grid-template-columns: 1fr;
  }
  .document-inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .reports-sidebar {
    border-right: 0;
    border-bottom: 1px solid #dce6f4;
  }
  h1 { font-size: 28px; }
  .hero-search, .pitch-panel h2 { font-size: 32px; }
  .estimate-bottom-actions,
  .estimate-total-box {
    flex-direction: column;
    align-items: stretch;
  }
}