/* LoyaltyQR — Android Orange/Black (mobile-first) */
:root{
  --bg:#111214;
  --panel:#1A1C1F;
  --panel-soft:#21252A;
  --app-glow: rgba(245,166,106,.20);
  --app-bg-start:#16171A;
  --app-bg-end:#101113;
  --shell-start:#1A1C1F;
  --shell-end:#141619;
  --topbar-start:#1F2227;
  --topbar-end:#1A1C20;
  --card-start:#202328;
  --card-end:#1A1D21;
  --overlay-start:#1f242b;
  --overlay-end:#171b21;
  --surface-soft:#1A1D21;
  --surface-raise:#202328;
  --chip-bg:rgba(29,33,39,.95);
  --chip-border:rgba(58,65,74,.95);
  --btn-shape:12px;
  --logo-radius:9px;
  --theme-card-radius:16px;
  --theme-shell-pattern:none;
  --theme-shell-pattern-size:auto;
  --bg-sky-shape:none;
  --bg-mesh-shape:none;
  --bg-film-shape:none;
  --line:#2E343B;
  --line-soft:#3A414A;
  --text:#F4F6F8;
  --muted:#A8B0BA;
  --accent:#F5A66A;
  --accent-strong:#FFB57F;
  --good:#54E3A5;
  --bad:#FF6B7E;
  --warn:#FFD36B;
  --r12:12px;
  --r16:16px;
  --r20:20px;
  --ease:cubic-bezier(.2,.85,.2,1);
  --font:"Segoe UI Variable Text","SF Pro Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-display:"Segoe UI Variable Display","SF Pro Display","Segoe UI",system-ui,-apple-system,sans-serif;
  --topbar-h:92px;
  --bottombar-h:74px;
  --device-nav-safe:0px;
  --bottom-safe:calc(env(safe-area-inset-bottom) + var(--device-nav-safe));
}

*{box-sizing:border-box}
html,body{height:100%}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  line-height:1.45;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  background:
    var(--bg-film-shape),
    radial-gradient(980px 620px at 50% -15%, var(--app-glow), transparent 55%),
    linear-gradient(180deg,var(--app-bg-start),var(--app-bg-end));
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:16px;
  position:relative;
  overflow-x:hidden;
}
body::before,
body::after{
  content:"";
  position:fixed;
  inset:-14%;
  pointer-events:none;
  z-index:-2;
}
body::before{
  background:var(--bg-sky-shape);
  filter:saturate(1.1);
  background-size:140% 140%;
  background-position:0% 0%;
  animation:bgShiftA 14s ease-in-out infinite alternate;
  will-change:background-position;
}
body::after{
  background:var(--bg-mesh-shape);
  mix-blend-mode:screen;
  opacity:.9;
  background-size:150% 150%;
  background-position:100% 0%;
  animation:bgShiftB 18s linear infinite;
  will-change:background-position;
}
a{color:inherit}
button,input,select,textarea{font:inherit}

#app{
  width:min(412px,100%);
  height:100vh;
  height:100dvh;
  min-height:100vh;
  min-height:100dvh;
  position:relative;
}
body.desktop-ui{
  align-items:center;
  padding:20px;
}
body.android-webview{
  --device-nav-safe:16px;
}
body.desktop-ui #app{
  width:min(1180px, calc(100vw - 36px));
  height:min(920px, calc(100vh - 36px));
  min-height:680px;
}
body.desktop-ui::before,
body.desktop-ui::after,
body.desktop-ui .shell::before,
body.desktop-ui .shell::after{
  animation:none;
}
body.desktop-ui .shell{
  border-radius:24px;
  box-shadow:0 20px 52px rgba(0,0,0,.5);
}
body.desktop-ui .topbar .inner{
  padding:12px 16px;
}
body.desktop-ui .actions{
  max-width:none;
}
body.desktop-ui .container{
  padding:14px 16px;
}
body.desktop-ui .grid.two{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
body.desktop-ui .grid.three{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
body.desktop-ui .bottomnav{
  backdrop-filter:none;
}
body.desktop-ui .bottomnav .inner{
  max-width:860px;
  margin:0 auto;
}
body.desktop-ui .welcomeIntro{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
body.desktop-ui .screen{
  transition:none;
}

.entry-splash{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(1000px 560px at 50% -8%, rgba(143,168,188,.25), transparent 62%),
    linear-gradient(180deg, #0f1216, #090b0d);
  animation:entrySplashFadeIn .26s ease-out both;
}
.entry-splash-card{
  min-width:230px;
  text-align:center;
  border:1px solid rgba(178,200,219,.32);
  border-radius:20px;
  padding:24px 22px 18px;
  background:linear-gradient(180deg, rgba(35,43,53,.9), rgba(20,25,31,.9));
  box-shadow:0 18px 45px rgba(0,0,0,.45);
}
.entry-splash-logo{
  width:86px;
  height:86px;
  object-fit:contain;
  display:block;
  margin:0 auto 10px;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
.entry-splash-brand{
  font-size:42px;
  line-height:1;
  font-weight:800;
  color:#eaf2f9;
  letter-spacing:.5px;
  text-shadow:0 10px 24px rgba(0,0,0,.45);
  animation:entryBrandIn .75s var(--ease) both;
}
.entry-splash-by{
  margin-top:8px;
  font-size:12px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#b7c6d4;
  animation:entryByIn .75s var(--ease) .16s both;
}
.entry-splash.out{
  animation:entrySplashFadeOut .42s ease-in both;
}
@keyframes entrySplashFadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes entrySplashFadeOut{
  from{opacity:1}
  to{opacity:0}
}
@keyframes entryBrandIn{
  0%{opacity:0;transform:translateY(12px) scale(.95);filter:blur(4px)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@keyframes entryByIn{
  0%{opacity:0;transform:translateY(7px)}
  100%{opacity:1;transform:translateY(0)}
}

.shell{
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:28px;
  border:1px solid #2A2F35;
  background:linear-gradient(180deg,var(--shell-start),var(--shell-end));
  box-shadow:0 28px 70px rgba(0,0,0,.6);
  position:relative;
  padding-top:var(--topbar-h);
  padding-bottom:calc(var(--bottombar-h) + var(--bottom-safe));
  isolation:isolate;
}
.shell.no-topbar{
  padding-top:0;
}
.shell::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:var(--theme-shell-pattern);
  background-size:var(--theme-shell-pattern-size);
  opacity:.65;
  background-position:0% 0%;
  animation:shellDrift 9s ease-in-out infinite alternate;
  will-change:background-position;
}
.shell::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(320px 220px at 50% -8%, var(--app-glow), transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,.03) 38%, transparent 100%);
  opacity:.72;
  animation:shellPulse 8s ease-in-out infinite;
  will-change:opacity;
}
.shell > *{
  position:relative;
  z-index:1;
}

@keyframes bgShiftA{
  0%{background-position:0% 0%}
  100%{background-position:100% 100%}
}
@keyframes bgShiftB{
  0%{background-position:100% 0%}
  100%{background-position:0% 100%}
}
@keyframes shellDrift{
  0%{background-position:0% 0%}
  100%{background-position:100% 0%}
}
@keyframes shellPulse{
  0%,100%{opacity:.48}
  50%{opacity:.72}
}
@media (prefers-reduced-motion: reduce){
  body::before,
  body::after,
  .shell::before,
  .shell::after,
  .skel,
  .redeem-ready-btn{
    animation:none !important;
  }
}

.topbar{
  position:absolute;
  left:0;
  right:0;
  top:0;
  z-index:40;
  height:var(--topbar-h);
  background:
    radial-gradient(120% 120% at 50% -30%, rgba(177,202,224,.13), transparent 58%),
    linear-gradient(180deg,var(--topbar-start),var(--topbar-end));
  border-bottom:1px solid rgba(177,202,224,.18);
  box-shadow:0 10px 22px rgba(0,0,0,.24);
}
.topbar .inner{
  height:100%;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{
  width:28px;
  height:28px;
  border-radius:var(--logo-radius);
  background:#0f1318;
  box-shadow:0 8px 20px rgba(245,166,106,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  overflow:hidden;
  border:1px solid var(--line);
  padding:2px;
}
.logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.logo svg{
  width:100%;
  height:100%;
}
.brand h1{
  margin:0;
  font-size:16px;
  font-weight:760;
  letter-spacing:.15px;
  font-family:var(--font-display);
}
.brand .tag{
  margin:2px 0 0;
  font-size:11.5px;
  color:var(--muted);
  line-height:1.2;
}
.actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:flex-start;
  gap:8px;
  max-width:60%;
  overflow:hidden;
}

.container{padding:14px}
.grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:900px){.grid.two,.grid.three{grid-template-columns:1fr}}

.card{
  background:
    radial-gradient(120% 120% at 50% -40%, rgba(170,194,214,.08), transparent 62%),
    linear-gradient(180deg,var(--card-start),var(--card-end));
  border:1px solid rgba(179,199,216,.22);
  border-radius:var(--theme-card-radius);
  box-shadow:0 8px 20px rgba(0,0,0,.24);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.card .pad{padding:15px}
.card h2{
  margin:0 0 8px;
  font-size:16.5px;
  font-weight:760;
  line-height:1.25;
  letter-spacing:.1px;
  font-family:var(--font-display);
}
.card h3{
  margin:0 0 6px;
  font-size:13.5px;
  font-weight:700;
  color:#EDEFF3;
  line-height:1.3;
  font-family:var(--font-display);
}
.p{margin:7px 0;color:var(--muted);font-size:14px;line-height:1.52}
.hr{height:1px;background:var(--line);margin:12px 0}

.btn{
  height:40px;
  border-radius:var(--btn-shape);
  border:1px solid rgba(185,203,217,.22);
  background:linear-gradient(180deg,rgba(238,246,253,.08),rgba(182,196,210,.06));
  color:var(--text);
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:650;
  letter-spacing:.1px;
  cursor:pointer;
  transition:transform .12s var(--ease),border-color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease),filter .15s var(--ease);
  box-shadow:0 6px 14px rgba(0,0,0,.24);
}
.btn:hover{
  filter:brightness(1.05);
  border-color:rgba(204,220,234,.34);
  box-shadow:0 9px 18px rgba(0,0,0,.28);
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  border-color:#F9C095;
  color:#1E1812;
  font-weight:700;
}
.btn.ghost{
  background:transparent;
  border-color:rgba(174,194,211,.26);
}
.btn.danger{
  border-color:rgba(255,107,126,.6);
  background:linear-gradient(180deg,rgba(255,107,126,.2),rgba(255,107,126,.1));
}
.btn.small{height:34px;border-radius:var(--btn-shape);padding:0 11px;font-size:12.5px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn:focus-visible{
  outline:2px solid rgba(143,192,236,.85);
  outline-offset:2px;
}
.icon-btn{
  appearance:none;
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:12px;
  border:1px solid rgba(185,203,217,.22);
  background:linear-gradient(180deg,rgba(238,246,253,.08),rgba(182,196,210,.05));
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.22);
}
.icon-btn svg{width:17px;height:17px;stroke-width:2.2}
.icon-btn:hover{
  filter:brightness(1.07);
  border-color:rgba(204,220,234,.38);
}
.icon-btn:active{transform:translateY(1px) scale(.98)}
.icon-btn:focus-visible{
  outline:2px solid rgba(143,192,236,.85);
  outline-offset:2px;
}
.icon-btn.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  border-color:#F9C095;
  color:#1E1812;
}
.icon-btn.danger{
  border-color:rgba(255,107,126,.55);
  background:linear-gradient(180deg,rgba(255,107,126,.18),rgba(255,107,126,.08));
}
.commerce-icon-actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.commerce-icon-actions.compact{gap:6px}
.commerce-active-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
}
.commerce-active-head .commerce-icon-actions{
  justify-content:flex-end;
  flex:0 0 auto;
  max-width:168px;
}
.commerce-action-card .pad{padding:9px!important}
.loc-logo-wrap,
.home-loc-logo-wrap{
  position:relative;
  flex:0 0 auto;
}
.context-edit-btn{
  appearance:none;
  position:absolute;
  right:-5px;
  top:-5px;
  width:24px;
  height:24px;
  min-width:24px;
  border-radius:999px;
  border:1px solid rgba(230,238,246,.42);
  background:rgba(12,17,23,.88);
  color:#eef5fb;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 5px 12px rgba(0,0,0,.34);
  padding:0;
  z-index:2;
}
.context-edit-btn.small{
  width:21px;
  height:21px;
  min-width:21px;
}
.context-edit-btn svg{
  width:12px;
  height:12px;
  stroke-width:2.4;
}
.context-edit-btn:hover{filter:brightness(1.12)}
.editable-item{
  position:relative;
  padding-right:38px;
}
.editable-item-main{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.context-x-btn{
  appearance:none;
  position:absolute;
  top:8px;
  right:8px;
  width:24px;
  height:24px;
  min-width:24px;
  border-radius:999px;
  border:1px solid rgba(255,107,126,.48);
  background:rgba(255,107,126,.12);
  color:#ffd8de;
  font-size:18px;
  line-height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}
.context-x-btn:hover{
  background:rgba(255,107,126,.2);
  border-color:rgba(255,107,126,.72);
}
.context-x-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.mode-switch-btn{
  min-width:100%;
  font-weight:800;
  letter-spacing:.2px;
  box-shadow:0 10px 24px rgba(46,211,155,.24);
}

.field{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.label{font-size:12px;color:#CFD5DD}
.input,.select{
  height:40px;
  border-radius:12px;
  border:1px solid rgba(169,187,203,.24);
  background:linear-gradient(180deg,#161c23,#131920);
  color:var(--text);
  padding:0 10px;
  outline:none;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.input:focus,.select:focus{
  border-color:#F7B885;
  box-shadow:0 0 0 3px rgba(245,166,106,.16);
}
.select option,
select option{
  color:#10151d;
  background:#f4f7fb;
}
.select option:checked,
select option:checked{
  color:#ffffff;
  background:#1f5fbf;
}
.hint{font-size:12px;color:var(--muted);margin-top:5px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row > *{flex:1;min-width:135px}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:25px;
  padding:4px 9px;
  border-radius:var(--btn-shape);
  border:1px solid rgba(175,198,216,.2);
  background:linear-gradient(180deg,rgba(34,41,49,.88),rgba(25,30,37,.88));
  color:#DDE3EA;
  font-size:11.5px;
}
.ab-chip-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}
.ab-cat-quick,
.ab-cat-secondary,
.ab-rubro-quick{
  cursor:pointer;
  transition:transform .14s var(--ease), border-color .14s var(--ease), background .14s var(--ease), color .14s var(--ease);
}
.ab-cat-quick:hover,
.ab-cat-secondary:hover,
.ab-rubro-quick:hover{
  transform:translateY(-1px);
}
.ab-cat-quick.is-on,
.ab-cat-secondary.is-on,
.ab-rubro-quick.is-on{
  border-color:rgba(247,186,135,.65);
  background:linear-gradient(180deg,rgba(245,166,106,.35),rgba(245,166,106,.2));
  color:#fff2e5;
}
.dot{width:7px;height:7px;border-radius:99px;background:var(--accent)}
.dot.good{background:var(--good)}
.dot.bad{background:var(--bad)}
.dot.warn{background:var(--warn)}

.stage{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:max(16px, env(safe-area-inset-bottom));
}
body.has-bottomnav .stage{
  padding-bottom:calc(var(--bottombar-h) + var(--bottom-safe) + 18px);
}
body.has-bottomnav .container{
  padding-bottom:calc(var(--bottombar-h) + var(--bottom-safe) + 16px);
}
.screen{
  display:none;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .18s var(--ease),transform .18s var(--ease);
}
.screen.active{display:block;opacity:1;transform:translateY(0)}

.hero{padding:8px 2px 0}
.heroTitle{font-size:24px;line-height:1.05;margin:0 0 6px;letter-spacing:-.25px}
.heroSub{margin:0;color:var(--muted);font-size:13px;line-height:1.35}
.heroActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.heroActions .btn{border-radius:999px;height:40px}
.authHero{padding-top:4px}
.authHero .heroTitle{font-size:22px;line-height:1.16;margin-bottom:8px}
.authHero .heroSub{font-size:13px;line-height:1.42;color:#c2ccd6}
.authHeroActions{margin-top:12px}
.authHeroActions .btn{
  height:46px;
  font-weight:800;
  font-size:14px;
  box-shadow:0 10px 20px rgba(0,0,0,.28);
}
.authHeroActions .btn.primary{
  border-color:#f9c9a2;
  box-shadow:0 10px 22px rgba(245,166,106,.28);
}
.authHeroActions .btn.strong{
  background:linear-gradient(180deg,rgba(228,236,244,.15),rgba(191,206,220,.12));
  border-color:rgba(212,226,239,.52);
  color:#e8eef4;
}
.authHeroHint{margin-top:10px}
.authInfoGrid{margin-top:10px}
.authInfoCard{
  border-color:rgba(141,166,184,.22);
  background:linear-gradient(180deg,rgba(42,50,60,.58),rgba(24,30,36,.64));
}
.authInfoCard .pad{padding:8px 10px}
.authInfoCard h2{font-size:12px;margin-bottom:2px}
.authInfoCard .p{font-size:10.5px;line-height:1.25}
.authInfoIcon{
  width:22px;
  height:22px;
  border-radius:8px;
  border:1px solid rgba(198,214,228,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:6px;
  background:rgba(12,16,22,.28);
}
.authInfoIcon svg{
  width:12px;
  height:12px;
  color:#cdd9e4;
}

.welcomeIntro{
  border:1px solid rgba(148,173,194,.42);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(169,198,223,.16), transparent 70%),
    linear-gradient(180deg,rgba(39,48,58,.9),rgba(21,27,34,.88));
  border-radius:18px;
  padding:16px 12px 12px;
  margin:0 0 12px;
  text-align:center;
  overflow:hidden;
  position:relative;
  box-shadow:0 18px 34px rgba(0,0,0,.34);
}
.welcomeIntro::before{
  content:"";
  position:absolute;
  inset:-35% -20%;
  background:radial-gradient(circle at 50% 0%, rgba(221,230,237,.17), transparent 62%);
  animation:welcomeGlow 2.2s ease-out 1;
  pointer-events:none;
}
.welcomeIntroBrand{
  font-size:32px;
  font-weight:800;
  letter-spacing:.4px;
  color:#E8F0F7;
  text-shadow:0 10px 26px rgba(0,0,0,.42);
  animation:welcomeBrandIn .82s var(--ease) both;
}
.welcomeIntroLogo{
  width:92px;
  height:92px;
  object-fit:contain;
  display:block;
  margin:0 auto 8px;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.34));
}
.welcomeIntroBy{
  margin-top:3px;
  font-size:12px;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:#B9C6D2;
  animation:welcomeByIn .82s var(--ease) .18s both;
}
.welcomeMiniChips{
  margin-top:10px;
  display:flex;
  gap:6px;
  justify-content:center;
  flex-wrap:wrap;
}
.welcomeMiniChips .pill{
  background:rgba(18,24,30,.72);
  border-color:rgba(171,196,216,.25);
}
@keyframes welcomeBrandIn{
  0%{opacity:0;transform:translateY(11px) scale(.96);filter:blur(3px)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@keyframes welcomeByIn{
  0%{opacity:0;transform:translateY(7px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes welcomeGlow{
  0%{opacity:0;transform:translateY(-8px)}
  40%{opacity:1}
  100%{opacity:.55;transform:translateY(0)}
}

.authScreenGrid{margin-top:4px}
.authCard{
  border-color:rgba(180,198,214,.24);
  background:linear-gradient(180deg,rgba(39,46,56,.75),rgba(24,29,35,.86));
  box-shadow:0 16px 34px rgba(0,0,0,.32);
}
.authCard .pad{padding:16px}
.authHead h2{font-size:21px;margin-bottom:4px}
.authHead .p{margin:0 0 8px;color:#c2ccd6}
.authCard .input,
.authCard .select{
  height:40px;
  border-radius:13px;
  background:#161b22;
}
.authMainActions{margin-top:14px}
.authMainActions .btn{height:41px;font-weight:700}
.authFootActions{margin-top:8px}
.authFootActions .btn{height:36px}
.screen[data-screen="login"] .container,
.screen[data-screen="register"] .container,
.authScreenGrid,
.authCard{
  max-width:100%;
  overflow-x:hidden;
}
.authMainActions .btn,
.authFootActions .btn{
  min-width:0;
  width:100%;
  white-space:normal;
  text-align:center;
}

.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kpi{
  border-radius:calc(var(--theme-card-radius) - 4px);
  border:1px solid var(--line);
  background:var(--surface-soft);
  padding:10px;
}
.kpi-btn{
  appearance:none;
  width:100%;
  text-align:left;
  cursor:pointer;
  color:inherit;
}
.kpi .v{font-size:22px;font-weight:800}
.kpi .k{font-size:11px;color:var(--muted)}

.mono{font-family:ui-monospace,Consolas,monospace}
pre{
  margin:8px 0 0;
  white-space:pre-wrap;
  background:var(--surface-soft);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  color:#DCE8F5;
}
.small{font-size:12.5px;color:var(--muted);line-height:1.45}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  padding:4px 8px;
  border-radius:var(--btn-shape);
  border:1px solid var(--chip-border);
  background:var(--chip-bg);
  font-size:10px;
}

.bottomnav{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:35;
  height:calc(var(--bottombar-h) + var(--bottom-safe));
  margin-top:auto;
  background:linear-gradient(180deg,rgba(20,24,29,.56),rgba(14,17,21,.98));
  border-top:1px solid var(--line-soft);
  backdrop-filter: blur(10px) saturate(1.15);
  overflow:hidden;
}
.bottomnav .inner{
  padding:7px 9px calc(10px + var(--bottom-safe));
  display:flex;
  gap:8px;
  min-width:0;
  overflow:hidden;
}
.navbtn{
  flex:1;
  min-width:0;
  height:50px;
  border-radius:14px;
  border:1px solid rgba(220,230,240,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  color:#9AA6B2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.26);
  transition:transform .12s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.navbtn:hover{
  border-color:rgba(230,238,246,.2);
  color:#B8C3CE;
}
.navbtn:active{
  transform:translateY(1px) scale(.99);
}
.navbtn.active{
  color:#F5F9FD;
  border-color:rgba(221,230,237,.5);
  background:linear-gradient(180deg,rgba(221,230,237,.22),rgba(141,166,184,.18));
  box-shadow:
    0 0 0 1px rgba(221,230,237,.16) inset,
    0 8px 22px rgba(0,0,0,.34);
}
.navbtn svg{width:18px;height:18px;stroke-width:2.2}
.navlbl{
  display:block;
  max-width:100%;
  font-size:11.5px;
  line-height:1;
  font-weight:700;
  letter-spacing:.2px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.navbtn:focus-visible{
  outline:2px solid rgba(143,192,236,.85);
  outline-offset:2px;
}

#toastRoot{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(14px + var(--bottom-safe));
  width:min(380px,calc(100vw - 24px));
  z-index:999;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}
body.has-bottomnav #toastRoot{
  bottom:calc(var(--bottombar-h) + var(--bottom-safe) + 12px);
}
.toast{
  pointer-events:auto;
  border-radius:12px;
  border:1px solid var(--line-soft);
  background:#232830;
  padding:10px;
  display:flex;
  gap:8px;
  align-items:flex-start;
  animation:toastIn .24s var(--ease) both;
}
.toast .t{font-weight:700;font-size:12px}
.toast .m{font-size:12px;color:var(--muted)}
.toast .x{margin-left:auto}
.toast.good{border-color:rgba(84,227,165,.45)}
.toast.bad{border-color:rgba(255,107,126,.45)}
.toast.warn{border-color:rgba(255,211,107,.45)}
.toast.good{
  box-shadow:0 8px 22px rgba(84,227,165,.18);
  animation:toastIn .24s var(--ease) both, toastGoodGlow .7s ease-out both;
}
@keyframes toastIn{
  from{opacity:0;transform:translateY(8px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes toastGoodGlow{
  0%{box-shadow:0 0 0 0 rgba(84,227,165,.35)}
  100%{box-shadow:0 0 0 12px rgba(84,227,165,0)}
}
.btn.micro-pop{
  animation:btnPop .28s var(--ease) both;
}
@keyframes btnPop{
  0%{transform:scale(1)}
  60%{transform:scale(1.05)}
  100%{transform:scale(1)}
}

.skel{
  height:11px;
  border-radius:9px;
  background:linear-gradient(90deg,#252A31,#2E343D,#252A31);
  background-size:200% 100%;
  animation:skel 1s linear infinite;
}
@keyframes skel{from{background-position:0 0}to{background-position:200% 0}}

@media (max-width:520px){
  body{padding:0;align-items:stretch}
  body::before{
    opacity:.38;
    animation:none;
    filter:none;
    background-size:100% 100%;
    background-position:50% 50%;
  }
  body::after{
    opacity:.22;
    animation:none;
    mix-blend-mode:normal;
    background-size:100% 100%;
    background-position:50% 50%;
  }
  #app{width:100%;height:100vh;height:100dvh;min-height:100vh;min-height:100dvh;position:relative}
  .screen[data-screen="login"],
  .screen[data-screen="register"]{
    height:100%;
  }
  .screen[data-screen="login"] .container,
  .screen[data-screen="register"] .container{
    min-height:100%;
    display:flex;
    align-items:center;
  }
  .screen[data-screen="login"] .authScreenGrid,
  .screen[data-screen="register"] .authScreenGrid{
    width:100%;
    margin-top:0;
  }
  .shell{
    border-radius:0;
    border-left:0;
    border-right:0;
    height:100vh;
    height:100dvh;
    padding-top:calc(var(--topbar-h) + env(safe-area-inset-top));
    padding-bottom:calc(var(--bottombar-h) + var(--bottom-safe));
    box-shadow:0 10px 24px rgba(0,0,0,.35);
  }
  .topbar{
    height:calc(var(--topbar-h) + env(safe-area-inset-top));
  }
  .topbar .inner{
    height:100%;
    padding-top:calc(10px + env(safe-area-inset-top));
    padding-bottom:10px;
  }
  .shell::before{
    opacity:.22;
    animation:none;
    background-size:120% 120%;
    background-position:50% 50%;
  }
  .shell::after{
    opacity:.18;
    animation:none;
  }
  .btn,
  .navbtn{
    transition:none;
  }
  .stage{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(16px + var(--bottom-safe))}
}
@media (max-width:420px){
  .container{padding:11px}
  .card .pad{padding:12px}
  .row > *{min-width:0}
  .heroTitle{font-size:22px}
  .authHero .heroTitle{font-size:20px}
}


.loc-card.compact .pad{padding:10px}
.store-unpublished{
  filter:grayscale(.92);
  opacity:.58;
}
.store-unpublished-note{
  color:var(--warn,#f2b768);
  font-weight:700;
}
.loc-topline{display:flex;align-items:center;gap:8px}
.loc-logo-box{width:34px;height:34px;border-radius:var(--logo-radius);background:var(--surface-soft);display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--chip-border)}
.loc-logo-box img{width:100%;height:100%;object-fit:cover}
.loc-logo-box span{font-size:11px;font-weight:700;color:#fff}
.loc-swatch-row{display:flex;gap:6px;margin-top:8px}
.loc-swatch-row span{display:block;width:14px;height:14px;border-radius:999px;border:1px solid rgba(255,255,255,.3)}
.qr-box{margin-top:8px;display:flex;justify-content:flex-start}
.qr-box svg,.qr-box img{width:120px;height:120px;border-radius:12px;border:1px solid rgba(255,255,255,.18)}
.qr-placeholder{
  width:120px;
  height:120px;
  border-radius:12px;
  border:1px dashed rgba(255,255,255,.35);
  background:rgba(255,255,255,.06);
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:8px;
}
.qr-placeholder .small{
  font-size:11px;
  line-height:1.2;
}
.qr-real{
  position:relative;
  width:120px;
  height:120px;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(255,255,255,.18);
}
.qr-real > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.qr-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:24%;
  height:24%;
  border-radius:999px;
  background:#fff;
  border:2px solid #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.qr-center img{width:100%;height:100%;object-fit:cover}
.qr-center-badge{font-size:10px;color:#111;font-weight:700}
.reward-green{
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(84,227,165,.8);
  background:linear-gradient(135deg,#57e8a9,#36c985);
  color:#0d2b1f;
  font-weight:700;
}
.reward-card{
  position:relative;
  overflow:hidden;
  border-color:rgba(220,234,246,.18)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.24);
  animation:rewardEnter .26s var(--ease) both;
}
.reward-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 0%,rgba(221,230,237,.10) 42%,transparent 72%);
  pointer-events:none;
}
.reward-card-head{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.reward-card-head > span,
.reward-card-head > .pill,
.reward-card-head > .urgency-chip{
  margin-left:auto;
  flex:0 0 auto;
}
.reward-card-head b{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.reward-gift{
  width:38px;
  height:38px;
  border-radius:12px;
  flex:0 0 38px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#071016;
  background:linear-gradient(135deg,#ffd36b,#f5a66a);
  box-shadow:0 10px 22px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.22) inset;
}
.reward-gift.ready{
  background:linear-gradient(135deg,#7effcd,#ffd36b);
  box-shadow:0 10px 22px rgba(0,0,0,.28), 0 0 0 1px rgba(255,211,107,.4) inset, 0 0 22px rgba(255,211,107,.18);
}
.reward-gift.issued{
  background:linear-gradient(135deg,#ffd36b,#89dcff);
}
.reward-gift svg{
  width:20px;
  height:20px;
  stroke-width:2.4;
}
.reward-gift-card{
  position:relative;
  overflow:hidden;
}
.reward-gift-card::after{
  content:"";
  position:absolute;
  right:-28px;
  top:-42px;
  width:96px;
  height:96px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,211,107,.18), transparent 68%);
  pointer-events:none;
}
.reward-gift-label{
  color:#ffd36b;
  font-weight:800;
}
.reward-progress-note{
  margin-top:8px;
  color:var(--warn);
  font-size:12px;
  font-weight:700;
}
.reward-pill{
  border-color:rgba(84,227,165,.38);
  background:rgba(84,227,165,.12);
}
.reward-pending{
  border:1px dashed rgba(221,230,237,.2);
  border-radius:10px;
  padding:8px 10px;
  background:rgba(255,255,255,.02);
}
.reward-cta{
  box-shadow:0 0 0 0 rgba(84,227,165,.45);
  animation:rewardPulse 1.6s ease-in-out infinite;
}
.redeem-ready-pill{
  border-color:rgba(255,211,107,.62);
  background:linear-gradient(180deg,rgba(255,211,107,.22),rgba(255,211,107,.1));
  color:#fff1c3;
  box-shadow:0 0 0 1px rgba(255,211,107,.2) inset;
}
.redeem-ready-pill b{
  color:#fff7dd;
}
.redeem-ready-card{
  border-color:rgba(255,211,107,.48)!important;
  background:linear-gradient(180deg,rgba(255,211,107,.12),rgba(255,211,107,.05));
  box-shadow:0 10px 22px rgba(0,0,0,.22), 0 0 0 1px rgba(255,211,107,.16) inset;
}
.redeem-ready-btn{
  border-color:rgba(255,211,107,.88)!important;
  box-shadow:0 0 0 0 rgba(255,211,107,.52), 0 6px 14px rgba(0,0,0,.24);
  animation:redeemReadyPulse 1.35s ease-in-out infinite;
}
.redeem-ready-btn:hover{
  filter:brightness(1.08);
}
.redeem-ready-btn:focus-visible{
  outline-color:rgba(255,211,107,.95);
}
.reward-history-item{
  opacity:.92;
}
.benefit-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:10px 0 12px;
}
.benefit-card{
  border:1px solid rgba(220,234,246,.2);
  border-radius:14px;
  padding:11px 12px;
  min-height:60px;
  color:#f6f9fc;
  box-shadow:0 10px 22px rgba(0,0,0,.22);
  animation:rewardEnter .24s var(--ease) both;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.benefit-card .t{
  font-weight:800;
  letter-spacing:.2px;
  font-size:12.8px;
}
.benefit-card .d{
  margin-top:3px;
  font-size:12px;
  color:rgba(245,249,253,.9);
}
.benefit-card.b1{background:linear-gradient(120deg,#ff6b42,#ff2f6d)}
.benefit-card.b2{background:linear-gradient(120deg,#326dff,#23b8d9)}
.benefit-card.b3{background:linear-gradient(120deg,#6547ff,#9c4edb)}
.benefit-card.b4{background:linear-gradient(120deg,#21a474,#33c18d)}
.wallet-scan-top{
  background:
    radial-gradient(130% 140% at 100% -20%, rgba(245,166,106,.22), transparent 65%),
    linear-gradient(180deg, rgba(32,40,50,.96), rgba(20,26,34,.96));
  border-color:rgba(176,194,210,.28);
}
.wallet-scan-btn{
  width:100%;
  max-width:240px;
  height:58px;
  border-radius:18px;
  font-size:25px;
  font-weight:900;
  letter-spacing:.7px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wallet-hero-card{
  margin:8px 0 10px;
  border:1px solid rgba(193,212,229,.32);
  border-radius:18px;
  padding:12px;
  background:
    radial-gradient(120% 120% at 100% -15%, rgba(83,227,165,.22), transparent 58%),
    radial-gradient(130% 130% at 0% 0%, rgba(83,152,255,.2), transparent 60%),
    linear-gradient(140deg, rgba(28,36,46,.98), rgba(18,24,32,.98));
  box-shadow:0 14px 34px rgba(0,0,0,.35);
}
.wallet-hero-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.wallet-hero-chip{
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  padding:4px 9px;
  font-size:11px;
  color:#e9f2fa;
  background:rgba(255,255,255,.05);
}
.wallet-hero-brand{
  font-size:11px;
  letter-spacing:1.1px;
  font-weight:800;
  color:#b9d5ea;
}
.wallet-hero-balance{
  margin-top:10px;
  font-size:42px;
  line-height:1;
  font-weight:900;
  letter-spacing:.3px;
  font-family:var(--font-display);
}
.wallet-hero-caption{
  margin-top:4px;
  color:#c0d0df;
  font-size:12px;
}
.wallet-hero-row{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.wallet-hero-row .pill{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.22);
}
@media (max-width:390px){
  .benefit-grid{grid-template-columns:1fr}
}
.urgency-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:5px 9px;
  font-size:11px;
  font-weight:700;
  border:1px solid transparent;
}
.urgency-chip.warn{
  color:#fff3dc;
  border-color:rgba(255,211,107,.45);
  background:rgba(255,211,107,.16);
}
.urgency-chip.good{
  color:#dcffee;
  border-color:rgba(84,227,165,.45);
  background:rgba(84,227,165,.14);
}
.store-showcase{
  position:relative;
  overflow:hidden;
}
.store-showcase::after{
  content:"";
  position:absolute;
  inset:auto -20% -40% -20%;
  height:120px;
  background:radial-gradient(closest-side, rgba(255,255,255,.16), transparent 70%);
  pointer-events:none;
}
.store-showcase-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.store-showcase-head h2{
  margin:0;
}
.cust-onboard{
  border-color:rgba(133,180,255,.34)!important;
  background:linear-gradient(145deg, rgba(54,87,142,.22), rgba(32,45,66,.22));
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}
.cust-onboard-steps{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.cust-onboard-step{
  border:1px solid rgba(183,203,225,.22);
  border-radius:12px;
  padding:8px 10px;
  background:rgba(255,255,255,.02);
}
.cust-onboard-step.done{
  border-color:rgba(84,227,165,.4);
  background:rgba(84,227,165,.08);
}
.cust-progress-track{
  position:relative;
  width:100%;
  height:8px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(188,206,222,.26);
  background:rgba(16,23,32,.76);
}
.cust-progress-fill{
  display:block;
  height:100%;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,#58e8a7,#3abffd);
  box-shadow:0 0 10px rgba(58,191,253,.36);
  transition:width .35s var(--ease);
}
.reward-showcase-list{
  counter-reset:reward-order;
  padding-left:0!important;
}
.reward-showcase-item{
  list-style:none;
  border:1px solid rgba(220,234,246,.16);
  border-radius:12px;
  background:rgba(255,255,255,.02);
  padding:8px 10px;
  position:relative;
  animation:rewardEnter .22s var(--ease) both;
}
.reward-showcase-item::before{
  counter-increment:reward-order;
  content:counter(reward-order);
  position:absolute;
  right:8px;
  top:7px;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(221,230,237,.3);
  color:#DDE6ED;
  font-size:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}
@keyframes rewardPulse{
  0%,100%{transform:translateY(0);box-shadow:0 0 0 0 rgba(84,227,165,.45)}
  50%{transform:translateY(-1px);box-shadow:0 0 0 8px rgba(84,227,165,0)}
}
@keyframes redeemReadyPulse{
  0%,100%{
    box-shadow:0 0 0 0 rgba(255,211,107,.52), 0 6px 14px rgba(0,0,0,.24);
  }
  50%{
    box-shadow:0 0 0 7px rgba(255,211,107,0), 0 8px 16px rgba(0,0,0,.27);
  }
}
@keyframes rewardEnter{
  from{opacity:0;transform:translateY(8px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.reward-burst{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:2000;
  pointer-events:none;
  animation:rewardBurstIn .34s var(--ease) both;
}
.reward-burst.out{
  animation:rewardBurstOut .38s ease-in both;
}
.reward-burst-core{
  min-width:220px;
  text-align:center;
  border:1px solid rgba(84,227,165,.5);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(33,49,42,.92),rgba(18,33,27,.92));
  box-shadow:0 20px 44px rgba(0,0,0,.44);
  padding:14px 18px;
}
.reward-burst-title{
  font-size:24px;
  font-weight:900;
  color:#8ef4c7;
  line-height:1;
}
.reward-burst-sub{
  margin-top:5px;
  font-size:12px;
  color:#d6efe3;
  letter-spacing:.3px;
}
.reward-burst-ring{
  position:absolute;
  inset:-20px;
  border-radius:999px;
  border:2px solid rgba(84,227,165,.42);
  animation:rewardRing 1s ease-out both;
}
.reward-burst-spark{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:999px;
  background:#9af0ff;
  box-shadow:0 0 0 6px rgba(154,240,255,.18);
  animation:rewardSpark .95s ease-out both;
}
.reward-burst-spark.s1{left:-8px;top:18%}
.reward-burst-spark.s2{right:-10px;top:22%;background:#8ef4c7}
.reward-burst-spark.s3{left:22%;bottom:-10px;background:#ffd36b}
.reward-burst-spark.s4{right:24%;bottom:-12px;background:#89dcff}
@keyframes rewardBurstIn{
  from{opacity:0;transform:translate(-50%,-46%) scale(.86)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes rewardBurstOut{
  from{opacity:1;transform:translate(-50%,-50%) scale(1)}
  to{opacity:0;transform:translate(-50%,-56%) scale(1.06)}
}
@keyframes rewardRing{
  0%{opacity:.9;transform:scale(.5)}
  100%{opacity:0;transform:scale(1.2)}
}
@keyframes rewardSpark{
  0%{opacity:0;transform:scale(.4)}
  20%{opacity:1}
  100%{opacity:0;transform:translateY(-22px) scale(1)}
}
.overlay-panel{position:fixed;inset:0;z-index:1200}
.overlay-backdrop{position:absolute;inset:0;background:rgba(2,6,11,.66)}
.overlay-card{
  position:absolute;
  left:14px;
  right:14px;
  bottom:calc(14px + env(safe-area-inset-bottom));
  top:auto;
  max-height:84vh;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg,var(--overlay-start),var(--overlay-end));
  box-shadow:0 20px 50px rgba(0,0,0,.6);
  display:flex;flex-direction:column;
}
.overlay-card.overlay-wide{
  left:50%;
  right:auto;
  transform:translateX(-50%);
  width:min(980px, calc(100vw - 28px));
}
.overlay-card.overlay-fullscreen{
  left:50%;
  right:auto;
  transform:translateX(-50%);
  top:10px;
  bottom:10px;
  width:min(980px, calc(100vw - 20px));
  max-height:none;
}
.overlay-head{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid var(--line)}
.overlay-head h3{margin:0;font-size:16px}
.overlay-body{padding:12px;overflow:auto}
.edit-store-modal .overlay-body{
  padding:12px 12px 0;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.overlay-card.edit-store-modal{
  top:calc(10px + env(safe-area-inset-top));
  bottom:auto;
  max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px);
}
.panel-grid{display:flex;flex-direction:column;gap:8px}
.panel-item{padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft)}
.panel-item{
  border:1px solid rgba(169,188,204,.2);
  background:linear-gradient(180deg,rgba(33,39,46,.86),rgba(24,29,35,.9));
  box-shadow:0 8px 16px rgba(0,0,0,.2);
}
.editable-item-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.editable-item-title{
  min-width:0;
  overflow-wrap:anywhere;
}
.editable-item-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.editable-item-actions .btn.small{
  min-height:34px;
}
.editable-inline-form .pad{
  padding:10px;
}
.panel-note{margin-top:10px;font-size:12px;color:var(--muted)}

.logo-editor{margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft)}
.logo-editor canvas{width:160px;height:160px;border-radius:12px;border:1px solid rgba(255,255,255,.2);display:block;margin-bottom:8px;cursor:grab;touch-action:none;background:rgba(17,22,28,.65)}
.logo-editor canvas.dragging{cursor:grabbing}
.logo-editor-quick{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.logo-editor-quick .btn.small{
  min-width:34px;
  height:32px;
  border-radius:10px;
  padding:0 10px;
}
.logo-zoom-pill{
  min-width:64px;
  justify-content:center;
  font-weight:700;
}
.logo-editor-hint{
  margin-bottom:8px;
  color:var(--muted);
}
#home_qr_slot{margin-top:8px}
#home_qr_slot{cursor:zoom-in}
.home-loc-name{
  margin:0;
  font-size:40px;
  line-height:.95;
  letter-spacing:-0.8px;
  text-align:left;
  font-weight:900;
}
.home-loc-head{
  display:flex;
  align-items:center;
  gap:10px;
}
.home-loc-logo{
  width:54px;
  height:54px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.28);
  object-fit:cover;
  overflow:hidden;
  flex:0 0 54px;
}
.home-loc-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.home-loc-logo-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:18px;
  background:linear-gradient(135deg,var(--brand,#f5a66a),var(--accent,#54E3A5));
  color:#fff;
}
.loc-result-head{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.loc-result-head > div:last-child{
  min-width:0;
}
.loc-result-head b{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:145px;
}
.loc-avatar{
  flex:0 0 auto;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(135deg,var(--loc-avatar-brand,#8da6b8),var(--loc-avatar-accent,#54E3A5));
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#071016;
  font-weight:900;
  font-size:12px;
}
.loc-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.loc-profile-hero{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
}
.loc-profile-hero h2{
  margin:0;
  font-size:20px;
  line-height:1.15;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.home-qr-box{
  margin-top:14px;
  justify-content:center;
}
.home-qr-box .qr-real{
  width:min(92vw,300px);
  height:min(92vw,300px);
  border-radius:18px;
}
.map-preview{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#0d1117;
  cursor:pointer;
  position:relative;
}
.map-preview::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.2));
}
.map-preview:focus-visible{
  outline:2px solid rgba(143,192,236,.85);
  outline-offset:2px;
}
.map-large{
  height:min(68vh,560px);
  min-height:360px;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#0d1117;
}
.map-large iframe{
  width:100%;
  height:100%;
  border:0;
}

.qr-fullscreen-wrap{
  min-height:calc(100vh - 150px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.qr-fullscreen-box{
  width:min(78vh, 88vw, 640px);
  aspect-ratio:1/1;
  border:1px solid var(--line);
  border-radius:22px;
  background:#12161c;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.qr-fullscreen-box svg{
  width:100%;
  height:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.22);
}
.qr-fullscreen-box .qr-real{
  width:100%;
  height:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.22);
}

.create-shop-collapse{overflow:hidden}
.create-shop-summary{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border-bottom:1px solid var(--line);
  font-weight:700;
}
.create-shop-summary::-webkit-details-marker{display:none}
.create-shop-collapse[open] .create-shop-summary{background:rgba(255,255,255,.03)}

.catalog-compact{
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.02);
  overflow:hidden;
}
.catalog-compact-btn{
  list-style:none;
  cursor:pointer;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
}
.catalog-compact-btn::-webkit-details-marker{display:none}
.catalog-compact[open] .catalog-compact-btn{
  border-bottom:1px solid var(--line);
}
.catalog-count{
  min-width:26px;
  height:22px;
  border-radius:999px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  color:#eaf3ff;
  background:linear-gradient(135deg,rgba(106,188,255,.28),rgba(96,226,175,.24));
  border:1px solid rgba(168,210,255,.28);
}
.catalog-compact-body{
  padding:10px;
}

.edit-store-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.edit-block{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:rgba(19,24,31,.72);
}
.edit-block h4{
  margin:0 0 6px;
  font-size:14px;
  color:#e9edf3;
}
.edit-acc{
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(19,24,31,.66);
  overflow:hidden;
}
.edit-acc > summary{
  cursor:pointer;
  list-style:none;
  padding:10px 12px;
  font-weight:700;
  font-size:13px;
  border-bottom:1px solid var(--line);
}
.edit-acc > summary::-webkit-details-marker{display:none}
.edit-acc:not([open]) .edit-block{display:none}
.edit-acc .edit-block{border:0;border-radius:0;background:transparent}
.edit-pill{
  height:auto;
  padding:8px 10px;
}
.edit-actions{
  position:sticky;
  bottom:0;
  display:flex;
  gap:8px;
  justify-content:stretch;
  margin-top:auto;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  border:1px solid rgba(174,194,211,.2);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(28,35,43,.92),rgba(18,23,29,.96));
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(8px) saturate(1.1);
  z-index:3;
}
.logo-pick-modern{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:6px;
}
.logo-pick-modern .btn{
  height:38px;
  border-radius:12px;
}
.edit-actions .btn{
  flex:1;
  min-width:0;
  height:42px;
  border-radius:12px;
}
.edit-actions .btn.ghost{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border-color:rgba(190,208,223,.24);
}
.edit-save-success{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.9);
  min-width:240px;
  text-align:center;
  border:1px solid rgba(84,227,165,.68);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(38,88,66,.96), rgba(20,56,42,.96));
  color:#d9ffef;
  font-size:28px;
  font-weight:900;
  letter-spacing:.3px;
  padding:18px 20px;
  z-index:10;
  box-shadow:0 18px 42px rgba(0,0,0,.45);
  animation:editSavePop .45s var(--ease) both;
}
@keyframes editSavePop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.86)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.edit-store-modal .logo-editor canvas{
  width:min(260px, 100%);
  height:auto;
  aspect-ratio:1/1;
}

@media (min-width:860px){
  .edit-store-grid{
    grid-template-columns:1fr 1fr;
    align-items:start;
  }
}
@media (max-width:640px){
  .edit-store-modal .row > *{min-width:100%}
  .edit-store-modal .btn.small{height:34px}
}

.tutorial-guide-overlay{
  position:fixed;
  inset:0;
  z-index:2400;
  pointer-events:none;
}
.tutorial-guide-highlight{
  position:fixed;
  border:4px solid #5ef8ba;
  border-radius:14px;
  background:rgba(94,248,186,.14);
  box-shadow:
    0 0 0 9999px rgba(3,9,14,.72),
    0 0 0 1px rgba(213,255,240,.75) inset,
    0 0 0 4px rgba(94,248,186,.30),
    0 0 44px rgba(84,240,179,.66);
  pointer-events:none;
  animation:tutorialPulse 0.95s ease-in-out infinite;
}
.tutorial-guide-target-badge{
  position:fixed;
  transform:translateX(-50%);
  height:28px;
  border-radius:999px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
  letter-spacing:.3px;
  color:#052012;
  background:linear-gradient(180deg,#7effcd,#3dd999);
  box-shadow:0 10px 20px rgba(0,0,0,.35);
  pointer-events:none;
  z-index:4;
}
.tutorial-guide-arrow{
  position:fixed;
  width:0;
  height:0;
  border-left:11px solid transparent;
  border-right:11px solid transparent;
  border-top:14px solid #7effcd;
  transform:translateX(-50%);
  filter:drop-shadow(0 7px 14px rgba(0,0,0,.45));
  pointer-events:none;
  z-index:4;
  animation:tutorialArrowBob .9s ease-in-out infinite;
}
.tutorial-guide-arrow.up{
  border-top:0;
  border-bottom:14px solid #7effcd;
}
.tutorial-guide-close-fab{
  position:fixed;
  top:calc(10px + env(safe-area-inset-top));
  right:10px;
  width:34px;
  height:34px;
  border:1px solid rgba(196,216,232,.5);
  border-radius:999px;
  background:rgba(7,15,22,.88);
  color:#e9f3fb;
  font-size:14px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  pointer-events:auto;
  z-index:5;
}
.tutorial-guide-card{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(560px, calc(100vw - 18px));
  border:1px solid rgba(140,215,191,.55);
  border-radius:16px;
  padding:11px 12px 9px;
  background:linear-gradient(180deg, rgba(11,24,32,.94), rgba(9,19,26,.94));
  box-shadow:0 16px 34px rgba(0,0,0,.5);
  z-index:3;
  pointer-events:none;
  text-align:center;
}
.tutorial-guide-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.tutorial-guide-bot{
  font-size:16px;
  font-weight:900;
  letter-spacing:.2px;
  color:#dffef2;
}
.tutorial-guide-text{
  margin-top:8px;
  font-size:18px;
  line-height:1.5;
  color:#edf8ff;
  font-weight:800;
}
.tutorial-guide-progress{
  margin-top:7px;
  font-size:14px;
  color:#a9c4d8;
}
.tutorial-guide-controls{
  margin-top:10px;
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
  pointer-events:auto;
}
.tutorial-guide-controls .btn{
  min-width:92px;
}
@keyframes tutorialPulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.03)}
  100%{transform:scale(1)}
}
@keyframes tutorialArrowBob{
  0%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(4px)}
  100%{transform:translateX(-50%) translateY(0)}
}