:root {
  --bg: #edf3f5;
  --bg-soft: #f6f8fa;
  --surface: #ffffff;
  --surface-soft: #f8fafb;
  --text: #17212b;
  --muted: #687686;
  --line: #d8e1e8;
  --line-strong: #c6d2dc;
  --dark: #22303a;
  --brand: #23765a;
  --brand-dark: #15563f;
  --cash: #229c62;
  --credit: #c77a18;
  --cardpay: #2d6dcc;
  --bank: #7556c7;
  --danger: #cf2d2d;
  --desktop-bg: #e7eef1;
  --focus-rgb: 35, 118, 90;
  --control-bg: #eef3f4;
  --hover-bg: #eef7f2;
  --product-active-border: #94c8b0;
  --product-active-bg: #f0faf5;
  --product-chip-bg: #edf2f5;
  --product-chip-active-bg: #dff5e9;
  --product-chip-active-text: #1d694d;
  --success-bg: #effaf4;
  --success-line: #b9e8cf;
  --success-text: #15563f;
  --danger-bg: #fff5f5;
  --danger-line: #f1bbbb;
  --danger-text: #9d1f1f;
  --info-bg: #f1f7ff;
  --info-line: #b8d2f4;
  --info-text: #2d6dcc;
  --cash-drawer-bg: rgba(34, 156, 98, 0.18);
  --cash-drawer-border: rgba(118, 221, 166, 0.46);
  --cash-drawer-text: #e7fff2;
  --cash-drawer-label: #bff2d4;
  --shadow-soft: 0 8px 24px rgba(27, 39, 49, 0.08);
  --shadow-card: 0 4px 12px rgba(27, 39, 49, 0.06);
  --app-shell-bg: var(--bg);
  --header-bg: linear-gradient(135deg, #22303a 0%, #17251f 100%);
  --header-fg: #ffffff;
  --header-muted: #d4dde4;
  --header-shadow: 0 10px 22px rgba(19, 32, 38, 0.12);
  --tabs-bg: rgba(237, 243, 245, 0.94);
  --tab-active-bg: var(--surface);
  --heading: #111a22;
  --card-bg: var(--surface);
  --card-border: var(--line);
  --card-border-width: 1px;
  --card-border-style: solid;
  --card-radius: 8px;
  --control-radius: 8px;
  --inner-radius: 7px;
  --main-padding: 10px;
  --card-padding: 12px;
  --card-margin: 10px;
  --item-gap: 8px;
  --payment-height: 52px;
  --product-height: 80px;
  --header-sticky-offset: 64px;
  --row-bg: var(--surface-soft);
  --input-bg: #ffffff;
  --button-bg: #f8fafb;
  --entry-total-bg: #ffffff;
  --metric-bg: #ffffff;
  --product-inset: inset -4px 0 0 var(--brand);
  --product-button-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  --primary-shadow: 0 10px 18px rgba(21, 86, 63, 0.16);
}

body[data-theme="haraj"] {
  --bg: #eef4f2;
  --surface: #ffffff;
  --surface-soft: #f7faf8;
  --text: #15231f;
  --muted: #60756e;
  --line: #d1ded9;
  --line-strong: #bed0c8;
  --dark: #1f2933;
  --brand: #0f8f78;
  --brand-dark: #0b5f52;
  --cash: #14a56f;
  --credit: #d97706;
  --cardpay: #256fc7;
  --bank: #7157c6;
  --danger: #c93434;
  --desktop-bg: #e1ebe8;
  --focus-rgb: 15, 143, 120;
  --control-bg: #e8f1ef;
  --hover-bg: #e9f8f4;
  --product-active-border: #8bcdbf;
  --product-active-bg: #edf9f6;
  --product-chip-active-bg: #d8f1eb;
  --product-chip-active-text: #0b5f52;
  --success-bg: #edf9f3;
  --success-line: #b8e6d1;
  --success-text: #0b5f52;
  --info-text: #256fc7;
  --cash-drawer-bg: rgba(15, 143, 120, 0.20);
  --cash-drawer-border: rgba(151, 236, 218, 0.44);
  --cash-drawer-text: #e5fff8;
  --cash-drawer-label: #bdf6e8;
  --header-bg: #12221e;
  --header-shadow: none;
  --tabs-bg: rgba(232, 241, 239, 0.96);
  --card-radius: 6px;
  --control-radius: 6px;
  --inner-radius: 5px;
  --main-padding: 8px;
  --card-padding: 10px;
  --card-margin: 8px;
  --item-gap: 7px;
  --payment-height: 48px;
  --product-height: 72px;
  --shadow-card: 0 1px 0 rgba(21, 35, 31, 0.05);
  --shadow-soft: none;
  --product-inset: inset -5px 0 0 var(--brand);
  --primary-shadow: none;
}

body[data-theme="graphite"] {
  --bg: #f1f4f7;
  --surface: #ffffff;
  --surface-soft: #f7f8fa;
  --text: #161d24;
  --muted: #68727e;
  --line: #d6dee6;
  --line-strong: #c1ccd6;
  --dark: #1c232b;
  --brand: #4f7f9f;
  --brand-dark: #365d77;
  --cash: #2f9b72;
  --credit: #b7791f;
  --cardpay: #3e6fba;
  --bank: #7b5eb1;
  --danger: #bf3636;
  --desktop-bg: #e6ecf0;
  --focus-rgb: 79, 127, 159;
  --control-bg: #e9eef2;
  --hover-bg: #edf4f8;
  --product-active-border: #abc5d5;
  --product-active-bg: #f0f6f9;
  --product-chip-active-bg: #dcecf3;
  --product-chip-active-text: #365d77;
  --success-bg: #f0f7f5;
  --success-line: #b7ddd0;
  --success-text: #25604a;
  --info-text: #3e6fba;
  --cash-drawer-bg: rgba(79, 127, 159, 0.19);
  --cash-drawer-border: rgba(174, 207, 226, 0.46);
  --cash-drawer-text: #edf8ff;
  --cash-drawer-label: #cbe4f2;
  --header-bg: #111820;
  --header-shadow: none;
  --tabs-bg: rgba(235, 240, 244, 0.96);
  --card-border-width: 1px;
  --card-radius: 14px;
  --control-radius: 12px;
  --inner-radius: 10px;
  --card-padding: 12px;
  --shadow-card: none;
  --shadow-soft: 0 0 0 1px rgba(28, 35, 43, 0.08);
  --product-inset: inset -3px 0 0 var(--brand);
  --primary-shadow: none;
}

body[data-theme="palm"] {
  --bg: #eff3ea;
  --surface: #ffffff;
  --surface-soft: #f8faf4;
  --text: #1d261e;
  --muted: #6d755f;
  --line: #d8dfce;
  --line-strong: #c6d0ba;
  --dark: #26352a;
  --brand: #6f8f3a;
  --brand-dark: #4f6d28;
  --cash: #31935a;
  --credit: #b65f3b;
  --cardpay: #3f73ad;
  --bank: #8062b7;
  --danger: #bb3a33;
  --desktop-bg: #e6ecdc;
  --focus-rgb: 111, 143, 58;
  --control-bg: #e8eedf;
  --hover-bg: #f0f6e9;
  --product-active-border: #bccd91;
  --product-active-bg: #f4faed;
  --product-chip-active-bg: #e6f1d2;
  --product-chip-active-text: #4f6d28;
  --success-bg: #eff8ed;
  --success-line: #c5e1bb;
  --success-text: #3f682d;
  --info-text: #3f73ad;
  --cash-drawer-bg: rgba(111, 143, 58, 0.21);
  --cash-drawer-border: rgba(212, 232, 170, 0.48);
  --cash-drawer-text: #f6ffe8;
  --cash-drawer-label: #e0f2b9;
  --header-bg: linear-gradient(135deg, #26352a 0%, #1b271f 100%);
  --header-shadow: 0 10px 20px rgba(38, 53, 42, 0.12);
  --tabs-bg: rgba(239, 243, 234, 0.95);
  --card-radius: 8px;
  --control-radius: 8px;
  --card-padding: 13px;
  --shadow-card: 0 5px 13px rgba(48, 62, 40, 0.06);
  --product-inset: inset -4px 0 0 var(--brand);
  --primary-shadow: 0 10px 18px rgba(79, 109, 40, 0.14);
}

body[data-theme="royal"] {
  --bg: #11131d;
  --surface: #181b2a;
  --surface-soft: #202438;
  --text: #f5f3ff;
  --muted: #b8b2c9;
  --line: #343a56;
  --line-strong: #4a5171;
  --dark: #0c0e17;
  --brand: #b99cff;
  --brand-dark: #8b6be3;
  --cash: #2e9a83;
  --credit: #c0812c;
  --cardpay: #6fa6ff;
  --bank: #b99cff;
  --danger: #ff6f85;
  --desktop-bg: #0c0e17;
  --focus-rgb: 185, 156, 255;
  --control-bg: #10131f;
  --hover-bg: #272c42;
  --product-active-border: #7864bb;
  --product-active-bg: #262b44;
  --product-chip-bg: #111522;
  --product-chip-active-bg: #352f59;
  --product-chip-active-text: #e9ddff;
  --success-bg: #152b2a;
  --success-line: #2e6d62;
  --success-text: #a6f1df;
  --danger-bg: rgba(255, 111, 133, 0.10);
  --danger-line: rgba(255, 111, 133, 0.34);
  --danger-text: #ff9aac;
  --info-bg: rgba(111, 166, 255, 0.12);
  --info-line: rgba(111, 166, 255, 0.34);
  --info-text: #9fc2ff;
  --cash-drawer-bg: rgba(185, 156, 255, 0.17);
  --cash-drawer-border: rgba(211, 193, 246, 0.34);
  --cash-drawer-text: #fbf7ff;
  --cash-drawer-label: #e3d8ff;
  --app-shell-bg: #11131d;
  --header-bg: linear-gradient(135deg, #0c0e17 0%, #201b36 100%);
  --header-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
  --tabs-bg: rgba(17, 19, 29, 0.92);
  --tab-active-bg: #202438;
  --heading: #ffffff;
  --card-bg: #181b2a;
  --card-border: #343a56;
  --card-radius: 8px;
  --control-radius: 8px;
  --row-bg: #202438;
  --input-bg: #111522;
  --button-bg: #202438;
  --entry-total-bg: #111522;
  --metric-bg: #202438;
  --shadow-card: 0 12px 26px rgba(0, 0, 0, 0.22);
  --shadow-soft: 0 0 0 1px rgba(255, 255, 255, 0.05);
  --product-button-shadow: none;
  --primary-shadow: 0 12px 22px rgba(139, 107, 227, 0.18);
}

body[data-theme="legend"] {
  --bg: #07110f;
  --surface: #101b18;
  --surface-soft: #13231f;
  --text: #fff8df;
  --muted: #b9c2ad;
  --line: #284037;
  --line-strong: #3d6253;
  --dark: #050b0a;
  --brand: #00a878;
  --brand-dark: #087e63;
  --cash: #00b874;
  --credit: #f2b84b;
  --cardpay: #4fb4ff;
  --bank: #a071ff;
  --danger: #ff6f61;
  --desktop-bg: #030706;
  --focus-rgb: 0, 168, 120;
  --control-bg: #081411;
  --hover-bg: #17342c;
  --product-active-border: #f2b84b;
  --product-active-bg: #142920;
  --product-chip-bg: #07110f;
  --product-chip-active-bg: rgba(242, 184, 75, 0.18);
  --product-chip-active-text: #ffe3a1;
  --success-bg: rgba(0, 168, 120, 0.13);
  --success-line: rgba(0, 184, 116, 0.52);
  --success-text: #a9ffe6;
  --danger-bg: rgba(255, 111, 97, 0.12);
  --danger-line: rgba(255, 111, 97, 0.42);
  --danger-text: #ffaaa1;
  --info-bg: rgba(79, 180, 255, 0.13);
  --info-line: rgba(79, 180, 255, 0.40);
  --info-text: #a8d9ff;
  --cash-drawer-bg: linear-gradient(135deg, rgba(0, 168, 120, 0.20), rgba(242, 184, 75, 0.13));
  --cash-drawer-border: rgba(242, 184, 75, 0.42);
  --cash-drawer-text: #fff8df;
  --cash-drawer-label: #ffe3a1;
  --app-shell-bg: #07110f;
  --header-bg:
    linear-gradient(90deg, rgba(242, 184, 75, 0.18) 0 2px, transparent 2px 16px),
    linear-gradient(135deg, #050b0a 0%, #102a2a 55%, #07110f 100%);
  --header-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
  --tabs-bg: rgba(5, 11, 10, 0.92);
  --tab-active-bg: #12251f;
  --heading: #fff8df;
  --card-bg: #101b18;
  --card-border: #284037;
  --card-radius: 7px;
  --control-radius: 7px;
  --inner-radius: 5px;
  --main-padding: 9px;
  --card-padding: 12px;
  --card-margin: 9px;
  --item-gap: 8px;
  --payment-height: 56px;
  --product-height: 86px;
  --row-bg: #13231f;
  --input-bg: #07110f;
  --button-bg: #13231f;
  --entry-total-bg: #07110f;
  --metric-bg: #13231f;
  --shadow-card: 0 12px 28px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(242, 184, 75, 0.06);
  --shadow-soft: 0 0 0 1px rgba(242, 184, 75, 0.10), 0 24px 60px rgba(0, 0, 0, 0.32);
  --product-button-shadow: inset 0 0 0 1px rgba(242, 184, 75, 0.08);
  --primary-shadow: 0 14px 28px rgba(0, 168, 120, 0.22);
}

body[data-theme="atelier"] .card {
  border-top-color: rgba(35, 118, 90, 0.48);
}

body[data-theme="atelier"] .entry-card {
  box-shadow: 0 8px 18px rgba(27, 39, 49, 0.08);
}

body[data-theme="haraj"] .app-header {
  min-height: 64px;
  padding-block: 6px;
}

body[data-theme="haraj"] .mode-tabs {
  top: var(--header-sticky-offset);
  border-bottom-width: 2px;
}

body[data-theme="haraj"] .card {
  border-width: 1px;
}

body[data-theme="haraj"] .section-title {
  margin-bottom: 8px;
}

body[data-theme="haraj"] .payment-grid {
  border-width: 2px;
}

body[data-theme="haraj"] .payment-button.active {
  box-shadow: inset 0 0 0 1px var(--accent);
}

body[data-theme="haraj"] .entry-row,
body[data-theme="haraj"] .summary-row {
  padding: 8px;
}

body[data-theme="graphite"] .app-shell {
  box-shadow: 0 0 0 1px rgba(28, 35, 43, 0.12);
}

body[data-theme="graphite"] .app-header,
body[data-theme="graphite"] .mode-tabs,
body[data-theme="graphite"] .card,
body[data-theme="graphite"] input,
body[data-theme="graphite"] textarea,
body[data-theme="graphite"] .payment-grid,
body[data-theme="graphite"] .entry-row,
body[data-theme="graphite"] .summary-row {
  border-color: var(--line-strong);
}

body[data-theme="graphite"] .metric::before {
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  width: 4px;
  height: auto;
}

body[data-theme="graphite"] .product-button.active {
  outline: 1px solid rgba(var(--focus-rgb), 0.18);
}

body[data-theme="palm"] .card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 100%);
}

body[data-theme="palm"] .entry-card {
  border-right: 4px solid var(--brand);
}

body[data-theme="palm"] .line-total {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

body[data-theme="palm"] .mode-tab.active {
  box-shadow: inset 0 -3px 0 var(--brand);
}

body[data-theme="royal"] .app-shell {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 46px rgba(0, 0, 0, 0.28);
}

body[data-theme="royal"] .mode-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body[data-theme="royal"] .mode-tab.active,
body[data-theme="royal"] .payment-button.active {
  box-shadow: 0 0 0 1px rgba(185, 156, 255, 0.22);
}

body[data-theme="royal"] .card {
  background: linear-gradient(180deg, #1a1e2e 0%, #151827 100%);
}

body[data-theme="royal"] .payment-grid,
body[data-theme="royal"] .product-button,
body[data-theme="royal"] .entry-row,
body[data-theme="royal"] .summary-row,
body[data-theme="royal"] .product-edit-row,
body[data-theme="royal"] .customer-dropdown {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-theme="royal"] .edit-entry,
body[data-theme="royal"] .customer-edit {
  border-color: rgba(111, 166, 255, 0.34);
  background: rgba(111, 166, 255, 0.12);
  color: #9fc2ff;
}

body[data-theme="royal"] .delete-entry,
body[data-theme="royal"] .customer-delete,
body[data-theme="royal"] .danger-action,
body[data-theme="royal"] .product-edit-row .remove-product {
  border-color: rgba(255, 111, 133, 0.34);
  background: rgba(255, 111, 133, 0.10);
  color: #ff9aac;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  letter-spacing: 0;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
  outline: 3px solid rgba(var(--focus-rgb), 0.22);
  outline-offset: 2px;
}

.app-shell {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--app-shell-bg);
  box-shadow: var(--shadow-soft);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px 6px;
  background: var(--header-bg);
  color: var(--header-fg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--header-shadow);
}

.app-header > div:first-child {
  min-width: 0;
}

.app-header h1 {
  margin: 0;
  font-size: 18px;
  line-height: 1.12;
  font-weight: 900;
}

.app-header p {
  max-width: 270px;
  margin: 2px 0 0;
  color: var(--header-muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cash-drawer {
  min-width: 82px;
  min-height: 36px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 5px 7px;
  border: 1px solid var(--cash-drawer-border);
  border-radius: var(--control-radius);
  background: var(--cash-drawer-bg);
  color: var(--cash-drawer-text);
  text-align: center;
}

.cash-drawer span {
  color: var(--cash-drawer-label);
  font-size: 9px;
  font-weight: 900;
}

.cash-drawer strong {
  font-size: 13px;
  line-height: 1.15;
  white-space: nowrap;
}

.header-action {
  min-width: 58px;
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--control-radius);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 900;
}

.mode-tabs {
  position: sticky;
  top: var(--header-sticky-offset);
  z-index: 18;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--item-gap) - 4px);
  padding: 8px 10px;
  background: var(--tabs-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.mode-tab {
  min-width: 0;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
}

.mode-tab.active {
  background: var(--tab-active-bg);
  border-color: var(--line);
  color: var(--brand-dark);
  box-shadow: var(--shadow-card);
}

main {
  padding: var(--main-padding) var(--main-padding) 24px;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.card {
  background: var(--card-bg);
  border: var(--card-border-width) var(--card-border-style) var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  margin-bottom: var(--card-margin);
  box-shadow: var(--shadow-card);
}

.card.compact {
  padding-bottom: 12px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: var(--card-margin);
}

.section-title h2 {
  margin: 0;
  color: var(--heading);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 900;
}

.section-title span {
  max-width: 50%;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.theme-option {
  min-width: 0;
  min-height: 168px;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background: var(--surface-soft);
  color: var(--text);
  text-align: right;
  box-shadow: none;
}

.theme-option.active {
  border-color: var(--brand);
  background: var(--product-active-bg);
  box-shadow: inset -4px 0 0 var(--brand), var(--shadow-card);
}

.theme-preview {
  height: 82px;
  display: grid;
  grid-template-rows: 22px 20px 1fr;
  gap: 5px;
  overflow: hidden;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: var(--preview-radius, var(--control-radius));
  background: var(--preview-bg, var(--bg));
}

.theme-preview[data-preview-theme="atelier"] {
  --preview-bg: #edf3f5;
  --preview-dark: #22303a;
  --preview-brand: #23765a;
  --preview-cash: #229c62;
  --preview-control: #eef3f4;
  --preview-surface: #ffffff;
  --preview-success: #effaf4;
  --preview-line: #b9e8cf;
  --preview-radius: 8px;
}

.theme-preview[data-preview-theme="haraj"] {
  --preview-bg: #eef4f2;
  --preview-dark: #12221e;
  --preview-brand: #0f8f78;
  --preview-cash: #14a56f;
  --preview-control: #dfeae7;
  --preview-surface: #ffffff;
  --preview-success: #edf9f3;
  --preview-line: #b8e6d1;
  --preview-radius: 5px;
}

.theme-preview[data-preview-theme="graphite"] {
  --preview-bg: #f1f4f7;
  --preview-dark: #111820;
  --preview-brand: #4f7f9f;
  --preview-cash: #2f9b72;
  --preview-control: #e1e7ec;
  --preview-surface: #ffffff;
  --preview-success: #f0f7f5;
  --preview-line: #b7ddd0;
  --preview-radius: 3px;
}

.theme-preview[data-preview-theme="palm"] {
  --preview-bg: #eff3ea;
  --preview-dark: #26352a;
  --preview-brand: #6f8f3a;
  --preview-cash: #31935a;
  --preview-control: #e4ebd9;
  --preview-surface: #ffffff;
  --preview-success: #eff8ed;
  --preview-line: #c5e1bb;
  --preview-radius: 8px;
}

.theme-preview[data-preview-theme="royal"] {
  --preview-bg: #11131d;
  --preview-dark: #0c0e17;
  --preview-brand: #8b6be3;
  --preview-cash: #2e9a83;
  --preview-control: #202438;
  --preview-surface: #181b2a;
  --preview-success: #152b2a;
  --preview-line: #2e6d62;
  --preview-radius: 8px;
}

.theme-preview[data-preview-theme="legend"] {
  --preview-bg: #07110f;
  --preview-dark: #050b0a;
  --preview-brand: #00a878;
  --preview-cash: #f2b84b;
  --preview-control: #13231f;
  --preview-surface: #102a2a;
  --preview-success: rgba(0, 168, 120, 0.20);
  --preview-line: rgba(242, 184, 75, 0.45);
  --preview-radius: 7px;
}

.theme-preview-header,
.theme-preview-tabs,
.theme-preview-card {
  display: grid;
  gap: 4px;
}

.theme-preview-header {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.theme-preview-header i,
.theme-preview-tabs i,
.theme-preview-card i {
  display: block;
  border-radius: 999px;
}

.theme-preview-header i:first-child {
  background: var(--preview-dark, var(--dark));
}

.theme-preview-header i:last-child {
  background: var(--preview-cash, var(--cash));
}

.theme-preview-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.theme-preview-tabs i {
  background: var(--preview-control, var(--control-bg));
}

.theme-preview-tabs i:first-child {
  background: var(--preview-brand, var(--brand));
}

.theme-preview-card {
  grid-template-columns: 1fr 1fr;
  align-content: stretch;
}

.theme-preview-card i {
  min-height: 18px;
  border-radius: max(3px, calc(var(--preview-radius, var(--inner-radius)) - 2px));
  background: var(--preview-surface, var(--surface));
}

.theme-preview-card i:last-child {
  background: var(--preview-success, var(--success-bg));
  border: 1px solid var(--preview-line, var(--success-line));
}

.theme-preview[data-preview-theme="atelier"] {
  box-shadow: inset 0 3px 0 rgba(35, 118, 90, 0.42);
}

.theme-preview[data-preview-theme="haraj"] {
  grid-template-rows: 18px 24px 1fr;
  gap: 4px;
  border-width: 2px;
}

.theme-preview[data-preview-theme="haraj"] i {
  border-radius: 4px;
}

.theme-preview[data-preview-theme="haraj"] .theme-preview-tabs i:first-child,
.theme-preview[data-preview-theme="haraj"] .theme-preview-card i:first-child {
  background: var(--preview-brand);
}

.theme-preview[data-preview-theme="graphite"] {
  border-radius: 12px;
  grid-template-rows: 18px 18px 1fr;
}

.theme-preview[data-preview-theme="graphite"] i,
.theme-preview[data-preview-theme="graphite"] .theme-preview-card i {
  border-radius: 7px;
}

.theme-preview[data-preview-theme="graphite"] .theme-preview-card i {
  border: 1px solid #c1ccd6;
}

.theme-preview[data-preview-theme="palm"] {
  background:
    repeating-linear-gradient(180deg, rgba(111, 143, 58, 0.13) 0 1px, transparent 1px 13px),
    var(--preview-bg);
}

.theme-preview[data-preview-theme="palm"] .theme-preview-card i {
  border-right: 4px solid var(--preview-brand);
}

.theme-preview[data-preview-theme="royal"] {
  background: linear-gradient(180deg, #11131d 0%, #0c0e17 100%);
  border-color: rgba(185, 156, 255, 0.36);
}

.theme-preview[data-preview-theme="royal"] .theme-preview-tabs i:first-child {
  background: linear-gradient(135deg, #8b6be3, #2e9a83);
}

.theme-preview[data-preview-theme="royal"] .theme-preview-card i:last-child {
  background: rgba(46, 154, 131, 0.20);
}

.theme-preview[data-preview-theme="legend"] {
  background:
    linear-gradient(90deg, rgba(242, 184, 75, 0.18) 0 2px, transparent 2px 13px),
    linear-gradient(180deg, #07110f 0%, #102a2a 100%);
  border-color: rgba(242, 184, 75, 0.42);
  box-shadow: inset 0 0 0 1px rgba(0, 168, 120, 0.24);
}

.theme-preview[data-preview-theme="legend"] .theme-preview-header i:first-child {
  background: linear-gradient(90deg, #f2b84b, #00a878);
}

.theme-preview[data-preview-theme="legend"] .theme-preview-tabs i:first-child,
.theme-preview[data-preview-theme="legend"] .theme-preview-card i:last-child {
  background: linear-gradient(135deg, #00a878, #f2b84b);
}

.theme-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  margin-top: 1px;
}

.theme-swatches span {
  width: 100%;
  height: 5px;
  display: block;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}

.theme-name {
  display: block;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

.theme-note {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.payment-card {
  padding: 10px;
}

.payment-grid,
.product-grid,
.summary-grid {
  display: grid;
  gap: var(--item-gap);
}

.payment-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--item-gap) - 4px);
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: var(--control-bg);
}

.payment-button {
  --accent: var(--brand);
  position: relative;
  min-width: 0;
  min-height: var(--payment-height);
  border: 0;
  border-radius: var(--inner-radius);
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.payment-button.active {
  background: var(--tab-active-bg);
  color: var(--text);
  box-shadow: 0 6px 16px rgba(27, 39, 49, 0.12);
}

.payment-button.active::after {
  content: "";
  position: absolute;
  right: 12px;
  left: 12px;
  bottom: 7px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
}

.payment-button.cash {
  --accent: var(--cash);
}

.payment-button.credit {
  --accent: var(--credit);
}

.payment-button.card-pay {
  --accent: var(--cardpay);
}

.payment-button.bank {
  --accent: var(--bank);
}

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

.product-button {
  position: relative;
  min-height: var(--product-height);
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: var(--surface-soft);
  color: var(--text);
  text-align: right;
  box-shadow: var(--product-button-shadow);
}

.product-button.active {
  border-color: var(--product-active-border);
  background: var(--product-active-bg);
  box-shadow: var(--product-inset);
}

.product-button strong {
  display: block;
  min-width: 0;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.product-button span {
  display: inline-block;
  max-width: 100%;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--product-chip-bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.product-button.active span {
  background: var(--product-chip-active-bg);
  color: var(--product-chip-active-text);
}

.entry-card {
  border-color: var(--line-strong);
}

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

.field,
.form-grid label,
.cash-check label {
  display: block;
}

label span,
.field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  font-size: 17px;
  font-weight: 850;
}

input {
  height: 48px;
  padding: 0 12px;
}

input[type="number"] {
  direction: ltr;
  height: 54px;
  padding-inline: 10px;
  border-color: var(--line-strong);
  background:
    linear-gradient(180deg, rgba(var(--focus-rgb), 0.07), rgba(var(--focus-rgb), 0.025)),
    var(--input-bg);
  color: var(--heading);
  text-align: center;
  font-size: 20px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  caret-color: var(--brand);
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
}

input[type="number"]:focus {
  background:
    linear-gradient(180deg, rgba(var(--focus-rgb), 0.11), rgba(var(--focus-rgb), 0.035)),
    var(--input-bg);
}

textarea {
  min-height: 92px;
  resize: vertical;
  padding: 10px 12px;
}

input:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--focus-rgb), 0.14);
}

.field {
  margin-top: 10px;
}

.customer-combo {
  position: relative;
}

.customer-combo input {
  padding-left: 50px;
}

.combo-toggle {
  position: absolute;
  left: 7px;
  top: 50%;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--control-radius);
  background: var(--control-bg);
  color: var(--text);
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  display: grid;
  place-items: center;
}

.customer-dropdown {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  max-height: 204px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--control-radius);
  background: var(--surface);
  box-shadow: 0 18px 34px rgba(27, 39, 49, 0.16);
}

.customer-option-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.customer-option,
.customer-empty {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--text);
  text-align: right;
  padding: 9px 11px;
  font-weight: 900;
}

.customer-option:hover,
.customer-option:focus {
  background: var(--hover-bg);
}

.customer-tools {
  display: flex;
  gap: 5px;
}

.customer-edit,
.customer-delete {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: var(--button-bg);
  color: var(--text);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  display: grid;
  place-items: center;
}

.customer-delete {
  border-color: var(--danger-line);
  background: var(--danger-bg);
  color: var(--danger-text);
}

.customer-empty {
  color: var(--muted);
  cursor: default;
}

.hidden {
  display: none !important;
}

.line-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 11px;
  padding: 12px 13px;
  border: 1px solid var(--success-line);
  border-radius: var(--control-radius);
  background: var(--success-bg);
  color: var(--success-text);
}

.line-total span {
  font-weight: 900;
}

.line-total strong {
  font-size: 21px;
  line-height: 1.1;
}

.primary-action,
.secondary-action,
.danger-action,
.file-picker {
  width: 100%;
  min-height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--control-radius);
  font-weight: 900;
  font-size: 16px;
  text-align: center;
}

.primary-action {
  margin-top: 11px;
  border: 0;
  background: var(--brand-dark);
  color: #fff;
  box-shadow: var(--primary-shadow);
}

.secondary-action {
  margin-top: 9px;
  border: 1px solid var(--line-strong);
  background: var(--button-bg);
  color: var(--text);
}

.danger-action {
  margin-top: 9px;
  border: 1px solid var(--danger-line);
  background: var(--danger-bg);
  color: var(--danger-text);
}

.file-picker {
  border: 1px dashed #91a5b6;
  background: var(--button-bg);
  color: var(--text);
}

.file-picker input {
  display: none;
}

.handoff-summary,
.handoff-actions {
  display: grid;
  gap: var(--item-gap);
}

.handoff-file {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--control-radius);
  background: var(--surface-soft);
}

.handoff-file span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.handoff-file strong {
  direction: ltr;
  text-align: left;
  color: var(--heading);
  font-size: 13px;
  word-break: break-all;
}

.entry-list,
.summary-list,
.products-editor {
  display: grid;
  gap: var(--item-gap);
}

.breakdown-title {
  margin: 14px 2px 8px;
  color: var(--heading);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.25;
}

.section-title + .breakdown-title {
  margin-top: 2px;
}

.empty-state {
  min-height: 58px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 850;
  font-size: 14px;
  background: var(--surface-soft);
  border: 1px dashed var(--line);
  border-radius: var(--control-radius);
  text-align: center;
  padding: 12px;
}

.entry-row,
.summary-row,
.product-edit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--item-gap);
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: var(--row-bg);
}

.entry-main {
  min-width: 0;
}

.entry-main strong,
.summary-row strong {
  display: block;
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.entry-main span,
.summary-row span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
}

.entry-total {
  min-width: 48px;
  padding: 7px 9px;
  border-radius: var(--control-radius);
  background: var(--entry-total-bg);
  color: var(--brand-dark);
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.entry-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.edit-entry,
.delete-entry {
  width: 34px;
  height: 34px;
  border-radius: var(--control-radius);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
}

.edit-entry {
  border: 1px solid var(--info-line);
  background: var(--info-bg);
  color: var(--info-text);
}

.delete-entry {
  border: 1px solid var(--danger-line);
  background: var(--danger-bg);
  color: var(--danger-text);
}

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

.metric {
  --metric: var(--brand);
  min-height: 84px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  padding: 12px;
  background: var(--metric-bg);
  color: var(--text);
}

.metric::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--metric);
}

.metric span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.metric strong {
  color: var(--text);
  font-size: 21px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.metric.cash {
  --metric: var(--cash);
}

.metric.credit {
  --metric: var(--credit);
}

.metric.card-pay {
  --metric: var(--cardpay);
}

.metric.bank {
  --metric: var(--bank);
}

.code-box {
  margin-top: 9px;
  direction: ltr;
  text-align: left;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}

.cash-check {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--item-gap);
  align-items: end;
}

.cash-check > div {
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--success-line);
  border-radius: var(--control-radius);
  background: var(--success-bg);
  color: var(--success-text);
}

.cash-check > div span {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 900;
}

.cash-check > div strong {
  font-size: 19px;
  line-height: 1.1;
}

.variance {
  margin-top: 10px;
  padding: 12px;
  border-radius: var(--control-radius);
  text-align: center;
  font-weight: 900;
}

.variance.matched {
  background: var(--success-bg);
  color: var(--success-text);
}

.variance.short {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.variance.over {
  background: var(--info-bg);
  color: var(--info-text);
}

.product-edit-row {
  grid-template-columns: minmax(0, 1fr) 86px 36px;
}

.product-edit-row input {
  font-size: 14px;
}

.product-edit-row input[type="number"] {
  height: 48px;
  font-size: 15px;
}

.product-edit-row .remove-product {
  width: 36px;
  height: 48px;
  border: 1px solid var(--danger-line);
  border-radius: var(--control-radius);
  background: var(--input-bg);
  color: var(--danger-text);
  font-weight: 900;
}

.toast {
  position: fixed;
  right: 12px;
  left: 12px;
  bottom: 16px;
  z-index: 50;
  max-width: 496px;
  margin: 0 auto;
  padding: 13px 14px;
  border-radius: var(--control-radius);
  background: var(--dark);
  color: #fff;
  font-weight: 900;
  text-align: center;
  transform: translateY(90px);
  opacity: 0;
  transition: 0.2s ease;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* Distinct interface themes */
body[data-theme="atelier"] {
  background:
    linear-gradient(90deg, rgba(35, 118, 90, 0.08) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, #eef4f3 0%, #e5ecef 100%);
  background-size: 28px 28px, auto;
}

body[data-theme="atelier"] .app-shell {
  border-inline: 1px solid rgba(198, 210, 220, 0.9);
}

body[data-theme="atelier"] .app-header {
  min-height: 72px;
  align-items: end;
  padding-top: 10px;
}

body[data-theme="atelier"] .app-header h1 {
  font-size: 21px;
}

body[data-theme="atelier"] .mode-tabs {
  padding: 10px 12px;
}

body[data-theme="atelier"] .mode-tab.active {
  border-color: rgba(35, 118, 90, 0.28);
}

body[data-theme="atelier"] .card {
  border-top: 4px solid rgba(35, 118, 90, 0.45);
}

body[data-theme="atelier"] .payment-card {
  background:
    linear-gradient(135deg, rgba(35, 118, 90, 0.08), transparent 38%),
    var(--card-bg);
}

body[data-theme="atelier"] .product-button {
  display: grid;
  align-content: center;
  min-height: 92px;
}

body[data-theme="atelier"] .metric {
  box-shadow: inset 0 -3px 0 var(--metric);
}

body[data-theme="haraj"] {
  background:
    repeating-linear-gradient(0deg, rgba(15, 143, 120, 0.06) 0 1px, transparent 1px 12px),
    #e6efec;
}

body[data-theme="haraj"] .app-shell {
  max-width: 560px;
}

body[data-theme="haraj"] .app-header {
  border-bottom: 4px solid var(--cash);
}

body[data-theme="haraj"] .cash-drawer {
  min-width: 92px;
  border-width: 2px;
}

body[data-theme="haraj"] .mode-tabs {
  gap: 0;
  padding: 0;
  background: #ffffff;
}

body[data-theme="haraj"] .mode-tab {
  min-height: 50px;
  border-radius: 0;
  border-left: 1px solid var(--line);
}

body[data-theme="haraj"] .mode-tab.active {
  color: #ffffff;
  background: var(--brand);
  border-color: var(--brand);
}

body[data-theme="haraj"] main {
  padding-top: 8px;
}

body[data-theme="haraj"] .payment-grid {
  padding: 0;
  gap: 0;
  background: transparent;
  border: 0;
}

body[data-theme="haraj"] .payment-button {
  min-height: 56px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
}

body[data-theme="haraj"] .payment-button.active {
  color: #ffffff;
  border-color: var(--accent);
  background: var(--accent);
}

body[data-theme="haraj"] .payment-button.active::after {
  display: none;
}

body[data-theme="haraj"] .product-button {
  min-height: 68px;
  border-width: 2px;
  background: #ffffff;
}

body[data-theme="haraj"] .product-button.active {
  color: #ffffff;
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: none;
}

body[data-theme="haraj"] .product-button.active span {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
}

body[data-theme="haraj"] .entry-card {
  border: 2px solid var(--brand);
}

body[data-theme="haraj"] .line-total {
  border-width: 2px;
  font-size: 18px;
}

body[data-theme="haraj"] .primary-action {
  min-height: 58px;
  background: #0f8f78;
}

body[data-theme="haraj"] .entry-row {
  border-right: 5px solid var(--brand);
}

body[data-theme="graphite"] {
  background:
    linear-gradient(90deg, rgba(22, 29, 36, 0.05) 0 1px, transparent 1px 100%),
    linear-gradient(#edf1f5, #e8edf2);
  background-size: 64px 100%, auto;
}

body[data-theme="graphite"] .app-header {
  min-height: 64px;
}

body[data-theme="graphite"] .app-header h1 {
  font-size: 18px;
}

body[data-theme="graphite"] .mode-tabs {
  padding-block: 0;
  background: #ffffff;
}

body[data-theme="graphite"] .mode-tab {
  border-radius: 12px;
  border-bottom: 3px solid transparent;
}

body[data-theme="graphite"] .mode-tab.active {
  border-color: transparent transparent var(--brand) transparent;
  background: transparent;
  box-shadow: none;
}

body[data-theme="graphite"] .card {
  border-radius: 14px;
  border-left-width: 3px;
}

body[data-theme="graphite"] .section-title {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

body[data-theme="graphite"] .payment-grid {
  border-radius: 13px;
  background: #ffffff;
}

body[data-theme="graphite"] .payment-button {
  border-radius: 11px;
}

body[data-theme="graphite"] .product-button {
  min-height: 74px;
  border-radius: 12px;
  box-shadow: none;
}

body[data-theme="graphite"] input,
body[data-theme="graphite"] textarea,
body[data-theme="graphite"] .line-total,
body[data-theme="graphite"] .primary-action,
body[data-theme="graphite"] .secondary-action,
body[data-theme="graphite"] .entry-row,
body[data-theme="graphite"] .metric {
  border-radius: 12px;
}

body[data-theme="graphite"] .entry-row {
  grid-template-columns: minmax(0, 1fr) 72px auto;
  background: #ffffff;
}

body[data-theme="graphite"] .entry-total {
  border-radius: 9px;
  border: 1px solid var(--line);
}

body[data-theme="graphite"] .metric {
  min-height: 76px;
  border-right: 4px solid var(--metric);
}

body[data-theme="graphite"] .metric::before {
  display: none;
}

body[data-theme="palm"] {
  background:
    repeating-linear-gradient(180deg, rgba(111, 143, 58, 0.10) 0 1px, transparent 1px 30px),
    #eef2e6;
}

body[data-theme="palm"] .app-shell {
  background:
    linear-gradient(90deg, rgba(182, 95, 59, 0.12) 0 4px, transparent 4px 100%),
    var(--app-shell-bg);
}

body[data-theme="palm"] .app-header {
  border-bottom: 1px solid rgba(224, 242, 185, 0.45);
}

body[data-theme="palm"] .cash-drawer {
  background: rgba(255, 255, 255, 0.12);
}

body[data-theme="palm"] .mode-tabs {
  padding: 10px;
}

body[data-theme="palm"] .mode-tab {
  background: rgba(255, 255, 255, 0.34);
}

body[data-theme="palm"] .card {
  border-color: #cbd7b9;
}

body[data-theme="palm"] .section-title h2::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 22px;
  margin-left: 8px;
  border-radius: 999px;
  vertical-align: -5px;
  background: var(--brand);
}

body[data-theme="palm"] .payment-grid {
  background:
    repeating-linear-gradient(90deg, rgba(111, 143, 58, 0.08) 0 1px, transparent 1px 18px),
    var(--control-bg);
}

body[data-theme="palm"] .product-button {
  background:
    linear-gradient(180deg, #ffffff 0%, #f7faef 100%);
}

body[data-theme="palm"] .product-button.active {
  border-right: 5px solid var(--brand);
  box-shadow: 0 6px 12px rgba(79, 109, 40, 0.10);
}

body[data-theme="palm"] .entry-row,
body[data-theme="palm"] .summary-row {
  border-right: 4px solid rgba(111, 143, 58, 0.45);
}

body[data-theme="palm"] .metric {
  background:
    linear-gradient(180deg, #ffffff 0%, #f4f8ec 100%);
}

body[data-theme="royal"] {
  background:
    linear-gradient(90deg, rgba(185, 156, 255, 0.08) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, #0b0d14 0%, #11131d 100%);
  background-size: 34px 34px, auto;
}

body[data-theme="royal"] .app-header {
  min-height: 74px;
}

body[data-theme="royal"] .app-header h1 {
  color: #ffffff;
  text-shadow: 0 1px 16px rgba(185, 156, 255, 0.28);
}

body[data-theme="royal"] .cash-drawer {
  background: linear-gradient(180deg, rgba(185, 156, 255, 0.20), rgba(46, 154, 131, 0.12));
}

body[data-theme="royal"] .mode-tabs {
  padding: 10px;
}

body[data-theme="royal"] .mode-tab {
  background: rgba(255, 255, 255, 0.03);
}

body[data-theme="royal"] .mode-tab.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(139, 107, 227, 0.60), rgba(46, 154, 131, 0.24));
}

body[data-theme="royal"] .card {
  border-color: rgba(185, 156, 255, 0.20);
}

body[data-theme="royal"] .section-title {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(185, 156, 255, 0.16);
}

body[data-theme="royal"] .payment-grid {
  background: #0f1220;
  border-color: rgba(185, 156, 255, 0.16);
}

body[data-theme="royal"] .payment-button.active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent), rgba(185, 156, 255, 0.22));
}

body[data-theme="royal"] .payment-button.active::after {
  background: rgba(255, 255, 255, 0.62);
}

body[data-theme="royal"] .product-button.active {
  background: linear-gradient(135deg, rgba(139, 107, 227, 0.34), rgba(46, 154, 131, 0.16));
}

body[data-theme="royal"] .line-total {
  background: linear-gradient(135deg, rgba(46, 154, 131, 0.20), rgba(185, 156, 255, 0.12));
}

body[data-theme="royal"] .primary-action {
  background: linear-gradient(135deg, #8b6be3, #2e9a83);
}

body[data-theme="royal"] .metric {
  border-color: rgba(185, 156, 255, 0.20);
}

body[data-theme="royal"] .metric::before {
  height: 100%;
  width: 4px;
  left: auto;
}

body[data-theme="royal"] .toast {
  border: 1px solid rgba(185, 156, 255, 0.24);
}

body[data-theme="legend"] {
  background:
    linear-gradient(90deg, rgba(0, 168, 120, 0.08) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(242, 184, 75, 0.07) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, #030706 0%, #07110f 100%);
  background-size: 34px 34px, 34px 34px, auto;
}

body[data-theme="legend"] .app-shell {
  border-inline: 1px solid rgba(242, 184, 75, 0.15);
}

body[data-theme="legend"] .app-header {
  min-height: 76px;
  align-items: end;
  padding-top: 10px;
  border-bottom: 2px solid rgba(242, 184, 75, 0.34);
}

body[data-theme="legend"] .app-header h1 {
  font-size: 21px;
  color: #fff8df;
  text-shadow: 0 0 18px rgba(0, 168, 120, 0.38);
}

body[data-theme="legend"] .app-header p {
  color: #dce9d8;
}

body[data-theme="legend"] .cash-drawer {
  min-width: 96px;
  border-width: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 168, 120, 0.16);
}

body[data-theme="legend"] .mode-tabs {
  padding: 9px;
  border-bottom-color: rgba(242, 184, 75, 0.18);
}

body[data-theme="legend"] .mode-tab {
  min-height: 46px;
  border-color: rgba(242, 184, 75, 0.12);
  background: rgba(255, 248, 223, 0.03);
}

body[data-theme="legend"] .mode-tab.active {
  color: #fff8df;
  border-color: rgba(242, 184, 75, 0.42);
  background:
    linear-gradient(135deg, rgba(0, 168, 120, 0.42), rgba(242, 184, 75, 0.18));
}

body[data-theme="legend"] .card {
  border-color: rgba(242, 184, 75, 0.18);
  background:
    linear-gradient(135deg, rgba(0, 168, 120, 0.08), transparent 44%),
    var(--card-bg);
}

body[data-theme="legend"] .section-title {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(242, 184, 75, 0.16);
}

body[data-theme="legend"] .section-title h2::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 8px;
  border: 2px solid var(--credit);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(0, 168, 120, 0.16);
}

body[data-theme="legend"] .payment-grid {
  border-color: rgba(242, 184, 75, 0.20);
  background:
    linear-gradient(90deg, rgba(242, 184, 75, 0.10) 0 1px, transparent 1px 16px),
    #07110f;
}

body[data-theme="legend"] .payment-button {
  border: 1px solid rgba(242, 184, 75, 0.12);
  background: rgba(255, 248, 223, 0.03);
}

body[data-theme="legend"] .payment-button.active {
  color: #07110f;
  background: linear-gradient(135deg, var(--accent), #f2b84b);
  box-shadow: 0 10px 20px rgba(0, 168, 120, 0.18);
}

body[data-theme="legend"] .payment-button.active::after {
  background: rgba(7, 17, 15, 0.42);
}

body[data-theme="legend"] .product-button {
  min-height: 92px;
  border-color: rgba(242, 184, 75, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 248, 223, 0.04) 0%, rgba(0, 168, 120, 0.05) 100%),
    #0b1714;
}

body[data-theme="legend"] .product-button.active {
  border-color: var(--credit);
  background:
    linear-gradient(135deg, rgba(0, 168, 120, 0.28), rgba(242, 184, 75, 0.14)),
    #102a2a;
  box-shadow: inset -5px 0 0 var(--credit), 0 12px 22px rgba(0, 0, 0, 0.22);
}

body[data-theme="legend"] input,
body[data-theme="legend"] textarea {
  border-color: rgba(242, 184, 75, 0.18);
}

body[data-theme="legend"] .line-total {
  border-width: 2px;
  background:
    linear-gradient(90deg, rgba(0, 168, 120, 0.22), rgba(242, 184, 75, 0.10)),
    #081411;
}

body[data-theme="legend"] .line-total strong {
  color: #ffe3a1;
}

body[data-theme="legend"] .primary-action {
  min-height: 58px;
  background: linear-gradient(135deg, #00a878, #f2b84b);
  color: #07110f;
  box-shadow: var(--primary-shadow);
  animation: legendGlow 2.4s ease-in-out infinite;
}

body[data-theme="legend"] .secondary-action,
body[data-theme="legend"] .file-picker {
  border-color: rgba(242, 184, 75, 0.20);
}

body[data-theme="legend"] .entry-row,
body[data-theme="legend"] .summary-row,
body[data-theme="legend"] .product-edit-row {
  border-color: rgba(242, 184, 75, 0.16);
  box-shadow: inset -4px 0 0 rgba(0, 168, 120, 0.36);
}

body[data-theme="legend"] .entry-total {
  color: #ffe3a1;
  border: 1px solid rgba(242, 184, 75, 0.20);
}

body[data-theme="legend"] .metric {
  border-color: rgba(242, 184, 75, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 248, 223, 0.04), rgba(0, 168, 120, 0.06)),
    var(--metric-bg);
}

body[data-theme="legend"] .metric::before {
  height: 5px;
  background: linear-gradient(90deg, var(--metric), #f2b84b);
}

body[data-theme="legend"] .toast {
  border: 1px solid rgba(242, 184, 75, 0.28);
  background: #07110f;
}

body[data-theme="legend"] .theme-option.active {
  border-color: var(--credit);
  box-shadow: inset -4px 0 0 var(--credit), 0 10px 22px rgba(0, 0, 0, 0.20);
}

@keyframes legendGlow {
  0%,
  100% {
    filter: saturate(1);
    box-shadow: 0 12px 24px rgba(0, 168, 120, 0.18);
  }

  50% {
    filter: saturate(1.16);
    box-shadow: 0 16px 30px rgba(242, 184, 75, 0.18);
  }
}

body[data-theme="atelier"] .theme-preview[data-preview-theme="atelier"],
body[data-theme="haraj"] .theme-preview[data-preview-theme="haraj"],
body[data-theme="graphite"] .theme-preview[data-preview-theme="graphite"],
body[data-theme="palm"] .theme-preview[data-preview-theme="palm"],
body[data-theme="royal"] .theme-preview[data-preview-theme="royal"],
body[data-theme="legend"] .theme-preview[data-preview-theme="legend"] {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

body[data-theme="legend"] .theme-preview[data-preview-theme="legend"] {
  outline-color: var(--credit);
}

/* Premium pass: every theme gets the same design effort as the legendary theme */
body[data-theme="atelier"] {
  background:
    radial-gradient(circle at 16% 0%, rgba(199, 122, 24, 0.16), transparent 32%),
    radial-gradient(circle at 88% 12%, rgba(35, 118, 90, 0.18), transparent 30%),
    linear-gradient(90deg, rgba(35, 118, 90, 0.08) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, #eef4f3 0%, #dfe8ec 100%);
  background-size: auto, auto, 32px 32px, auto;
}

body[data-theme="atelier"] .app-shell {
  border-inline: 1px solid rgba(199, 122, 24, 0.22);
  box-shadow: 0 0 0 1px rgba(35, 118, 90, 0.08), 0 24px 56px rgba(27, 39, 49, 0.12);
}

body[data-theme="atelier"] .app-header {
  min-height: 74px;
  background:
    linear-gradient(90deg, rgba(199, 122, 24, 0.22) 0 2px, transparent 2px 18px),
    linear-gradient(135deg, #22303a 0%, #1c362e 54%, #12241f 100%);
  border-bottom: 2px solid rgba(199, 122, 24, 0.30);
  box-shadow: 0 18px 34px rgba(34, 48, 58, 0.18);
}

body[data-theme="atelier"] .cash-drawer {
  border-width: 2px;
  background: linear-gradient(135deg, rgba(35, 118, 90, 0.24), rgba(199, 122, 24, 0.16));
}

body[data-theme="atelier"] .mode-tab {
  background: rgba(255, 255, 255, 0.42);
}

body[data-theme="atelier"] .mode-tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--brand), #c77a18);
  box-shadow: 0 10px 20px rgba(35, 118, 90, 0.14);
}

body[data-theme="atelier"] .card {
  border-color: rgba(199, 122, 24, 0.22);
  background:
    linear-gradient(135deg, rgba(199, 122, 24, 0.08), transparent 42%),
    #ffffff;
  box-shadow: 0 10px 24px rgba(34, 48, 58, 0.08);
}

body[data-theme="atelier"] .section-title {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(199, 122, 24, 0.16);
}

body[data-theme="atelier"] .payment-grid {
  background:
    linear-gradient(90deg, rgba(199, 122, 24, 0.10) 0 1px, transparent 1px 18px),
    #edf3f4;
}

body[data-theme="atelier"] .payment-button.active,
body[data-theme="atelier"] .primary-action {
  color: #fff;
  background: linear-gradient(135deg, var(--brand), #c77a18);
}

body[data-theme="atelier"] .payment-button.active::after {
  background: rgba(255, 255, 255, 0.60);
}

body[data-theme="atelier"] .product-button {
  border-color: rgba(199, 122, 24, 0.16);
  background: linear-gradient(180deg, #ffffff 0%, #f2f7f4 100%);
}

body[data-theme="atelier"] .product-button.active {
  border-color: #c77a18;
  background:
    linear-gradient(135deg, rgba(35, 118, 90, 0.16), rgba(199, 122, 24, 0.12)),
    #ffffff;
  box-shadow: inset -5px 0 0 #c77a18, 0 12px 22px rgba(35, 118, 90, 0.10);
}

body[data-theme="atelier"] .line-total,
body[data-theme="atelier"] .metric {
  background: linear-gradient(135deg, rgba(35, 118, 90, 0.09), rgba(199, 122, 24, 0.08)), #ffffff;
}

body[data-theme="atelier"] .entry-row,
body[data-theme="atelier"] .summary-row {
  border-right: 4px solid rgba(199, 122, 24, 0.42);
}

body[data-theme="haraj"] {
  background:
    radial-gradient(circle at 12% 6%, rgba(217, 119, 6, 0.18), transparent 28%),
    linear-gradient(90deg, rgba(15, 143, 120, 0.12) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(0deg, rgba(15, 143, 120, 0.08) 0 1px, transparent 1px 13px),
    #dfeae6;
}

body[data-theme="haraj"] .app-header {
  min-height: 68px;
  background:
    linear-gradient(90deg, rgba(217, 119, 6, 0.28) 0 4px, transparent 4px 18px),
    linear-gradient(135deg, #10221d 0%, #0f5f52 70%, #12221e 100%);
  border-bottom: 4px solid #d97706;
}

body[data-theme="haraj"] .cash-drawer {
  background: linear-gradient(135deg, rgba(20, 165, 111, 0.32), rgba(217, 119, 6, 0.18));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

body[data-theme="haraj"] .mode-tabs {
  gap: 5px;
  padding: 7px;
  background: rgba(18, 34, 30, 0.94);
}

body[data-theme="haraj"] .mode-tab {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #d7e8e2;
  background: rgba(255, 255, 255, 0.04);
}

body[data-theme="haraj"] .mode-tab.active {
  color: #ffffff;
  background: linear-gradient(135deg, #0f8f78, #d97706);
  box-shadow: 0 10px 20px rgba(15, 143, 120, 0.22);
}

body[data-theme="haraj"] .card {
  border: 2px solid rgba(15, 143, 120, 0.20);
  background:
    linear-gradient(135deg, rgba(15, 143, 120, 0.08), rgba(217, 119, 6, 0.05)),
    #ffffff;
  box-shadow: 0 8px 18px rgba(18, 34, 30, 0.08);
}

body[data-theme="haraj"] .payment-grid {
  gap: 5px;
}

body[data-theme="haraj"] .payment-button {
  background: linear-gradient(180deg, #ffffff 0%, #f1f8f5 100%);
}

body[data-theme="haraj"] .payment-button.active,
body[data-theme="haraj"] .primary-action {
  color: #ffffff;
  box-shadow: 0 10px 18px rgba(15, 143, 120, 0.22);
}

body[data-theme="haraj"] .payment-button.active {
  background: linear-gradient(135deg, var(--accent), #d97706);
}

body[data-theme="haraj"] .primary-action {
  background: linear-gradient(135deg, var(--brand), #d97706);
}

body[data-theme="haraj"] .product-button.active {
  background: linear-gradient(135deg, #0f8f78, #d97706);
}

body[data-theme="haraj"] .line-total {
  color: #06382f;
  background: linear-gradient(135deg, rgba(20, 165, 111, 0.16), rgba(217, 119, 6, 0.12)), #ffffff;
}

body[data-theme="haraj"] .metric {
  border-width: 2px;
  background: linear-gradient(180deg, #ffffff 0%, #f0faf6 100%);
}

body[data-theme="graphite"] {
  background:
    radial-gradient(circle at 88% 2%, rgba(183, 121, 31, 0.16), transparent 24%),
    linear-gradient(90deg, rgba(79, 127, 159, 0.10) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, #eef3f7 0%, #dfe7ed 100%);
  background-size: auto, 48px 100%, auto;
}

body[data-theme="graphite"] .app-shell {
  border-inline: 1px solid rgba(28, 35, 43, 0.12);
  box-shadow: 0 20px 42px rgba(28, 35, 43, 0.14);
}

body[data-theme="graphite"] .app-header {
  min-height: 68px;
  background:
    linear-gradient(90deg, rgba(183, 121, 31, 0.24) 0 3px, transparent 3px 18px),
    linear-gradient(135deg, #111820 0%, #263747 100%);
  border-bottom: 3px solid #4f7f9f;
}

body[data-theme="graphite"] .mode-tabs {
  background: #ffffff;
  border-bottom: 2px solid #c1ccd6;
}

body[data-theme="graphite"] .mode-tab.active {
  color: #111820;
  background: linear-gradient(180deg, #ffffff, #edf4f8);
  border-bottom-color: #b7791f;
}

body[data-theme="graphite"] .card {
  border: 1px solid #b8c5cf;
  border-left: 4px solid #4f7f9f;
  background:
    linear-gradient(90deg, rgba(79, 127, 159, 0.07), transparent 35%),
    #ffffff;
  box-shadow: 0 8px 0 rgba(28, 35, 43, 0.03);
}

body[data-theme="graphite"] .section-title {
  background: linear-gradient(90deg, rgba(79, 127, 159, 0.08), transparent 55%);
  margin: -4px -4px var(--card-margin);
  padding: 8px 8px 9px;
}

body[data-theme="graphite"] .payment-button.active {
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(28, 35, 43, 0.14);
}

body[data-theme="graphite"] .payment-button.cash.active {
  background: linear-gradient(135deg, #1f7f60, #2f9b72);
}

body[data-theme="graphite"] .payment-button.credit.active {
  background: linear-gradient(135deg, #80521a, #b7791f);
}

body[data-theme="graphite"] .payment-button.card-pay.active {
  background: linear-gradient(135deg, #315d97, #3e6fba);
}

body[data-theme="graphite"] .payment-button.bank.active {
  background: linear-gradient(135deg, #584184, #7b5eb1);
}

body[data-theme="graphite"] .primary-action {
  color: #ffffff;
  background: linear-gradient(135deg, #1f3344, #4f7f9f);
  box-shadow: 0 10px 20px rgba(79, 127, 159, 0.18);
}

body[data-theme="graphite"] .product-button.active {
  background: linear-gradient(90deg, rgba(79, 127, 159, 0.18), rgba(54, 93, 119, 0.08)), #ffffff;
  box-shadow: inset -5px 0 0 #4f7f9f;
}

body[data-theme="graphite"] .metric {
  background: linear-gradient(90deg, rgba(79, 127, 159, 0.08), #ffffff);
}

body[data-theme="graphite"] .line-total {
  background: linear-gradient(90deg, rgba(47, 155, 114, 0.14), rgba(183, 121, 31, 0.10)), #ffffff;
}

body[data-theme="palm"] {
  background:
    radial-gradient(circle at 14% 8%, rgba(182, 95, 59, 0.17), transparent 28%),
    repeating-linear-gradient(180deg, rgba(111, 143, 58, 0.13) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, #f0f3e8 0%, #e1ead6 100%);
}

body[data-theme="palm"] .app-shell {
  border-inline: 1px solid rgba(111, 143, 58, 0.20);
  box-shadow: 0 18px 40px rgba(58, 73, 40, 0.14);
}

body[data-theme="palm"] .app-header {
  min-height: 72px;
  background:
    linear-gradient(90deg, rgba(224, 242, 185, 0.16) 0 2px, transparent 2px 22px),
    linear-gradient(135deg, #26352a 0%, #4f6d28 100%);
  border-bottom: 3px solid #b65f3b;
}

body[data-theme="palm"] .mode-tab.active {
  color: #26352a;
  background: linear-gradient(135deg, #e6f1d2, #ffffff);
  border-color: #b65f3b;
}

body[data-theme="palm"] .card {
  border: 1px solid rgba(111, 143, 58, 0.22);
  background:
    linear-gradient(90deg, rgba(182, 95, 59, 0.08) 0 4px, transparent 4px 100%),
    repeating-linear-gradient(180deg, rgba(111, 143, 58, 0.08) 0 1px, transparent 1px 28px),
    #fffdf7;
  box-shadow: 0 10px 20px rgba(79, 109, 40, 0.08);
}

body[data-theme="palm"] .payment-button.active,
body[data-theme="palm"] .primary-action {
  color: #ffffff;
  background: linear-gradient(135deg, #6f8f3a, #b65f3b);
}

body[data-theme="palm"] .product-button {
  border-color: rgba(111, 143, 58, 0.20);
  background:
    linear-gradient(180deg, #fffdf7 0%, #f4faed 100%);
}

body[data-theme="palm"] .line-total,
body[data-theme="palm"] .metric {
  background:
    linear-gradient(135deg, rgba(111, 143, 58, 0.12), rgba(182, 95, 59, 0.08)),
    #fffdf7;
}

body[data-theme="royal"] {
  background:
    radial-gradient(circle at 15% 4%, rgba(185, 156, 255, 0.20), transparent 28%),
    radial-gradient(circle at 90% 16%, rgba(46, 154, 131, 0.18), transparent 30%),
    linear-gradient(90deg, rgba(185, 156, 255, 0.08) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, #080a11 0%, #11131d 100%);
  background-size: auto, auto, 34px 34px, auto;
}

body[data-theme="royal"] .app-header {
  min-height: 76px;
  background:
    linear-gradient(90deg, rgba(185, 156, 255, 0.18) 0 2px, transparent 2px 18px),
    linear-gradient(135deg, #0c0e17 0%, #271f43 56%, #102920 100%);
  border-bottom: 2px solid rgba(185, 156, 255, 0.34);
}

body[data-theme="royal"] .cash-drawer {
  border-width: 2px;
  box-shadow: 0 0 20px rgba(185, 156, 255, 0.12);
}

body[data-theme="royal"] .card {
  border-color: rgba(185, 156, 255, 0.24);
  background:
    linear-gradient(135deg, rgba(185, 156, 255, 0.08), rgba(46, 154, 131, 0.05)),
    linear-gradient(180deg, #1a1e2e 0%, #151827 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

body[data-theme="royal"] .product-button,
body[data-theme="royal"] .payment-grid {
  border-color: rgba(185, 156, 255, 0.20);
}

body[data-theme="royal"] .payment-button.active,
body[data-theme="royal"] .primary-action {
  background: linear-gradient(135deg, #8b6be3, #2e9a83);
  box-shadow: 0 14px 26px rgba(139, 107, 227, 0.22);
}

body[data-theme="royal"] .product-button.active {
  border-color: rgba(185, 156, 255, 0.55);
  box-shadow: inset -5px 0 0 #8b6be3, 0 12px 24px rgba(139, 107, 227, 0.16);
}

body[data-theme="royal"] .line-total,
body[data-theme="royal"] .metric {
  background: linear-gradient(135deg, rgba(46, 154, 131, 0.18), rgba(185, 156, 255, 0.12)), #202438;
}

.theme-preview[data-preview-theme="atelier"] {
  background:
    radial-gradient(circle at 84% 10%, rgba(199, 122, 24, 0.28), transparent 36%),
    linear-gradient(180deg, #edf3f5 0%, #dfe8ec 100%);
  border-color: rgba(199, 122, 24, 0.38);
  box-shadow: inset 0 3px 0 rgba(199, 122, 24, 0.44);
}

.theme-preview[data-preview-theme="atelier"] .theme-preview-header i:first-child,
.theme-preview[data-preview-theme="atelier"] .theme-preview-tabs i:first-child {
  background: linear-gradient(90deg, #23765a, #c77a18);
}

.theme-preview[data-preview-theme="haraj"] {
  background:
    linear-gradient(90deg, rgba(217, 119, 6, 0.24) 0 3px, transparent 3px 14px),
    #eef4f2;
  border-color: rgba(217, 119, 6, 0.48);
}

.theme-preview[data-preview-theme="haraj"] .theme-preview-header i:first-child,
.theme-preview[data-preview-theme="haraj"] .theme-preview-tabs i:first-child,
.theme-preview[data-preview-theme="haraj"] .theme-preview-card i:first-child {
  background: linear-gradient(135deg, #0f8f78, #d97706);
}

.theme-preview[data-preview-theme="graphite"] {
  background:
    linear-gradient(90deg, rgba(79, 127, 159, 0.16) 0 1px, transparent 1px 16px),
    #f1f4f7;
  border-color: #b8c5cf;
}

.theme-preview[data-preview-theme="graphite"] .theme-preview-header i:first-child,
.theme-preview[data-preview-theme="graphite"] .theme-preview-tabs i:first-child {
  background: linear-gradient(90deg, #111820, #4f7f9f);
}

.theme-preview[data-preview-theme="palm"] {
  background:
    radial-gradient(circle at 85% 12%, rgba(182, 95, 59, 0.24), transparent 34%),
    repeating-linear-gradient(180deg, rgba(111, 143, 58, 0.13) 0 1px, transparent 1px 13px),
    var(--preview-bg);
  border-color: rgba(111, 143, 58, 0.40);
}

.theme-preview[data-preview-theme="palm"] .theme-preview-header i:first-child,
.theme-preview[data-preview-theme="palm"] .theme-preview-tabs i:first-child {
  background: linear-gradient(90deg, #6f8f3a, #b65f3b);
}

.theme-preview[data-preview-theme="royal"] {
  background:
    radial-gradient(circle at 82% 12%, rgba(185, 156, 255, 0.28), transparent 36%),
    linear-gradient(180deg, #11131d 0%, #0c0e17 100%);
  border-color: rgba(185, 156, 255, 0.46);
  box-shadow: inset 0 0 0 1px rgba(46, 154, 131, 0.16);
}

/* Final nav identity: the selected tab has a different palette in every theme. */
body[data-theme="graphite"] .mode-tab.active {
  color: #ffffff;
  border-color: #3b627d;
  background: linear-gradient(135deg, #1c2c38, #4f7f9f);
  box-shadow: 0 10px 20px rgba(79, 127, 159, 0.18);
}

body[data-theme="atelier"] .mode-tab.active {
  color: #ffffff;
  border-color: #9c7431;
  background: linear-gradient(135deg, #2d2630, #c08a32);
  box-shadow: 0 10px 20px rgba(192, 138, 50, 0.18);
}

body[data-theme="haraj"] .mode-tab.active {
  color: #ffffff;
  border-color: #c85f1f;
  background: linear-gradient(135deg, #0d6f64, #e06b24);
  box-shadow: 0 10px 20px rgba(224, 107, 36, 0.20);
}

body[data-theme="palm"] .mode-tab.active {
  color: #24321d;
  border-color: #789749;
  background: linear-gradient(135deg, #e8f2d8, #a9be73);
  box-shadow: 0 10px 18px rgba(111, 143, 58, 0.16);
}

body[data-theme="royal"] .mode-tab.active {
  color: #ffffff;
  border-color: rgba(185, 156, 255, 0.58);
  background: linear-gradient(135deg, #7657ce, #2b8c88);
  box-shadow: 0 12px 24px rgba(118, 87, 206, 0.24);
}

body[data-theme="legend"] .mode-tab.active {
  color: #fff8df;
  border-color: rgba(242, 184, 75, 0.62);
  background: linear-gradient(135deg, #0a201b, #c6902e);
  box-shadow: 0 12px 24px rgba(242, 184, 75, 0.18);
}

/* Final button palette: payment colors stay readable and distinct in every theme. */
body[data-theme="graphite"] {
  --header-sticky-offset: 68px;
  --pay-cash-a: #1f7f60;
  --pay-cash-b: #2f9b72;
  --pay-credit-a: #80521a;
  --pay-credit-b: #b7791f;
  --pay-card-a: #315d97;
  --pay-card-b: #3e6fba;
  --pay-bank-a: #584184;
  --pay-bank-b: #7b5eb1;
  --action-a: #1f3344;
  --action-b: #4f7f9f;
  --action-text: #ffffff;
  --action-shadow-final: 0 10px 20px rgba(79, 127, 159, 0.18);
}

body[data-theme="atelier"] {
  --header-sticky-offset: 74px;
  --pay-cash-a: #1f7a5c;
  --pay-cash-b: #2fa06e;
  --pay-credit-a: #935514;
  --pay-credit-b: #c77a18;
  --pay-card-a: #285f9f;
  --pay-card-b: #397dcc;
  --pay-bank-a: #6046a1;
  --pay-bank-b: #7d61c7;
  --action-a: #22303a;
  --action-b: #23765a;
  --action-text: #ffffff;
  --action-shadow-final: 0 10px 20px rgba(35, 118, 90, 0.16);
}

body[data-theme="haraj"] {
  --header-sticky-offset: 68px;
  --pay-cash-a: #0d7d61;
  --pay-cash-b: #14a56f;
  --pay-credit-a: #a45114;
  --pay-credit-b: #d97706;
  --pay-card-a: #245da6;
  --pay-card-b: #327dd4;
  --pay-bank-a: #6145a8;
  --pay-bank-b: #8064d5;
  --action-a: #0b5f52;
  --action-b: #0f8f78;
  --action-text: #ffffff;
  --action-shadow-final: 0 10px 20px rgba(15, 143, 120, 0.20);
}

body[data-theme="palm"] {
  --header-sticky-offset: 72px;
  --pay-cash-a: #2a7a4a;
  --pay-cash-b: #3d9f61;
  --pay-credit-a: #92543d;
  --pay-credit-b: #b65f3b;
  --pay-card-a: #315f9d;
  --pay-card-b: #4e7fbd;
  --pay-bank-a: #6a4b9f;
  --pay-bank-b: #8b6cc6;
  --action-a: #4f6d28;
  --action-b: #6f8f3a;
  --action-text: #ffffff;
  --action-shadow-final: 0 10px 20px rgba(111, 143, 58, 0.18);
}

body[data-theme="royal"] {
  --header-sticky-offset: 76px;
  --pay-cash-a: #21846f;
  --pay-cash-b: #2e9a83;
  --pay-credit-a: #a0712b;
  --pay-credit-b: #c0812c;
  --pay-card-a: #4f62c8;
  --pay-card-b: #6f7fe8;
  --pay-bank-a: #7657ce;
  --pay-bank-b: #9a7af1;
  --action-a: #7657ce;
  --action-b: #2b8c88;
  --action-text: #ffffff;
  --action-shadow-final: 0 14px 26px rgba(118, 87, 206, 0.24);
}

body[data-theme="legend"] {
  --header-sticky-offset: 76px;
  --pay-cash-a: #007c61;
  --pay-cash-b: #00a878;
  --pay-credit-a: #b87923;
  --pay-credit-b: #f2b84b;
  --pay-card-a: #2470bb;
  --pay-card-b: #4f9ce8;
  --pay-bank-a: #6950c6;
  --pay-bank-b: #9677f0;
  --action-a: #00a878;
  --action-b: #f2b84b;
  --action-text: #07110f;
  --action-shadow-final: 0 12px 28px rgba(242, 184, 75, 0.18);
}

body[data-theme] .payment-button.active {
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
  box-shadow: 0 10px 18px rgba(17, 24, 32, 0.14);
}

body[data-theme] .payment-button.cash.active {
  background: linear-gradient(135deg, var(--pay-cash-a), var(--pay-cash-b));
}

body[data-theme] .payment-button.credit.active {
  background: linear-gradient(135deg, var(--pay-credit-a), var(--pay-credit-b));
}

body[data-theme] .payment-button.card-pay.active {
  background: linear-gradient(135deg, var(--pay-card-a), var(--pay-card-b));
}

body[data-theme] .payment-button.bank.active {
  background: linear-gradient(135deg, var(--pay-bank-a), var(--pay-bank-b));
}

body[data-theme] .payment-button.active::after {
  background: rgba(255, 255, 255, 0.62);
}

body[data-theme] .primary-action {
  color: var(--action-text);
  background: linear-gradient(135deg, var(--action-a), var(--action-b));
  box-shadow: var(--action-shadow-final);
}

@media (prefers-reduced-motion: reduce) {
  body[data-theme="legend"] .primary-action {
    animation: none;
  }
}

@media (max-width: 380px) {
  .app-header {
    gap: 6px;
    padding-inline: 8px;
  }

  .app-header h1 {
    font-size: 17px;
  }

  .app-header p {
    max-width: 150px;
  }

  .cash-drawer {
    min-width: 78px;
    padding: 5px 6px;
  }

  .payment-button {
    font-size: 14px;
  }
}

@media (min-width: 760px) {
  body {
    background: var(--desktop-bg);
  }

  .app-shell {
    min-height: calc(100vh - 28px);
    margin: 14px auto;
    border-radius: 12px;
    overflow: hidden;
  }
}