/* GJC DIGITAL FSC V9 • LAYERED GLASS EDITION
   Decorative only: no business logic, auth, wallet or RPC changes.
   Layer stack: soft under-gradient -> frosted surface -> transparent sheen -> inner edge.
*/
:root {
 --glass-orange: 248,151,66;
 --glass-ice: 175,210,226;
 --glass-lavender: 168,145,217;
 --glass-text: #f9f4ef;
 --glass-muted: #d0c4b9;
 --glass-radius: 20px;
}
html { background:#0e0e10 }
body {
 background-color:#0e0e10;
 background-image:
   radial-gradient(ellipse 75% 48% at 95% 4%,rgba(224,110,49,.13),transparent 74%),
   radial-gradient(ellipse 55% 44% at 6% 36%,rgba(101,67,110,.14),transparent 72%),
   radial-gradient(ellipse 75% 52% at 93% 84%,rgba(61,124,142,.095),transparent 74%),
   linear-gradient(165deg,#100e10,#141110 49%,#0c0d10);
 background-attachment:fixed;
}
/* Dark translucent layers: use opaque fallbacks when backdrop filters are unsupported. */
#app :is(.card,.stat,.v9-kpi,.v9-outlet-card,.v9-filters,.v9-line,.v8-recent,.v8-issued-details,
  .checkline,.notice,.reward,.sip-panel,.sip-perk,.sip-rules,.sip-day,.redeem-qr-card,.redeem-confirm-card,
  .v9-instructions,.tablebox,.v8-menu-panel,.v8-pos-mode button:not(.selected),.day,.v9-tag) {
 position:relative;
 background:
   linear-gradient(115deg,rgba(244,163,94,.085),transparent 39%,rgba(153,187,233,.038) 84%) padding-box,
   linear-gradient(150deg,rgba(34,30,32,.94),rgba(25,24,29,.91) 56%,rgba(32,24,29,.93)) padding-box,
   linear-gradient(129deg,rgba(255,188,122,.66),rgba(196,158,219,.15) 35%,rgba(120,188,213,.19) 70%,rgba(241,146,75,.44)) border-box;
 border:1px solid transparent;
 box-shadow:
   inset 0 1px 0 rgba(255,255,255,.10),
   inset 1px 0 0 rgba(255,255,255,.018),
   inset 0 -1px 0 rgba(0,0,0,.2),
   0 12px 28px rgba(0,0,0,.19),
   0 0 30px rgba(255,147,58,.035);
 -webkit-backdrop-filter:blur(15px) saturate(122%);
 backdrop-filter:blur(15px) saturate(122%);
}
#app :is(.card,.stat,.v9-kpi,.v9-outlet-card,.v9-filters,.v9-line,.v8-recent,
 .v8-issued-details,.sip-panel,.redeem-qr-card,.redeem-confirm-card,.tablebox,.v9-instructions) {
 border-radius:var(--glass-radius);
}
/* Pale amber inner rim, subtle enough that data stays the focus. */
#app :is(.card,.stat,.v9-kpi,.v9-outlet-card,.v9-filters,.sip-panel,.redeem-qr-card,.tablebox)::before {
 content:''; position:absolute; z-index:0; pointer-events:none;
 inset:4px; border-radius:inherit;
 border:1px solid rgba(255,235,210,.041);
 background:linear-gradient(120deg,rgba(255,208,152,.045),transparent 21%,transparent 79%,rgba(130,177,220,.026));
}
#app :is(.card,.stat,.v9-kpi,.v9-outlet-card,.v9-filters,.sip-panel,.redeem-qr-card,.tablebox) > * {
 position:relative; z-index:1;
}
/* Use soft highlights selectively instead of flooding every card with neon. */
#app :is(.v9-kpi,.stat):hover {
 border-color:rgba(250,171,98,.45);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 35px rgba(0,0,0,.26),0 0 22px rgba(255,131,63,.075);
}
#app .v9-kpi strong, #app .stat strong, #app .v9-card-metrics strong {
 color:#ffb476;
 text-shadow:0 0 16px rgba(252,155,79,.17);
}
#app .v9-kpi span,#app .v9-line small,#app .stat span { color:var(--glass-muted) }
#app .v9-tag { color:#ffd3a8 }
#app .v9-filters input, #app :is(input:not([type='checkbox']),select,textarea) {
 border:1px solid rgba(231,181,139,.27);
 background:linear-gradient(135deg,rgba(51,43,46,.52),rgba(20,19,24,.64));
 box-shadow:inset 0 1px 1px rgba(255,237,210,.065);
 -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
 color:#fff9f3;
}
#app :is(input,textarea)::placeholder{color:#a99a90;opacity:1}
#app :is(input,select,textarea):focus-visible{
 outline:2px solid rgba(255,174,99,.78);outline-offset:1px;
 box-shadow:0 0 0 4px rgba(242,140,58,.12),0 0 18px rgba(250,149,52,.09);
}
#app :is(.secondary,.ghost,.v8-menu summary,.v8-role-login,.v8-logout) {
 background:linear-gradient(135deg,rgba(255,168,94,.10),rgba(36,30,33,.66) 60%,rgba(112,138,155,.09));
 border:1px solid rgba(222,166,126,.30);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 6px 16px rgba(0,0,0,.08);
 -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
#app :is(.primary,.v8-primary-tab,.v8-pos-mode button.selected) {
 background:linear-gradient(130deg,#ffb369 0%,#f5923c 57%,#e2742b 100%);
 border:1px solid rgba(255,218,171,.37);
 box-shadow:inset 0 1px 0 rgba(255,247,231,.46),0 4px 17px rgba(245,128,40,.15);
 color:#261409;
}
#app :is(.primary,.v8-primary-tab,.secondary,.ghost):active{transform:translateY(1px)}
#app .v8-top{
 background:linear-gradient(115deg,rgba(27,22,23,.94),rgba(25,24,29,.92));
 -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
 border-bottom:1px solid rgba(229,169,117,.19);
 box-shadow:inset 0 -1px 0 rgba(255,255,255,.025);
}
#app .v8-menu-panel { background-color:#211a1d }
#app .v8-pos-mode button.selected {border-color:rgba(255,199,139,.7)}
#app .v8-pos-mode button:not(.selected) {border-radius:14px}
#app .v8-recent {border-radius:13px}
#app .v8-secure-pill {
 border-color:rgba(230,165,94,.34);
 background:linear-gradient(110deg,rgba(245,155,73,.14),rgba(139,145,152,.09));
}
/* Glass punch tile maintains its iconic orange while adding a transparent veil. */
#app .punchcard {
 background:linear-gradient(125deg,rgba(255,246,225,.16),transparent 46%,rgba(79,43,33,.06)),
            linear-gradient(125deg,#ffa95b,#ee842d 52%,#d66029);
 border:1px solid rgba(255,239,207,.63);
 box-shadow:inset 0 2px 1px rgba(255,248,224,.38),inset 0 -1px 0 rgba(108,48,8,.2),0 14px 40px rgba(232,113,39,.18);
}
#app .stamp {
 border-color:rgba(113,59,27,.47);
 background:radial-gradient(circle at 26% 19%,rgba(255,255,255,.29),transparent 65%),rgba(255,243,224,.22);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.23);
}
#app .stamp.fill { background:linear-gradient(150deg,#fffaf0,#ffead4);border-color:#fff8e9;color:#c15c1d }
#app .day.done {
 background:linear-gradient(145deg,rgba(248,163,79,.17),rgba(229,117,66,.10)) padding-box,
  linear-gradient(130deg,rgba(34,27,27,.90),rgba(26,24,28,.96)) padding-box,
  linear-gradient(110deg,rgba(255,177,90,.65),rgba(228,123,54,.33)) border-box;
 color:#ffbd81;
}
#app .tablebox { overflow-x:auto; isolation:isolate }
#app .tablebox table {border-collapse:separate;border-spacing:0}
#app .tablebox th {
 background:linear-gradient(135deg,rgba(251,160,77,.115),rgba(37,31,35,.55));
 color:#f7dcc5;
 border-bottom:1px solid rgba(233,167,105,.26);
}
#app .tablebox td {background:rgba(31,28,34,.32);border-bottom:1px solid rgba(255,228,193,.075);color:#eee9e3}
#app .tablebox tr:hover td{background:rgba(251,168,90,.075)}
#app .v9-card-metrics span {border-bottom-color:rgba(255,210,172,.11)}
/* The public marketing/homepage is on a light palette, so use a readable bright glass surface. */
#app :is(.gj-feature,.gj-path) {
 background:linear-gradient(145deg,rgba(255,255,255,.85),rgba(255,245,237,.71)) padding-box,
 linear-gradient(135deg,rgba(255,190,110,.47),rgba(195,172,223,.21),rgba(245,164,99,.43)) border-box;
 border:1px solid transparent;
 -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 32px rgba(80,43,24,.09),0 0 24px rgba(247,135,69,.035);
}
/* QR matrix itself must retain pure white quiet zones for scanner reliability. */
#app :is(.qr,.qr canvas,.qr img,.qr-wrap canvas,.qr-wrap img) {filter:none!important;mix-blend-mode:normal!important}
#app .qr {background:#fff!important;box-shadow:none!important}
@media (max-width:620px){
  #app :is(.card,.stat,.v9-kpi,.v9-outlet-card,.v9-filters,.v9-line,.sip-panel,.tablebox) {border-radius:16px}
  #app .v9-kpi {padding:15px 11px}
  #app .v8-pos-grid .card {padding:19px}
  #app .v9-filters {gap:10px}
}
@media(prefers-reduced-transparency:reduce){
 #app :is(.card,.stat,.v9-kpi,.v9-outlet-card,.v9-filters,.v9-line,.sip-panel) {background-color:#211e21;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){
 #app :is(.card,.stat,.v9-kpi,.primary,.secondary,.ghost,.stamp) {animation:none!important;transition:none!important}
}
@media print { #app * {text-shadow:none!important;box-shadow:none!important;backdrop-filter:none!important} }
/* Returning customers: recovery guidance uses the same layered glass style. */
#app .v9-returning-hint {
  position:relative;
  margin:0 auto 18px;
  max-width:650px;
  padding:18px 20px;
  border:1px solid transparent;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(38,31,34,.88),rgba(36,31,40,.82)) padding-box,
    linear-gradient(130deg,rgba(248,191,115,.66),rgba(217,167,244,.18),rgba(238,154,69,.54)) border-box;
  color:#faf4ee;
  -webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);
  box-shadow:inset 0 1px 0 rgba(255,245,223,.16),0 0 24px rgba(247,154,62,.08);
}
#app .v9-returning-hint strong{font-size:1.02rem;color:#ffe0b6}
#app .v9-returning-hint p{margin:.55rem 0 0;color:#f0e2d3;line-height:1.55}
#app .v9-returning-hint .small{font-size:.84rem;color:#ebd4bc}

/* V9.2 Returning Wallet Recovery */
.v92-browser-launch{display:block;width:100%;text-align:center;margin:12px 0;padding:12px 14px;border-radius:13px;text-decoration:none;font-weight:700}.v92-returning-hint{display:grid;gap:8px}.v92-returning-hint p{margin:4px 0;line-height:1.55}.v92-returning-hint .small{font-size:12px}.v92-browser-launch:focus-visible{outline:3px solid #ef9f56;outline-offset:3px}