/* ═══════════════════════════════════════════════════════
   Satyam's Store — Premium UI System
   Fonts: Outfit (headings) + DM Sans (body) + JetBrains Mono
   Palette: Deep charcoal + slate greys + warm accent
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Tokens ── */
:root {
  /* Backgrounds — deep layered charcoal */
  --bg:        #0c0c0d;
  --bg-raised:  #111113;
  --surface-1:  #18181b;
  --surface-2:  #1e1e22;
  --surface-3:  #25252a;
  --surface-4:  #2d2d33;

  /* Glass */
  --glass-nav:    rgba(12,12,13,.78);
  --glass-bar:    rgba(12,12,13,.90);
  --glass-card:   rgba(24,24,27,.60);
  --glass-modal:  rgba(22,22,26,.88);

  /* Borders */
  --b0: rgba(255,255,255,.04);
  --b1: rgba(255,255,255,.08);
  --b2: rgba(255,255,255,.13);
  --b3: rgba(255,255,255,.22);

  /* Accent — warm stone/linen */
  --accent:      #e8e0d4;
  --accent-dim:  rgba(232,224,212,.1);

  /* Semantic */
  --green:  #3ecf6a;
  --red:    #d64f4f;
  --amber:  #c8902a;
  --sky:    #5b9bd6;

  /* Text */
  --t1: #f2f0ec;
  --t2: #868686;
  --t3: #444449;
  --t4: #2a2a2e;

  /* Radii */
  --r1:  7px;
  --r2: 12px;
  --r3: 18px;
  --r4: 24px;

  /* Fonts */
  --f-head: 'Outfit', sans-serif;
  --f-body: 'DM Sans', sans-serif;
  --f-mono: 'JetBrains Mono', monospace;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.hidden { display: none !important; }


html {
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family: var(--f-body);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(62,207,106,.035) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(91,155,214,.04) 0%, transparent 55%);
  color: var(--t1);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* No overflow set — let the browser use its natural scroll on the document */
}
/* pgIn removed from body — transform on body breaks position:fixed children.
   Content fade handled by viewIn on individual .view containers. */
@keyframes pgIn { from { opacity: 0; } to { opacity: 1; } }

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 99px; }

/* ════════════════════════════════════
   PAGE LOADER — original colours kept
   ════════════════════════════════════ */
#page-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  background: var(--bg);
  background-image: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(62,207,106,.04) 0%, transparent 60%);
  transition: opacity .5s cubic-bezier(.4,0,.2,1);
}
#page-loader.fade-out { opacity: 0; pointer-events: none; }

.loader-label {
  font-family: var(--f-head);
  font-size: .65rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--t3);
}
.loader-dots::after { content: ''; animation: ldots 1.4s steps(4,end) infinite; }
@keyframes ldots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }

/* hourglass animation — all keyframes untouched */
.loader {
  --dur: 2s; display: block; margin: auto; width: 110px; height: 110px;
}
.loader__glare-top,.loader__glare-bottom,.loader__model,
.loader__motion-thick,.loader__motion-medium,.loader__motion-thin,
.loader__sand-drop,.loader__sand-fill,.loader__sand-grain-left,.loader__sand-grain-right,
.loader__sand-line-left,.loader__sand-line-right,
.loader__sand-mound-top,.loader__sand-mound-bottom {
  animation-duration: var(--dur);
  animation-timing-function: cubic-bezier(.83,0,.17,1);
  animation-iteration-count: infinite;
}
.loader__glare-top    { animation-name: glare-top; }
.loader__glare-bottom { animation-name: glare-bottom; }
.loader__model        { animation-name: loader-flip; transform-origin: 12.25px 16.75px; }
.loader__motion-thick,.loader__motion-medium,.loader__motion-thin { transform-origin: 26px 26px; }
.loader__motion-thick  { animation-name: motion-thick; }
.loader__motion-medium { animation-name: motion-medium; }
.loader__motion-thin   { animation-name: motion-thin; }
.loader__sand-drop        { animation-name: sand-drop; }
.loader__sand-fill        { animation-name: sand-fill; }
.loader__sand-grain-left  { animation-name: sand-grain-left; }
.loader__sand-grain-right { animation-name: sand-grain-right; }
.loader__sand-line-left   { animation-name: sand-line-left; }
.loader__sand-line-right  { animation-name: sand-line-right; }
.loader__sand-mound-top   { animation-name: sand-mound-top; }
.loader__sand-mound-bottom { animation-name: sand-mound-bottom; transform-origin: 12.25px 31.5px; }
@keyframes loader-flip{from{transform:translate(13.75px,9.25px) rotate(-180deg)}24%,to{transform:translate(13.75px,9.25px) rotate(0)}}
@keyframes glare-top{from{stroke:rgba(255,255,255,0)}24%,to{stroke:white}}
@keyframes glare-bottom{from{stroke:white}24%,to{stroke:rgba(255,255,255,0)}}
@keyframes motion-thick{from{animation-timing-function:cubic-bezier(.33,0,.67,0);stroke:rgba(255,255,255,0);stroke-dashoffset:153.94;transform:rotate(.67turn)}20%{animation-timing-function:cubic-bezier(.33,1,.67,1);stroke:rgba(255,255,255,.5);stroke-dashoffset:141.11;transform:rotate(1turn)}40%,to{stroke:rgba(255,255,255,0);stroke-dashoffset:153.94;transform:rotate(1.33turn)}}
@keyframes motion-medium{from,8%{animation-timing-function:cubic-bezier(.33,0,.67,0);stroke:rgba(255,255,255,0);stroke-dashoffset:153.94;transform:rotate(.5turn)}20%{animation-timing-function:cubic-bezier(.33,1,.67,1);stroke:rgba(255,255,255,.65);stroke-dashoffset:147.53;transform:rotate(.83turn)}32%,to{stroke:rgba(255,255,255,0);stroke-dashoffset:153.94;transform:rotate(1.17turn)}}
@keyframes motion-thin{from,4%{animation-timing-function:cubic-bezier(.33,0,.67,0);stroke:rgba(255,255,255,0);stroke-dashoffset:153.94;transform:rotate(.33turn)}24%{animation-timing-function:cubic-bezier(.33,1,.67,1);stroke:rgba(255,255,255,.35);stroke-dashoffset:134.7;transform:rotate(.67turn)}44%,to{stroke:rgba(255,255,255,0);stroke-dashoffset:153.94;transform:rotate(1turn)}}
@keyframes sand-drop{from,10%{animation-timing-function:cubic-bezier(.12,0,.39,0);stroke-dashoffset:1}70%,to{stroke-dashoffset:-107}}
@keyframes sand-fill{from,10%{animation-timing-function:cubic-bezier(.12,0,.39,0);stroke-dashoffset:55}70%,to{stroke-dashoffset:-54}}
@keyframes sand-grain-left{from,10%{animation-timing-function:cubic-bezier(.12,0,.39,0);stroke-dashoffset:29}70%,to{stroke-dashoffset:-22}}
@keyframes sand-grain-right{from,10%{animation-timing-function:cubic-bezier(.12,0,.39,0);stroke-dashoffset:27}70%,to{stroke-dashoffset:-24}}
@keyframes sand-line-left{from,10%{animation-timing-function:cubic-bezier(.12,0,.39,0);stroke-dashoffset:53}70%,to{stroke-dashoffset:-55}}
@keyframes sand-line-right{from,10%{animation-timing-function:cubic-bezier(.12,0,.39,0);stroke-dashoffset:14}70%,to{stroke-dashoffset:-24.5}}
@keyframes sand-mound-top{from,10%{animation-timing-function:linear;transform:translate(0,0)}15%{animation-timing-function:cubic-bezier(.12,0,.39,0);transform:translate(0,1.5px)}51%,to{transform:translate(0,13px)}}
@keyframes sand-mound-bottom{from,31%{animation-timing-function:cubic-bezier(.61,1,.88,1);transform:scale(1,0)}56%,to{transform:scale(1,1)}}

/* ════════════════════════════════════
   NAV — real glassmorphism
   ════════════════════════════════════ */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: var(--glass-nav);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid var(--b1);
  box-shadow: 0 1px 0 var(--b0), 0 8px 32px rgba(0,0,0,.4);
}
.site-nav::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(62,207,106,.15) 30%, rgba(91,155,214,.15) 70%, transparent 100%);
  pointer-events: none;
}
.nav-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 11px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-brand-icon {
  width: 30px; height: 30px;
  background: linear-gradient(135deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--b2);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--t1); flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-brand-name {
  font-family: var(--f-head);
  font-size: .92rem; font-weight: 700; color: var(--t1); letter-spacing: -.02em;
}
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--r1);
  font-family: var(--f-body); font-size: .78rem; font-weight: 500;
  color: var(--t2); text-decoration: none;
  border: 1px solid transparent;
  transition: color .2s, background .2s, border-color .2s;
}
.nav-link:hover { color: var(--t1); background: rgba(255,255,255,.06); }
.nav-link.active {
  color: var(--t1);
  background: rgba(255,255,255,.07);
  border-color: var(--b1);
}
/* Icon-only (admin gear) */
.nav-link-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--r1);
  color: var(--t2); text-decoration: none;
  border: 1px solid transparent;
  transition: color .2s, background .2s, border-color .2s;
}
.nav-link-icon:hover { color: var(--t1); background: rgba(255,255,255,.06); }
.nav-link-icon.active { color: var(--t1); background: rgba(255,255,255,.07); border-color: var(--b1); }
.nav-logout-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--r1);
  color: var(--t3); background: none; border: 1px solid transparent;
  cursor: pointer; font-family: var(--f-body);
  transition: color .2s, border-color .2s;
}
.nav-logout-btn:hover { color: var(--red); border-color: rgba(214,79,79,.2); }

/* ════════════════════════════════════
   VIEW SWITCHER (merged pages)
   ════════════════════════════════════ */
.view { display: none; }
.view.active { display: block; animation: viewIn .24s cubic-bezier(.4,0,.2,1) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ════════════════════════════════════
   ADMIN TABS
   ════════════════════════════════════ */
.tab-bar {
  display: flex; gap: 3px; margin-bottom: 18px;
  background: var(--surface-1);
  border: 1px solid var(--b1);
  border-radius: var(--r2); padding: 4px;
}
.tab-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 10px; border-radius: 9px;
  font-family: var(--f-body); font-size: .77rem; font-weight: 500;
  color: var(--t2); background: none; border: none; cursor: pointer;
  transition: color .2s, background .2s;
}
.tab-btn.active { color: var(--t1); background: var(--surface-3); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: viewIn .22s ease both; }

/* ════════════════════════════════════
   PAGE WRAP
   ════════════════════════════════════ */
.page-wrap { max-width: 1100px; margin: 0 auto; padding: calc(54px + 18px) 14px calc(90px + env(safe-area-inset-bottom, 0px)); }
.page-title {
  font-family: var(--f-head);
  font-size: 1.15rem; font-weight: 700; color: var(--t1);
  letter-spacing: -.03em; margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px;
}

/* ════════════════════════════════════
   PRODUCT GRID
   ════════════════════════════════════ */
.p-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
@media (min-width: 500px)  { .p-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; } }
@media (min-width: 700px)  { .p-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 980px)  { .p-grid { grid-template-columns: repeat(6, 1fr); gap: 11px; } }

/* ════════════════════════════════════
   PRODUCT CARD — real glassmorphism
   ════════════════════════════════════ */
.p-card {
  background: var(--glass-card);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--b1);
  border-radius: var(--r2);
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
  animation: cardIn .32s cubic-bezier(.4,0,.2,1) both;
  transition: border-color .22s, transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s;
}
.p-card:hover {
  border-color: var(--b2);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 0 0 1px var(--b2);
}
.p-card:active { transform: scale(.97); transition-duration: .08s; }
.p-card.in-cart {
  border-color: var(--b3);
  background: rgba(30,30,34,.75);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14);
}
.p-card.oos { opacity: .36; }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.p-card:nth-child(1){animation-delay:.03s}.p-card:nth-child(2){animation-delay:.06s}
.p-card:nth-child(3){animation-delay:.09s}.p-card:nth-child(4){animation-delay:.12s}
.p-card:nth-child(5){animation-delay:.15s}.p-card:nth-child(6){animation-delay:.18s}
.p-card:nth-child(n+7){animation-delay:.21s}

.card-img {
  width: 100%; aspect-ratio: 1;
  background: radial-gradient(circle at 50% 40%, #2c2c36 0%, #1a1a22 70%, #111116 100%);
  overflow: hidden; flex-shrink: 0; position: relative;
}
.card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .36s cubic-bezier(.4,0,.2,1);
}
.p-card:hover .card-img img { transform: scale(1.06); }
.card-img-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; opacity:.14; }
.card-img-placeholder svg { width:28%; height:28%; }

.cart-badge {
  position: absolute; top: 6px; left: 6px;
  background: var(--t1); color: var(--bg);
  font-family: var(--f-head);
  font-size: .55rem; font-weight: 700;
  padding: 2px 6px; border-radius: 99px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* OOS — prominent overlay + bar */
.oos-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,11,.62);
  backdrop-filter: blur(2px);
}
.oos-label-text {
  font-family: var(--f-head);
  background: rgba(214,79,79,.18);
  border: 1px solid rgba(214,79,79,.35);
  color: #f08080;
  font-size: .6rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 99px;
}

.del-btn {
  position: absolute; top: 5px; right: 5px;
  width: 22px; height: 22px; border-radius: 5px;
  background: rgba(214,79,79,.08); border: 1px solid rgba(214,79,79,.15);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--red); opacity: 0;
  transition: opacity .15s, background .15s;
}
.p-card:hover .del-btn { opacity: 1; }
.del-btn:hover { background: rgba(214,79,79,.22); }
@media (hover:none) { .del-btn { opacity: 1; } }

.card-body { padding: 8px 9px 4px; flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-name {
  font-family: var(--f-head);
  font-size: .73rem; font-weight: 600; color: var(--t1); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 480px) { .card-name { font-size: .76rem; } }
.card-price {
  font-family: var(--f-mono);
  font-size: .74rem; font-weight: 500; color: var(--t1); opacity: .75; margin-top: 1px;
}

/* Stock label — visible below a separator line */
.card-stock-bar {
  display: flex; align-items: center; gap: 5px;
  margin-top: 3px; padding-top: 5px;
  border-top: 1px solid var(--b0);
}
.card-stock-dot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
}
.card-stock-dot.ok  { background: var(--green); }
.card-stock-dot.low { background: var(--green); }
.card-stock-dot.out { background: var(--red); }
.card-stock-text {
  font-family: var(--f-mono);
  font-size: .58rem; font-weight: 500; color: var(--t2);
}
.card-stock-text.oos-text { color: #f08080; font-weight: 600; }

.qty-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px 8px; gap: 4px; }
.qty-btn {
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid var(--b1); background: var(--surface-2);
  color: var(--t2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.qty-btn:hover { background: var(--surface-3); border-color: var(--b2); color: var(--t1); }
.qty-btn:active { transform: scale(.8); }
.qty-btn[disabled] { opacity: .18; cursor: not-allowed; pointer-events: none; }
.qty-btn.plus {
  background: var(--t1); border-color: var(--t1); color: var(--bg);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.qty-btn.plus:hover { background: var(--accent); border-color: var(--accent); }
.qty-val { font-family: var(--f-mono); font-size: .82rem; font-weight: 600; min-width: 16px; text-align: center; color: var(--t1); }

/* ════════════════════════════════════
   BOTTOM BAR — glassmorphism
   ════════════════════════════════════ */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: var(--glass-bar);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-top: 1px solid var(--b1);
  box-shadow: 0 -1px 0 var(--b0), 0 -12px 40px rgba(0,0,0,.45);
  padding: 10px 16px max(10px, env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.bottom-bar-info { display: flex; align-items: center; gap: 11px; }
.bottom-stat { display: flex; align-items: center; gap: 4px; font-size: .77rem; color: var(--t2); }
.bottom-stat strong { color: var(--t1); font-family: var(--f-mono); letter-spacing: -.01em; }
.bottom-stat strong.gold { color: var(--accent); }
.bottom-divider { width: 1px; height: 14px; background: var(--b2); }

.proceed-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px;
  background: linear-gradient(180deg, #f5f0e8 0%, #ddd8ce 100%);
  border: none;
  border-radius: 14px;
  color: #0c0c0d; font-family: var(--f-head);
  font-size: .84rem; font-weight: 700; letter-spacing: -.01em;
  cursor: pointer; text-decoration: none;
  /* claymorphism */
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -2px 0 rgba(0,0,0,.18) inset,
    0 6px 0 #b8b3aa,
    0 8px 20px rgba(0,0,0,.35);
  transition: transform .14s cubic-bezier(.4,0,.2,1), box-shadow .14s;
  -webkit-tap-highlight-color: transparent;
}
.proceed-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -2px 0 rgba(0,0,0,.18) inset,
    0 7px 0 #b8b3aa,
    0 10px 24px rgba(0,0,0,.4);
}
.proceed-btn:active {
  transform: translateY(3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -2px 0 rgba(0,0,0,.18) inset,
    0 3px 0 #b8b3aa,
    0 4px 12px rgba(0,0,0,.3);
  transition-duration: .06s;
}
.proceed-btn:disabled { opacity: .22; cursor: not-allowed; transform: none; box-shadow: 0 3px 0 #b8b3aa, 0 4px 12px rgba(0,0,0,.25); }

/* ════════════════════════════════════
   STATES
   ════════════════════════════════════ */
.state-box { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--t3); gap: 6px; padding: 24px; }
.state-box.hidden { display: none; }
.spinner { width: 28px; height: 28px; border: 2px solid var(--b1); border-top-color: var(--t2); border-radius: 50%; animation: spin .75s linear infinite; margin-bottom: 10px; }
@keyframes spin { to { transform: rotate(360deg); } }
.retry-btn { margin-top: 12px; padding: 8px 18px; background: var(--surface-2); border: 1px solid var(--b2); color: var(--t1); border-radius: var(--r1); font-family: var(--f-body); font-size: .78rem; font-weight: 500; cursor: pointer; transition: background .15s; }
.retry-btn:hover { background: var(--surface-3); }

/* ════════════════════════════════════
   OVERLAYS & MODALS — glassmorphism
   ════════════════════════════════════ */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(8px);
  z-index: 300;
  display: flex; align-items: flex-end;
  animation: fIn .18s ease;
}
@media (min-width: 600px) { .overlay { align-items: center; padding: 16px; } }
.overlay.hidden { display: none; }

.modal {
  background: var(--glass-modal);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid var(--b2);
  width: 100%; max-width: 480px; margin: 0 auto;
  padding: 20px 16px 28px;
  border-radius: var(--r4) var(--r4) 0 0;
  border-bottom: none;
  animation: sUp .26s cubic-bezier(.4,0,.2,1);
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 -20px 60px rgba(0,0,0,.5);
}
@media (min-width: 600px) {
  .modal { border-radius: var(--r4); border-bottom: 1px solid var(--b2); animation: slUp .22s cubic-bezier(.4,0,.2,1); padding: 24px; }
}
.modal::before { content: ''; display: block; width: 32px; height: 3px; background: var(--b2); border-radius: 99px; margin: 0 auto 16px; }
@media (min-width: 600px) { .modal::before { display: none; } }

.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-title { font-family: var(--f-head); font-size: 1.02rem; font-weight: 700; color: var(--t1); letter-spacing: -.02em; }
.modal-sub { font-size: .74rem; color: var(--t3); margin-top: 3px; }
.modal-close { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--b1); background: var(--surface-1); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--t3); flex-shrink: 0; transition: color .15s, border-color .15s; }
.modal-close:hover { color: var(--red); border-color: rgba(214,79,79,.2); }

.form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
@media (max-width: 380px) { .form-row2 { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.field label { font-family: var(--f-head); font-size: .64rem; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: .08em; }
.field input {
  padding: 9px 11px; border: 1px solid var(--b1); border-radius: var(--r1);
  font-family: var(--f-body); font-size: .86rem; color: var(--t1);
  background: var(--surface-1); outline: none; width: 100%;
  transition: border-color .15s, box-shadow .15s; -webkit-appearance: none;
}
.field input:focus { border-color: var(--b3); box-shadow: 0 0 0 3px rgba(255,255,255,.04); }
.field input::placeholder { color: var(--t4); }
.req { color: var(--t2); }
.modal-actions { display: flex; gap: 8px; margin-top: 8px; }

.btn-primary { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 14px; background:var(--t1); border:none; border-radius:var(--r1); color:var(--bg); font-family:var(--f-head); font-size:.83rem; font-weight:600; cursor:pointer; transition:background .15s,transform .15s; box-shadow:0 3px 12px rgba(0,0,0,.25); }
.btn-primary:hover { background:var(--accent); }
.btn-primary:active { transform:scale(.97); }
.btn-primary:disabled { opacity:.35; cursor:not-allowed; }

.btn-ghost { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:10px 14px; background:transparent; border:1px solid var(--b2); border-radius:var(--r1); color:var(--t2); font-family:var(--f-body); font-size:.83rem; font-weight:500; cursor:pointer; transition:background .15s,color .15s; }
.btn-ghost:hover { background:var(--surface-2); color:var(--t1); }

.btn-danger { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 14px; background:rgba(214,79,79,.09); border:1px solid rgba(214,79,79,.2); border-radius:var(--r1); color:var(--red); font-family:var(--f-head); font-size:.83rem; font-weight:600; cursor:pointer; transition:background .15s; }
.btn-danger:hover { background:rgba(214,79,79,.18); }
.btn-danger:disabled { opacity:.4; cursor:not-allowed; }

.btn-sm { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:6px; font-family:var(--f-body); font-size:.7rem; font-weight:500; cursor:pointer; border:1px solid var(--b1); background:transparent; color:var(--t2); transition:background .12s,color .12s; }
.btn-sm:hover { background:var(--surface-2); color:var(--t1); }
.btn-sm.approve { border-color:rgba(62,207,106,.2); background:rgba(62,207,106,.06); color:var(--green); }
.btn-sm.approve:hover { background:rgba(62,207,106,.14); }
.btn-sm.reject { border-color:rgba(214,79,79,.2); background:rgba(214,79,79,.05); color:var(--red); }
.btn-sm.reject:hover { background:rgba(214,79,79,.14); }

/* Stock edit buttons in admin table */
.stock-ctrl { display:inline-flex; align-items:center; gap:5px; }
.stock-ctrl-btn {
  width:26px; height:26px; border-radius:6px;
  border:1px solid var(--b1); background:var(--surface-2);
  color:var(--t2); font-family:var(--f-mono); font-size:.88rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .12s,color .12s,border-color .12s;
  line-height:1; flex-shrink:0; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.stock-ctrl-btn:hover { background:var(--surface-3); color:var(--t1); border-color:var(--b2); }
.stock-ctrl-btn.plus:hover { border-color:rgba(62,207,106,.3); color:var(--green); }
.stock-ctrl-btn.minus:hover { border-color:rgba(214,79,79,.3); color:var(--red); }
.stock-val { font-family:var(--f-mono); font-size:.78rem; font-weight:600; color:var(--t1); min-width:22px; text-align:center; }
@media (max-width:640px) {
  .stock-ctrl { gap:6px; }
  .stock-ctrl-btn { width:30px; height:30px; border-radius:8px; font-size:.95rem; }
  .stock-val { min-width:26px; font-size:.82rem; }
}

/* ════════════════════════════════════
   ADMIN LAYOUT
   ════════════════════════════════════ */
.admin-grid { display:grid; grid-template-columns:280px 1fr; gap:14px; align-items:start; }
@media (max-width:768px) { .admin-grid { grid-template-columns:1fr; } }

.card {
  background: rgba(22,22,26,.62);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border:1px solid var(--b1); border-radius:var(--r2); padding:16px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.card-title { font-family:var(--f-head); font-size:.7rem; font-weight:600; color:var(--t3); margin-bottom:14px; display:flex; align-items:center; gap:7px; padding-bottom:11px; border-bottom:1px solid var(--b0); text-transform:uppercase; letter-spacing:.09em; }
.card-title-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding-bottom:11px; border-bottom:1px solid var(--b0); }

.tbl { width:100%; border-collapse:collapse; }
.tbl th { text-align:left; font-family:var(--f-head); font-size:.6rem; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.09em; padding:0 10px 10px; }
.tbl td { padding:9px 10px; font-size:.78rem; color:var(--t2); border-top:1px solid var(--b0); vertical-align:middle; }
.tbl tr:hover td { background:rgba(255,255,255,.012); }

/* Product table responsive — card rows on mobile */
@media (max-width:600px) {
  /* Switch table to block so we can use CSS grid per row */
  .tbl, .tbl tbody { display:block; }
  .tbl thead { display:none; }
  .tbl tr.prod-row {
    display:grid;
    /* 3 columns: [info] [stock+badge] [actions] */
    grid-template-columns:1fr auto auto;
    grid-template-rows:auto auto;
    column-gap:8px; row-gap:4px;
    padding:10px 4px;
    border-top:1px solid var(--b0);
  }
  .tbl tr.prod-row:first-child { border-top:none; }
  .tbl td { padding:0; border:none; }

  /* Row 1 left: name */
  .prod-name  { grid-column:1; grid-row:1; font-weight:600; color:var(--t1); font-size:.82rem; align-self:center; }
  /* Row 2 left: stock controls */
  .prod-stock-ctrl { grid-column:1; grid-row:2; align-self:center; }
  /* Row 1 right: price */
  .prod-price { grid-column:2; grid-row:1; font-family:var(--f-mono); font-size:.75rem; text-align:right; color:var(--t2); align-self:center; white-space:nowrap; }
  /* Row 2 right: status badge */
  .prod-badge { grid-column:2; grid-row:2; text-align:right; align-self:center; }
  /* Both rows far-right: edit + delete — always visible */
  .prod-del {
    grid-column:3;
    grid-row:1 / 3;       /* spans both rows */
    display:flex !important;   /* override any hiding */
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    position:static !important;  /* never absolute */
    overflow:visible !important;
    min-width:32px;
  }
  /* Make buttons slightly larger for touch */
  .prod-del .tbl-edit,
  .prod-del .tbl-del { width:28px; height:28px; border-radius:7px; }
}

.tbl-del { width:24px; height:24px; border-radius:5px; background:transparent; border:1px solid var(--b0); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--t3); transition:background .12s,color .12s,border-color .12s; flex-shrink:0; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.tbl-del:hover { background:rgba(214,79,79,.1); border-color:rgba(214,79,79,.2); color:var(--red); }
.tbl-edit { width:24px; height:24px; border-radius:5px; background:transparent; border:1px solid var(--b0); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--t3); transition:background .12s,color .12s,border-color .12s; flex-shrink:0; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.tbl-edit:hover { background:rgba(91,155,214,.1); border-color:rgba(91,155,214,.25); color:var(--sky); }

.badge { display:inline-block; padding:2px 7px; border-radius:99px; font-family:var(--f-mono); font-size:.64rem; font-weight:600; }
.badge-ok  { background:rgba(62,207,106,.09);  color:var(--green); border:1px solid rgba(62,207,106,.18); }
.badge-low { background:rgba(200,144,42,.09);  color:var(--amber); border:1px solid rgba(200,144,42,.18); }
.badge-out { background:rgba(214,79,79,.09);   color:var(--red);   border:1px solid rgba(214,79,79,.18); }

.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.stat-box { background:var(--surface-1); border:1px solid var(--b0); border-radius:var(--r1); padding:12px; text-align:center; }
.stat-val { font-family:var(--f-mono); font-size:1.28rem; font-weight:700; color:var(--t1); }
.stat-lbl { font-family:var(--f-head); font-size:.58rem; color:var(--t3); margin-top:3px; text-transform:uppercase; letter-spacing:.06em; }

.sales-tbl { width:100%; border-collapse:collapse; }
.sales-tbl th { text-align:left; font-family:var(--f-head); font-size:.6rem; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.09em; padding:0 12px 10px; }
.sales-tbl td { padding:10px 12px; font-size:.76rem; color:var(--t2); border-top:1px solid var(--b0); vertical-align:middle; }
.sales-tbl tr:hover td { background:rgba(255,255,255,.012); }
.sales-del-btn { width:24px; height:24px; border-radius:5px; background:transparent; border:1px solid var(--b0); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--t3); transition:background .12s,color .12s,border-color .12s; flex-shrink:0; touch-action:manipulation; }
.sales-del-btn:hover { background:rgba(214,79,79,.1); border-color:rgba(214,79,79,.2); color:var(--red); }

/* ════════════════════════════════════
   PAYMENT PAGE
   ════════════════════════════════════ */
.pay-wrap { max-width:420px; margin:0 auto; padding:calc(54px + 16px) 14px 40px; display:flex; flex-direction:column; gap:12px; }

.pay-card {
  background: rgba(22,22,26,.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border:1px solid var(--b1); border-radius:var(--r2); padding:17px;
  box-shadow: 0 4px 24px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.04) inset;
}
.pay-card-title { font-family:var(--f-head); font-size:.67rem; font-weight:600; color:var(--t3); margin-bottom:12px; text-transform:uppercase; letter-spacing:.09em; display:flex; align-items:center; gap:6px; }
.pay-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--b0); font-size:.82rem; color:var(--t2); }
.pay-row:last-child { border-bottom:none; }
.pay-total-row { display:flex; justify-content:space-between; align-items:baseline; padding:13px 0 0; border-top:1px solid var(--b1); margin-top:5px; }
.pay-total-lbl { font-size:.72rem; color:var(--t2); font-weight:500; }
.pay-total-amt { font-family:var(--f-mono); font-size:1.48rem; font-weight:700; color:var(--t1); letter-spacing:-.02em; }

/* UPI display */
.upi-display {
  display:flex; align-items:center; justify-content:space-between;
  background: var(--surface-2);
  border:1px solid var(--b1); border-radius:var(--r1); padding:11px 13px;
  margin-bottom:4px;
}
.upi-display-info { display:flex; flex-direction:column; gap:1px; }
.upi-display-name { font-family:var(--f-head); font-size:.68rem; color:var(--t3); font-weight:500; }
.upi-display-id { font-family:var(--f-mono); font-size:.82rem; font-weight:600; color:var(--t1); }
.copy-btn { display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:6px; background:transparent; border:1px solid var(--b1); color:var(--t3); font-size:.66rem; font-weight:500; cursor:pointer; font-family:var(--f-body); transition:color .15s,border-color .15s; }
.copy-btn:hover { color:var(--t2); border-color:var(--b2); }

.divider-or { display:flex; align-items:center; gap:10px; color:var(--t3); font-size:.67rem; margin:11px 0 5px; }
.divider-or::before, .divider-or::after { content:''; flex:1; height:1px; background:var(--b1); }

.qr-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; padding:4px 0; }
.qr-box { width:172px; height:172px; background:#fff; border-radius:var(--r2); display:flex; align-items:center; justify-content:center; padding:8px; border:2px solid rgba(255,255,255,.12); box-shadow:0 8px 32px rgba(0,0,0,.5), 0 0 0 4px rgba(255,255,255,.04); }
.qr-box img { width:100%; height:100%; object-fit:contain; border-radius:4px; }
.qr-actions { display:flex; gap:6px; }
.qr-action-btn { display:inline-flex; align-items:center; gap:4px; padding:6px 13px; background:var(--surface-2); border:1px solid var(--b2); border-radius:7px; color:var(--t2); font-size:.7rem; font-weight:500; cursor:pointer; font-family:var(--f-body); transition:color .12s,border-color .12s,background .12s; }
.qr-action-btn:hover { color:var(--t1); background:var(--surface-3); border-color:var(--b3); }
.qr-hint { font-family:var(--f-head); font-size:.64rem; color:var(--t3); text-align:center; letter-spacing:.04em; }

.confirm-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:7px; padding:13px; background:var(--green); border:none; border-radius:var(--r2); color:#fff; font-family:var(--f-head); font-size:.9rem; font-weight:600; cursor:pointer; transition:background .18s,transform .18s; box-shadow:0 4px 20px rgba(62,207,106,.25); }
.confirm-btn:hover { background:#35bb5c; transform:translateY(-1px); }
.confirm-btn:active { transform:scale(.97); }
.confirm-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }

/* Confirm section inside UPI card */
.pay-confirm-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--b1);
}
.pay-confirm-hint {
  font-size: .72rem; color: var(--t3); text-align: center;
  margin-bottom: 11px; line-height: 1.6;
}

/* ════════════════════════════════════
   LOGIN — glassmorphism card
   ════════════════════════════════════ */
#login-screen { position:fixed; inset:0; z-index:9998; display:flex; align-items:center; justify-content:center; padding:20px; background:var(--bg); }
#login-screen.hidden { display:none; }
.login-box {
  background: rgba(22,22,26,.80);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border:1px solid var(--b2); border-radius:var(--r4); padding:30px 24px;
  width:100%; max-width:320px; text-align:center;
  box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 1px var(--b1);
}
.login-icon { width:46px; height:46px; background:var(--surface-2); border:1px solid var(--b2); border-radius:12px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:var(--t1); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.login-title { font-family:var(--f-head); font-size:1rem; font-weight:700; color:var(--t1); margin-bottom:3px; letter-spacing:-.02em; }
.login-sub { font-size:.73rem; color:var(--t3); margin-bottom:20px; }
.login-input-wrap { position:relative; margin-bottom:6px; }
.login-input { width:100%; padding:10px 36px 10px 12px; background:var(--surface-1); border:1px solid var(--b1); border-radius:var(--r1); color:var(--t1); font-family:var(--f-body); font-size:.86rem; outline:none; transition:border-color .15s; -webkit-appearance:none; }
.login-input:focus { border-color:var(--b3); }
.login-input.error { border-color:rgba(214,79,79,.5); animation:shake .3s ease; }
.eye-btn { position:absolute; right:9px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--t3); cursor:pointer; padding:2px; display:flex; align-items:center; }
.eye-btn:hover { color:var(--t2); }
.login-error { font-size:.7rem; color:var(--red); min-height:15px; margin-bottom:8px; text-align:left; }
.login-btn { width:100%; padding:11px; background:var(--t1); border:none; border-radius:var(--r1); color:var(--bg); font-family:var(--f-head); font-size:.88rem; font-weight:600; cursor:pointer; transition:background .15s; letter-spacing:-.01em; box-shadow:0 3px 12px rgba(0,0,0,.3); }
.login-btn:hover { background:var(--accent); }
.login-back { display:inline-flex; align-items:center; gap:4px; margin-top:14px; font-size:.72rem; color:var(--t3); text-decoration:none; transition:color .12s; }
.login-back:hover { color:var(--t2); }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }

/* ════════════════════════════════════
   MISC
   ════════════════════════════════════ */
.del-icon { width:48px; height:48px; background:rgba(214,79,79,.07); border:1px solid rgba(214,79,79,.14); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto; }
.success-icon { width:52px; height:52px; background:rgba(62,207,106,.09); border:1px solid rgba(62,207,106,.16); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto; }
.receipt-box { background:var(--surface-1); border:1px solid var(--b1); border-radius:var(--r1); padding:12px; font-family:var(--f-mono); font-size:.68rem; color:var(--t2); max-height:200px; overflow-y:auto; margin-bottom:12px; }
.r-row { display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid var(--b0); }
.r-header { text-align:center; border-bottom:1px solid var(--b1); padding-bottom:5px; margin-bottom:5px; font-size:.7rem; color:var(--t2); font-family:var(--f-head); }
.r-total { display:flex; justify-content:space-between; padding:6px 0 3px; font-weight:700; font-size:.78rem; border-top:1px solid var(--b1); margin-top:3px; color:var(--t1); }
.date-select { background:var(--surface-1); border:1px solid var(--b1); border-radius:var(--r1); color:var(--t1); font-family:var(--f-body); font-size:.76rem; padding:6px 10px; outline:none; cursor:pointer; }

/* ════════════════════════════════════
   TOAST — glassmorphism pill
   ════════════════════════════════════ */
.toast {
  position: fixed;
  top: 72px;           /* just below the sticky nav, always visible */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30,30,34,.96);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--b2);
  color: var(--t1); padding: 8px 18px; border-radius: 99px;
  font-family: var(--f-body); font-size: .76rem; font-weight: 500;
  z-index: 9000;        /* above everything including modals bottom layer */
  max-width: calc(100vw - 32px); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: tPop .2s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  pointer-events: none; /* don't block clicks */
}
.toast.hidden { display: none; }

/* ════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════ */
@keyframes fIn  { from{opacity:0} to{opacity:1} }
@keyframes sUp  { from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes slUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes tPop { from{opacity:0;transform:translateX(-50%) translateY(-8px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* ════════════════════════════════════
   HAMSTER LOADER (admin page)
   ════════════════════════════════════ */
.wheel-and-hamster{--dur:1s;position:relative;width:88px;height:88px}
.wheel,.hamster,.hamster div,.spoke{position:absolute}
.wheel,.spoke{border-radius:50%;top:0;left:0;width:100%;height:100%}
.wheel{background:radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%);z-index:2}
.hamster{animation:hamster var(--dur) ease-in-out infinite;top:50%;left:calc(50% - 3.5em);width:7em;height:3.75em;transform:rotate(4deg) translate(-0.8em,1.85em);transform-origin:50% 0;z-index:1;font-size:7px}
.hamster__head{animation:hamsterHead var(--dur) ease-in-out infinite;background:hsl(30,90%,55%);border-radius:70% 30% 0 100%/40% 25% 25% 60%;box-shadow:0 -0.25em 0 hsl(30,90%,80%) inset,0.75em -1.55em 0 hsl(30,90%,90%) inset;top:0;left:-2em;width:2.75em;height:2.5em;transform-origin:100% 50%}
.hamster__ear{animation:hamsterEar var(--dur) ease-in-out infinite;background:hsl(0,90%,85%);border-radius:50%;box-shadow:-0.25em 0 hsl(30,90%,55%) inset;top:-0.25em;right:-0.25em;width:0.75em;height:0.75em;transform-origin:50% 75%}
.hamster__eye{animation:hamsterEye var(--dur) linear infinite;background:hsl(0,0%,0%);border-radius:50%;top:0.375em;left:1.25em;width:0.5em;height:0.5em}
.hamster__nose{background:hsl(0,90%,75%);border-radius:35% 65% 85% 15%/70% 50% 50% 30%;top:0.75em;left:0;width:0.2em;height:0.25em}
.hamster__body{animation:hamsterBody var(--dur) ease-in-out infinite;background:hsl(30,90%,90%);border-radius:50% 30% 50% 30%/15% 60% 40% 40%;box-shadow:0.1em 0.75em 0 hsl(30,90%,55%) inset,0.15em -0.5em 0 hsl(30,90%,80%) inset;top:0.25em;left:2em;width:4.5em;height:3em;transform-origin:17% 50%;transform-style:preserve-3d}
.hamster__limb--fr,.hamster__limb--fl{clip-path:polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);top:2em;left:0.5em;width:1em;height:1.5em;transform-origin:50% 0}
.hamster__limb--fr{animation:hamsterFRLimb var(--dur) linear infinite;background:linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%);transform:rotate(15deg) translateZ(-1px)}
.hamster__limb--fl{animation:hamsterFLLimb var(--dur) linear infinite;background:linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%);transform:rotate(15deg)}
.hamster__limb--br,.hamster__limb--bl{border-radius:0.75em 0.75em 0 0;clip-path:polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);top:1em;left:2.8em;width:1.5em;height:2.5em;transform-origin:50% 30%}
.hamster__limb--br{animation:hamsterBRLimb var(--dur) linear infinite;background:linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%);transform:rotate(-25deg) translateZ(-1px)}
.hamster__limb--bl{animation:hamsterBLLimb var(--dur) linear infinite;background:linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%);transform:rotate(-25deg)}
.hamster__tail{animation:hamsterTail var(--dur) linear infinite;background:hsl(0,90%,85%);border-radius:0.25em 50% 50% 0.25em;box-shadow:0 -0.2em 0 hsl(0,90%,75%) inset;top:1.5em;right:-0.5em;width:1em;height:0.5em;transform:rotate(30deg) translateZ(-1px);transform-origin:0.25em 0.25em}
.spoke{animation:spoke var(--dur) linear infinite;background:radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%),linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50%/99% 99% no-repeat}
@keyframes hamster{from,to{transform:rotate(4deg) translate(-0.8em,1.85em)}50%{transform:rotate(0) translate(-0.8em,1.85em)}}
@keyframes hamsterHead{from,25%,50%,75%,to{transform:rotate(0)}12.5%,37.5%,62.5%,87.5%{transform:rotate(8deg)}}
@keyframes hamsterEye{from,90%,to{transform:scaleY(1)}95%{transform:scaleY(0)}}
@keyframes hamsterEar{from,25%,50%,75%,to{transform:rotate(0)}12.5%,37.5%,62.5%,87.5%{transform:rotate(12deg)}}
@keyframes hamsterBody{from,25%,50%,75%,to{transform:rotate(0)}12.5%,37.5%,62.5%,87.5%{transform:rotate(-2deg)}}
@keyframes hamsterFRLimb{from,25%,50%,75%,to{transform:rotate(50deg) translateZ(-1px)}12.5%,37.5%,62.5%,87.5%{transform:rotate(-30deg) translateZ(-1px)}}
@keyframes hamsterFLLimb{from,25%,50%,75%,to{transform:rotate(-30deg)}12.5%,37.5%,62.5%,87.5%{transform:rotate(50deg)}}
@keyframes hamsterBRLimb{from,25%,50%,75%,to{transform:rotate(-60deg) translateZ(-1px)}12.5%,37.5%,62.5%,87.5%{transform:rotate(20deg) translateZ(-1px)}}
@keyframes hamsterBLLimb{from,25%,50%,75%,to{transform:rotate(20deg)}12.5%,37.5%,62.5%,87.5%{transform:rotate(-60deg)}}
@keyframes hamsterTail{from,25%,50%,75%,to{transform:rotate(30deg) translateZ(-1px)}12.5%,37.5%,62.5%,87.5%{transform:rotate(10deg) translateZ(-1px)}}
@keyframes spoke{from{transform:rotate(0)}to{transform:rotate(-1turn)}}

@media print{body *{visibility:hidden}#print-area,#print-area *{visibility:visible}#print-area{position:fixed;top:0;left:0;width:100%}}