@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  font-family:Manrope,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#20342e;
  background:#f6f7f3;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  min-width:320px
}
button,input,select,textarea {
  font:inherit
}
button {
  cursor:pointer
}
button:disabled {
  cursor:not-allowed;
  opacity:.52
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  letter-spacing:-.045em
}
h1 {
  font-size:clamp(2rem,3vw,2.7rem);
  line-height:1.1;
  margin-bottom:10px
}
h2 {
  font-size:1.28rem;
  line-height:1.2;
  margin-bottom:0
}
p {
  line-height:1.55
}
small {
  font-size:.76rem
}
input,select,textarea {
  width:100%;
  min-height:42px;
  border:1px solid #dce4dd;
  border-radius:10px;
  background:#fff;
  color:#20342e;
  padding:9px 12px;
  outline:none
}
input:focus,select:focus,textarea:focus {
  border-color:#66997e;
  box-shadow:0 0 0 3px #66997e22
}
textarea {
  min-height:90px;
  resize:vertical
}
.app-shell {
  display:flex;
  min-height:100vh
}
.sidebar {
  width:244px;
  flex:0 0 244px;
  background:#182d27;
  color:#e9f0e8;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding:25px 16px 20px;
  position:sticky;
  top:0;
  height:100vh
}
.brand {
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 11px 28px
}
.brand-mark {
  width:39px;
  height:39px;
  border-radius:12px;
  background:#e5ede5;
  color:#203b30;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:20px;
  letter-spacing:-3px
}
.brand-mark span {
  color:var(--accent)
}
.brand strong {
  display:block;
  font-size:15px;
  letter-spacing:-.03em
}
.brand small {
  display:block;
  color:#92a69a;
  font-weight:700;
  letter-spacing:.15em;
  font-size:8px;
  margin-top:3px
}
.workspace-switch {
  display:flex;
  gap:9px;
  align-items:center;
  background:#294139;
  border:1px solid #385149;
  border-radius:12px;
  padding:11px 10px;
  margin-bottom:28px;
  min-width:0
}
.workspace-avatar {
  height:32px;
  width:32px;
  border-radius:9px;
  background:var(--accent);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:800
}
.workspace-switch>div:nth-child(2) {
  min-width:0;
  flex:1
}
.workspace-switch strong,.workspace-switch small {
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.workspace-switch strong {
  font-size:12px
}
.workspace-switch small {
  font-size:10px;
  color:#acbfb0;
  margin-top:2px
}
.workspace-switch>span {
  color:#95a99e
}
.nav-label {
  padding:0 14px;
  color:#7e998a;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  margin-bottom:10px
}
.nav {
  display:grid;
  gap:3px
}
.nav-item {
  border:0;
  background:transparent;
  color:#aebfb4;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  height:40px;
  border-radius:10px;
  text-align:left;
  padding:0 13px;
  font-size:12.5px;
  font-weight:600
}
.nav-item:hover {
  background:#243b33;
  color:#fff
}
.nav-item.active {
  background:#e8eee8;
  color:#244333;
  font-weight:800
}
.nav-icon {
  width:20px;
  font-size:19px;
  line-height:1;
  text-align:center;
  font-weight:400
}
.sidebar-bottom {
  margin-top:auto
}
.demo-card {
  border:1px solid #426051;
  background:linear-gradient(145deg,#304f3f,#203b30);
  border-radius:13px;
  padding:15px
}
.demo-pulse {
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#9fdb92;
  margin-right:7px;
  box-shadow:0 0 0 4px #9fdb9220
}
.demo-card strong {
  font-size:12px
}
.demo-card p {
  font-size:11px;
  color:#bacbbd;
  margin:10px 0 14px
}
.demo-card button {
  border:0;
  background:none;
  color:#e8f0e8;
  padding:0;
  font-size:11px;
  font-weight:800
}
.demo-card button span {
  margin-left:7px
}
.sidebar-foot {
  font-size:10px;
  line-height:1.7;
  color:#8da697;
  padding:20px 9px 0
}
.sidebar-foot span {
  color:#658371
}
.main-column {
  min-width:0;
  flex:1
}
.topbar {
  height:70px;
  background:#fff;
  border-bottom:1px solid #e8ece7;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 36px
}
.breadcrumb {
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  color:#8c9a90
}
.breadcrumb strong {
  color:#244334;
  margin-left:7px
}
.top-actions {
  display:flex;
  align-items:center;
  gap:21px
}
.live-badge {
  font-size:11px;
  color:#4f8363;
  font-weight:700
}
.live-badge i {
  display:inline-block;
  width:7px;
  height:7px;
  background:#72b68d;
  border-radius:50%;
  margin-right:6px
}
.role-select {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:#819185
}
.role-select select {
  border:0;
  background:transparent;
  padding:0 14px 0 0;
  min-height:30px;
  width:auto;
  font-size:11px;
  font-weight:800;
  color:#254738
}
.avatar {
  width:31px;
  height:31px;
  border-radius:50%;
  background:#e9ede5;
  display:grid;
  place-items:center;
  color:#457657;
  font-size:10px;
  font-weight:900
}
.mobile-brand {
  display:none
}
.content {
  max-width:1600px;
  margin:auto;
  padding:32px 36px 50px
}
.page-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:25px
}
.page-head p {
  color:#829087;
  font-size:13px;
  margin:0
}
.eyebrow {
  display:block;
  color:#7a9b81;
  letter-spacing:.16em;
  font-size:10px;
  font-weight:900;
  margin-bottom:8px
}
.head-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end
}
.button {
  border:1px solid transparent;
  border-radius:9px;
  min-height:40px;
  padding:0 17px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap
}
.button.primary {
  background:var(--accent);
  color:#fff
}
.button.primary:hover {
  filter:brightness(.9)
}
.button.secondary {
  background:#fff;
  color:#2a4b39;
  border-color:#d9e3dc
}
.button.secondary:hover {
  background:#edf4ed
}
.button.wide {
  width:100%;
  min-height:46px
}
.button.small {
  min-height:34px;
  padding:0 12px;
  font-size:11px
}
.button.danger-button {
  background:#a64242;
  color:#fff
}
.text-link {
  border:0;
  background:none;
  color:#46785a;
  font-weight:800;
  font-size:11px;
  padding:7px 0
}
.text-link.danger {
  color:#ad6056;
  margin-top:15px
}
.hero-panel {
  display:flex;
  min-height:254px;
  overflow:hidden;
  position:relative;
  background:#234538;
  color:#fff;
  border-radius:18px;
  margin-bottom:18px
}
.hero-panel>div:first-child {
  padding:28px 34px;
  width:55%;
  z-index:1
}
.hero-tag {
  display:inline-block;
  font-size:9px;
  letter-spacing:.17em;
  font-weight:900;
  color:#a6c6ae;
  background:#ffffff14;
  border:1px solid #ffffff25;
  padding:7px 9px;
  border-radius:5px;
  margin-bottom:17px
}
.hero-panel h2 {
  font-size:clamp(1.9rem,3.2vw,2.7rem);
  line-height:1.08;
  margin-bottom:10px
}
.hero-panel h2 em {
  font-style:normal;
  color:#c4d9c1
}
.hero-panel p {
  font-size:12px;
  max-width:370px;
  color:#c2d0c7;
  margin-bottom:16px
}
.hero-panel button {
  border:0;
  background:none;
  color:#f6e7cf;
  padding:0;
  font-size:11px;
  font-weight:800
}
.hero-panel button span {
  margin-left:6px
}
.hero-art {
  position:absolute;
  inset:0 0 0 47%;
  overflow:hidden;
  background:radial-gradient(circle at 55% 50%,#48735a77,transparent 55%)
}
.art-ring {
  position:absolute;
  border:1px solid #ffffff20;
  border-radius:50%;
  width:360px;
  height:360px;
  right:15%;
  top:-18%
}
.ring-two {
  width:260px;
  height:260px;
  right:23%;
  top:1%
}
.art-card {
  position:absolute;
  background:#fff;
  color:#214131;
  box-shadow:0 18px 40px #102c2330
}
.art-a {
  width:205px;
  right:15%;
  top:40px;
  padding:17px;
  border-radius:13px;
  transform:rotate(5deg)
}
.art-a small,.art-a strong,.art-a span {
  display:block
}
.art-a small {
  font-size:9px;
  font-weight:900;
  letter-spacing:.1em;
  color:#789b80
}
.art-a strong {
  font-size:23px;
  margin:8px 0
}
.art-a span {
  font-size:10px;
  color:#6f8b77
}
.art-b {
  right:34%;
  bottom:30px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 16px;
  border-radius:12px;
  transform:rotate(-7deg)
}
.art-b>span {
  width:35px;
  height:35px;
  border-radius:10px;
  background:#e6eee1;
  display:grid;
  place-items:center;
  color:#598169;
  font-size:20px
}
.art-b strong,.art-b small {
  display:block
}
.art-b strong {
  font-size:11px
}
.art-b small {
  color:#82a08a;
  font-size:9px;
  margin-top:2px
}
.metrics-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
  margin-bottom:18px
}
.metric-card {
  background:#fff;
  border:1px solid #e5ebe4;
  border-radius:13px;
  min-height:137px;
  padding:17px 19px;
  position:relative
}
.metric-card>span,.metric-card>strong,.metric-card>small {
  display:block
}
.metric-card>span {
  font-size:11px;
  font-weight:600;
  color:#829087;
  margin-top:19px
}
.metric-card>strong {
  font-size:23px;
  letter-spacing:-.05em;
  margin:7px 0 4px
}
.metric-card>small {
  color:#9aa79c;
  font-size:10px
}
.metric-icon {
  position:absolute;
  right:16px;
  top:17px;
  width:29px;
  height:29px;
  background:#eff4ed;
  border-radius:8px;
  color:#658e70;
  display:grid;
  place-items:center;
  font-size:16px
}
.metric-card.alert .metric-icon {
  color:#bd8c42;
  background:#fcf3e4
}
.two-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin-bottom:17px
}
.panel {
  background:#fff;
  border:1px solid #e5ebe4;
  border-radius:13px;
  padding:20px;
  margin-bottom:17px;
  min-width:0
}
.two-columns .panel {
  margin-bottom:0
}
.section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:18px
}
.section-head .eyebrow {
  margin-bottom:7px
}
.section-head h2 {
  font-size:17px
}
.soft-tag,.badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50px;
  padding:6px 10px;
  font-size:10px;
  font-weight:800;
  white-space:nowrap
}
.soft-tag,.badge.neutral {
  background:#eff2ef;
  color:#64816e
}
.badge.good {
  background:#e7f5eb;
  color:#4b8864
}
.badge.warning {
  background:#fff1df;
  color:#bb7d2d
}
.tour-list {
  display:grid
}
.tour-item {
  background:none;
  border:0;
  border-top:1px solid #eef1ed;
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  padding:13px 1px;
  color:#254233
}
.tour-item:hover {
  background:#f7faf6
}
.tour-number {
  width:32px;
  height:32px;
  border-radius:9px;
  background:#edf3ec;
  color:#6c9474;
  font-size:11px;
  font-weight:900;
  display:grid;
  place-items:center;
  flex:0 0 auto
}
.tour-item div {
  flex:1
}
.tour-item strong,.tour-item small {
  display:block
}
.tour-item strong {
  font-size:12px
}
.tour-item small {
  color:#96a39a;
  margin-top:4px
}
.tour-arrow {
  color:#90aa96
}
.activity-list {
  display:grid
}
.activity-row {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 0;
  border-top:1px solid #eef1ed
}
.activity-icon {
  height:31px;
  width:31px;
  border-radius:9px;
  background:#eaf4ea;
  color:#5b956b;
  display:grid;
  place-items:center;
  font-size:17px;
  flex:0 0 auto
}
.activity-icon.out {
  background:#fff1e9;
  color:#ce8669
}
.activity-row>div:nth-child(2) {
  flex:1;
  min-width:0
}
.activity-row strong,.activity-row small {
  display:block
}
.activity-row strong {
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.activity-row small {
  font-size:10px;
  color:#9ba69d;
  margin-top:4px
}
.activity-row>span {
  font-size:11px;
  font-weight:900;
  white-space:nowrap
}
.pos-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:16px;
  align-items:start
}
.catalog {
  min-width:0
}
.catalog-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:16px
}
.catalog-toolbar>span {
  color:#9ba79c;
  font-size:11px;
  white-space:nowrap
}
.search-box {
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid #e0e7df;
  border-radius:10px;
  padding:0 14px;
  width:min(100%,390px)
}
.search-box span {
  font-size:22px;
  color:#8da397
}
.search-box input {
  border:0;
  box-shadow:none!important;
  padding:0;
  min-height:42px
}
.tabs {
  display:flex;
  gap:6px;
  overflow-x:auto;
  margin-bottom:16px
}
.tab {
  background:#fff;
  border:1px solid #dfe7df;
  color:#829688;
  border-radius:20px;
  padding:7px 14px;
  font-size:11px;
  font-weight:800;
  white-space:nowrap
}
.tab.active {
  background:var(--accent);
  color:#fff;
  border-color:var(--accent)
}
.product-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px
}
.product-card {
  background:#fff;
  border:1px solid #e2e9e1;
  border-radius:13px;
  overflow:hidden;
  text-align:left;
  padding:0;
  color:#233a30;
  transition:transform .15s,box-shadow .15s
}
.product-card:not(:disabled):hover {
  transform:translateY(-2px);
  box-shadow:0 12px 24px #324c3812
}
.product-visual {
  height:103px;
  position:relative;
  display:grid;
  place-items:center
}
.product-visual>span {
  font-size:39px;
  color:#3853459e;
  font-family:Georgia,serif
}
.product-visual small {
  position:absolute;
  left:10px;
  top:10px;
  padding:5px 7px;
  border-radius:5px;
  background:#ffffffbc;
  color:#3d5b47;
  font-size:9px;
  font-weight:800
}
.product-info {
  padding:12px
}
.product-info>small {
  display:block;
  color:#95a69a;
  font-size:10px
}
.product-info>strong {
  display:block;
  margin:5px 0 12px;
  font-size:12px;
  line-height:1.3;
  min-height:31px
}
.product-info>div {
  display:flex;
  justify-content:space-between;
  gap:4px;
  align-items:center
}
.product-info>div span {
  font-weight:900;
  font-size:13px
}
.product-info em {
  font-style:normal;
  color:#88a08e;
  font-size:9px;
  white-space:nowrap
}
.product-card.unavailable {
  filter:grayscale(.45)
}
.cart-panel {
  background:#fff;
  border:1px solid #e3eae2;
  border-radius:13px;
  position:sticky;
  top:18px;
  min-height:580px;
  display:flex;
  flex-direction:column
}
.cart-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:19px;
  border-bottom:1px solid #edf0eb
}
.cart-title h2 {
  font-size:18px
}
.cart-count {
  width:24px;
  height:24px;
  border-radius:50%;
  background:#eaf2e8;
  display:grid;
  place-items:center;
  color:#487856;
  font-size:11px;
  font-weight:900
}
.cart-body {
  padding:0 19px;
  flex:1;
  max-height:300px;
  overflow:auto
}
.cart-empty {
  text-align:center;
  color:#9ea99f;
  padding:62px 10px
}
.cart-empty div {
  font-size:34px;
  color:#bdd2bf
}
.cart-empty strong {
  display:block;
  color:#385c43;
  font-size:12px;
  margin-top:12px
}
.cart-empty p {
  font-size:11px;
  margin:8px auto;
  max-width:200px
}
.cart-line {
  display:flex;
  gap:9px;
  align-items:start;
  border-bottom:1px solid #edf1ec;
  padding:14px 0
}
.cart-product-icon {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:8px;
  flex:0 0 auto
}
.cart-product-info {
  flex:1;
  min-width:0
}
.cart-product-info strong,.cart-product-info small {
  display:block
}
.cart-product-info strong {
  font-size:11px
}
.cart-product-info small {
  font-size:10px;
  color:#94a296;
  margin-top:3px
}
.cart-line>strong {
  font-size:11px;
  white-space:nowrap
}
.quantity-control {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px
}
.quantity-control button {
  border:1px solid #dfe8df;
  border-radius:5px;
  background:#fff;
  width:21px;
  height:21px;
  line-height:1
}
.quantity-control span {
  font-size:11px;
  font-weight:900
}
.cart-footer {
  border-top:1px solid #edf0eb;
  padding:15px 19px 18px
}
.cart-subtotal,.cart-total {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px
}
.cart-subtotal span {
  color:#8c9b90
}
.cart-fields {
  display:flex;
  gap:8px;
  margin:12px 0
}
.cart-fields label {
  width:50%;
  font-size:10px;
  color:#82988b;
  font-weight:700
}
.cart-fields input,.cart-fields select {
  margin-top:5px;
  min-height:34px;
  font-size:11px;
  padding:5px 7px
}
.cart-total {
  border-top:1px dashed #dfe8df;
  padding-top:14px;
  margin-top:10px;
  margin-bottom:13px
}
.cart-total span {
  font-weight:900
}
.cart-total small {
  display:block;
  color:#9bab9c;
  font-size:9px;
  font-weight:500;
  margin-top:3px
}
.cart-total strong {
  font-size:20px;
  letter-spacing:-.05em
}
.cart-note {
  text-align:center;
  font-size:10px;
  color:#9aa79d;
  margin:10px 0 0
}
.summary-strip {
  display:flex;
  gap:0;
  background:#fff;
  border:1px solid #e3eae2;
  border-radius:13px;
  margin-bottom:16px
}
.summary-strip>div {
  padding:17px 24px;
  min-width:0;
  flex:1;
  border-right:1px solid #edf0eb
}
.summary-strip>div:last-child {
  border:0
}
.summary-strip span,.summary-strip strong {
  display:block
}
.summary-strip span {
  font-size:10px;
  color:#91a092
}
.summary-strip strong {
  font-size:22px;
  margin-top:4px
}
.table-panel {
  padding:0
}
.table-panel .section-head {
  padding:19px 20px 0
}
.table-wrap {
  overflow:auto
}
table {
  border-collapse:collapse;
  width:100%;
  font-size:11px
}
th {
  color:#91a094;
  text-align:left;
  font-size:9px;
  letter-spacing:.09em;
  font-weight:900;
  padding:14px 16px;
  background:#f9faf8;
  white-space:nowrap
}
td {
  border-top:1px solid #edf0eb;
  padding:12px 16px;
  vertical-align:middle;
  color:#587062;
  min-width:60px
}
td strong {
  display:block;
  color:#2e4939;
  font-size:11px
}
td small {
  display:block;
  color:#99a69a;
  font-size:9px;
  margin-top:4px
}
td .badge {
  font-size:9px;
  padding:5px 8px
}
.table-product {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:145px
}
.mini-product {
  width:31px;
  height:31px;
  border-radius:7px;
  display:grid;
  place-items:center;
  color:#45614e;
  flex:0 0 auto
}
.row-actions {
  display:flex;
  gap:4px
}
.row-actions button,.icon-button {
  border:1px solid #dce7dd;
  background:#fff;
  color:#4b7558;
  width:27px;
  height:27px;
  border-radius:7px;
  font-size:14px
}
.table-link {
  background:none;
  border:0;
  color:#aa635d;
  font-size:10px;
  font-weight:800
}
.simple-list>div {
  display:flex;
  align-items:center;
  gap:12px;
  border-top:1px solid #eef2ec;
  padding:11px 0;
  font-size:11px
}
.simple-list>div>strong {
  min-width:120px
}
.simple-list>div>span:nth-last-child(2) {
  flex:1;
  color:#87978b
}
.simple-list>div>small {
  color:#a3aea4;
  white-space:nowrap
}
.movement-sign {
  width:26px;
  color:#bd785c;
  font-size:12px;
  font-weight:900
}
.movement-sign.positive {
  color:#568a67
}
.supplier-grid,.employee-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px;
  margin-bottom:17px
}
.supplier-card,.employee-card {
  background:#fff;
  border:1px solid #e3eae2;
  border-radius:13px;
  padding:19px;
  min-width:0
}
.supplier-card-top,.employee-top {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.supplier-icon {
  width:36px;
  height:36px;
  border-radius:9px;
  background:#eaf2e8;
  color:#658d6c;
  display:grid;
  place-items:center;
  font-size:23px
}
.supplier-card h2,.employee-card h2 {
  margin:17px 0 6px
}
.supplier-card p,.employee-card p {
  font-size:11px;
  color:#96a397;
  min-height:30px
}
.supplier-card-stats,.employee-stats {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:16px 0;
  border-top:1px solid #edf1ec;
  border-bottom:1px solid #edf1ec
}
.supplier-card-stats span,.employee-stats span {
  display:block;
  color:#9aaa9c;
  font-size:10px
}
.supplier-card-stats strong,.employee-stats strong {
  display:block;
  margin-top:5px;
  font-size:15px
}
.supplier-card-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:14px
}
.supplier-card-footer span {
  font-size:10px;
  color:#9baa9c;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.supplier-card-footer button {
  white-space:nowrap;
  border:0;
  background:none;
  color:#4b805b;
  font-size:10px;
  font-weight:800
}
.amount-negative {
  color:#b27159!important
}
.cash-hero {
  background:#214535;
  color:#fff;
  border-radius:16px;
  padding:27px 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:172px;
  position:relative;
  overflow:hidden;
  margin-bottom:17px
}
.cash-hero>div:not(.cash-orbit) {
  position:relative;
  z-index:1
}
.cash-hero .eyebrow {
  color:#a5c3a9
}
.cash-hero h2 {
  font-size:29px
}
.cash-hero p {
  color:#b8cebd;
  font-size:11px;
  margin:9px 0 0
}
.cash-hero>div:nth-child(2) span,.cash-hero>div:nth-child(2) strong,.cash-hero>div:nth-child(2) small {
  display:block;
  text-align:right
}
.cash-hero>div:nth-child(2) span {
  font-size:9px;
  color:#a5c3a9;
  font-weight:900;
  letter-spacing:.16em
}
.cash-hero>div:nth-child(2) strong {
  font-size:31px;
  letter-spacing:-.05em;
  margin:6px 0
}
.cash-hero>div:nth-child(2) small {
  color:#b8cebd
}
.cash-orbit {
  position:absolute;
  right:18%;
  top:-100px;
  font-size:350px;
  color:#ffffff0b;
  line-height:1
}
.session-list>div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #edf1ec;
  padding:13px 0
}
.session-list strong,.session-list small {
  display:block
}
.session-list strong {
  font-size:12px
}
.session-list small {
  color:#9baa9d;
  margin-top:3px
}
.session-list>div>div:last-child {
  text-align:right
}
.session-list .badge {
  margin-top:4px
}
.employee-avatar {
  width:39px;
  height:39px;
  border-radius:11px;
  background:#e9efe8;
  color:#5d8c68;
  display:grid;
  place-items:center;
  font-weight:900
}
.employee-stats strong {
  font-size:13px
}
.employee-actions {
  display:flex;
  gap:7px;
  margin-top:15px
}
.employee-actions .button {
  flex:1
}
.bar-list {
  display:grid;
  gap:17px;
  padding:5px 0
}
.bar-list>div>div:first-child {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  margin-bottom:8px
}
.bar-list strong {
  font-size:11px
}
.bar-list span {
  color:#90a092
}
.bar-track {
  background:#edf2ea;
  border-radius:20px;
  height:7px;
  overflow:hidden
}
.bar-track span {
  display:block;
  height:100%;
  background:#d19a73;
  border-radius:20px
}
.bar-track.green span {
  background:#77a68a
}
.audit-dot {
  height:8px;
  width:8px;
  border-radius:50%;
  background:#91bc96;
  flex:0 0 auto
}
.audit-list strong {
  min-width:130px
}
.settings-grid {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  gap:16px
}
.settings-side .panel {
  margin-bottom:16px
}
.form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}
.form-grid>label,.form-grid fieldset {
  font-size:11px;
  color:#738a79;
  font-weight:700
}
.form-grid input,.form-grid select,.form-grid textarea {
  display:block;
  margin-top:7px
}
.form-grid fieldset {
  border:0;
  padding:0;
  margin:0;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-content:start
}
.form-grid legend {
  margin-bottom:9px
}
.form-grid .check {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  color:#4c7158
}
.form-grid .check input {
  width:auto;
  min-height:0;
  margin:0;
  accent-color:var(--accent)
}
.wide-field,.form-actions {
  grid-column:1/-1
}
.form-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:4px
}
.form-grid>button[type=submit] {
  grid-column:1/-1;
  justify-self:start
}
.muted,.fine-print {
  color:#94a498;
  font-size:11px
}
.preset-options {
  display:grid;
  gap:9px;
  margin:17px 0 5px
}
.preset {
  border:1px solid #e1e9e0;
  background:#fff;
  border-radius:11px;
  padding:12px;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  color:#2b4a36
}
.preset.active {
  border-color:#6a9d72;
  background:#f3f8f1
}
.preset>span {
  width:31px;
  height:31px;
  background:#e6efe3;
  border-radius:8px;
  display:grid;
  place-items:center;
  font-size:18px;
  color:#588162
}
.preset strong,.preset small {
  display:block
}
.preset strong {
  font-size:11px
}
.preset small {
  font-size:9px;
  color:#9ba99e;
  margin-top:3px
}
.integration {
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 0;
  border-top:1px solid #edf1ec
}
.integration>span:first-child {
  width:32px;
  height:32px;
  border-radius:8px;
  background:#e9eee8;
  display:grid;
  place-items:center;
  font-size:15px;
  font-weight:900;
  color:#557b60
}
.integration>div {
  flex:1
}
.integration strong,.integration small {
  display:block
}
.integration strong {
  font-size:11px
}
.integration small {
  color:#9baa9f;
  margin-top:3px
}
.empty-state {
  text-align:center;
  padding:30px 10px;
  color:#9eaca0
}
.empty-state>div {
  font-size:33px;
  color:#c4d3c5
}
.empty-state strong {
  display:block;
  color:#5d7d63;
  font-size:12px;
  margin:7px 0
}
.empty-state p {
  font-size:11px;
  margin:0
}
.modal-backdrop {
  position:fixed;
  inset:0;
  background:#14271f9c;
  display:grid;
  place-items:center;
  padding:18px;
  z-index:20
}
.modal {
  background:#fff;
  width:min(100%,580px);
  max-height:min(90vh,800px);
  overflow:auto;
  border-radius:16px;
  padding:24px;
  box-shadow:0 25px 70px #07170c50
}
.modal-head {
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-bottom:21px
}
.modal-head h2 {
  font-size:24px
}
.modal-head p {
  color:#90a092;
  font-size:11px;
  margin:7px 0 0
}
.close-button {
  height:30px;
  width:30px;
  border:0;
  border-radius:8px;
  background:#edf2ed;
  color:#6d8874;
  font-size:21px
}
.receipt {
  border:1px dashed #b8cbb8;
  padding:18px;
  margin-bottom:18px;
  border-radius:8px
}
.receipt-head {
  text-align:center;
  border-bottom:1px solid #e4eae1;
  padding-bottom:15px;
  margin-bottom:10px
}
.receipt-head strong,.receipt-head small {
  display:block
}
.receipt-head strong {
  font-size:18px
}
.receipt-head small {
  color:#94a696;
  margin-top:5px
}
.receipt>div:not(.receipt-head) {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:5px 0;
  font-size:11px
}
.receipt-total {
  border-top:1px solid #dfe8de;
  margin-top:10px;
  padding-top:14px!important;
  font-size:15px!important
}
.toast {
  position:fixed;
  right:25px;
  bottom:25px;
  background:#244a36;
  color:#fff;
  padding:13px 17px;
  border-radius:10px;
  box-shadow:0 10px 30px #142b1d36;
  font-size:12px;
  font-weight:700;
  max-width:340px;
  z-index:30;
  display:flex;
  gap:10px;
  align-items:center
}
.toast span {
  height:22px;
  width:22px;
  border-radius:50%;
  background:#ffffff20;
  display:grid;
  place-items:center
}
.toast.error {
  background:#9d5148
}
@media(max-width:1200px) {
  .sidebar {
    width:210px;
    flex-basis:210px
  }
  .content {
    padding:26px
  }
  .topbar {
    padding:0 26px
  }
  .metrics-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .product-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .supplier-grid,.employee-grid {
    grid-template-columns:repeat(2,1fr)
  }
}
@media(max-width:900px) {
  .sidebar {
    width:66px;
    flex-basis:66px;
    padding:20px 8px
  }
  .brand {
    padding:0 5px 25px
  }
  .brand>div:nth-child(2),.workspace-switch,.nav-label,.nav-item:not(.active),.nav-item.active {
    font-size:0
  }
  .nav-item {
    justify-content:center;
    padding:0
  }
  .nav-icon {
    font-size:21px
  }
  .demo-card,.sidebar-foot {
    display:none
  }
  .content {
    padding:22px
  }
  .pos-layout {
    grid-template-columns:minmax(0,1fr) 300px
  }
  .cart-panel {
    min-height:520px
  }
  .product-visual {
    height:85px
  }
}
@media(max-width:700px) {
  .sidebar {
    display:none
  }
  .topbar {
    height:58px;
    padding:0 16px
  }
  .mobile-brand {
    display:block;
    font-weight:900;
    font-size:14px
  }
  .breadcrumb,.live-badge,.role-select span {
    display:none
  }
  .top-actions {
    gap:7px
  }
  .content {
    padding:18px 14px
  }
  .page-head {
    align-items:start;
    flex-direction:column
  }
  .page-head p {
    font-size:12px
  }
  .head-actions {
    justify-content:flex-start
  }
  .hero-panel>div:first-child {
    width:100%;
    padding:25px
  }
  .hero-art {
    opacity:.35;
    left:35%
  }
  .hero-panel p {
    max-width:280px
  }
  .two-columns,.pos-layout,.settings-grid {
    grid-template-columns:1fr
  }
  .cart-panel {
    position:static;
    min-height:0
  }
  .supplier-grid,.employee-grid {
    grid-template-columns:1fr
  }
  .product-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .metrics-grid {
    gap:8px
  }
  .metric-card {
    padding:13px;
    min-height:120px
  }
  .metric-card>strong {
    font-size:18px
  }
  .metric-card>small {
    font-size:9px
  }
  .summary-strip>div {
    padding:13px
  }
  .summary-strip span {
    font-size:9px
  }
  .summary-strip strong {
    font-size:17px
  }
  .cash-hero {
    padding:22px
  }
  .cash-hero h2 {
    font-size:24px
  }
  .cash-hero>div:nth-child(2) strong {
    font-size:22px
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .wide-field,.form-actions {
    grid-column:1
  }
  .app-shell:after {
    content:'';
    display:block;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:55px;
    background:#182d27;
    z-index:5;
    pointer-events:none
  }
  .nav {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:#182d27;
    display:flex;
    justify-content:space-around;
    height:55px;
    z-index:6
  }
  .sidebar {
    display:contents
  }
  .brand,.workspace-switch,.nav-label,.sidebar-bottom {
    display:none
  }
  .nav-item,.nav-item:not(.active),.nav-item.active {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:2px;
    width:auto;
    font-size:8px;
    color:#bdcfc0;
    padding:0 3px;
    height:55px;
    background:none
  }
  .nav-item.active {
    color:#fff
  }
  .nav-icon {
    font-size:17px
  }
  .nav-item:nth-child(4),.nav-item:nth-child(6),.nav-item:nth-child(7),.nav-item:nth-child(8) {
    display:none!important
  }
  .content {
    padding-bottom:80px
  }
}
@media(max-width:380px) {
  .product-grid {
    grid-template-columns:1fr
  }
  .product-visual {
    height:90px
  }
  .metrics-grid {
    grid-template-columns:1fr 1fr
  }
  .metric-card>span {
    font-size:10px
  }
  .cash-hero {
    display:block
  }
  .cash-hero>div:nth-child(2) {
    margin-top:18px
  }
  .cash-hero>div:nth-child(2) span,.cash-hero>div:nth-child(2) strong,.cash-hero>div:nth-child(2) small {
    text-align:left
  }
}
.mobile-more {
  display:none
}
.more-links {
  display:grid;
  gap:8px
}
.more-links button {
  border:1px solid #dfe9df;
  background:#fff;
  color:#2b4b39;
  border-radius:10px;
  min-height:48px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 14px;
  text-align:left;
  font-size:12px;
  font-weight:800
}
.more-links button span {
  width:24px;
  font-size:18px;
  color:#6f9b78
}
.more-links button strong {
  margin-left:auto;
  font-size:16px
}
@media(max-width:700px) {
  .nav-item.mobile-more {
    display:flex
  }
}
.integration-events {
  margin-top:16px;
  border-top:1px solid #e9eee8;
  padding-top:12px
}
.integration-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:8px
}
.integration-event {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-top:1px solid #eef2ed
}
.integration-event strong,.integration-event small {
  display:block
}
.integration-event strong {
  font-size:10px;
  color:#355340
}
.integration-event small {
  font-size:9px;
  color:#9aac9d;
  margin-top:3px
}
.balance-preview {
  border:1px solid #e1e9df;
  background:#fbfcfa;
  border-radius:10px;
  padding:18px;
  margin-bottom:18px
}
.balance-preview p {
  font-size:12px;
  color:#738b78;
  padding-bottom:13px;
  border-bottom:1px solid #e1e9df
}
.balance-preview p strong {
  color:#244331;
  font-size:16px
}
.balance-preview>div {
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:8px 0;
  font-size:11px
}
.balance-preview>div strong {
  color:#254935
}
.brand-mark img,.workspace-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit
}

/* The lounge preset takes its palette and type pairing from the original POS. */
.app-shell {
  --canvas:#f6efe3;
  --surface:#fffaf2;
  --ink:#2d241c;
  --muted:#6f5b48;
  --line:#e5d5bd;
  --deep:#2f4035;
  --deep-raised:#435244;
  --soft-accent:#f0dcc3;
  color:var(--ink);
  background:var(--canvas)
}
.app-shell[data-preset="retail"] {
  --canvas:#f5f7f3;
  --surface:#fff;
  --ink:#20342e;
  --muted:#728479;
  --line:#dfe8df;
  --deep:#182d27;
  --deep-raised:#294139;
  --soft-accent:#e6eee5
}
.app-shell h1,.app-shell h2 {
  font-family:"Cormorant Garamond",Georgia,serif;
  letter-spacing:-.025em;
  font-weight:700
}
.app-shell h1 {
  font-size:clamp(2.3rem,3.7vw,3.2rem)
}
.app-shell .sidebar {
  background:var(--deep);
  color:#fff8ed
}
.app-shell .brand-mark {
  background:var(--soft-accent);
  color:var(--deep)
}
.app-shell .workspace-switch,.app-shell .demo-card {
  background:var(--deep-raised);
  border-color:rgba(255,246,230,.18)
}
.app-shell .nav-item {
  min-height:46px
}
.app-shell .nav-item:hover {
  background:rgba(255,250,242,.1)
}
.app-shell .nav-item.active {
  background:var(--soft-accent);
  color:var(--deep)
}
.app-shell .nav-label,.app-shell .brand small {
  color:#c8c9ad
}
.app-shell .main-column {
  background:var(--canvas)
}
.app-shell .topbar {
  background:var(--surface);
  border-color:var(--line)
}
.app-shell .breadcrumb,.app-shell .page-head p {
  color:var(--muted)
}
.app-shell .breadcrumb strong,.app-shell .page-head h1 {
  color:var(--ink)
}
.app-shell .eyebrow {
  color:var(--accent)
}
.app-shell .panel,.app-shell .metric-card,.app-shell .cart-panel,.app-shell .product-card {
  background:var(--surface);
  border-color:var(--line);
  color:var(--ink)
}
.app-shell .metric-card>span,.app-shell .metric-card>small,.app-shell .cart-subtotal span {
  color:var(--muted)
}
.app-shell .metric-icon,.app-shell .cart-count {
  background:var(--soft-accent);
  color:var(--deep)
}
.app-shell .button.secondary,.app-shell .tab {
  background:var(--surface);
  color:var(--deep);
  border-color:var(--line)
}
.app-shell .tab.active {
  background:var(--accent);
  border-color:var(--accent);
  color:white
}
.app-shell .text-link {
  color:var(--accent)
}
.app-shell button:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:3px
}
.app-shell .button,.app-shell .tab {
  min-height:44px
}
.app-shell .quantity-control button {
  width:44px;
  height:44px;
  border-radius:10px;
  border-color:var(--line);
  color:var(--ink);
  font-size:20px
}
.app-shell .cart-fields input,.app-shell .cart-fields select {
  min-height:44px
}
.app-shell .product-card {
  touch-action:manipulation
}

.home-intro {
  min-height:145px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:28px;
  padding:20px 30px;
  margin-bottom:24px;
  border-radius:22px;
  overflow:hidden;
  position:relative;
  color:#fff8ed;
  background:
    radial-gradient(circle at 88% 8%,rgba(214,176,124,.3),transparent 31%),
    linear-gradient(120deg,var(--deep-raised),var(--deep));
  box-shadow:0 18px 34px rgba(93,62,36,.13)
}
.home-intro::after {
  content:"";
  position:absolute;
  width:290px;
  height:290px;
  right:5%;
  top:-145px;
  border:1px solid rgba(255,244,226,.15);
  border-radius:50%;
  pointer-events:none
}
.home-intro>div {
  position:relative;
  z-index:1
}
.home-intro-kicker {
  display:block;
  color:#e7cba4;
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase
}
.home-intro h2 {
  color:#fff8ed;
  font-size:clamp(2rem,3.1vw,2.8rem);
  line-height:.94;
  margin:8px 0 10px
}
.home-intro h2 em {
  color:#e7cba4;
  font-style:normal
}
.home-intro p {
  max-width:460px;
  margin:0;
  color:#efe4d1;
  font-size:12px
}
.home-intro-status {
  flex:0 0 224px;
  padding:15px 17px;
  background:rgba(255,250,242,.12);
  border:1px solid rgba(255,250,242,.19);
  border-radius:15px
}
.home-intro-status span,.home-intro-status strong,.home-intro-status small {
  display:block
}
.home-intro-status span {
  color:#e7cba4;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em
}
.home-intro-status strong {
  font-size:16px;
  margin:5px 0 2px
}
.home-intro-status small {
  color:#e8e4d6;
  font-size:10px
}
.home-modules {
  margin-bottom:26px
}
.home-modules>.section-head,.home-overview>.section-head {
  margin-bottom:12px
}
.home-modules h2,.home-overview h2 {
  font-size:1.8rem
}
.module-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px
}
.module-card {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
  min-height:156px;
  padding:17px 18px 18px;
  text-align:left;
  border:1px solid var(--line);
  border-radius:19px;
  background:linear-gradient(145deg,var(--surface),var(--soft-accent));
  color:var(--ink);
  box-shadow:0 9px 20px rgba(93,62,36,.07);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
  touch-action:manipulation
}
.module-card:hover {
  transform:translateY(-3px);
  box-shadow:0 16px 28px rgba(93,62,36,.13);
  border-color:var(--accent)
}
.module-card:active {
  transform:scale(.985)
}
.module-card-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  width:100%;
  margin-bottom:auto
}
.module-symbol {
  width:44px;
  height:44px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:rgba(143,71,37,.1);
  color:var(--accent);
  font-size:25px
}
.module-number {
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em
}
.module-card strong {
  display:block;
  max-width:calc(100% - 20px);
  margin-top:10px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:25px;
  line-height:1;
  letter-spacing:-.02em
}
.module-card small {
  display:block;
  max-width:calc(100% - 16px);
  margin-top:5px;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.35
}
.module-arrow {
  position:absolute;
  right:17px;
  bottom:18px;
  color:var(--accent);
  font-size:17px
}
.module-card.primary:first-child {
  background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 75%,#462c1e));
  border-color:transparent;
  color:#fff9f0
}
.module-card.primary:nth-child(2) {
  background:linear-gradient(145deg,var(--deep-raised),var(--deep));
  border-color:transparent;
  color:#fff9f0
}
.module-card.primary .module-symbol {
  background:rgba(255,250,242,.16);
  color:#fff9f0
}
.module-card.primary .module-number,.module-card.primary small,.module-card.primary .module-arrow {
  color:#fff1dc
}
.home-activity {
  margin-top:4px
}
.pos-layout .tabs .tab {
  min-height:46px;
  min-width:88px;
  padding:9px 16px;
  font-size:12px;
  touch-action:manipulation
}
.cart-footer .button.primary {
  min-height:54px;
  font-size:14px;
  touch-action:manipulation
}

@media (max-width:1200px) {
  .module-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media (max-width:980px) {
  .module-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:700px) {
  .home-intro { align-items:start; flex-direction:column; padding:23px; gap:16px }
  .home-intro-status { flex-basis:auto; width:100% }
  .module-card { min-height:150px }
}
@media (max-width:560px) {
  .module-grid { grid-template-columns:1fr }
  .module-card { min-height:136px }
}
@media (hover:none) and (pointer:coarse) {
  .app-shell .nav-item { min-height:52px }
  .app-shell .tab { min-height:48px }
}
@media (prefers-reduced-motion:reduce) {
  .module-card { transition:none }
}