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

:root{
  --bg:#08111F;
  --panel:#101B31;
  --card:#13203A;
  --panel-elevated:#172744;
  --muted:#8F9BB3;
  --txt:#F4F6FA;
  --white:#FFFFFF;
  --accent:#D61F26;
  --accent-dark:#B91C22;
  --info:#4F7CFF;
  --success:#1BC47D;
  --warning:#F5A623;
  --danger:#D61F26;
  --line:#22324F;
  --outline:#30425F;
  --shadow:0 18px 42px rgba(6,10,20,.42);
  --overlay:rgba(11,18,32,.75);
  --surface-subtle:rgba(255,255,255,.04);
  --surface-soft:rgba(255,255,255,.10);
  --surface-strong:rgba(18,27,46,.82);
  --accent-soft:rgba(214,31,38,.12);
  --accent-soft-strong:rgba(214,31,38,.22);
  --info-soft:rgba(79,124,255,.16);
  --success-soft:rgba(27,196,125,.16);
  --warning-soft:rgba(245,166,35,.16);
  --danger-soft:rgba(214,31,38,.16);
  --brand-gradient:linear-gradient(135deg,#FF8A1F 0%, #D61F26 46%, #4F7CFF 100%);
  --panel-gradient:linear-gradient(180deg,color-mix(in srgb, var(--panel) 92%, var(--panel-elevated) 8%) 0%, color-mix(in srgb, var(--panel) 82%, #000 18%) 100%);
  --card-gradient:linear-gradient(180deg,color-mix(in srgb, var(--card) 92%, var(--panel-elevated) 8%) 0%, color-mix(in srgb, var(--card) 86%, #000 14%) 100%);
  --section-gradient:linear-gradient(135deg,color-mix(in srgb, var(--card) 90%, var(--panel-elevated) 10%) 0%, color-mix(in srgb, var(--card) 78%, var(--panel-elevated) 22%) 100%);
  --input-gradient:linear-gradient(180deg,color-mix(in srgb, var(--panel) 90%, rgba(255,255,255,.04) 10%) 0%, color-mix(in srgb, var(--panel) 98%, #000 2%) 100%);
  --focus-ring:rgba(79,124,255,.22);
  --surface-tint-accent:rgba(214,31,38,.14);
  --surface-tint-info:rgba(79,124,255,.13);
  --surface-tint-success:rgba(27,196,125,.12);
  --surface-tint-warning:rgba(245,166,35,.12);
  --radius-sm:12px;
  --radius-md:14px;
  --radius-lg:16px;
  --radius:16px;
}
html[data-theme="light"]{
  --bg:#EEF3FB;
  --panel:#FFFFFF;
  --card:#FFFFFF;
  --panel-elevated:#F3F7FF;
  --muted:#5C667A;
  --txt:#182033;
  --white:#FFFFFF;
  --accent:#C62828;
  --accent-dark:#9E1E1E;
  --info:#245CFF;
  --success:#1D9E67;
  --warning:#C7860C;
  --danger:#C62828;
  --line:#D6DEEC;
  --outline:#B9C5DA;
  --shadow:0 18px 38px rgba(35,45,70,.10);
  --overlay:rgba(24,32,51,.36);
  --surface-subtle:rgba(36,92,255,.05);
  --surface-soft:rgba(24,32,51,.08);
  --surface-strong:#F5F8FE;
  --accent-soft:rgba(198,40,40,.10);
  --accent-soft-strong:rgba(198,40,40,.18);
  --info-soft:rgba(36,92,255,.12);
  --success-soft:rgba(29,158,103,.12);
  --warning-soft:rgba(199,134,12,.12);
  --danger-soft:rgba(198,40,40,.12);
  --brand-gradient:linear-gradient(135deg,#FF9D2E 0%, #D73737 48%, #245CFF 100%);
  --panel-gradient:linear-gradient(180deg,color-mix(in srgb, var(--panel) 96%, var(--panel-elevated) 4%) 0%, color-mix(in srgb, var(--panel) 84%, rgba(36,92,255,.05) 16%) 100%);
  --card-gradient:linear-gradient(180deg,color-mix(in srgb, var(--card) 96%, var(--panel-elevated) 4%) 0%, color-mix(in srgb, var(--card) 86%, rgba(36,92,255,.05) 14%) 100%);
  --section-gradient:linear-gradient(135deg,color-mix(in srgb, var(--card) 92%, rgba(36,92,255,.04) 8%) 0%, color-mix(in srgb, var(--card) 78%, var(--panel-elevated) 22%) 100%);
  --input-gradient:linear-gradient(180deg,#FFFFFF 0%, color-mix(in srgb, #FFFFFF 84%, rgba(36,92,255,.05) 16%) 100%);
  --focus-ring:rgba(36,92,255,.18);
  --surface-tint-accent:rgba(198,40,40,.10);
  --surface-tint-info:rgba(36,92,255,.10);
  --surface-tint-success:rgba(29,158,103,.10);
  --surface-tint-warning:rgba(199,134,12,.10);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Inter','Roboto','Source Sans 3',sans-serif;
  font-size:14px;
  line-height:1.5;
  color:var(--txt);
  background:
    radial-gradient(circle at top left, var(--surface-tint-info) 0%, transparent 26%),
    radial-gradient(circle at top right, var(--surface-tint-accent) 0%, transparent 22%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 94%, var(--panel-elevated) 6%) 0%, var(--bg) 100%);
  min-height:100vh;
  transition:background .2s ease,color .2s ease
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}

.app{display:flex;min-height:100vh}
.sidebar{
  width:232px;background:var(--panel-gradient);
  border-right:1px solid var(--line);padding:12px 10px;position:sticky;top:0;height:100vh;overflow-y:auto
}
.sidebar-close{
  position:absolute;
  top:12px;
  right:12px;
  width:32px;
  height:32px;
  border:none;
  background:rgba(214,31,38,.08);
  color:var(--txt);
  border-radius:50%;
  font-size:18px;
  line-height:1;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:.2px;padding:8px 10px 10px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb, var(--surface-subtle) 70%, transparent 30%) 0%, color-mix(in srgb, var(--info-soft) 50%, transparent 50%) 100%);margin-bottom:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.brand-logo{width:34px;height:34px;object-fit:contain;border-radius:10px;background:#fff;padding:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.brand-text{line-height:1.1;text-transform:uppercase;display:block;max-width:150px;font-size:14px}
.brand span{color:var(--accent)}
.userbox{margin:0 0 10px;padding:8px 10px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb, var(--surface-subtle) 72%, transparent 28%) 0%, color-mix(in srgb, var(--surface-tint-accent) 65%, transparent 35%) 100%)}
.u-name{font-weight:700;font-size:13px}
.u-role{color:var(--muted);font-size:11px;margin-top:3px;text-transform:uppercase;letter-spacing:.08em}
.nav{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding-bottom:12px}
.nav-item{
  padding:8px 10px;border-radius:12px;border:1px solid transparent;
  background:transparent;font-weight:600;transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease;
  display:flex;align-items:center;gap:10px;min-height:40px
}
.nav-item:hover{border-color:rgba(214,31,38,.28);background:rgba(214,31,38,.08);transform:translateX(1px)}
.nav-item.is-active{border-color:rgba(214,31,38,.5);background:rgba(214,31,38,.14);box-shadow:inset 0 0 0 1px rgba(214,31,38,.12)}
.nav-item.danger{border-color:rgba(214,31,38,.28);background:rgba(214,31,38,.08)}
.nav-item.sub{padding:8px 10px;font-size:13px;opacity:.96;min-height:38px}
.nav-icon{
  width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;
  border-radius:8px;background:rgba(255,255,255,.04);font-size:13px;line-height:1
}
.nav-label{min-width:0;flex:1}
.nav-group{border:0}
.nav-group > summary{
  list-style:none;cursor:pointer;padding:8px 10px;border-radius:12px;border:1px solid transparent;
  background:transparent;font-weight:700;transition:border-color .15s ease,background .15s ease,color .15s ease;
  display:flex;align-items:center;justify-content:space-between;min-height:40px
}
.nav-group > summary::-webkit-details-marker{display:none}
.nav-summary{display:flex;align-items:center;gap:10px;min-width:0}
.nav-group > summary::after{
  content:'▾';color:var(--muted);font-weight:700;font-size:12px;transition:transform .15s ease
}
.nav-group[open] > summary::after{transform:rotate(180deg)}
.nav-group[open] > summary{border-color:rgba(214,31,38,.28);background:rgba(214,31,38,.08)}
.nav-sub{display:flex;flex-direction:column;gap:4px;margin-top:4px;margin-left:10px;padding-left:10px;border-left:1px solid rgba(214,31,38,.14)}
.main{flex:1;padding:20px 20px 32px}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;margin-bottom:14px;background:linear-gradient(135deg,color-mix(in srgb, var(--panel) 88%, var(--card) 12%) 0%, color-mix(in srgb, var(--panel) 78%, var(--panel-elevated) 22%) 100%);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05)
}
.topbar-search{display:flex;gap:8px;align-items:center;flex:1;max-width:620px}
.topbar-search input{flex:1;min-height:40px}
.topbar-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.topbar-actions-only{justify-content:flex-end}
.topbar-actions-only .topbar-actions{margin-left:auto}
.theme-toggle{min-width:150px;text-align:center}
.topbar select.btn,
.topbar .btn.small{min-height:40px}
.sidebar-toggle{display:none;}
.sidebar-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:var(--overlay);
  opacity:0;
  pointer-events:none;
  border:none;
  transition:opacity .25s ease;
  z-index:30;
}

@media (min-width: 901px){
  .sidebar-toggle{
    display:none !important;
  }
}

.page-head{
  display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:14px;
  padding:16px 18px;border:1px solid var(--line);border-radius:20px;background:var(--section-gradient);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);position:relative;overflow:hidden
}
.page-head::after{
  content:'';position:absolute;inset:auto 0 0 0;height:3px;background:var(--brand-gradient);opacity:.9
}
.page-actions{display:flex;gap:8px;align-items:center}
h1{margin:0;font-size:24px;font-weight:800;letter-spacing:.2px}
.muted{color:var(--muted);font-size:12px}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.profile-card{display:flex;flex-direction:column;gap:12px}
.kv-list{display:flex;flex-direction:column;gap:10px}
.kv-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:10px 12px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(135deg,color-mix(in srgb, var(--surface-subtle) 82%, transparent 18%) 0%, color-mix(in srgb, var(--surface-tint-info) 42%, transparent 58%) 100%)
}
.kv-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.kv-value{font-weight:700;text-align:right}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:12px}
.cards.search-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.cards.icon-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.expense-grid{display:grid;grid-template-columns:3fr 2fr;gap:14px;margin-bottom:16px;align-items:start}
.expense-form{background:var(--card-gradient);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow);}
.expense-list .table-scroll{max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius-md);margin-top:10px;background:var(--card);}
.expense-list .table{margin-bottom:0;background:transparent;}
.categories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.category-card{border:1px solid var(--line);border-radius:var(--radius-md);padding:12px;background:linear-gradient(135deg,color-mix(in srgb, var(--surface-subtle) 76%, transparent 24%) 0%, color-mix(in srgb, var(--surface-tint-info) 58%, transparent 42%) 100%);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.category-card.active{border-color:var(--accent);box-shadow:0 8px 20px rgba(214,31,38,.25);}
.category-card:hover{border-color:rgba(214,31,38,.4);transform:translateY(-1px)}
.budget-card{border:1px solid var(--line);border-radius:var(--radius-md);padding:12px;background:linear-gradient(135deg,color-mix(in srgb, var(--surface-subtle) 74%, transparent 26%) 0%, color-mix(in srgb, var(--surface-tint-warning) 58%, transparent 42%) 100%);display:flex;flex-direction:column;gap:6px;}
.budget-progress{height:6px;border-radius:999px;background:var(--surface-soft);position:relative;overflow:hidden;}
.budget-progress span{background:var(--danger);height:100%;display:block;}
.table.compact th,.table.compact td{padding:8px;}
.attachment-hint{font-size:12px;color:var(--muted);}
.card{
  background:var(--card-gradient);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);padding:16px;
  position:relative;overflow:hidden
}
.card::before{
  content:'';position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.16) 50%, transparent 100%);pointer-events:none
}
.card.icon-card{min-height:150px;display:flex;flex-direction:column;gap:10px;position:relative;}
.cards > .card:nth-child(4n+1),
.settings-stat-grid > .card:nth-child(4n+1){
  border-color:color-mix(in srgb, var(--info) 28%, var(--line));
  background:linear-gradient(135deg,color-mix(in srgb, var(--card) 88%, var(--info-soft) 12%) 0%, color-mix(in srgb, var(--card) 76%, transparent 24%) 100%);
}
.cards > .card:nth-child(4n+2),
.settings-stat-grid > .card:nth-child(4n+2){
  border-color:color-mix(in srgb, var(--accent) 28%, var(--line));
  background:linear-gradient(135deg,color-mix(in srgb, var(--card) 88%, var(--accent-soft) 12%) 0%, color-mix(in srgb, var(--card) 76%, transparent 24%) 100%);
}
.cards > .card:nth-child(4n+3),
.settings-stat-grid > .card:nth-child(4n+3){
  border-color:color-mix(in srgb, var(--success) 28%, var(--line));
  background:linear-gradient(135deg,color-mix(in srgb, var(--card) 88%, var(--success-soft) 12%) 0%, color-mix(in srgb, var(--card) 76%, transparent 24%) 100%);
}
.cards > .card:nth-child(4n),
.settings-stat-grid > .card:nth-child(4n){
  border-color:color-mix(in srgb, var(--warning) 28%, var(--line));
  background:linear-gradient(135deg,color-mix(in srgb, var(--card) 88%, var(--warning-soft) 12%) 0%, color-mix(in srgb, var(--card) 76%, transparent 24%) 100%);
}
.kpi-icon{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;background:var(--surface-soft);}
.kpi-icon.accent{background:rgba(214,31,38,.15);color:var(--accent);}
.kpi-icon.info{background:rgba(79,124,255,.15);color:var(--info);}
.kpi-icon.warning{background:rgba(245,166,35,.15);color:var(--warning);}
.kpi-icon.danger{background:rgba(214,31,38,.15);color:var(--danger);}
.card-foot small{color:var(--muted);}
.budget-progress{height:6px;background:var(--surface-soft);border-radius:999px;margin-top:6px;position:relative;}
.budget-progress span{position:absolute;top:0;left:0;height:100%;border-radius:inherit;background:var(--success);}
.log-list{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
.log-entry{border-radius:var(--radius-sm);padding:10px;border:1px solid var(--line);display:flex;align-items:flex-start;gap:10px;background:linear-gradient(135deg,color-mix(in srgb, var(--surface-subtle) 78%, transparent 22%) 0%, color-mix(in srgb, var(--surface-tint-accent) 58%, transparent 42%) 100%);}
.log-entry .badge{font-size:10px;}
.card-title{font-weight:800;margin-bottom:10px;color:color-mix(in srgb, var(--txt) 84%, var(--accent) 16%);letter-spacing:.01em}
.card-value{font-size:26px;font-weight:900}
.card-foot{color:var(--muted);font-size:12px;margin-top:6px}

.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb, var(--card) 92%, var(--panel-elevated) 8%) 0%, color-mix(in srgb, var(--card) 84%, transparent 16%) 100%)}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);font-size:13px}
.table th{color:color-mix(in srgb, var(--muted) 72%, var(--txt) 28%);text-align:left;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:12px;background:linear-gradient(180deg,color-mix(in srgb, var(--surface-subtle) 86%, transparent 14%) 0%, color-mix(in srgb, var(--surface-tint-info) 48%, transparent 52%) 100%)}
.table tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--surface-subtle) 78%, transparent 22%)}
.table tbody tr:hover td{background:color-mix(in srgb, var(--surface-soft) 68%, var(--surface-tint-info) 32%)}
.table tr:last-child td{border-bottom:none}

.btn{
  border:1px solid color-mix(in srgb, var(--outline) 82%, var(--info) 18%);background:linear-gradient(180deg,color-mix(in srgb, var(--panel) 88%, transparent 12%) 0%, color-mix(in srgb, var(--panel) 78%, transparent 22%) 100%);
  color:var(--txt);padding:10px 12px;border-radius:var(--radius-md);cursor:pointer;
  font-weight:600;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,background .12s ease;
  box-shadow:0 8px 18px rgba(15,15,20,.08)
}
.icon-action{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
}
.icon-action .icon{font-size:18px;display:inline-flex;align-items:center;justify-content:center;}
.icon-action .label{text-transform:uppercase;font-size:11px;letter-spacing:.08em;}
.btn:hover{border-color:color-mix(in srgb, var(--accent) 44%, var(--info) 28%);background:linear-gradient(180deg,color-mix(in srgb, var(--surface-tint-accent) 56%, transparent 44%) 0%, color-mix(in srgb, var(--surface-tint-info) 42%, transparent 58%) 100%);box-shadow:0 12px 24px rgba(15,15,20,.12)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:var(--brand-gradient);border-color:transparent;color:var(--white);
  box-shadow:0 10px 24px rgba(214,31,38,.24)
}
.btn.primary:hover{border-color:transparent;filter:saturate(1.04) brightness(1.02)}
.btn.big{padding:14px 16px;border-radius:var(--radius-lg);font-weight:800;font-size:16px}
.btn.danger{background:rgba(214,31,38,.15);border-color:rgba(214,31,38,.7);color:var(--white)}

.auth{display:flex;min-height:100vh;align-items:center;justify-content:center}
.auth-page{
  min-height:100vh;
  background:
    radial-gradient(circle at top left, rgba(214,31,38,.16), transparent 28%),
    radial-gradient(circle at bottom right, rgba(79,124,255,.14), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 84%, var(--panel) 16%) 0%, var(--bg) 100%);
}
.auth-shell{
  width:min(1120px, calc(100vw - 32px));
  margin:0 auto;
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
  gap:18px;
  align-items:center;
  padding:22px 0;
}
.auth-hero{
  min-height:540px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:28px;
  background:linear-gradient(145deg, color-mix(in srgb, var(--card) 88%, rgba(214,31,38,.12) 12%) 0%, var(--card) 100%);
}
.auth-hero-brand{display:flex;align-items:flex-start;gap:18px}
.auth-brand-logo{
  width:88px;height:88px;object-fit:contain;border-radius:18px;background:#fff;padding:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.05)
}
.auth-eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;
  background:rgba(214,31,38,.12);color:var(--accent);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px
}
.auth-hero h1{font-size:42px;line-height:1.02;margin:0 0 12px}
.auth-hero p{margin:0;max-width:620px;color:var(--muted);font-size:15px;line-height:1.7}
.auth-hero-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.auth-hero-card{
  padding:16px;border-radius:18px;border:1px solid var(--line);
  background:color-mix(in srgb, var(--surface-subtle) 88%, transparent 12%);
  display:flex;flex-direction:column;gap:8px
}
.auth-chip{
  display:inline-flex;align-items:center;justify-content:center;width:max-content;padding:5px 9px;border-radius:999px;
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;background:rgba(79,124,255,.12);color:var(--info)
}
.auth-hero-card strong{font-size:18px;line-height:1.2}
.auth-hero-card small{color:var(--muted);font-size:13px;line-height:1.55}
.auth-card{
  width:420px;max-width:92vw;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow)
}
.auth-card-pro{
  width:auto;
  max-width:none;
  min-height:540px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:32px 28px;
}
.auth-head{margin-bottom:14px}
.auth-title{font-weight:900;font-size:22px}
.auth-sub{color:var(--muted);margin-top:4px;margin-bottom:12px}
.auth-form{display:flex;flex-direction:column}
label{display:block;color:var(--muted);font-size:12px;margin-top:12px;margin-bottom:6px;font-weight:600}
input, select, textarea{
  width:100%;padding:12px 12px;border-radius:var(--radius-md);background:var(--input-gradient);
  border:1px solid color-mix(in srgb, var(--outline) 84%, var(--info) 16%);color:var(--txt);outline:none;transition:border-color .12s ease,box-shadow .12s ease,background .12s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)
}
textarea{resize:vertical;min-height:96px}
input:hover, select:hover, textarea:hover{border-color:color-mix(in srgb, var(--accent) 26%, var(--info) 26%, var(--outline))}
input:focus, select:focus, textarea:focus{border-color:color-mix(in srgb, var(--accent) 26%, var(--info) 74%);box-shadow:0 0 0 3px var(--focus-ring), 0 12px 24px rgba(15,15,20,.08)}
.alert{background:rgba(214,31,38,.12);border:1px solid rgba(214,31,38,.45);padding:10px;border-radius:var(--radius-md)}
.alert.success{background:rgba(27,196,125,.12);border-color:rgba(27,196,125,.45)}
.alert.error{background:rgba(214,31,38,.12);border-color:rgba(214,31,38,.45)}
.alert-row{border-radius:var(--radius-sm);border:1px solid transparent;transition:border .2s ease,box-shadow .2s ease;margin-bottom:6px}
.alert-row.alert-info{border-color:rgba(79,124,255,.4);box-shadow:0 0 0 2px rgba(79,124,255,.2)}
.alert-row.alert-warn{border-color:rgba(245,166,35,.6);box-shadow:0 0 0 2px rgba(245,166,35,.2)}
.alert-row.alert-error{border-color:rgba(214,31,38,.6);box-shadow:0 0 0 2px rgba(214,31,38,.2)}
.alert-row.alert-critical{border-color:rgba(27,196,125,.6);box-shadow:0 0 0 2px rgba(27,196,125,.2)}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
.badge.alert{background:rgba(214,31,38,.15);color:var(--danger)}
.badge.alert-info{background:rgba(79,124,255,.15);color:var(--info)}
.badge.alert-warn{background:rgba(245,166,35,.15);color:var(--warning)}
.badge.alert-error{background:rgba(214,31,38,.2);color:var(--danger)}
.badge.alert-critical{background:rgba(27,196,125,.2);color:var(--success)}
.badge.alert.critical{background:rgba(214,31,38,.2);color:var(--danger)}
.hint{color:var(--muted);font-size:12px;margin-top:12px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.form{display:flex;flex-direction:column;gap:8px}
.form-row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.form-row > div{flex:1;min-width:200px}
.check-row{display:flex;flex-direction:column;gap:8px}
.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.inline{display:inline-block;margin-left:6px}
.nowrap{white-space:nowrap}
.btn.small{padding:6px 10px;border-radius:var(--radius-sm);font-size:13px}
.mini-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mini-input{width:120px;padding:6px 8px;border-radius:var(--radius-sm);font-size:13px}
.mini-table th,.mini-table td{padding:8px;font-size:12px}
.warn td{background:rgba(245,166,35,.12)}
.diff-pos{color:var(--success);font-weight:700}
.diff-neg{color:var(--danger);font-weight:700}
.thumb{margin-top:8px;width:120px;height:120px;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.tiny{width:48px;height:48px;margin-top:0}

@media (max-width: 900px){
  .grid-2{grid-template-columns:1fr}
  .form-row > div{min-width:160px}
  .topbar{flex-direction:column;align-items:stretch}
  .topbar-search{width:100%}
  .theme-toggle{min-width:0}
  .settings-overview{flex-direction:column}
  .settings-tab-nav{position:static}
  .settings-panel-grid{grid-template-columns:1fr}
  .settings-columns{grid-template-columns:1fr}
  .settings-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .settings-actions{justify-content:stretch}
  .settings-actions .btn{width:100%}
  .pos-left{grid-template-columns:1fr}
  .pos-cats{border-right:none;border-bottom:1px solid var(--line)}
  .cats-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));height:auto}
  .cat-img{height:60px}
  .auth-shell{
    grid-template-columns:1fr;
    width:min(620px, calc(100vw - 24px));
    padding:16px 0 24px;
  }
  .auth-hero{
    min-height:auto;
    padding:20px;
  }
  .auth-hero h1{
    font-size:30px;
  }
  .auth-hero-grid{
    grid-template-columns:1fr;
  }
  .auth-card-pro{
    min-height:auto;
    padding:24px 20px;
  }
  .sidebar{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    transform:translateX(-110%);
    transition:transform .25s ease;
    z-index:40;
    box-shadow:12px 0 38px rgba(0,0,0,.4);
    width:242px;
  }
  .pos-session-metrics{grid-template-columns:1fr}
  .barcode-label-sheet{grid-template-columns:1fr}
  .barcode-label-sheet-a4{grid-template-columns:1fr}
  .sidebar-toggle{
    display:inline-flex;
  }
  .sidebar-close{
    display:inline-flex;
  }
  .sidebar-backdrop{
    display:block;
  }
  body.sidebar-open{
    overflow:hidden;
  }
  body.sidebar-open .sidebar{
    transform:translateX(0);
  }
  body.sidebar-open .sidebar-backdrop{
    opacity:1;
    pointer-events:auto;
  }
  body.sidebar-open .main{
    position:relative;
    z-index:10;
  }
}

@media print{
  body{
    background:#fff !important;
  }
  .card,
  .page-head,
  .topbar{
    background:#fff !important;
    box-shadow:none !important;
  }
  @page{
    size:A4 portrait;
    margin:10mm;
  }
  .barcode-print-page .print-hide,
  .barcode-print-page .topbar,
  .barcode-print-page .sidebar{
    display:none !important;
  }
  .barcode-print-page .main{
    padding:0 !important;
  }
  .barcode-print-page .card{
    box-shadow:none;
    border:none;
    padding:0;
    background:transparent;
  }
  .barcode-print-page .barcode-label-sheet-a4{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8mm;
    margin:0;
  }
  .barcode-print-page .barcode-label,
  .barcode-print-page .gift-card-print-card{
    break-inside:avoid-page;
  }
}

.pos{display:grid;grid-template-columns:1fr 380px;gap:14px;min-height:calc(100vh - 60px);font-size:14px}
.pos .muted{font-size:14px}
.pos label{font-size:14px}
.pos .btn.small{font-size:14px}
.pos-left,.pos-right{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden
}
.pos-left{display:grid;grid-template-columns:180px 1fr;gap:10px}
.pos-cats{display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--panel)}
.pos-cats-head{padding:10px 12px;font-weight:700;border-bottom:1px solid var(--line)}
.cats-grid{padding:8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;overflow:auto;height:calc(100vh - 150px)}
.pos-actions{display:flex;gap:8px;flex-wrap:wrap}
.shortcut-hint{color:var(--muted);font-size:14px}
.cat-tile{
  appearance:none;border:1px solid rgba(255,255,255,.05);background:var(--surface-subtle);
  border-radius:var(--radius-sm);padding:10px;cursor:pointer;display:flex;flex-direction:column;gap:6px;
  text-align:left;color:var(--txt);transition:border-color .12s ease,background .12s ease,box-shadow .12s ease;
  min-height:110px;
}
.cat-tile.active{border-color:rgba(214,31,38,.7);background:rgba(214,31,38,.12)}
.cat-tile:hover{border-color:rgba(214,31,38,.5)}
.cat-img{width:100%;height:70px;border-radius:var(--radius-sm);object-fit:cover;border:1px solid rgba(255,255,255,.1)}
.cat-name{font-size:13px;font-weight:700;line-height:1.2}

.pos-products{display:flex;flex-direction:column}
.pos-top{padding:12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.pos-filters{display:flex;gap:8px;flex-wrap:wrap}
.btn.toggle.active{border-color:rgba(214,31,38,.7);background:rgba(214,31,38,.2)}
.searchbox input{font-size:14px}
.grid{
  padding:10px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;overflow:auto;height:calc(100vh - 200px);
  margin-top:0;
}
.grid .empty{grid-column:1 / -1;color:var(--muted);padding:10px}
.tile{
  appearance:none;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.08);background:var(--surface-strong);
  padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:8px;min-height:140px;
  text-align:left;color:var(--txt);position:relative;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease;
}
.tile:hover{border-color:rgba(214,31,38,.7);box-shadow:0 8px 18px rgba(214,31,38,.12)}
.tile .img{
  height:90px;border-radius:var(--radius-md);background:var(--bg);
  display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px;overflow:hidden
}
.tile .img img{width:100%;height:100%;object-fit:cover}
.tile .name{font-weight:700;font-size:14px;line-height:1.2;max-height:34px;overflow:hidden}
.tile .meta{display:flex;justify-content:space-between;align-items:center}
.price{font-weight:900}
.price{color:var(--accent);font-size:16px;}
.stock{color:var(--muted);font-size:14px}
.tile-tag{font-size:12px;color:var(--white);background:rgba(214,31,38,.85);padding:2px 6px;border-radius:12px;align-self:flex-start}
.fav-btn{
  position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:rgba(11,18,32,.6);color:var(--muted);
  cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center
}
.fav-btn.active{color:var(--warning);border-color:rgba(245,166,35,.6);background:rgba(245,166,35,.12)}

.cart-head{padding:12px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.cart-title{font-weight:900}
.cart-lines{padding:8px;overflow:auto;height:calc(100vh - 320px);max-height:calc(100vh - 260px)}
.line{
  display:grid;grid-template-columns:1fr auto;gap:8px;
  padding:10px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);margin-bottom:8px
}
.line.active{border-color:rgba(214,31,38,.6);box-shadow:0 0 0 2px rgba(214,31,38,.15)}
.ln-top{display:flex;justify-content:space-between;gap:8px}
.ln-name{font-weight:750;font-size:14px}
.ln-sub{color:var(--muted);font-size:14px;margin-top:4px}
.line-discount{display:flex;gap:6px;align-items:center}
.qtybox{display:flex;gap:6px;align-items:center}
.qtybox button{width:34px;height:34px;border-radius:var(--radius-sm)}
.qtybox .q{min-width:36px;text-align:center;font-weight:800}
.cart-summary{padding:12px;border-top:1px solid var(--line)}
.row{display:flex;justify-content:space-between;align-items:center;margin:8px 0}
.row.total{font-size:18px}
.cart-summary .row.total b{color:var(--accent)}
.mini{width:140px;text-align:right}
.pay{display:flex;gap:8px;margin:10px 0}
.pay-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn.ghost{background:transparent;border-color:var(--outline)}
#msg{margin-top:8px}
.cart-status{
  margin-top:10px;
  padding:8px 12px;
  border-radius:var(--radius-md);
  border:1px solid transparent;
  min-height:24px;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:6px;
  transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
  background:var(--surface-subtle);
  color:var(--muted);
}
.cart-status.success{
  background:rgba(27,196,125,.12);
  border-color:rgba(27,196,125,.45);
  color:var(--success);
  box-shadow:0 6px 14px rgba(27,196,125,.2);
}
.cart-status.error{
  background:rgba(214,31,38,.12);
  border-color:rgba(214,31,38,.45);
  color:var(--danger);
  box-shadow:0 6px 14px rgba(214,31,38,.2);
}
.cart-status.info{
  background:var(--surface-subtle);
  border-color:var(--line);
  color:var(--muted);
}
.credit-box{
  padding:10px;border:1px dashed var(--outline);border-radius:var(--radius-sm);margin:6px 0;
  background:var(--surface-strong)
}
.draft-box{
  padding:10px;border:1px dashed var(--outline);border-radius:var(--radius-sm);margin:6px 0;
  background:var(--surface-strong)
}

.modal{
  position:fixed;inset:0;background:var(--overlay);
  display:flex;align-items:center;justify-content:center;z-index:50
}
.modal[hidden]{display:none !important}
.modal-card{
  width:min(560px, 90vw);max-height:80vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:12px
}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.modal-search{margin-bottom:10px}
.modal-search input{
  width:100%;padding:8px 10px;border-radius:var(--radius-md);border:1px solid var(--line);
  background:var(--panel);color:var(--txt)
}
.modal-body{display:flex;flex-direction:column;gap:8px}
.scanner-strip{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface-strong);
  margin-top:8px;
  font-size:12px;
}
.scanner-strip[data-state="success"]{border-color:rgba(27,196,125,.45);box-shadow:0 0 0 2px rgba(27,196,125,.12)}
.scanner-strip[data-state="error"]{border-color:rgba(214,31,38,.45);box-shadow:0 0 0 2px rgba(214,31,38,.12)}
.scanner-status{font-weight:700}
.scanner-last{color:var(--muted)}
.pos-session-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.selected-customer{
  padding:10px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface-strong);
  margin-top:8px;
}
.settings-branding-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:10px}
.settings-branding-card{border:1px solid var(--line);border-radius:var(--radius-md);background:linear-gradient(135deg,color-mix(in srgb, var(--surface-subtle) 74%, transparent 26%) 0%, color-mix(in srgb, var(--surface-tint-info) 58%, transparent 42%) 100%);padding:12px;display:flex;flex-direction:column;gap:10px}
.settings-branding-preview{min-height:120px;border:1px dashed var(--outline);border-radius:var(--radius-md);background:var(--surface-strong);display:flex;align-items:center;justify-content:center;padding:12px}
.settings-branding-preview img{max-width:100%;max-height:88px;object-fit:contain}
.settings-branding-preview-favicon img{max-width:48px;max-height:48px}
.settings-branding-placeholder{color:var(--muted);font-size:12px;text-align:center}
.customer-result{justify-content:flex-start;text-align:left}
.barcode-editor{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.barcode-row{align-items:end}
.barcode-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.barcode-preview-card{margin-top:12px;padding:14px;border:1px dashed var(--outline);border-radius:var(--radius-md);background:var(--surface-subtle)}
.barcode-preview-meta{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.barcode-preview-image{display:flex;align-items:center;justify-content:center;min-height:110px;padding:10px;border-radius:var(--radius-md);background:#fff;border:1px solid var(--line)}
.barcode-preview-image img,.barcode-preview-image svg{max-width:100%;height:auto}
.barcode-chip-row{display:flex;gap:8px;flex-wrap:wrap}
.barcode-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface-subtle);font-size:12px}
.barcode-chip.primary{border-color:rgba(214,31,38,.55);background:rgba(214,31,38,.10)}
.barcode-labels-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.barcode-label-card{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel)}
.barcode-label-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.barcode-label-card img{display:block;width:100%;height:92px;object-fit:contain;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff}
.barcode-label-card label{font-size:12px;color:var(--muted)}
.barcode-label-sheet{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:18px}
.barcode-label-sheet-a4{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-content:start}
.barcode-label{min-height:138px;padding:12px;border:1px dashed var(--outline);border-radius:12px;background:#fff;color:#111;display:flex;flex-direction:column;gap:8px;break-inside:avoid}
.barcode-label-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.barcode-label-header strong{font-size:13px;line-height:1.25}
.barcode-label-header span{font-size:11px;color:#666}
.barcode-label-meta{font-size:11px;color:#666}
.barcode-label img,.barcode-label svg{display:block;width:100%;height:52px;object-fit:contain}
.barcode-label-code{font-size:13px;font-weight:700;letter-spacing:.04em;text-align:center}
.barcode-label-footer{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#333}
.gift-card-print-preview{display:flex;align-items:center;justify-content:center;padding:12px;border:1px dashed var(--outline);border-radius:var(--radius-md);background:#fff;margin-top:12px}
.gift-card-preview-barcode{display:block;width:100%;max-width:420px;height:104px;object-fit:contain}
.gift-card-print-sheet{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.gift-card-print-card{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(160deg,var(--panel),var(--surface-subtle))}
.gift-card-print-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.gift-card-print-brand{display:flex;flex-direction:column;gap:4px}
.gift-card-print-brand strong{font-size:22px;line-height:1}
.gift-card-print-code{font-size:24px;font-weight:800;letter-spacing:.08em}
.gift-card-print-balance{font-size:28px;font-weight:800;line-height:1}
.gift-card-print-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gift-card-print-meta div{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(255,255,255,.68)}
.gift-card-print-meta span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.gift-card-print-barcode{display:flex;justify-content:center;padding:16px;border-radius:var(--radius-md);background:#fff;border:1px solid var(--line)}
.gift-card-print-barcode img{display:block;width:100%;max-width:560px;height:136px;object-fit:contain}
.gift-card-print-foot{font-size:12px;color:var(--muted);line-height:1.5}
.product-promotion-selection{display:flex;gap:8px;flex-wrap:wrap}
.product-promo-chip{
  display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface-subtle);font-size:12px;font-weight:600
}
.promotion-category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:12px}
.promotion-category-option{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius-md);background:var(--surface-subtle);font-size:13px;font-weight:600
}
.promotion-category-option input{margin:0}
.promo-target-summary{
  margin-top:12px;padding:10px 12px;border:1px dashed var(--outline);border-radius:var(--radius-md);
  background:var(--surface-subtle);font-size:12px;font-weight:700;color:var(--muted)
}
.product-promo-toggle{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700}
.product-promo-toggle input{margin:0}
.price-stack{display:flex;flex-direction:column;gap:3px}
.promo-badge{
  display:inline-flex;align-items:center;justify-content:center;width:max-content;padding:2px 8px;border-radius:999px;
  background:rgba(214,31,38,.12);color:var(--accent);font-size:11px;font-weight:700
}
.settings-shell{display:flex;flex-direction:column;gap:14px}
.settings-overview{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.settings-overview-copy{display:flex;flex-direction:column;gap:6px;min-width:260px}
.settings-overview-pills{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.settings-pill{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
  border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb, var(--surface-subtle) 70%, transparent 30%) 0%, color-mix(in srgb, var(--surface-tint-info) 48%, transparent 52%) 100%);font-size:12px;font-weight:700
}
.settings-tab-nav{
  display:flex;gap:8px;flex-wrap:wrap;padding:10px;border-radius:var(--radius-lg);
  border:1px solid var(--line);background:var(--section-gradient);box-shadow:var(--shadow)
}
.settings-tab-nav .btn.active{border-color:transparent;background:var(--brand-gradient);color:var(--white);box-shadow:0 10px 18px rgba(214,31,38,.18)}
.settings-managed{display:flex;flex-direction:column;gap:12px}
.settings-form{display:flex;flex-direction:column;gap:12px}
.settings-form[hidden]{display:none !important}
.settings-panel{display:flex;flex-direction:column;gap:14px}
.settings-panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.settings-panel[hidden]{display:none !important}
.settings-panel-standalone{gap:14px}
.settings-section{display:flex;flex-direction:column;gap:14px}
.settings-section-wide{grid-column:1 / -1}
.settings-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.settings-columns{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px}
.settings-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.settings-stat-card{display:flex;flex-direction:column;gap:6px}
.settings-stat-card strong{font-size:28px;line-height:1}
.settings-kpi-list{display:flex;flex-direction:column;gap:2px}
.settings-entity-list{display:flex;flex-direction:column;gap:12px}
.settings-entity-card{
  display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--radius-md);
  border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb, var(--surface-subtle) 74%, transparent 26%) 0%, color-mix(in srgb, var(--surface-tint-success) 52%, transparent 48%) 100%)
}
.settings-entity-card.current{border-color:rgba(214,31,38,.45);box-shadow:0 0 0 1px rgba(214,31,38,.16)}
.settings-entity-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.settings-entity-meta{display:flex;flex-wrap:wrap;gap:8px 14px;color:var(--muted);font-size:12px}
.settings-mini-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.settings-mini-metric{
  display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:var(--radius-md);
  border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb, var(--card) 86%, var(--surface-tint-warning) 14%) 0%, color-mix(in srgb, var(--card) 92%, transparent 8%) 100%)
}
.settings-mini-metric span{color:var(--muted);font-size:12px}
.settings-mini-metric strong{font-size:18px;line-height:1}
.settings-check{
  display:flex;align-items:flex-start;gap:10px;margin:0;padding:10px 12px;border-radius:var(--radius-md);
  border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb, var(--surface-subtle) 76%, transparent 24%) 0%, color-mix(in srgb, var(--surface-tint-info) 42%, transparent 58%) 100%)
}
.settings-check input{width:auto;margin-top:2px}
.settings-field-hint{margin-top:6px;color:var(--muted);font-size:12px}
.settings-empty{
  padding:14px;border:1px dashed var(--line);border-radius:var(--radius-md);
  background:linear-gradient(135deg,color-mix(in srgb, var(--surface-subtle) 78%, transparent 22%) 0%, color-mix(in srgb, var(--surface-tint-warning) 36%, transparent 64%) 100%);color:var(--muted)
}
.settings-readonly{
  display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:var(--radius-md);
  border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb, var(--surface-subtle) 76%, transparent 24%) 0%, color-mix(in srgb, var(--surface-tint-accent) 38%, transparent 62%) 100%)
}
.settings-theme-card{
  display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:var(--radius-md);
  border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb, var(--surface-subtle) 76%, transparent 24%) 0%, color-mix(in srgb, var(--surface-tint-info) 52%, transparent 48%) 100%)
}
.settings-theme-status{display:flex;gap:8px;flex-wrap:wrap}
.settings-inline-actions{display:flex;gap:8px;flex-wrap:wrap}
.settings-theme-preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.settings-preview-shell{
  padding:14px;border:1px solid var(--line);border-radius:var(--radius-md);
  background:linear-gradient(135deg,color-mix(in srgb, var(--surface-strong) 86%, transparent 14%) 0%, color-mix(in srgb, var(--surface-tint-info) 36%, transparent 64%) 100%);box-shadow:var(--shadow)
}
.settings-preview-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.settings-preview-card{
  padding:14px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card-gradient);
  display:flex;flex-direction:column;gap:10px
}
.settings-preview-actions{display:flex;gap:8px;flex-wrap:wrap}
.settings-preview-button{
  display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:var(--radius-md);
  background:var(--accent);color:var(--white);font-weight:700
}
.settings-preview-chip{
  display:inline-flex;align-items:center;padding:8px 10px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface-subtle);font-size:12px;font-weight:700
}
.settings-table-wrap{overflow:auto}
.settings-actions{
  display:flex;justify-content:flex-end;margin-top:2px;padding-top:12px;border-top:1px solid var(--line)
}
.json-result{
  background:var(--surface-strong);border:1px solid var(--line);border-radius:10px;padding:10px;
  font-size:12px;font-family:monospace;max-height:220px;overflow:auto;white-space:pre-wrap;line-height:1.4
}
.pos-session-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.metric{padding:10px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-subtle)}
.metric-label{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
.modal-card-wide{width:min(980px, 94vw)}
.modal-actions{display:flex;gap:8px;flex-wrap:wrap}
.pos-report-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.card.compact{padding:12px}
.mini-kpi{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.mini-kpi:last-child{border-bottom:none}
.mini-kpi span{color:var(--muted)}
.table-scroll{overflow:auto;border-radius:16px}
.pos-loyalty-box{padding:10px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-subtle);margin-top:10px}
.pos-loyalty-box[hidden]{display:none !important}
.gift-card-inline{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.gift-card-inline > div{flex:1;min-width:150px}
.applied-benefit{padding:8px 10px;border:1px solid rgba(27,196,125,.38);border-radius:var(--radius-md);background:rgba(27,196,125,.10);margin-top:8px}
.applied-benefit.warn{border-color:rgba(245,166,35,.45);background:rgba(245,166,35,.12)}
#customerSearchResults{max-height:180px;overflow:auto;margin-top:8px}
.draft-row,.ticket-row{
  display:flex;justify-content:space-between;align-items:center;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px;background:var(--panel)
}
.draft-info{display:flex;flex-direction:column;gap:4px}
.draft-actions{display:flex;gap:6px}
.draft-title{font-weight:700}

.btn:focus-visible,.tile:focus-visible,.cat-tile:focus-visible,.fav-btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--info);
  outline-offset:2px
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (min-width: 901px){
  body.pos-page .sidebar {
    display:none !important;
  }
}

body.pos-page .topbar{
  display:flex;
  margin:0;
  padding:12px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:var(--shadow);
}

body.pos-page .main{
  padding: 0 12px 20px;
  margin-top: 0;
}

body.pos-page .app{
  display: flex;
  min-height: 100vh;
}

body.pos-page .pos{
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

body.pos-page .pos-left{
  flex:1;
  min-width:0;
}
body.pos-page .pos-right{
  width: 320px;
}

body.pos-page .pos-badge-row{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  margin-bottom: 12px;
}

@media (max-width:1200px){
  body.pos-page .pos{
    flex-direction:row;
    gap:10px;
  }
  body.pos-page .pos-right{
    width:280px;
  }
  .cats-grid{
    height:calc(100vh - 140px);
  }
}

@media (max-width:960px){
  body.pos-page .pos{
    flex-direction:column;
  }
  .pos-left{
    grid-template-columns:1fr;
  }
  .pos-cats{
    border-right:0;
  }
  .cats-grid{
    grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
    max-height:180px;
    height:auto;
  }
  .pos-products{
    order:2;
  }
  body.pos-page .pos-right{
    order:3;
    width:100%;
  }
  .grid{
    height:auto;
    max-height:none;
  }
  .cart-lines{
    height:auto;
    max-height:220px;
  }
}

.pos-badge-row .badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 4px 10px;
  letter-spacing: .08em;
}

.credit-panel{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(214, 31, 38, .07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

body.pos-page.pos-fullscreen-active .pos{
  min-height: 100vh;
}

/* POS V2 all-in-one overrides */
body.pos-page{
  overflow:hidden;
  width:100vw;
  max-width:100vw;
  --pos-product-columns:6;
  --pos-product-rows:2;
}

@media (max-width: 1180px){
  body.pos-page{
    --pos-product-columns:4;
  }
}

@media (max-width: 860px){
  body.pos-page{
    --pos-product-columns:3;
  }
}

@media (max-width: 640px){
  body.pos-page{
    --pos-product-columns:2;
  }
}

body.pos-page .app{
  display:block;
  width:100vw;
  max-width:100vw;
  height:100vh;
  overflow:hidden;
}

body.pos-page .main{
  flex:none;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  width:100vw;
  max-width:100vw;
  min-width:0;
  height:100vh;
  overflow:hidden;
  padding:10px 12px 12px;
  gap:10px;
  margin:0;
}

body.pos-page .topbar{
  margin:0;
  min-height:0;
  padding:6px 8px;
  gap:8px;
}

body.pos-page .sidebar-backdrop{
  display:none !important;
}

body.pos-page .topbar-search{
  display:none;
}

body.pos-page .topbar .btn,
body.pos-page .topbar select{
  min-height:30px;
  font-size:11px;
  padding:5px 8px;
}

body.pos-page .topbar-actions{
  gap:6px;
  flex-wrap:nowrap;
  align-items:center;
}

body.pos-page .topbar .icon-action{
  min-width:30px;
}

body.pos-page .topbar .icon-action .label{
  display:none;
}

body.pos-page #locationSwitcher{
  max-width:156px;
}

body.pos-page #themeToggle{
  min-width:66px;
}

body.pos-page [data-pos-shell]{
  display:block;
  margin:0;
  min-height:0;
  width:100%;
  max-width:none;
  background:transparent;
  border:none;
  box-shadow:none;
  overflow:hidden;
}

body.pos-page .pos-shell{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:8px;
  width:100%;
  height:100%;
  min-height:0;
}

body.pos-page .pos-shell-header{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:5px;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--panel) 0%,var(--surface-strong) 100%);
  box-shadow:var(--shadow);
}

body.pos-page .pos-shell-notice{
  margin:0;
}

body.pos-page .pos-shell-topline{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

body.pos-page .pos-shell-mini-copy{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

body.pos-page .eyebrow{
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:800;
}

body.pos-page .pos-shell-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-end;
}

body.pos-page .pos-action-band{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

body.pos-page .pos-action-band .btn{
  min-height:30px;
  padding:5px 9px;
  font-size:11px;
  line-height:1;
}

body.pos-page .pos-action-band .btn[data-state="ready"]{
  border-color:rgba(27,196,125,.42);
  background:linear-gradient(180deg,rgba(27,196,125,.18) 0%, rgba(79,124,255,.14) 100%);
}

body.pos-page .pos-action-band .btn[data-state="blocked"]{
  border-color:rgba(245,166,35,.44);
  background:linear-gradient(180deg,rgba(245,166,35,.18) 0%, rgba(214,31,38,.12) 100%);
}

body.pos-page .pos-action-band .btn[data-blocked="1"],
body.pos-page .pay-actions .btn[data-blocked="1"]{
  opacity:.82;
  border-style:dashed;
}

body.pos-page .pos-shell-badges .badge{
  font-size:10px;
  padding:3px 8px;
  letter-spacing:.05em;
}

body.pos-page .pos-workspace{
  display:grid;
  width:100%;
  grid-template-columns:minmax(0,1fr) minmax(280px, 312px);
  grid-template-areas:"selling ticket";
  gap:8px;
  min-height:0;
  height:100%;
}

body.pos-page .pos-selling-panel{
  grid-area:selling;
  display:grid;
  grid-template-columns:216px minmax(0,1fr);
  grid-template-areas:"cats products";
  gap:8px;
  min-height:0;
  height:100%;
}

body.pos-page .pos-cats-panel,
body.pos-page .pos-products-panel,
body.pos-page .pos-ticket-panel{
  min-height:0;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:hidden;
}

body.pos-page .pos-cats-panel{grid-area:cats;display:grid;grid-template-rows:auto minmax(0,1fr);height:100%}
body.pos-page .pos-products-panel{grid-area:products;display:grid;grid-template-rows:auto auto minmax(0,1fr);height:100%}
body.pos-page .pos-ticket-panel{grid-area:ticket;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;height:100%}

body.pos-page .pos-panel-head,
body.pos-page .cart-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-bottom:1px solid var(--line);
}

body.pos-page .panel-title{
  font-weight:800;
  font-size:13px;
}

body.pos-page .pager{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}

body.pos-page .pager span{
  min-width:48px;
  text-align:center;
  font-size:11px;
  color:var(--muted);
  font-weight:700;
}

body.pos-page .cats-grid{
  height:auto;
  padding:6px 8px 8px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  align-content:start;
  overflow:auto;
}

body.pos-page .cat-tile{
  min-height:92px;
  padding:6px;
  gap:4px;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  justify-content:stretch;
  align-items:stretch;
}

body.pos-page .cat-img{
  width:100%;
  height:56px;
  object-fit:cover;
  border-radius:var(--radius-sm);
}

body.pos-page .cat-fallback{
  width:100%;
  height:56px;
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  font-weight:900;
  background:linear-gradient(135deg,var(--accent-soft) 0%, var(--surface-strong) 100%);
  color:var(--accent);
  border:1px solid rgba(214,31,38,.14);
}

body.pos-page .cat-fallback-all{
  background:
    radial-gradient(circle at top right, rgba(214,31,38,.22), transparent 46%),
    linear-gradient(145deg, rgba(214,31,38,.18) 0%, var(--surface-strong) 68%, var(--bg) 100%);
  color:var(--accent);
}

body.pos-page .cat-fallback-all svg{
  width:26px;
  height:26px;
  display:block;
  fill:currentColor;
}

body.pos-page .cat-name{
  width:100%;
  text-align:center;
  font-size:11px;
  line-height:1.05;
  font-weight:700;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  text-wrap:balance;
}

body.pos-page .pos-products-toolbar{
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto auto;
  gap:8px;
  align-items:center;
  padding:8px 10px 6px;
  border-bottom:1px solid var(--line);
}

body.pos-page .pos-products-search input{
  width:100%;
  min-height:36px;
  font-size:13px;
}

body.pos-page .pos-filters{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

body.pos-page .scanner-strip{
  margin:6px 10px 0;
  min-height:38px;
  padding:5px 8px;
  font-size:11px;
}

body.pos-page .grid{
  height:auto;
  min-height:0;
  margin:0;
  padding:8px 8px 10px;
  gap:6px;
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-auto-rows:minmax(164px,1fr);
  align-content:start;
  overflow:auto;
}

body.pos-page .tile.product-tile{
  min-height:166px;
  padding:8px;
  gap:5px;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  align-content:start;
}

body.pos-page .tile .img{
  position:relative;
  height:auto;
  min-height:108px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,var(--surface-strong) 0%, var(--bg) 100%);
}

body.pos-page .tile .img.no-image{
  display:grid;
  grid-template-rows:1fr;
  align-items:center;
  justify-items:center;
  padding:8px;
  background:
    radial-gradient(circle at top right, hsla(var(--product-hue), 82%, 55%, .28), transparent 44%),
    linear-gradient(160deg, hsla(var(--product-hue), 82%, 58%, .20) 0%, var(--surface-strong) 68%, var(--bg) 100%);
}

body.pos-page .tile .tile-category-chip{
  display:none !important;
}

body.pos-page .tile .tile-placeholder-initials{
  align-self:center;
  font-size:30px;
  line-height:1;
  letter-spacing:.04em;
}

body.pos-page .tile .tile-placeholder-code{
  display:none !important;
}

body.pos-page .tile .tile-copy{
  display:grid;
  gap:3px;
  min-height:0;
}

body.pos-page .tile .name{
  font-size:13px;
  line-height:1.12;
  max-height:none;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

body.pos-page .tile .subtitle{
  display:none !important;
}

body.pos-page .tile .meta{
  margin-top:0;
  gap:4px;
  font-size:10px;
  justify-content:flex-start;
  align-items:flex-start;
}

body.pos-page .tile .price{
  font-size:14px;
}

body.pos-page .tile .price-stack{
  display:flex;
  flex-direction:row;
  align-items:baseline;
  flex-wrap:wrap;
  column-gap:6px;
  row-gap:2px;
}

body.pos-page .tile .price-before{
  color:var(--muted);
  font-size:11px;
  text-decoration:line-through;
}

body.pos-page .tile .tile-promo-chip{
  display:inline-flex;
  align-items:center;
  margin-top:0;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(214,31,38,.12);
  color:var(--accent);
  font-size:10px;
  font-weight:700;
}

body.pos-page .tile .stock{
  display:none !important;
}

body.pos-page .tile.low-stock .stock{
  color:var(--warning);
  font-weight:800;
}

body.pos-page .tile .fav-btn{
  top:6px;
  right:6px;
  width:26px;
  height:26px;
}

body.pos-page .cart-head{
  align-items:center;
}

body.pos-page .cart-head-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

body.pos-page .pos-ticket-meta-card{
  margin:6px 8px 0;
  padding:8px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface-subtle);
  display:flex;
  flex-direction:column;
  gap:6px;
}

body.pos-page .ticket-section-head{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:flex-start;
}

body.pos-page .selected-customer{
  margin-top:0;
}

body.pos-page .selected-customer-credit{
  margin-top:0;
  padding:14px;
}

body.pos-page .pos-badge-row{
  margin:6px 8px 0;
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}

body.pos-page #notificationBar,
body.pos-page .cart-status{
  margin:6px 8px 0;
}

body.pos-page .cart-lines{
  height:auto;
  max-height:none;
  min-height:120px;
  margin:3px 5px 0;
  padding:0;
  overflow:auto;
}

body.pos-page .cart-summary{
  display:grid;
  gap:3px;
  padding:4px 5px 5px;
  border-top:1px solid var(--line);
  background:var(--panel);
  position:relative;
  z-index:1;
}

body.pos-page .cart-summary .row{
  margin:0;
  min-height:20px;
  font-size:11px;
}

body.pos-page .cart-summary .row.total{
  min-height:22px;
  font-size:13px;
}

body.pos-page .cart-summary .mini-form{
  display:flex;
  align-items:center;
  gap:4px;
}

body.pos-page .cart-summary input,
body.pos-page .cart-summary select{
  min-height:28px;
  font-size:11px;
  padding:3px 7px;
}

body.pos-page .cart-summary .mini{
  width:64px;
}

body.pos-page .cart-summary .mini-input{
  width:60px;
}

body.pos-page .pay-actions .btn{
  min-height:34px;
}

body.pos-page .line{
  padding:4px 5px;
  margin-bottom:3px;
  gap:4px;
  border-radius:var(--radius-md);
}

body.pos-page .line:last-child{
  margin-bottom:0;
}

body.pos-page .line > :first-child{
  min-width:0;
}

body.pos-page .ln-top{
  align-items:flex-start;
  gap:6px;
}

body.pos-page .ln-name{
  font-size:11px;
  line-height:1.05;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

body.pos-page .ln-sub{
  font-size:10px;
  line-height:1.05;
  margin-top:1px;
}

body.pos-page .line .price{
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}

body.pos-page .qtybox{
  gap:3px;
  align-items:center;
}

body.pos-page .qtybox button{
  width:24px;
  height:24px;
  font-size:12px;
  padding:0;
}

body.pos-page .qtybox .q{
  min-width:18px;
  font-size:11px;
  line-height:1;
}

body.pos-page .pay{
  display:grid;
  grid-template-columns:minmax(0,1fr) 76px;
  gap:5px;
  margin:6px 0;
}

body.pos-page .credit-box,
body.pos-page .draft-box{
  padding:6px;
  margin:2px 0;
  font-size:12px;
}

body.pos-page .credit-box .form-row{
  gap:6px;
}

body.pos-page .credit-box label{
  font-size:11px;
}

body.pos-page .credit-box input{
  min-height:30px;
  font-size:12px;
}

body.pos-page .pay-actions{
  gap:5px;
}

body.pos-page .cart-head-actions .btn{
  min-height:30px;
  padding:5px 8px;
}

body.pos-page .pay-actions .btn{
  min-height:32px;
  padding:5px 8px;
}

body.pos-page .credit-panel{
  margin-top:2px;
  padding:5px 6px;
  font-size:11px;
}

body.pos-page .line-discount{
  gap:3px;
  font-size:10px;
  margin-top:2px;
}

body.pos-page .line-discount .mini-input{
  width:54px;
  min-height:22px;
  padding:2px 5px;
}

body.pos-page .modal{
  z-index:80;
  padding:18px;
  align-items:flex-start;
  overflow:auto;
}

body.pos-page .modal-card{
  width:min(680px, 96vw);
  max-height:calc(100vh - 36px);
  padding:16px;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
}

body.pos-page .modal-card-wide{
  width:min(1040px, 96vw);
}

body.pos-page .modal-card-xl{
  width:min(1220px, 97vw);
}

body.pos-page .modal-head{
  gap:12px;
  align-items:flex-start;
  margin-bottom:0;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

body.pos-page .modal-body{
  gap:12px;
  min-height:0;
  overflow:auto;
  padding-top:12px;
}

body.pos-page .pos-customer-modal-card .modal-head .muted,
body.pos-page .pos-cash-session-modal-card .modal-head .muted{
  font-size:11px;
  line-height:1.3;
}

body.pos-page .pos-customer-modal-card .modal-body,
body.pos-page .pos-cash-session-modal-card .modal-body{
  gap:10px;
  padding-top:10px;
}

body.pos-page .modal-actions{
  align-items:center;
}

body.pos-page .modal-search{
  margin-bottom:0;
  padding-top:10px;
}

body.pos-page .modal-footer{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding-top:12px;
  border-top:1px solid var(--line);
  background:var(--panel);
}

body.pos-page .pos-modal-inline-actions{
  align-self:end;
}

body.pos-page .table-scroll{
  max-height:32vh;
}

body.pos-page #customerSearchResults{
  max-height:clamp(190px, 26vh, 300px);
}

body.pos-page .pos-customer-modal-card{
  width:min(1280px, 97vw);
  height:min(90dvh, 840px);
  max-height:min(90dvh, 840px);
  font-size:11px;
  line-height:1.3;
}

body.pos-page .pos-customer-modal-card .modal-head{
  padding-bottom:8px;
  gap:8px;
}

body.pos-page .pos-customer-modal-card .modal-head > div:first-child > div:first-child{
  font-size:13px;
  line-height:1.15;
}

body.pos-page .pos-customer-modal-card .modal-head .muted{
  font-size:10px;
  line-height:1.25;
}

body.pos-page .pos-customer-modal-card .modal-body{
  gap:8px;
  padding-top:8px;
}

body.pos-page .pos-customer-modal-body{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  grid-template-areas:
    "search search"
    "summary history";
  gap:8px;
  min-height:0;
  overflow:auto;
  padding-right:4px;
  scrollbar-gutter:stable both-edges;
}

body.pos-page .pos-customer-search-card{
  grid-area:search;
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,color-mix(in srgb, var(--surface-subtle) 82%, transparent 18%) 0%, color-mix(in srgb, var(--surface-strong) 72%, transparent 28%) 100%);
}

body.pos-page .pos-customer-search-card .card-title{
  margin-bottom:0;
}

body.pos-page .pos-customer-search-row{
  align-items:end;
  gap:8px;
}

body.pos-page .pos-customer-search-row > :first-child{
  flex:1;
  min-width:220px;
}

body.pos-page .pos-customer-modal-card .pos-modal-inline-actions{
  gap:6px;
}

body.pos-page .pos-customer-modal-card .pos-modal-inline-actions .btn{
  min-height:28px;
  padding:5px 8px;
  font-size:10px;
}

body.pos-page .pos-customer-modal-card label,
body.pos-page .pos-cash-session-modal-card label{
  margin-bottom:3px;
  font-size:10px;
}

body.pos-page .pos-customer-modal-card input,
body.pos-page .pos-customer-modal-card select{
  min-height:30px;
  padding:6px 8px;
  font-size:11px;
}

body.pos-page .pos-customer-modal-card .selected-customer{
  margin-top:0;
  padding:10px 12px;
  border-radius:var(--radius-lg);
  background:color-mix(in srgb, var(--surface-strong) 84%, var(--panel) 16%);
}

body.pos-page .pos-customer-modal-card .selected-customer strong{
  display:block;
  font-size:15px;
  line-height:1.1;
  margin-bottom:2px;
}

body.pos-page .pos-customer-modal-card .selected-customer .muted{
  font-size:10px;
  line-height:1.25;
}

body.pos-page .pos-customer-modal-card .pos-report-grid{
  grid-area:summary;
  grid-template-columns:minmax(250px, 286px) minmax(0, 1fr);
  gap:8px;
}

body.pos-page .pos-customer-modal-card .pos-customer-loyalty-card{
  display:flex;
  flex-direction:column;
  min-height:0;
}

body.pos-page .pos-customer-modal-card .card.compact,
body.pos-page .pos-cash-session-modal-card .card.compact{
  padding:8px;
}

body.pos-page .pos-customer-modal-card .card-title,
body.pos-page .pos-cash-session-modal-card .card-title{
  font-size:12px;
  margin-bottom:4px;
}

body.pos-page .pos-customer-modal-card .settings-stat-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}

body.pos-page .pos-customer-modal-card .metric{
  padding:6px 8px;
  border-radius:12px;
}

body.pos-page .pos-customer-modal-card .metric strong{
  font-size:13px;
  line-height:1.05;
}

body.pos-page .pos-customer-modal-card .metric-label{
  font-size:10px;
  margin-bottom:2px;
}

body.pos-page .pos-customer-modal-card .pos-loyalty-box{
  margin-top:4px;
  padding:6px;
}

body.pos-page .pos-customer-modal-card .gift-card-inline{
  gap:4px;
}

body.pos-page .pos-customer-modal-card .gift-card-inline > div{
  min-width:112px;
}

body.pos-page .pos-customer-modal-card .table-scroll{
  max-height:14vh;
}

body.pos-page .pos-customer-modal-card .customer-gift-cards-scroll{
  margin-top:8px;
  max-height:clamp(140px, 20vh, 220px);
  overflow:auto;
  scrollbar-gutter:stable;
}

body.pos-page .pos-customer-modal-card .customer-gift-cards-scroll .table{
  min-width:100%;
}

body.pos-page .pos-customer-modal-card .customer-gift-cards-scroll .table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:color-mix(in srgb, var(--surface-strong) 88%, var(--panel) 12%);
}

body.pos-page .pos-customer-modal-card .table.compact th,
body.pos-page .pos-customer-modal-card .table.compact td{
  padding:4px 6px;
  font-size:10px;
  line-height:1.15;
}

body.pos-page .pos-customer-history-card{
  grid-area:history;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
}

body.pos-page .pos-customer-history-card .table-scroll{
  flex:1;
  min-height:0;
  max-height:none;
}

body.pos-page .pos-customer-modal-card .customer-search-results-panel-premium{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:color-mix(in srgb, var(--surface-subtle) 70%, var(--panel) 30%);
  max-height:clamp(190px, 26vh, 300px);
  overflow:auto;
  scrollbar-gutter:stable;
}

body.pos-page .pos-customer-modal-card .customer-search-tip{
  font-size:10px;
  line-height:1.25;
}

body.pos-page .pos-customer-modal-card .customer-search-state{
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:var(--radius-lg);
  background:var(--surface-strong);
  font-size:11px;
}

body.pos-page .pos-customer-modal-card .customer-result-card{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  width:100%;
  min-width:0;
  min-height:58px;
  padding:8px 10px;
  border:1px solid color-mix(in srgb, var(--line) 82%, transparent 18%);
  border-radius:14px;
  background:linear-gradient(180deg,color-mix(in srgb, var(--panel) 84%, var(--surface-subtle) 16%) 0%, color-mix(in srgb, var(--surface-strong) 82%, transparent 18%) 100%);
  box-shadow:none;
  text-align:left;
  color:var(--txt);
  cursor:pointer;
  overflow:hidden;
}

body.pos-page .pos-customer-modal-card .customer-result-card:hover,
body.pos-page .pos-customer-modal-card .customer-result-card:focus-visible{
  border-color:color-mix(in srgb, var(--accent) 45%, var(--line) 55%);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  transform:translateY(-1px);
}

body.pos-page .pos-customer-modal-card .customer-result-mark{
  width:34px;
  height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  font-size:10px;
  font-weight:800;
  letter-spacing:.03em;
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, var(--surface-strong) 88%);
  border:1px solid color-mix(in srgb, var(--accent) 18%, var(--line) 82%);
}

body.pos-page .pos-customer-modal-card .customer-result-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

body.pos-page .pos-customer-modal-card .customer-result-copy strong{
  display:block;
  font-size:13px;
  line-height:1.1;
  color:var(--txt);
  white-space:normal;
  overflow-wrap:anywhere;
}

body.pos-page .pos-customer-modal-card .customer-result-copy small{
  display:block;
  font-size:10px;
  line-height:1.2;
  color:var(--muted);
  white-space:normal;
  overflow-wrap:anywhere;
}

body.pos-page .pos-customer-modal-card .customer-result-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:26px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent) 20%, var(--line) 80%);
  background:color-mix(in srgb, var(--accent) 10%, var(--surface-strong) 90%);
  color:var(--accent);
  font-size:10px;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
}

body.pos-page .pos-customer-modal-card .customer-search-results-panel-premium .customer-search-state{
  margin:0;
}

body.pos-page .pos-customer-modal-card .customer-search-results-panel-premium .customer-result{
  min-height:auto;
}

body.pos-page .pos-customer-modal-body .pos-customer-summary-grid{
  min-height:0;
}

body.pos-page .customer-search-results-panel{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface-subtle);
}

body.pos-page .customer-result{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  width:100%;
  min-width:0;
  gap:2px;
  min-height:auto;
  padding:8px 10px;
  border:1px solid color-mix(in srgb, var(--line) 84%, transparent 16%);
  background:color-mix(in srgb, var(--panel) 76%, var(--surface-subtle) 24%);
  box-shadow:none;
  text-align:left;
  white-space:normal;
}

body.pos-page .customer-result strong{
  display:block;
  width:100%;
  min-width:0;
  font-size:13px;
  line-height:1.2;
  white-space:normal;
  overflow-wrap:anywhere;
}

body.pos-page .customer-result small{
  display:block;
  width:100%;
  min-width:0;
  font-size:11px;
  line-height:1.25;
  color:var(--muted);
  white-space:normal;
  overflow-wrap:anywhere;
}

body.pos-page .pos-cash-session-modal-card{
  width:min(1080px, 96vw);
}

body.pos-page .pos-cash-session-modal-card .pos-report-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

body.pos-page .pos-cash-session-modal-card .mini-kpi{
  padding:6px 0;
  font-size:12px;
}

body.pos-page .pos-cash-session-modal-card .mini-kpi strong{
  font-size:12px;
  line-height:1.25;
}

body.pos-page .pos-cash-session-modal-card .modal-actions{
  gap:6px;
  flex-wrap:wrap;
}

body.pos-page .pos-cash-session-modal-card .modal-actions .btn{
  min-height:31px;
  padding:5px 8px;
  font-size:11px;
}

body.pos-page .pos-cash-session-modal-card .table-scroll{
  max-height:18vh;
}

body.pos-page .pos-cash-session-modal-card .table.compact th,
body.pos-page .pos-cash-session-modal-card .table.compact td{
  padding:6px 8px;
  font-size:11px;
}

body.pos-page .mini-kpi strong{
  text-align:right;
}

body.pos-page .customer-result{
  min-height:42px;
}

body.pos-page .customer-search-state{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface-subtle);
  color:var(--muted);
  font-size:12px;
}

body.pos-page .customer-search-state.error{
  border-color:rgba(214,31,38,.45);
  background:rgba(214,31,38,.08);
  color:var(--danger);
}

body.pos-page .pos-checkout-grid{
  align-items:start;
}

body.pos-page .receipt-modal-frame{
  width:100%;
  min-height:56vh;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:#fff;
}

body.pos-page .pos-returns-layout{
  display:grid;
  grid-template-columns:minmax(260px, 320px) minmax(0, 1fr);
  gap:12px;
  min-height:0;
}

body.pos-page .returns-ticket-row{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  text-align:left;
}

body.pos-page .returns-ticket-row.active{
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(214,31,38,.12);
}

body.pos-page .returns-ticket-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-end;
}

body.pos-page .returns-detail-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

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

body.pos-page .returns-action-cell{
  display:flex;
  align-items:center;
  gap:6px;
}

body.pos-page .returns-action-cell input{
  width:70px;
  min-height:28px;
  font-size:11px;
  padding:3px 6px;
}

body.pos-display-page{
  min-height:100vh;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--surface-tint-info) 78%, transparent 22%) 0%, transparent 34%),
    radial-gradient(circle at bottom left, color-mix(in srgb, var(--surface-tint-accent) 82%, transparent 18%) 0%, transparent 38%),
    linear-gradient(160deg, var(--bg) 0%, var(--surface-subtle) 100%);
  padding:18px;
}

.pos-display-shell{
  min-height:calc(100vh - 36px);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  gap:14px;
}

.pos-display-header,
.pos-display-status-strip,
.pos-display-footer,
.pos-display-cart-card,
.pos-display-summary-card{
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:var(--card-gradient);
  box-shadow:var(--shadow);
}

.pos-display-header{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  padding:16px 18px;
}

.pos-display-brand{
  display:flex;
  gap:16px;
  align-items:center;
  min-width:0;
}

.pos-display-logo{
  width:84px;
  height:84px;
  object-fit:contain;
  border-radius:24px;
  padding:10px;
  background:linear-gradient(140deg, rgba(255,255,255,.86), rgba(255,255,255,.42));
  border:1px solid rgba(255,255,255,.18);
}

.pos-display-brand-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.pos-display-brand-copy h1{
  margin:0;
  font-size:32px;
  font-weight:900;
  line-height:1;
}

.pos-display-clock{
  min-width:240px;
  padding:14px 18px;
  border-radius:22px;
  background:
    radial-gradient(circle at top right, rgba(79,124,255,.18), transparent 48%),
    linear-gradient(160deg, color-mix(in srgb, var(--surface-strong) 80%, transparent 20%) 0%, color-mix(in srgb, var(--surface-subtle) 80%, transparent 20%) 100%);
  border:1px solid rgba(255,255,255,.08);
  text-align:right;
}

.pos-display-time{
  font-size:40px;
  font-weight:900;
  letter-spacing:.04em;
  line-height:1;
}

.pos-display-date{
  margin-top:6px;
  color:var(--muted);
  font-size:15px;
  text-transform:capitalize;
}

.pos-display-status-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  padding:10px 14px;
}

.pos-display-main{
  display:grid;
  grid-template-columns:minmax(0,1.9fr) minmax(320px,.95fr);
  gap:14px;
  min-height:0;
}

.pos-display-cart-card,
.pos-display-summary-card,
.pos-display-footer{
  padding:16px 18px;
}

.pos-display-cart-card{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  min-height:0;
}

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

.pos-display-ticket-stats{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.kpi-chip{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface-subtle) 82%, transparent 18%) 0%, color-mix(in srgb, var(--surface-tint-info) 58%, transparent 42%) 100%);
  font-size:12px;
  font-weight:800;
}

.pos-display-items{
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
}

.pos-display-line{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  border-radius:20px;
  border:1px solid color-mix(in srgb, var(--line) 80%, var(--info) 20%);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--surface-tint-info) 76%, transparent 24%) 0%, transparent 32%),
    linear-gradient(155deg, color-mix(in srgb, var(--surface-subtle) 82%, transparent 18%) 0%, color-mix(in srgb, var(--surface-strong) 78%, transparent 22%) 100%);
}

.pos-display-line-main{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.pos-display-line-name{
  font-size:22px;
  font-weight:800;
  line-height:1.12;
}

.pos-display-line-meta{
  color:var(--muted);
  font-size:13px;
}

.pos-display-line-side{
  text-align:right;
}

.pos-display-line-qty{
  font-size:18px;
  font-weight:800;
  color:var(--accent);
}

.pos-display-line-total{
  margin-top:4px;
  font-size:22px;
  font-weight:900;
}

.pos-display-empty{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px dashed var(--outline);
  border-radius:26px;
  padding:28px;
  text-align:center;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--surface-tint-accent) 72%, transparent 28%) 0%, transparent 42%),
    linear-gradient(160deg, color-mix(in srgb, var(--surface-subtle) 88%, transparent 12%) 0%, color-mix(in srgb, var(--surface-tint-info) 64%, transparent 36%) 100%);
}

.pos-display-empty-title{
  font-size:26px;
  font-weight:900;
}

.pos-display-kpis{
  display:grid;
  gap:10px;
}

.pos-display-kpi{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:18px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--surface-subtle) 84%, transparent 16%) 0%, color-mix(in srgb, var(--surface-tint-info) 56%, transparent 44%) 100%);
  border:1px solid var(--line);
}

.pos-display-kpi strong{
  font-size:20px;
}

.pos-display-kpi.total{
  background:var(--brand-gradient);
  color:var(--white);
  border-color:transparent;
}

.pos-display-context{
  display:grid;
  gap:10px;
  margin-top:16px;
}

.pos-display-context-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

.pos-display-context-row:last-child{
  border-bottom:none;
  padding-bottom:0;
}

.pos-display-context-row span{
  color:var(--muted);
}

.pos-display-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.pos-display-footer-copy{
  display:flex;
  flex-direction:column;
  gap:6px;
}

@media (max-width: 1400px){
  body.pos-page .pos-workspace{
    grid-template-columns:minmax(0,1fr) minmax(276px, 300px);
  }

  .pos-display-main{
    grid-template-columns:minmax(0,1.55fr) minmax(280px,.9fr);
  }
}

@media (max-width: 1180px){
  body.pos-page .pos-workspace{
    grid-template-columns:minmax(0,1fr) 292px;
    grid-template-areas:"selling ticket";
  }

  body.pos-page .pos-selling-panel{
    grid-template-columns:188px minmax(0,1fr);
  }

  body.pos-page .grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  body.pos-page .pos-products-toolbar{
    grid-template-columns:minmax(0,1fr);
  }

  body.pos-page .pos-shell-badges{
    justify-content:flex-start;
  }

  body.pos-page .pos-returns-layout{
    grid-template-columns:1fr;
  }
}

@media (max-width: 860px){
  body.pos-page .main{
    padding:8px;
    gap:8px;
  }

  body.pos-page .topbar{
    padding:10px;
  }

  body.pos-page .pos-workspace{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) minmax(260px,40vh);
    grid-template-areas:
      "selling"
      "ticket";
  }

  body.pos-page .pos-selling-panel{
    grid-template-columns:1fr;
    grid-template-areas:
      "cats"
      "products";
    grid-template-rows:auto minmax(0,1fr);
  }

  body.pos-page .cats-grid{
    grid-template-columns:repeat(auto-fill,minmax(88px,104px));
  }

  body.pos-page .grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  body.pos-page .modal{
    padding:10px;
  }

  body.pos-page .table-scroll{
    max-height:26vh;
  }

  body.pos-display-page{
    padding:10px;
  }

  .pos-display-shell{
    min-height:calc(100vh - 20px);
  }

  .pos-display-header,
  .pos-display-panel-head,
  .pos-display-footer{
    flex-direction:column;
    align-items:flex-start;
  }

  .pos-display-clock{
    width:100%;
    min-width:0;
    text-align:left;
  }

  .pos-display-main{
    grid-template-columns:1fr;
  }
}

@media (max-height: 820px){
  body.pos-page .main{
    padding:8px 10px 10px;
    gap:8px;
  }

  body.pos-page .pos-shell-header{
    padding:6px 8px;
  }

  body.pos-page .pos-workspace{
    grid-template-columns:minmax(0,1fr) 296px;
  }

  body.pos-page .pos-selling-panel{
    grid-template-columns:196px minmax(0,1fr);
  }

  body.pos-page .cats-grid{
    gap:5px;
  }

  body.pos-page .cat-tile{
    min-height:84px;
  }

  body.pos-page .cat-img,
  body.pos-page .cat-fallback{
    height:48px;
  }

  body.pos-page .grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:minmax(150px,auto);
  }

  body.pos-page .tile.product-tile{
    min-height:152px;
    grid-template-rows:84px minmax(0,1fr);
  }

  body.pos-page .tile .img{
    height:84px;
  }

  body.pos-page .pos-ticket-panel #mixBox{
    display:none !important;
  }

  body.pos-page .table-scroll{
    max-height:26vh;
  }

  body.pos-page .pos-customer-modal-card .table-scroll,
  body.pos-page .pos-cash-session-modal-card .table-scroll{
    max-height:15vh;
  }

  body.pos-page .pos-customer-modal-card #customerSearchResults{
    max-height:clamp(170px, 22vh, 260px);
  }
}

@media (max-width: 640px){
  body.pos-page .pos-action-band{
    overflow:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
  }

  body.pos-page .pos-action-band .btn{
    white-space:nowrap;
  }

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

@media (max-width: 980px){
  body.pos-page .pos-customer-modal-body{
    grid-template-columns:1fr;
    grid-template-areas:
      "search"
      "summary"
      "history";
  }

  body.pos-page .pos-customer-search-card,
  body.pos-page .pos-customer-summary-grid,
  body.pos-page .pos-customer-history-card{
    grid-column:1;
  }

  body.pos-page .pos-customer-modal-card .pos-report-grid,
  body.pos-page .pos-cash-session-modal-card .pos-report-grid{
    grid-template-columns:1fr;
  }

  body.pos-page .pos-customer-modal-card .form-row:first-child{
    flex-direction:column;
    align-items:stretch;
  }

  body.pos-page .pos-customer-modal-card .pos-modal-inline-actions{
    width:100%;
    justify-content:flex-start;
  }
}

.finance-subnav {
  margin-bottom: 16px;
}

.finance-subnav-links {
  flex-wrap: wrap;
  gap: 8px;
}

.table .page-actions {
  gap: 6px;
  flex-wrap: wrap;
}

.table .page-actions form {
  display: inline-flex;
  margin: 0;
}

/* POS V3 compact shell and responsive mobile/tablet overrides */
body.pos-page{
  overflow:hidden;
  width:100vw;
  max-width:100vw;
}

body.pos-page .app{
  display:block;
  width:100vw;
  max-width:100vw;
  height:100dvh;
  min-height:100svh;
  overflow:hidden;
}

body.pos-page .main{
  display:block;
  width:100vw;
  max-width:100vw;
  height:100dvh;
  min-height:100svh;
  margin:0;
  padding:8px 10px 10px;
  overflow:hidden;
}

body.pos-page .topbar,
body.pos-page .sidebar,
body.pos-page .sidebar-backdrop{
  display:none !important;
}

body.pos-page [data-pos-shell]{
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
}

body.pos-page .pos-shell{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  gap:3px;
  width:100%;
  height:100%;
  min-height:0;
}

body.pos-page .pos-shell-header{
  display:grid;
  gap:4px;
  padding:5px 7px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(135deg,color-mix(in srgb, var(--panel) 92%, var(--panel-elevated) 8%) 0%, color-mix(in srgb, var(--panel) 76%, rgba(79,124,255,.10) 24%) 100%);
  box-shadow:var(--shadow);
}

body.pos-page .pos-shell-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  min-width:0;
}

body.pos-page .pos-shell-mini-copy{
  display:none;
}

body.pos-page .pos-shell-utility{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  min-width:0;
  flex-wrap:nowrap;
  overflow:auto;
  scrollbar-width:none;
}

body.pos-page .pos-shell-utility .btn,
body.pos-page .pos-shell-utility .pos-shell-select{
  min-height:26px;
  padding:3px 7px;
  font-size:10px;
}

body.pos-page .pos-shell-select{
  width:auto;
  min-width:130px;
  max-width:180px;
}

body.pos-page .pos-shell-topline{
  display:none;
}

body.pos-page .pos-shell-badges{
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  min-width:0;
  width:100%;
  overflow:auto;
  scrollbar-width:none;
}

body.pos-page .pos-shell-badges::-webkit-scrollbar,
body.pos-page .pos-action-band::-webkit-scrollbar,
body.pos-page .pos-shell-utility::-webkit-scrollbar,
body.pos-page .pos-filters::-webkit-scrollbar,
body.pos-page .pager::-webkit-scrollbar{
  display:none;
}

body.pos-page .pos-shell-badges .badge{
  flex:0 0 auto;
  font-size:10px;
  padding:3px 8px;
}

body.pos-page .pos-action-band{
  display:flex;
  flex-wrap:nowrap;
  gap:4px;
  overflow:auto;
  padding-bottom:0;
  scrollbar-width:none;
}

body.pos-page .pos-action-band .btn{
  flex:0 0 auto;
  min-height:26px;
  padding:3px 7px;
  font-size:9px;
  line-height:1;
  white-space:nowrap;
}

body.pos-page .pos-shell-notice{
  margin:0;
}

body.pos-page .pos-display-inline-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(135deg,color-mix(in srgb, var(--surface-tint-info) 52%, transparent 48%) 0%, color-mix(in srgb, var(--surface-tint-accent) 44%, transparent 56%) 100%);
  box-shadow:var(--shadow);
  padding:10px 12px;
}

body.pos-page .pos-display-inline-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

body.pos-page .pos-display-inline-clock{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  font-size:12px;
  font-weight:700;
}

body.pos-page .pos-display-inline-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
}

body.pos-page .pos-display-inline-kpi{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.05);
  min-width:0;
}

body.pos-page .pos-display-inline-kpi span{
  color:var(--muted);
  font-size:11px;
}

body.pos-page .pos-display-inline-kpi strong{
  font-size:16px;
  line-height:1.15;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body.pos-page .pos-display-inline-kpi.total{
  background:linear-gradient(135deg,rgba(214,31,38,.18) 0%, rgba(79,124,255,.16) 100%);
}

body.pos-page .pos-workspace{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(236px, 250px);
  grid-template-areas:"selling ticket";
  gap:3px;
  min-height:0;
  height:100%;
  align-items:stretch;
}

body.pos-page .pos-selling-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:
    "cats"
    "products";
  grid-template-rows:auto minmax(0,1fr);
  gap:4px;
  min-height:0;
  height:100%;
  align-items:stretch;
}

body.pos-page .pos-cats-panel,
body.pos-page .pos-products-panel,
body.pos-page .pos-ticket-panel{
  min-height:0;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:hidden;
}

body.pos-page .pos-cats-panel{
  grid-area:cats;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  max-height:104px;
}
body.pos-page .pos-products-panel{
  grid-area:products;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  min-height:0;
  height:100%;
  align-self:stretch;
}
body.pos-page .pos-ticket-panel{
  grid-area:ticket;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  min-height:0;
  height:100%;
  align-self:stretch;
}

body.pos-page .pos-panel-head,
body.pos-page .cart-head{
  padding:5px 7px;
  gap:5px;
}

body.pos-page .pos-panel-head .muted,
body.pos-page .cart-head .muted{
  line-height:1.2;
}

body.pos-page .panel-title,
body.pos-page .cart-title{
  font-size:12px;
  line-height:1.1;
}

body.pos-page .pager span{
  min-width:42px;
  font-size:10px;
}

body.pos-page .pager .btn,
body.pos-page .pos-filters .btn,
body.pos-page .cart-head-actions .btn{
  min-height:26px;
  padding:3px 7px;
  font-size:10px;
}

body.pos-page .pos-cats-panel .pos-panel-head .muted{
  display:none;
}

body.pos-page .cats-grid{
  display:flex;
  align-items:stretch;
  gap:5px;
  overflow:auto;
  padding:0 7px 6px;
  scrollbar-width:none;
}

body.pos-page .cats-grid::-webkit-scrollbar{
  display:none;
}

body.pos-page .cat-tile{
  flex:0 0 88px;
  min-width:88px;
  min-height:60px;
  padding:5px;
  gap:4px;
}

body.pos-page .cat-img,
body.pos-page .cat-fallback{
  height:34px;
}

body.pos-page .cat-img{
  object-fit:contain;
  padding:2px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.08);
}

body.pos-page .cat-name{
  font-size:10px;
  line-height:1.15;
}

body.pos-page .pos-products-toolbar{
  display:grid;
  grid-template-columns:minmax(180px,1fr) auto auto;
  gap:4px;
  padding:4px 7px 3px;
}

body.pos-page .pos-products-search input{
  min-height:30px;
  font-size:11px;
}

body.pos-page .scanner-strip{
  margin:4px 8px 0;
  min-height:28px;
  padding:4px 8px;
  font-size:10px;
}

body.pos-page .grid{
  padding:4px 6px 4px;
  gap:4px;
  grid-template-columns:repeat(var(--pos-product-columns),minmax(0,1fr));
  grid-template-rows:repeat(var(--pos-product-rows),minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);
  align-content:stretch;
  align-self:stretch;
  block-size:100%;
  min-block-size:100%;
  max-block-size:100%;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
}

body.pos-page .tile.product-tile{
  min-height:0;
  height:100%;
  padding:5px;
  gap:4px;
  grid-template-rows:minmax(0,1fr) auto;
}

body.pos-page .product-tile-placeholder{
  pointer-events:none;
  cursor:default;
  border-style:dashed;
  border-color:color-mix(in srgb, var(--outline) 76%, transparent 24%);
  background:
    linear-gradient(180deg,color-mix(in srgb, var(--surface-subtle) 82%, transparent 18%) 0%, color-mix(in srgb, var(--surface-strong) 68%, transparent 32%) 100%);
  box-shadow:none;
  min-height:0;
  height:100%;
  opacity:.72;
}

body.pos-page .product-tile-placeholder .tile-placeholder-figure{
  min-height:78px;
  border:1px dashed color-mix(in srgb, var(--outline) 72%, transparent 28%);
  border-radius:calc(var(--radius-md) - 2px);
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--surface-soft) 54%, transparent 46%) 0%, transparent 52%),
    linear-gradient(180deg,color-mix(in srgb, var(--surface-subtle) 88%, transparent 12%) 0%, color-mix(in srgb, var(--bg) 86%, transparent 14%) 100%);
}

body.pos-page .product-tile-placeholder .tile-placeholder-copy{
  align-content:end;
}

body.pos-page .product-tile-placeholder .tile-placeholder-line{
  display:block;
  height:10px;
  border-radius:999px;
  background:color-mix(in srgb, var(--outline) 78%, transparent 22%);
}

body.pos-page .product-tile-placeholder .tile-placeholder-line-primary{
  width:82%;
}

body.pos-page .product-tile-placeholder .tile-placeholder-line-secondary{
  width:56%;
  height:9px;
  background:color-mix(in srgb, var(--surface-tint-info) 64%, var(--outline) 36%);
}

body.pos-page .product-tile-placeholder.product-tile-empty-state{
  opacity:.88;
}

body.pos-page .product-tile-empty-message{
  position:absolute;
  inset:auto 8px 8px 8px;
  padding:8px 10px;
  border-radius:12px;
  background:color-mix(in srgb, var(--panel) 86%, var(--surface-subtle) 14%);
  border:1px solid color-mix(in srgb, var(--line) 80%, transparent 20%);
  font-size:10px;
  line-height:1.3;
  color:var(--muted);
}

body.pos-page .tile .img{
  height:auto;
  min-height:78px;
}

body.pos-page .tile .img img{
  object-fit:contain;
  padding:2px;
  background:rgba(255,255,255,.96);
}

body.pos-page .tile .tile-placeholder-initials{
  font-size:18px;
}

body.pos-page .tile .name{
  font-size:10px;
  line-height:1.15;
  max-height:none;
}

body.pos-page .tile .meta{
  font-size:9px;
}

body.pos-page .tile .price{
  font-size:11px;
}

body.pos-page .cart-head-actions{
  gap:4px;
}

body.pos-page #cartCount,
body.pos-page .pos-badge-row,
body.pos-page .cart-status,
body.pos-page .credit-panel{
  display:none !important;
}

body.pos-page .cart-lines{
  min-height:0;
  block-size:100%;
  min-block-size:0;
  max-block-size:100%;
  margin:0 5px;
  padding:3px 0 4px;
  overflow:auto;
  overscroll-behavior:contain;
}

body.pos-page .cart-summary{
  position:relative;
  bottom:auto;
  z-index:2;
  gap:3px;
  padding:5px;
  padding-bottom:calc(4px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(180deg,color-mix(in srgb, var(--panel) 94%, transparent 6%) 0%, var(--panel) 100%);
  box-shadow:0 -10px 22px rgba(5,10,18,.18);
  overflow:hidden;
}

body.pos-page .cart-summary .row{
  min-height:16px;
  font-size:11px;
  margin:0;
}

body.pos-page .cart-summary .row.total{
  font-size:13px;
  margin-top:2px;
}

body.pos-page .cart-summary input,
body.pos-page .cart-summary select{
  min-height:26px;
  font-size:10px;
  padding:3px 6px;
}

body.pos-page .line{
  padding:5px 6px;
}

body.pos-page .ln-name{
  font-size:11px;
}

body.pos-page .ln-sub,
body.pos-page .line-discount,
body.pos-page .line .price{
  font-size:10px;
}

body.pos-page .qtybox button{
  width:24px;
  height:24px;
}

body.pos-page .pay{
  display:grid;
  grid-template-columns:minmax(0,1fr) 72px;
  gap:4px;
  margin:3px 0;
}

body.pos-page .pay-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
  position:static;
  bottom:auto;
  z-index:2;
  padding-top:3px;
  background:none;
}

body.pos-page .pay-actions .btn{
  min-height:30px;
  padding:5px 7px;
  font-size:10px;
}

body.pos-page .pos-ticket-sheet-toggle,
body.pos-page .pos-mobile-ticket-backdrop{
  display:none;
}

body.pos-page .customer-search-results-panel{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:220px;
  overflow:auto;
}

body.pos-page .modal-card{
  width:min(680px, 96vw);
  max-height:calc(100dvh - 32px);
}

body.pos-page .modal-card-wide{
  width:min(1040px, 96vw);
}

body.pos-page .modal-card-xl{
  width:min(1220px, 97vw);
}

body.pos-page .modal-footer{
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 1366px){
  body.pos-page .main{
    padding:4px 6px 4px;
  }

  body.pos-page .pos-shell-header{
    padding:5px 7px;
  }

  body.pos-page .pos-shell-utility .btn,
  body.pos-page .pos-shell-utility .pos-shell-select{
    min-height:28px;
    padding:4px 8px;
    font-size:10px;
  }

  body.pos-page .pos-workspace{
    grid-template-columns:minmax(0,1fr) minmax(224px, 238px);
  }

  body.pos-page .tile.product-tile{
    grid-template-rows:minmax(0,1fr) auto;
  }

  body.pos-page .tile .img{
    height:auto;
    min-height:70px;
  }

  body.pos-page .cart-summary .mini{
    width:58px;
  }

  body.pos-page .cart-summary .mini-input{
    width:56px;
  }
}

@media (min-width: 861px) and (max-height: 820px){
  body.pos-page .main{
    padding:4px 6px 6px;
  }

  body.pos-page .pos-shell{
    gap:4px;
  }

  body.pos-page .pos-shell-header{
    gap:4px;
    padding:5px 7px;
    border-radius:16px;
  }

  body.pos-page .pos-shell-mini-copy{
    display:none;
  }

  body.pos-page .pos-shell-toolbar{
    justify-content:flex-end;
  }

  body.pos-page .pos-shell-badges .badge{
    padding:2px 6px;
    font-size:9px;
  }

  body.pos-page .pos-action-band .btn,
  body.pos-page .pos-shell-utility .btn,
  body.pos-page .pos-shell-utility .pos-shell-select{
    min-height:26px;
    padding:4px 7px;
    font-size:10px;
  }

  body.pos-page .pos-display-inline-card{
    padding:7px 9px;
    border-radius:16px;
  }

  body.pos-page .pos-display-inline-head{
    align-items:center;
  }

  body.pos-page .pos-display-inline-head .muted{
    display:none;
  }

  body.pos-page .pos-display-inline-clock{
    flex-direction:row;
    gap:6px;
    font-size:10px;
  }

  body.pos-page .pos-display-inline-grid{
    gap:6px;
    margin-top:6px;
  }

  body.pos-page .pos-display-inline-kpi{
    padding:7px 8px;
    border-radius:12px;
  }

  body.pos-page .pos-display-inline-kpi strong{
    font-size:13px;
  }

  body.pos-page .pos-workspace{
    gap:4px;
    grid-template-columns:minmax(0,1fr) minmax(210px, 224px);
  }

  body.pos-page .pos-panel-head,
  body.pos-page .cart-head{
    padding:6px 8px;
  }

  body.pos-page .cats-grid{
    padding:0 6px 6px;
    gap:4px;
  }

  body.pos-page .cat-tile{
    flex-basis:84px;
    min-width:84px;
    min-height:56px;
  }

  body.pos-page .cat-img,
  body.pos-page .cat-fallback{
    height:30px;
  }

  body.pos-page .pos-products-toolbar{
    padding:4px 6px;
    gap:4px;
  }

  body.pos-page .pos-products-search input{
    min-height:28px;
    font-size:11px;
  }

  body.pos-page .scanner-strip{
    display:none;
  }

  body.pos-page .grid{
    padding:6px;
    gap:4px;
    grid-template-columns:repeat(var(--pos-product-columns),minmax(0,1fr));
    grid-template-rows:repeat(var(--pos-product-rows),minmax(0,1fr));
    grid-auto-rows:minmax(0,1fr);
  }

  body.pos-page .tile.product-tile{
    padding:5px;
    gap:3px;
    grid-template-rows:minmax(0,1fr) auto;
  }

  body.pos-page .tile .img{
    height:auto;
    min-height:64px;
  }

  body.pos-page .tile .tile-placeholder-initials{
    font-size:15px;
  }

  body.pos-page .tile .name{
    font-size:10px;
  }

  body.pos-page .tile .meta{
    font-size:8px;
  }

  body.pos-page .tile .price{
    font-size:11px;
  }

  body.pos-page .cart-lines{
    margin:2px 4px 0;
    padding-bottom:6px;
  }

  body.pos-page .line{
    padding:4px 5px;
  }

  body.pos-page .ln-name{
    font-size:10px;
  }

  body.pos-page .ln-sub,
  body.pos-page .line-discount,
  body.pos-page .line .price{
    font-size:9px;
  }

  body.pos-page .qtybox button{
    width:22px;
    height:22px;
  }

  body.pos-page .cart-summary{
    gap:3px;
    padding:4px;
    padding-bottom:calc(6px + env(safe-area-inset-bottom, 0px));
  }

  body.pos-page .cart-summary .row{
    min-height:16px;
    font-size:10px;
  }

  body.pos-page .cart-summary .row.total{
    font-size:12px;
  }

  body.pos-page .cart-summary input,
  body.pos-page .cart-summary select{
    min-height:26px;
    padding:3px 6px;
    font-size:10px;
  }

  body.pos-page .cart-summary .mini{
    width:50px;
  }

  body.pos-page .cart-summary .mini-input{
    width:48px;
  }

  body.pos-page .pay{
    gap:4px;
    margin:3px 0;
  }

  body.pos-page #mixBox{
    display:none !important;
  }

  body.pos-page .pay-actions{
    gap:4px;
    padding-top:3px;
  }

  body.pos-page .pay-actions .btn{
    min-height:28px;
    padding:4px 5px;
    font-size:10px;
  }
}

@media (max-width: 1180px){
  body.pos-page .pos-shell-badges .badge.is-secondary{
    display:none;
  }

  body.pos-page .pos-shell-utility{
    justify-content:flex-start;
  }

  body.pos-page .pos-workspace{
    grid-template-columns:minmax(0,1fr) minmax(248px, 272px);
  }

  body.pos-page .pos-products-toolbar{
    grid-template-columns:minmax(0,1fr);
  }

  body.pos-page .grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media (max-width: 860px){
  body.pos-page{
    overflow:auto;
  }

  body.pos-page .app,
  body.pos-page .main,
  body.pos-page [data-pos-shell],
  body.pos-page .pos-shell{
    height:auto;
    min-height:100svh;
    overflow:visible;
  }

  body.pos-page .main{
    padding:6px;
  }

  body.pos-page .pos-shell{
    padding-bottom:70px;
  }

  body.pos-page .pos-shell-toolbar{
    align-items:flex-start;
    flex-direction:column;
  }

  body.pos-page .pos-shell-utility{
    width:100%;
    overflow:auto;
    flex-wrap:nowrap;
    scrollbar-width:none;
  }

  body.pos-page .pos-shell-utility .btn,
  body.pos-page .pos-shell-utility .pos-shell-select{
    flex:0 0 auto;
  }

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

  body.pos-page .pos-workspace{
    grid-template-columns:1fr;
    grid-template-areas:"selling";
  }

  body.pos-page .pos-selling-panel{
    grid-template-columns:1fr;
    grid-template-areas:
      "cats"
      "products";
    grid-template-rows:auto minmax(0,1fr);
  }

  body.pos-page .cats-grid{
    display:flex;
    flex-wrap:nowrap;
    gap:6px;
    overflow:auto;
    padding:8px;
    min-height:auto;
  }

  body.pos-page .cat-tile{
    flex:0 0 96px;
    min-width:96px;
    min-height:80px;
  }

  body.pos-page .pos-products-toolbar{
    grid-template-columns:minmax(0,1fr);
  }

  body.pos-page .pos-filters,
  body.pos-page .pager{
    overflow:auto;
    flex-wrap:nowrap;
    scrollbar-width:none;
  }

  body.pos-page .grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:minmax(138px,auto);
  }

  body.pos-page .pos-ticket-panel{
    position:fixed;
    left:6px;
    right:6px;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 6px);
    z-index:85;
    height:min(72dvh, 620px);
    max-height:min(72dvh, 620px);
    transform:translateY(calc(100% - 60px));
    transition:transform .22s ease, box-shadow .22s ease;
    border-radius:18px;
  }

  body.pos-page [data-pos-shell][data-ticket-sheet-open="1"] .pos-ticket-panel{
    transform:translateY(0);
  }

  body.pos-page .pos-ticket-sheet-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    padding:10px 12px;
    border:none;
    border-bottom:1px solid var(--line);
    background:linear-gradient(135deg,color-mix(in srgb, var(--surface-tint-info) 58%, transparent 42%) 0%, color-mix(in srgb, var(--surface-tint-accent) 46%, transparent 54%) 100%);
    color:var(--txt);
    cursor:pointer;
  }

  body.pos-page .pos-ticket-sheet-toggle-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }

  body.pos-page .pos-ticket-sheet-toggle strong{
    font-size:13px;
  }

  body.pos-page .pos-mobile-ticket-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:84;
    border:none;
    background:var(--overlay);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }

  body.pos-page [data-pos-shell][data-ticket-sheet-open="1"] .pos-mobile-ticket-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  body.pos-page .cart-summary{
    box-shadow:0 -12px 28px rgba(5,10,18,.22);
  }
}

@media (max-width: 640px){
  body.pos-page .main{
    padding:4px;
  }

  body.pos-page .pos-shell-header{
    padding:6px;
    border-radius:16px;
  }

  body.pos-page .pos-shell-badges .badge.is-secondary{
    display:none;
  }

  body.pos-page .pos-display-inline-card{
    padding:9px 10px;
  }

  body.pos-page .pos-display-inline-head{
    flex-direction:column;
    align-items:flex-start;
  }

  body.pos-page .pos-display-inline-clock{
    align-items:flex-start;
  }

  body.pos-page .pos-display-inline-grid{
    grid-template-columns:1fr 1fr;
  }

  body.pos-page .grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:minmax(132px,auto);
    padding:6px;
  }

  body.pos-page .tile.product-tile{
    min-height:132px;
    grid-template-rows:72px minmax(0,1fr);
  }

  body.pos-page .tile .img{
    height:72px;
  }

  body.pos-page .pay{
    grid-template-columns:1fr;
  }

  body.pos-page .pay-actions{
    grid-template-columns:1fr;
  }

  body.pos-page .cart-head{
    align-items:flex-start;
    flex-direction:column;
  }

  body.pos-page .cart-head-actions{
    width:100%;
  }

  body.pos-page .cart-head-actions .btn{
    flex:1;
  }

  body.pos-page .modal{
    padding:6px;
  }

  body.pos-page .modal-card,
  body.pos-page .modal-card-wide,
  body.pos-page .modal-card-xl{
    width:100%;
    max-width:none;
    max-height:calc(100dvh - 12px);
    border-radius:18px;
  }

  body.pos-page .modal-head,
  body.pos-page .modal-footer{
    position:sticky;
    z-index:1;
    background:var(--panel);
  }

  body.pos-page .modal-head{
    top:0;
  }

  body.pos-page .modal-footer{
    bottom:0;
    justify-content:stretch;
    flex-wrap:wrap;
  }

  body.pos-page .modal-footer .btn{
    flex:1 1 100%;
  }

  body.pos-page .pos-ticket-panel{
    left:4px;
    right:4px;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 4px);
    height:min(78dvh, 680px);
    max-height:min(78dvh, 680px);
  }
}

@media (min-width: 861px){
  body.pos-page [data-pos-shell]{
    height:100%;
  }

  body.pos-page .pos-shell{
    gap:4px;
    height:100%;
  }

  body.pos-page .pos-workspace{
    height:var(--pos-workspace-height, 100%);
  }

  body.pos-page .pos-selling-panel{
    height:100%;
    gap:4px;
  }

  body.pos-page .pos-cats-panel,
  body.pos-page .pos-products-panel,
  body.pos-page .pos-ticket-panel{
    min-height:0;
  }

  body.pos-page .pos-products-panel{
    height:var(--pos-column-height, var(--pos-products-panel-height, 100%));
    grid-template-rows:auto auto minmax(0, 1fr);
  }

  body.pos-page .pos-ticket-panel{
    height:var(--pos-column-height, var(--pos-ticket-panel-height, 100%));
    grid-template-rows:auto minmax(0, 1fr) auto;
  }

  body.pos-page .pos-products-toolbar{
    grid-template-columns:minmax(220px, 1fr) auto auto;
    gap:6px;
    padding:6px 8px;
    align-items:center;
  }

  body.pos-page .scanner-strip{
    margin:4px 8px 0;
    min-height:36px;
    padding:4px 8px;
  }

  body.pos-page .grid{
    height:100%;
    min-height:0;
    max-height:none;
    block-size:100%;
    min-block-size:0;
    max-block-size:none;
    padding:var(--pos-product-gap, 6px);
    gap:var(--pos-product-gap, 6px);
    display:grid;
    grid-template-columns:repeat(var(--pos-product-columns, 6), minmax(0, 1fr));
    grid-template-rows:repeat(var(--pos-product-rows, 2), var(--pos-tile-height, 160px));
    grid-auto-rows:var(--pos-tile-height, 160px);
    align-content:start;
    align-self:stretch;
    overflow-x:hidden;
    overflow:hidden;
    box-sizing:border-box;
  }

  body.pos-page .tile.product-tile{
    height:var(--pos-tile-height, 160px);
    min-height:var(--pos-tile-height, 160px);
    max-height:var(--pos-tile-height, 160px);
    aspect-ratio:1 / 1;
    padding:0;
    gap:0;
    display:block;
    position:relative;
    overflow:hidden;
  }

  body.pos-page{
    --pos-tile-copy-bg:linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, transparent 6%) 0%, color-mix(in srgb, var(--surface-subtle) 86%, transparent 14%) 100%);
    --pos-tile-copy-border:rgba(214,31,38,.18);
    --pos-tile-name-color:var(--txt);
    --pos-tile-meta-color:var(--muted);
    --pos-tile-price-color:var(--accent);
    --pos-tile-price-before-color:color-mix(in srgb, var(--muted) 72%, var(--txt) 28%);
    --pos-tile-promo-bg:var(--accent);
    --pos-tile-promo-color:var(--white);
  }

  html[data-theme="dark"] body.pos-page{
    --pos-tile-copy-bg:linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 84%, rgba(0,0,0,.16) 16%) 0%, color-mix(in srgb, var(--bg) 78%, rgba(0,0,0,.22) 22%) 100%);
    --pos-tile-copy-border:color-mix(in srgb, var(--outline) 68%, transparent 32%);
    --pos-tile-name-color:var(--txt);
    --pos-tile-meta-color:var(--muted);
    --pos-tile-price-before-color:color-mix(in srgb, var(--muted) 82%, var(--txt) 18%);
  }

  body.pos-page .product-tile-placeholder{
    pointer-events:none;
    cursor:default;
    border-style:dashed;
    border-color:color-mix(in srgb, var(--outline) 72%, transparent 28%);
    opacity:.82;
    padding:0;
  }

  body.pos-page .product-tile-placeholder .tile-placeholder-figure{
    position:absolute;
    inset:0 0 var(--pos-tile-copy-height, 46px) 0;
    min-height:0;
    border:1px dashed color-mix(in srgb, var(--outline) 72%, transparent 28%);
    border-radius:calc(var(--radius-md) - 2px);
    background:
      radial-gradient(circle at center, color-mix(in srgb, var(--surface-soft) 54%, transparent 46%) 0%, transparent 52%),
      linear-gradient(180deg,color-mix(in srgb, var(--surface-subtle) 88%, transparent 12%) 0%, color-mix(in srgb, var(--bg) 86%, transparent 14%) 100%);
  }

  body.pos-page .product-tile-placeholder .tile-placeholder-copy{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:var(--pos-tile-copy-height, 46px);
    z-index:2;
    padding:3px 4px 3px;
    align-content:end;
    background:var(--pos-tile-copy-bg);
    border-top:1px solid var(--pos-tile-copy-border);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  body.pos-page .product-tile-placeholder .tile-placeholder-line{
    display:block;
    height:7px;
    border-radius:999px;
    background:color-mix(in srgb, var(--outline) 78%, transparent 22%);
  }

  body.pos-page .product-tile-placeholder .tile-placeholder-line-primary{
    width:82%;
  }

  body.pos-page .product-tile-placeholder .tile-placeholder-line-secondary{
    width:52%;
    height:6px;
    background:color-mix(in srgb, var(--surface-tint-info) 64%, var(--outline) 36%);
  }

  body.pos-page .tile.product-tile .img{
    position:absolute;
    inset:0 0 var(--pos-tile-copy-height, 46px) 0;
    min-height:0;
    border:1px solid rgba(255,255,255,.08);
    border-radius:calc(var(--radius-md) - 2px);
    background:linear-gradient(180deg, var(--surface-strong) 0%, var(--bg) 100%);
    overflow:hidden;
  }

  body.pos-page .tile.product-tile .img img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    padding:0;
    background:transparent;
  }

  body.pos-page .tile.product-tile .tile-placeholder-initials{
    font-size:20px;
  }

  body.pos-page .tile.product-tile .tile-copy{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:var(--pos-tile-copy-height, 46px);
    z-index:2;
    min-height:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    gap:0;
    padding:3px 4px 3px;
    overflow:hidden;
    background:var(--pos-tile-copy-bg);
    border-top:1px solid var(--pos-tile-copy-border);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  body.pos-page .tile.product-tile .name{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    font-size:10px;
    line-height:1.05;
    color:var(--pos-tile-name-color);
    font-weight:700;
    text-shadow:none;
    margin-bottom:1px;
  }

  body.pos-page .tile.product-tile .meta{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    margin-top:0;
    gap:0;
    font-size:8px;
    overflow:hidden;
    color:var(--pos-tile-meta-color);
    text-shadow:none;
  }

  body.pos-page .tile.product-tile .price{
    font-size:11px;
    line-height:1;
    font-weight:800;
    color:var(--pos-tile-price-color);
    text-shadow:none;
  }

  body.pos-page .tile.product-tile .price-stack{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
  }

  body.pos-page .tile.product-tile .price-before{
    font-size:7px;
    line-height:1;
    opacity:1;
    color:var(--pos-tile-price-before-color);
    text-shadow:none;
  }

  body.pos-page .tile.product-tile .tile-promo-chip{
    display:inline-flex;
    align-items:center;
    min-height:11px;
    padding:0 4px 1px;
    font-size:6px;
    line-height:1;
    white-space:nowrap;
    margin-top:1px;
    background:var(--pos-tile-promo-bg);
    color:var(--pos-tile-promo-color);
    box-shadow:none;
    text-shadow:none;
  }

  body.pos-page .cart-head{
    align-items:center;
  }

  body.pos-page .cart-lines{
    height:100%;
    min-height:0;
    overflow:auto;
    overscroll-behavior:contain;
    padding:4px 6px 6px;
  }

  body.pos-page .cart-summary{
    display:grid;
    gap:4px;
    padding:6px 6px 8px;
    border-top:1px solid var(--line);
    background:var(--panel);
    overflow:hidden;
  }

  body.pos-page .cart-summary .row{
    margin:0;
    min-height:18px;
  }

  body.pos-page .cart-summary .row.total{
    min-height:22px;
  }

  body.pos-page .pay-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px;
    position:static;
    bottom:auto;
    z-index:2;
    padding-top:3px;
    background:none;
  }

  body.pos-page .pay-actions .btn{
    min-height:30px;
    padding:5px 7px;
    font-size:10px;
  }
}