/* ==================================================================
   Habeshabid — Premium Stylesheet
   ✦ Mobile: Image at TOP (70% 0%)
   ✦ Mobile: Text at BOTTOM
   ✦ Countdown: Green, Live: Red
   ✦ Footer: 2 columns
   ✦ Dashboard: ICON-ONLY mobile nav, RED logout, horizontal scroll
   ✦ Auction Detail: Mobile optimized, bigger bid button
   ✦ FORCE CACHE: version 31.0
   ================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg-primary:    #e6f2f8;     
  --bg-secondary:  #eaf7e2;     
  --bg-white:      #ffffff;

  --bg-card:       #ffffff;
  --bg-panel:      #f4fbfd;
  --bg-input:      #ffffff;

  --border-light:  #c3dae6;
  --border-medium: #9fcadd;

  --text-primary:  #1a2a48;     
  --text-secondary: #4a5a6a;    
  --text-muted:    #6a7a8a;
  --text-light:    #90a0b0;
  --text-white:    #ffffff;

  --accent-green:   #8DC63F;    
  --accent-green-deep: #009444; 
  --accent-blue:    #29ABE2;    

  --red:            #ff3333;

  --gold:          var(--accent-green);
  --gold-deep:     var(--accent-green-deep);
  --gold-light:    var(--accent-blue);
  --gold-pale:     rgba(141, 198, 63, .18);
  --gold-glow:     rgba(0, 148, 68, .35);

  --header-solid:  var(--accent-green-deep);

  --shadow-sm:     0 2px 10px rgba(26, 42, 72, .1);
  --shadow-md:     0 4px 20px rgba(26, 42, 72, .15);
  --shadow-lg:     0 8px 40px rgba(26, 42, 72, .2);
  --shadow-xl:     0 12px 60px rgba(26, 42, 72, .3);
  --shadow-gold:   0 4px 24px rgba(0, 148, 68, .3);

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-full: 9999px;
  --transition: all .3s cubic-bezier(.4,0,.2,1);

  --panel:    var(--bg-card);
  --panel-2:  var(--bg-secondary);
  --line:     var(--border-medium);
  --ink:      var(--bg-primary);
  --ink-2:    var(--bg-secondary);
  --text:     var(--text-primary);
  --muted:    var(--text-secondary);
  --muted-2:  var(--text-muted);
  --mint:     var(--accent-green-deep);
  --coral:    var(--red);
  --sky:      var(--accent-blue);
}

*, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection{ background: var(--gold); color: #ffffff; }
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; transition: var(--transition); }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:700; margin:0 0 .4em; letter-spacing:-.02em; line-height:1.15; color: var(--text-primary); }
h1{ font-size: clamp(2.4rem, 5vw, 4rem); }
h2{ font-size: clamp(1.8rem, 3vw, 2.6rem); }
h3{ font-size: clamp(1.2rem, 1.6vw, 1.5rem); }
p{ margin:0 0 1em; color: var(--text-secondary); line-height:1.7; }
button{ font-family:inherit; cursor:pointer; }
.num, .mono{ font-family: var(--font-mono); }

:focus-visible{
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.container{ max-width: 1200px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 640px){ .container{ padding: 0 12px; } }

.eyebrow{
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 12px;
}
.eyebrow::before{
  content: '';
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  display: inline-block;
  border-radius: 2px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid transparent;
  transition: var(--transition);
}
.btn:active{ transform: scale(.96); }

.btn-gold{
  background: var(--accent-green-deep); 
  color: #ffffff;
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover{
  background: #007a3a;
  transform: translateY(-3px);
  box-shadow: 0 8px 40px rgba(0, 148, 68, .45);
}

.btn-outline-green {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 2px solid #ffffff;
  backdrop-filter: blur(4px);
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  box-shadow: 0 0 30px rgba(141, 198, 63, 0.15);
  transition: var(--transition);
}
.btn-outline-green:hover {
  background: #ffffff;
  color: var(--accent-green-deep);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 40px rgba(255,255,255,0.3);
}

.btn-outline{
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-medium);
}
.btn-outline:hover{
  border-color: var(--gold-deep);
  color: var(--gold-deep);
  background: var(--gold-pale);
  transform: translateY(-3px);
}

.btn-ghost{
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, .6);
}
.btn-ghost:hover{
  color: #ffffff;
  background: rgba(255, 255, 255, .2);
}

.btn-white{
  background: rgba(255,255,255,.4);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--text-primary);
}
.btn-white:hover{
  background: rgba(255,255,255,.9);
  transform: translateY(-3px);
}

.btn-sm{ padding: 8px 18px; font-size: .8rem; }
.btn-block{ width:100%; justify-content:center; }
.btn-danger{
  background: rgba(255, 51, 51, .12);
  color: var(--red);
  border-color: rgba(255, 51, 51, .2);
}
.btn-danger:hover{
  background: rgba(255, 51, 51, .25);
  transform: translateY(-2px);
}
.btn[disabled]{ opacity:.4; cursor:not-allowed; transform:none !important; }

/* BIG BID BUTTON */
.btn-bid-lg {
  font-size: 1.2rem !important;
  padding: 16px 28px !important;
  font-weight: 700 !important;
}
@media (max-width: 768px) {
  .btn-bid-lg { font-size: 1rem !important; padding: 14px 20px !important; }
}
@media (max-width: 640px) {
  .btn-bid-lg { font-size: 0.95rem !important; padding: 12px 16px !important; }
}

/* Header */
.site-header{
  position: sticky;
  top:0;
  z-index:100;
  background: var(--header-solid); 
  box-shadow: 0 4px 20px rgba(0, 100, 50, .2);
}
.site-header .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 28px;                /* reduced from 14px — tighter top/bottom */
  max-width:1200px;
  margin:0 auto;
}
@media (max-width:640px){ .site-header .inner{ padding: 8px 16px; } }   /* reduced from 12px */
@media (max-width:400px){ .site-header .inner{ padding: 6px 12px; } }   /* extra tight on small phones */

.logo{
  display:flex;
  align-items:center;
  gap:12px;
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.25rem;
  color: #ffffff;
}
.logo .mark{
  width:40px;
  height:40px;
  border-radius:12px;
  background: linear-gradient(145deg, var(--gold), var(--gold-light));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  font-family: var(--font-mono);
  font-weight:700;
  font-size:1.1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.logo .logo-sub{ 
  color: rgba(255,255,255,.85); 
  font-weight:400;
  margin-left:4px;
}
@media (max-width:640px){ 
  .logo .logo-sub{ display:none; }
  .logo{ font-size:1rem; }
}

.main-nav{
  display:flex;
  align-items:center;
  gap:32px;
}
.main-nav a{
  color: rgba(255,255,255,.9);
  font-weight:600;
  font-size:.92rem;
  position:relative;
  padding:4px 0;
}
.main-nav a::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:3px;
  background: #ffffff;
  border-radius: 2px;
  transition:width .3s;
}
.main-nav a:hover::after,
.main-nav a.active::after{ width:100%; }
.main-nav a:hover,
.main-nav a.active{ color: #ffffff; }
.main-nav-lang{ display:none; }

.header-actions{
  display:flex;
  align-items:center;
  gap:14px;
}
.nav-toggle{
  display:none;
  background: rgba(255,255,255,.2);
  border:2px solid rgba(255,255,255,.4);
  border-radius:10px;
  color:#ffffff;
  padding:8px 12px;
  font-size:1.2rem;
  transition:var(--transition);
}
.nav-toggle:hover{
  background: rgba(255,255,255,.35);
}

.lang-switch{
  display:flex;
  align-items:center;
  background: rgba(0,0,0,.15);
  border:2px solid rgba(255,255,255,.4);
  border-radius: var(--radius-full);
  padding:4px;
  gap:3px;
}
.lang-switch a{
  padding:6px 14px;
  border-radius: var(--radius-full);
  font-size:.75rem;
  font-weight:700;
  color: rgba(255,255,255,.9);
  transition:var(--transition);
}
.lang-switch a.active{
  background: #ffffff;
  color: var(--gold-deep);
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.lang-switch a:hover:not(.active){ color: #ffffff; }

.wallet-chip{
  display:flex;
  align-items:center;
  gap:8px;
  background: rgba(0,0,0,.15);
  border:2px solid rgba(255,255,255,.4);
  padding:8px 16px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size:.82rem;
  transition:var(--transition);
  color: #ffffff;
}
.wallet-chip:hover{
  border-color: #ffffff;
  background: rgba(0,0,0,.25);
}
.wallet-chip .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background: var(--gold);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.4; transform:scale(.7); }
}

/* Hero */
.hero{
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
  background: 
    linear-gradient(90deg, rgba(0, 148, 68, .95) 0%, rgba(41, 171, 226, .85) 40%, rgba(0, 0, 0, 0) 75%),
    url('../img/bannerbid.jpg') center/cover no-repeat;
  min-height: 600px;
}
.hero::before{
  content: '';
  position: absolute;
  inset:0;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.05), transparent 60%);
  pointer-events:none;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:60px;
  align-items:center;
  position:relative;
  z-index:2;
}
.hero .eyebrow{ color: #ffffff; }
.hero .eyebrow::before{ background: linear-gradient(90deg, #ffffff, var(--gold-light)); }
.hero h1{
  color: #ffffff;
  margin-bottom:20px;
  text-shadow: 2px 2px 10px rgba(0,0,0,.3);
}
.hero h1 .accent{
  background: linear-gradient(135deg, var(--gold), #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero .lede{
  font-size: 1.1rem;
  max-width: 48ch;
  color: rgba(255, 255, 255, .95);
  line-height:1.8;
  text-shadow: 1px 1px 5px rgba(0,0,0,.3);
}
.hero-cta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:32px;
}
.hero-stats{
  display:flex;
  gap:40px;
  margin-top:44px;
  flex-wrap:wrap;
}
.hero-stats .stat b{
  display:block;
  font-family: var(--font-mono);
  font-size:1.8rem;
  color: #ffffff;
  font-weight:600;
  text-shadow: 2px 2px 10px rgba(0,0,0,.3);
}
.hero-stats .stat span{
  font-size:.75rem;
  color: rgba(255,255,255,.9);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.hero .btn-outline{
  border-color: rgba(255,255,255,.7);
  color: #ffffff;
  background: rgba(0,0,0,.1);
}
.hero .btn-outline:hover{
  border-color: #ffffff;
  color: #ffffff;
  background: rgba(0,0,0,.2);
}

.ladder{
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255, .2);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
}
.ladder:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}
.ladder-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:20px;
}
.ladder-head h3{
  margin:0;
  font-size:1.05rem;
  color: var(--gold-deep);
}
.ladder-head span{
  font-family: var(--font-mono);
  font-size:.7rem;
  color: var(--text-light);
}
.ladder-rows{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ladder-row{
  display:flex;
  align-items:center;
  gap:14px;
}
.ladder-row .n{
  width:28px;
  font-family: var(--font-mono);
  font-size:.8rem;
  color: var(--text-secondary);
  text-align:right;
  font-weight:500;
}
.ladder-row .bar{
  flex:1;
  height:18px;
  border-radius:6px;
  background: var(--bg-secondary);
  position:relative;
  overflow:hidden;
}
.ladder-row .bar > i{
  display:block;
  height:100%;
  border-radius:6px;
  background: var(--accent-blue);
  opacity:.6;
  transition:width .8s cubic-bezier(.4,0,.2,1);
}
.ladder-row.win .bar > i{
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  opacity:1;
  box-shadow: 0 0 30px rgba(141, 198, 63, .4);
}
.ladder-row.win .n{
  color: var(--gold-deep);
  font-weight:700;
}
.ladder-row .c{
  width:20px;
  font-family: var(--font-mono);
  font-size:.7rem;
  color: var(--text-light);
  text-align:center;
}
.ladder-foot{
  margin-top:20px;
  padding-top:16px;
  border-top:1px dashed var(--border-medium);
  font-size:.82rem;
  color: var(--text-secondary);
}
.ladder-foot b{
  color: var(--gold-deep);
  font-family: var(--font-mono);
}

/* Sections */
.section{
  padding:72px 0;
  position:relative;
}
.section::before{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:60%;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--border-medium), transparent);
}
.section:first-of-type::before{ display:none; }

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:40px;
  gap:24px;
  flex-wrap:wrap;
}
.section-head h2{ margin:0; color: var(--text-primary); }
.section-head h2 .highlight{ color: var(--gold-deep); }
.section-head p{ margin:0; max-width:50ch; color: var(--text-secondary); }

.section-default{ background: var(--bg-primary); }
.section-alt{ background: var(--bg-secondary); }
.section-bright{ background: var(--bg-white); }

.section-auction{
  background: var(--accent-blue);
  border-top: 4px solid var(--gold);
  border-bottom: 4px solid var(--gold);
  position:relative;
}
.section-auction::before{
  content: '';
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.2), transparent 60%);
  pointer-events:none;
}
.section-auction .section-head h2{ color: #ffffff; }

.steps{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:24px;
}
.step{
  background: var(--bg-card);
  border:1px solid var(--border-medium);
  border-radius: var(--radius);
  padding: 30px 28px;
  transition: var(--transition);
  position:relative;
  overflow:hidden;
  box-shadow: var(--shadow-sm);
}
.step::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep), var(--gold));
  opacity:0;
  transition:opacity .35s;
}
.step:hover{
  transform:translateY(-6px);
  border-color: var(--gold);
  box-shadow: var(--shadow-lg);
}
.step:hover::before{ opacity:1; }
.step .idx{
  font-family: var(--font-mono);
  color: var(--gold-deep);
  font-size:.8rem;
  margin-bottom:16px;
  display:inline-block;
  background: var(--gold-pale);
  padding:4px 16px;
  border-radius: var(--radius-full);
  font-weight:600;
  letter-spacing:.04em;
}
.step h3{
  font-size:1.1rem;
  color: var(--text-primary);
  margin-bottom:8px;
}
.step p{
  font-size:.92rem;
  margin:0;
  color: var(--text-secondary);
  line-height:1.7;
}
.step .step-number{
  font-family: var(--font-mono);
  font-size:3.6rem;
  font-weight:700;
  color: rgba(141, 198, 63, .12);
  position:absolute;
  bottom:8px;
  right:16px;
  line-height:1;
  pointer-events:none;
  user-select:none;
}

.grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:24px;
}
.card{
  background: var(--bg-card);
  border:1px solid var(--border-medium);
  border-radius: var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.card:hover{
  transform:translateY(-6px);
  border-color: var(--gold);
  box-shadow: var(--shadow-lg);
}
.card-media{
  aspect-ratio:4/3;
  background: linear-gradient(145deg, var(--bg-secondary), var(--bg-primary));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}
.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s;
}
.card:hover .card-media img{ transform:scale(1.05); }
.badge{
  font-family: var(--font-mono);
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:6px 14px;
  border-radius: var(--radius-full);
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
}
.badge::before{
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
}
.badge-live{
  background: rgba(255, 51, 51, .15);
  color: var(--red);
  position:absolute;
  top:16px;
  left:16px;
}
.badge-ending{
  background: rgba(255, 51, 51, .15);
  color: var(--red);
  position:absolute;
  top:16px;
  left:16px;
  animation:pulse-badge 1.5s infinite;
}
@keyframes pulse-badge{
  0%,100%{ opacity:1; }
  50%{ opacity:.6; }
}
.badge-closed{
  background: rgba(26, 42, 72, .05);
  color: var(--text-muted);
  position:absolute;
  top:16px;
  left:16px;
}
.card-body{
  padding:22px 24px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.card-body h3{
  font-size:1.1rem;
  margin:0;
  color: var(--text-primary);
}
.card-body .desc{
  font-size:.88rem;
  margin:0;
  color: var(--text-secondary);
  line-height:1.6;
}
.card-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family: var(--font-mono);
  font-size:.78rem;
  color: var(--text-secondary);
  border-top:1px solid var(--border-light);
  padding-top:14px;
  margin-top:auto;
}
.card-meta .cd{ color: var(--gold-deep); font-weight:500; }
.card-foot{ padding:0 24px 22px; }

.status-pill{
  font-family: var(--font-mono);
  font-size:.7rem;
  padding:4px 14px;
  border-radius: var(--radius-full);
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:500;
}
.status-pill::before{
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
}
.status-winning{ background: var(--gold-pale); color: var(--gold-deep); }
.status-unique{ background: rgba(41, 171, 226, .12); color: var(--accent-blue); }
.status-duplicate{ background: rgba(41, 171, 226, .12); color: var(--accent-blue); }
.status-active{ background: rgba(26, 42, 72, .04); color: var(--text-muted); }
.status-lost{ background: rgba(255, 51, 51, .1); color: var(--red); }

/* My Bids */
.bid-group{
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}
.bid-group:last-of-type{ margin-bottom: 0; }
.bid-group-summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.bid-group-summary::-webkit-details-marker{ display: none; }
.bid-group-summary::before{
  content: '▸';
  color: var(--text-muted);
  margin-right: 10px;
  transition: transform .15s ease;
  display: inline-block;
}
.bid-group[open] .bid-group-summary::before{ transform: rotate(90deg); }
.bid-group-main{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.bid-group-title{ font-weight: 600; color: var(--text-primary); }
.bid-group-count{ font-size: .8rem; color: var(--text-muted); font-family: var(--font-mono); }
.bid-group-hint{ opacity: .7; }
.bid-group-detail{
  padding: 0 18px 18px;
  border-top: 1px solid var(--border-light);
}
.bid-group-detail .table-wrap{ margin-top: 14px; }

.bid-count{ color: var(--text-muted); font-weight: 500; }
.bid-more summary{
  list-style: none;
  cursor: pointer;
  font-size: .85rem;
  color: var(--gold-deep);
  padding: 4px 0;
}
.bid-more summary::-webkit-details-marker{ display: none; }
.bid-more summary:hover{ text-decoration: underline; }

/* Pagination */
.pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-light);
}
.page-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  font-size: .85rem;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  text-decoration: none;
  border: 1px solid var(--border-medium);
}
.page-btn:hover{
  border-color: var(--gold-deep);
  color: var(--gold-deep);
}
.page-btn.active{
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: #fff;
}
.page-ellipsis{ color: var(--text-light); padding: 0 4px; }

/* Forms */
.auth-wrap{ max-width:480px; margin:60px auto; padding:0 24px; }
.auth-card{
  background: var(--bg-card);
  border:1px solid var(--border-medium);
  border-radius: var(--radius);
  padding:40px;
  box-shadow: var(--shadow-lg);
}
.auth-card h1{ font-size:1.6rem; margin-bottom:6px; color: var(--gold-deep); }
.auth-card .sub{ margin-bottom:28px; color: var(--text-secondary); }
.field{ margin-bottom:20px; }
.field label{
  display:block;
  font-size:.8rem;
  color: var(--text-secondary);
  margin-bottom:8px;
  font-weight:500;
}
.field .hint{ font-size:.75rem; color: var(--text-light); margin-top:6px; }
input[type=text],
input[type=tel],
input[type=password],
input[type=number],
input[type=email],
textarea,
select{
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  background: var(--bg-input);
  border:1px solid var(--border-medium);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size:.95rem;
  transition: var(--transition);
}
input.mono-input{
  font-family: var(--font-mono);
  font-size:1.1rem;
  letter-spacing:.03em;
}
input:focus,
textarea:focus,
select:focus{
  border-color: var(--gold-deep);
  outline:none;
  box-shadow: 0 0 0 4px rgba(0, 148, 68, .15);
}
.input-prefix{ display:flex; align-items:stretch; }
.input-prefix span{
  display:flex;
  align-items:center;
  padding:0 16px;
  background: var(--bg-secondary);
  border:1px solid var(--border-medium);
  border-right:none;
  border-radius:12px 0 0 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size:.9rem;
}
.input-prefix input{ border-radius:0 12px 12px 0; }
.amount-chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:14px 0 20px;
}
.amount-chips button{
  background: var(--bg-secondary);
  border:1px solid var(--border-medium);
  color: var(--text-secondary);
  padding:8px 18px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size:.8rem;
  transition:var(--transition);
}
.amount-chips button.active,
.amount-chips button:hover{
  border-color: var(--gold);
  color: var(--gold-deep);
  background: var(--gold-pale);
}
.conversion-note{
  background: var(--gold-pale);
  border:2px dashed var(--gold);
  border-radius:12px;
  padding:14px 18px;
  font-family: var(--font-mono);
  font-size:.85rem;
  color: var(--gold-deep);
  margin-bottom:20px;
}
.form-foot{
  text-align:center;
  margin-top:20px;
  font-size:.88rem;
  color: var(--text-secondary);
}
.form-foot a{ color: var(--gold-deep); font-weight:600; }
.form-foot a:hover{ text-decoration:underline; }
.error-text{ color: var(--accent-blue); font-size:.8rem; margin-top:6px; }

.receipt-strip{
  display:flex;
  align-items:center;
  gap:14px;
  background: rgba(41, 171, 226, .12);
  border:1px solid rgba(41, 171, 226, .35);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 22px;
}
.receipt-icon{ font-size: 1.6rem; flex-shrink:0; }
.receipt-label{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color: var(--accent-blue);
  font-weight:700;
}
.receipt-value{
  font-family: var(--font-mono);
  font-size:1.05rem;
  color: var(--text-primary);
  margin-top:2px;
}

.bid-strip{
  display:flex;
  align-items:center;
  gap:14px;
  background: var(--gold-pale);
  border:1px solid rgba(141, 198, 63, .4);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.bid-strip .receipt-icon{ font-size:1.6rem; }
.bid-strip .receipt-label{ color: var(--gold-deep); }

.alert{
  border-radius:12px;
  padding:14px 20px;
  font-size:.88rem;
  margin-bottom:18px;
  border:1px solid transparent;
  overflow: hidden;
  max-height: 200px;
  transition: opacity .4s ease, max-height .4s ease, margin .4s ease, padding .4s ease, border-width .4s ease;
}
.alert-success{
  background: rgba(0, 148, 68, .12);
  color: var(--gold-deep);
  border-color: rgba(0, 148, 68, .2);
}
.alert-error{
  background: rgba(255, 51, 51, .12);
  color: var(--red);
  border-color: rgba(255, 51, 51, .2);
}
.alert-info{
  background: rgba(41, 171, 226, .12);
  color: var(--accent-blue);
  border-color: rgba(41, 171, 226, .2);
}

/* ============================================================
   DASHBOARD — Desktop sidebar
   ============================================================ */
.dash-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 40px 28px 80px;
  width: 100%;
  max-width: 100%;
}

.dash-nav {
  background: var(--header-solid);
  border: none;
  border-radius: var(--radius);
  padding: 20px;
  height: fit-content;
  position: sticky;
  top: 90px;
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 100%;
}

.dash-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  color: #ffffff !important;
  font-size: .9rem;
  margin-bottom: 4px;
  transition: var(--transition);
  background: rgba(255, 255, 255, 0.05);
}
.dash-nav a:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff !important;
}
.dash-nav a.active {
  background: var(--gold-pale);
  color: var(--gold-deep) !important;
  font-weight: 600;
}
.dash-nav a .icon {
  color: rgba(255, 255, 255, 0.6) !important;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-nav a .icon svg{
  width: 100%;
  height: 100%;
  display: block;
}
.dash-nav a:hover .icon { color: rgba(255, 255, 255, 0.9) !important; }
.dash-nav a.active .icon { color: var(--gold-deep) !important; }
.dash-nav .divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 12px 0;
}

/* ★ LOGOUT — RED (desktop & mobile) ★ */
.dash-nav a[href*="logout"] {
  color: var(--red) !important;
}
.dash-nav a[href*="logout"]:hover {
  background: rgba(255, 51, 51, .18) !important;
  color: #ff6b6b !important;
}
.dash-nav a[href*="logout"] .icon {
  color: var(--red) !important;
}
.dash-nav a[href*="logout"]:hover .icon {
  color: #ff6b6b !important;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 32px;
  width: 100%;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  padding: 22px 24px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.stat-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.stat-card .lbl {
  font-size: .72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
  font-weight: 600;
}
.stat-card .val {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  color: var(--text-primary);
  font-weight: 600;
}
.stat-card .val.gold { color: var(--gold-deep); }
.stat-card .val.mint { color: var(--accent-blue); }

.panel {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  padding: 26px;
  margin-bottom: 26px;
  box-shadow: var(--shadow-sm);
  width: 100%;
  overflow: hidden;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}
.panel-head h2 { font-size: 1.1rem; margin: 0; color: var(--text-primary); }

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
table{ width:100%; border-collapse:collapse; font-size:.88rem; }
th{
  text-align:left;
  color: var(--text-muted);
  font-weight:700;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:12px 14px;
  border-bottom:2px solid var(--border-medium);
}
td{
  padding:14px 14px;
  border-bottom:1px solid var(--border-light);
  color: var(--text-secondary);
}
td.mono, th.mono{ font-family: var(--font-mono); }
tr:last-child td{ border-bottom:none; }
.empty-row td{
  text-align:center;
  color: var(--text-light);
  padding:40px 14px;
}

/* ============================================================
   BIDDING / AUCTION DETAIL
   ============================================================ */
.bid-layout{
  display:grid;
  grid-template-columns:1.3fr .9fr;
  gap:40px;
  padding:48px 0 80px;
}
.product-hero-media{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--border-medium);
  aspect-ratio:16/10;
  background: linear-gradient(145deg, var(--bg-secondary), var(--bg-primary));
  display:flex;
  align-items:center;
  justify-content:center;
}
.product-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.specs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:22px;
}
.spec{
  background: var(--bg-card);
  border:1px solid var(--border-medium);
  border-radius:12px;
  padding:14px 16px;
  font-size:.85rem;
}
.spec b{
  display:block;
  color: var(--text-muted);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:4px;
}
.bid-box{
  background: var(--bg-card);
  border:2px solid var(--border-medium);
  border-radius: var(--radius);
  padding:28px;
  position:sticky;
  top:90px;
  height:fit-content;
  box-shadow: var(--shadow-md);
}
.countdown{
  display:flex;
  gap:12px;
  margin:18px 0 24px;
}
.countdown .box{
  flex:1;
  background: var(--bg-secondary);
  border:1px solid var(--border-medium);
  border-radius:12px;
  text-align:center;
  padding:14px 6px;
}
.countdown .box b{
  display:block;
  font-family: var(--font-mono);
  font-size:1.8rem;
  color: var(--gold-deep);
  font-weight:700;
}
.countdown .box span{
  font-size:.6rem;
  color: var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.bid-range{
  font-family: var(--font-mono);
  font-size:.8rem;
  color: var(--text-secondary);
  margin:6px 0 18px;
}
.my-status{
  margin-top:20px;
  padding-top:18px;
  border-top:1px dashed var(--border-medium);
}
.legend{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:14px;
}
.legend .item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.76rem;
  color: var(--text-secondary);
}
.legend .dot{
  width:9px;
  height:9px;
  border-radius:50%;
}
.legend .dot.gold{ background: var(--gold); box-shadow:0 0 12px rgba(141, 198, 63, .4); }
.legend .dot.sky{ background: var(--accent-blue); }
.legend .dot.coral{ background: var(--red); }

/* Big bid button */
.bid-box .btn-gold,
.bid-box .btn-block,
.btn-bid-lg {
  font-size: 1.2rem !important;
  padding: 16px 28px !important;
  font-weight: 700 !important;
}
.bid-amount, .bid-price {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
}
@media (max-width: 768px) {
  .bid-box .btn-gold,
  .bid-box .btn-block,
  .btn-bid-lg { font-size: 1rem !important; padding: 14px 20px !important; }
  .bid-amount, .bid-price { font-size: 1.2rem !important; }
}
@media (max-width: 640px) {
  .bid-box .btn-gold,
  .bid-box .btn-block,
  .btn-bid-lg { font-size: 0.95rem !important; padding: 12px 16px !important; }
  .bid-amount, .bid-price { font-size: 1.1rem !important; }
}

/* Auction detail - mobile */
@media (max-width: 1024px){
  .bid-layout { grid-template-columns: 1fr !important; gap: 24px !important; padding: 24px 0 40px !important; }
  .product-hero-media { aspect-ratio: 4/3 !important; max-height: 400px !important; }
  .specs { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .spec { padding: 10px 12px !important; font-size: .75rem !important; }
  .bid-box { position: static !important; padding: 20px !important; margin-top: 10px !important; }
  .bid-box h2 { font-size: 1.2rem !important; }
  .countdown { gap: 8px !important; }
  .countdown .box { padding: 10px 4px !important; }
  .countdown .box b { font-size: 1.3rem !important; }
  .countdown .box span { font-size: .5rem !important; }
  .bid-range { font-size: .7rem !important; }
}
@media (max-width: 768px){
  .bid-layout { padding: 16px 0 30px !important; gap: 16px !important; }
  .product-hero-media { aspect-ratio: 4/3 !important; max-height: 300px !important; border-radius: 10px !important; }
  .product-hero-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .specs { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .spec { padding: 8px 10px !important; font-size: .7rem !important; border-radius: 8px !important; }
  .spec b { font-size: .6rem !important; }
  .bid-box { padding: 16px !important; border-radius: 10px !important; }
  .bid-box h2 { font-size: 1rem !important; }
  .countdown { gap: 6px !important; margin: 12px 0 16px !important; }
  .countdown .box { padding: 8px 2px !important; border-radius: 8px !important; }
  .countdown .box b { font-size: 1.1rem !important; }
  .countdown .box span { font-size: .45rem !important; }
  .bid-range { font-size: .65rem !important; margin: 4px 0 12px !important; }
  .my-status { margin-top: 12px !important; padding-top: 12px !important; }
  .my-status p { font-size: .8rem !important; }
  .legend { gap: 10px !important; }
  .legend .item { font-size: .65rem !important; }
}
@media (max-width: 640px){
  .bid-layout { padding: 10px 0 20px !important; gap: 12px !important; }
  .product-hero-media { aspect-ratio: 4/3 !important; max-height: 250px !important; border-radius: 8px !important; }
  .specs { grid-template-columns: 1fr 1fr !important; gap: 4px !important; }
  .spec { padding: 6px 8px !important; font-size: .6rem !important; border-radius: 6px !important; }
  .spec b { font-size: .5rem !important; }
  .bid-box { padding: 12px !important; border-radius: 8px !important; }
  .bid-box h2 { font-size: .85rem !important; }
  .countdown { gap: 4px !important; margin: 8px 0 12px !important; }
  .countdown .box { padding: 6px 2px !important; border-radius: 6px !important; }
  .countdown .box b { font-size: .9rem !important; }
  .countdown .box span { font-size: .4rem !important; }
  .bid-range { font-size: .6rem !important; }
  .my-status p { font-size: .7rem !important; }
  .btn-block { padding: 8px 16px !important; font-size: .7rem !important; }
  .legend .item { font-size: .55rem !important; }
  .legend .dot { width: 6px !important; height: 6px !important; }
}
@media (max-width: 768px){
  .product-description { font-size: .85rem !important; line-height: 1.6 !important; }
  .product-description h3 { font-size: 1rem !important; }
  .product-title { font-size: 1.1rem !important; }
}

/* Winner banner */
.winner-banner{ text-align:center; padding:80px 0 50px; }
.winner-banner .trophy{ font-size:3.6rem; margin-bottom:16px; }
.winner-banner .bignum{
  font-family: var(--font-mono);
  font-size:clamp(3.5rem,9vw,5.6rem);
  color: var(--gold-deep);
  line-height:1;
  margin:12px 0;
  text-shadow: 0 0 60px rgba(141, 198, 63, .3);
}
.winner-card{
  max-width:660px;
  margin:0 auto;
  background: var(--bg-card);
  border:2px solid var(--border-medium);
  border-radius: var(--radius);
  padding:34px;
  box-shadow: var(--shadow-lg);
}
.winner-meta{
  display:flex;
  justify-content:space-around;
  margin-top:24px;
  padding-top:24px;
  border-top:1px dashed var(--border-medium);
  flex-wrap:wrap;
  gap:18px;
}
.winner-meta div b{
  display:block;
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-size:1.15rem;
}
.winner-meta div span{
  font-size:.7rem;
  color: var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.winner-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.winner-mini{
  background: var(--bg-card);
  border:1px solid var(--border-medium);
  border-radius: var(--radius);
  padding:22px;
  transition:var(--transition);
  box-shadow: var(--shadow-sm);
}
.winner-mini:hover{
  border-color: var(--gold);
  transform:translateY(-3px);
  box-shadow: var(--shadow-md);
}
.winner-mini .wb{
  font-family: var(--font-mono);
  color: var(--gold-deep);
  font-size:1.7rem;
  margin:8px 0;
}
.winner-mini-media{
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.winner-mini-media img{ width: 100%; height: 100%; object-fit: cover; }
.winner-mini-media .ph{ font-size: 2rem; opacity: .5; }
.winner-product-img{
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-full);
  border: 3px solid var(--gold);
  margin: 0 auto 18px;
  display: block;
}
.freq-chart{
  display:flex;
  align-items:flex-end;
  gap:8px;
  height:230px;
  padding:20px 0;
  border-bottom:1px solid var(--border-medium);
}
.freq-chart .col{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  height:100%;
}
.freq-chart .col .bar{
  width:100%;
  border-radius:6px 6px 0 0;
  background: var(--bg-secondary);
  position:relative;
  min-height:4px;
  transition:height .8s cubic-bezier(.4,0,.2,1);
}
.freq-chart .col.win .bar{
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  box-shadow: 0 0 40px rgba(141, 198, 63, .3);
}
.freq-chart .col span{
  font-family: var(--font-mono);
  font-size:.65rem;
  color: var(--text-muted);
}
.freq-chart .col.win span{ color: var(--gold-deep); font-weight:600; }

/* Footer */
.site-footer{
  background: var(--header-solid); 
  padding: 56px 0 32px;
  margin-top: 60px;
}
.site-footer .logo { color: #ffffff !important; }
.site-footer .logo .logo-sub { color: rgba(255,255,255,0.8) !important; }
.site-footer p { color: rgba(255,255,255,0.9) !important; }
.site-footer a { color: rgba(255,255,255,0.9) !important; }
.site-footer a:hover { color: #ffffff !important; text-decoration: underline; }
.site-footer h4 { color: #ffffff !important; border-bottom-color: rgba(255,255,255,0.2) !important; }
.site-footer .footer-bottom { color: rgba(255,255,255,0.9) !important; }
.site-footer .footer-bottom span { color: rgba(255,255,255,0.9) !important; }

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px;
  margin-bottom:32px;
}
.footer-grid h4{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--gold); 
  margin-bottom:16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.2); 
}
.footer-grid a{
  display:block;
  color: rgba(255,255,255,.95);
  font-size:.88rem;
  padding:6px 0;
  transition:var(--transition);
}
.footer-grid a:hover{ color: #ffffff; text-decoration: underline; }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items: center;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.2); 
  font-size:.78rem;
  color: rgba(255,255,255,.9);
  flex-wrap:wrap;
  gap:12px;
}

.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.flex-between{ display:flex; justify-content:space-between; align-items:center; }
.pill-list{ display:flex; gap:10px; flex-wrap:wrap; }

.search-bar{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin:20px 0 36px;
  align-items:center;
}
.search-bar input[type=text]{ flex:1; min-width:220px; }
.search-bar select{ width:auto; min-width:180px; }

/* ============================================================
   RESPONSIVE — DASHBOARD (icon-only mobile, red logout)
   ============================================================ */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr 1fr; }
  
  .dash-shell {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 16px 16px 30px !important;
  }

  /* ----- Mobile dashboard nav: single row, real horizontal scroll ----- */
  .dash-nav {
    position: static !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius) !important;
    padding: 10px !important;
    box-shadow: var(--shadow-sm) !important;

    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--gold) transparent !important;

    width: 100% !important;
    max-width: 100% !important;
  }

  /* Thin gold scrollbar so users know it scrolls */
  .dash-nav::-webkit-scrollbar{
    display: block !important;
    height: 5px !important;
  }
  .dash-nav::-webkit-scrollbar-track{
    background: transparent !important;
    margin: 0 6px !important;
  }
  .dash-nav::-webkit-scrollbar-thumb{
    background: var(--gold) !important;
    border-radius: var(--radius-full) !important;
  }
  .dash-nav::-webkit-scrollbar-thumb:hover{
    background: var(--gold-deep) !important;
  }

  .dash-nav .divider { display: none !important; }

  /* ----- Icon-only square pills ----- */
  .dash-nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;

    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-secondary) !important;

    box-shadow: none !important;
    margin: 0 !important;
    transition: background-color .25s ease, border-color .25s ease,
                color .25s ease, transform .25s ease !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* Hide the text labels — icon-only mode */
  .dash-nav a .label { display: none !important; }

  .dash-nav a .icon {
    width: 22px !important;
    height: 22px !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .dash-nav a .icon svg{
    width: 100% !important;
    height: 100% !important;
  }

  .dash-nav a:hover {
    background: var(--bg-white) !important;
    border-color: var(--gold) !important;
    color: var(--gold-deep) !important;
    transform: translateY(-2px);
  }
  .dash-nav a:hover .icon { color: var(--gold-deep) !important; }

  .dash-nav a.active {
    background: var(--gold-pale) !important;
    border-color: var(--gold) !important;
    color: var(--gold-deep) !important;
  }
  .dash-nav a.active .icon { color: var(--gold-deep) !important; }

  /* ★ Logout stays red on mobile ★ */
  .dash-nav a[href*="logout"] {
    background: rgba(255, 51, 51, .1) !important;
    border-color: rgba(255, 51, 51, .3) !important;
    color: var(--red) !important;
  }
  .dash-nav a[href*="logout"] .icon { color: var(--red) !important; }
  .dash-nav a[href*="logout"]:hover {
    background: rgba(255, 51, 51, .2) !important;
    border-color: var(--red) !important;
  }
  .dash-nav a[href*="logout"]:hover .icon { color: #ff6b6b !important; }

  .stat-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
  .stat-card { padding: 12px 14px !important; border-radius: 10px !important; }
  .stat-card .val { font-size: 1.1rem !important; }
  .stat-card .lbl { font-size: .6rem !important; margin-bottom: 4px !important; }

  .panel {
    padding: 14px 12px !important;
    margin-bottom: 14px !important;
    border-radius: 10px !important;
  }
  .panel-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  .panel-head h2 { font-size: .85rem !important; }
  .panel-head .btn { padding: 4px 12px !important; font-size: .65rem !important; }

  .table-wrap { margin: 0 -8px !important; padding: 0 8px !important; }
  table { font-size: .7rem !important; min-width: 400px !important; }
  th, td { padding: 6px 8px !important; }
  th { font-size: .6rem !important; }
  
  .footer-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 768px){
  .hero{ padding:60px 0 50px; }
  .hero h1{ font-size:clamp(1.8rem,6vw,2.6rem); }
  .hero-stats{ gap:24px; }
  .hero-stats .stat b{ font-size:1.4rem; }
  .section{ padding:48px 0; }
  .steps{ grid-template-columns:1fr; }
  .step{ padding:24px 22px; }
  
  .dash-shell { padding: 12px 12px 25px !important; }
  
  .stat-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .stat-card { padding: 10px 12px !important; border-radius: 8px !important; }
  .stat-card .val { font-size: 1rem !important; }
  .stat-card .lbl { font-size: .55rem !important; }

  .panel { padding: 12px 10px !important; margin-bottom: 12px !important; border-radius: 8px !important; }
  .panel-head h2 { font-size: .8rem !important; }

  table { font-size: .65rem !important; min-width: 350px !important; }
  th, td { padding: 5px 6px !important; }
}

@media (max-width: 640px){
  .logo{ font-size:.9rem; gap:8px; }
  .logo .mark{ width:32px; height:32px; font-size:.9rem; }
  .header-actions{ gap:8px; }
  .header-actions .btn-sm{ padding:6px 12px; font-size:.72rem; }
  .header-actions a.btn-gold.btn-sm{ display:none; }
  .wallet-chip{ padding:4px 10px; font-size:.7rem; gap:4px; }
  .wallet-chip .dot{ width:6px; height:6px; }
  .lang-switch{ padding:2px; }
  .lang-switch a{ padding:4px 10px; font-size:.65rem; }
  .nav-toggle{ display:block; }
  
  .container{ padding: 0 8px; }
  
  .dash-shell { padding: 10px 10px 20px !important; }
  
  .hero{
    background: 
      linear-gradient(180deg, rgba(0, 148, 68, .85) 0%, rgba(41, 171, 226, .75) 30%, rgba(0, 0, 0, 0) 60%),
      url('../img/bannerbid.jpg') 70% 0% / cover no-repeat;
    padding: 40px 0 30px;
    min-height: 70vh; 
    display: flex;
    align-items: flex-end; 
  }
  .hero-grid{ grid-template-columns: 1fr; gap: 20px; width: 100%; }
  
  .hero-cta .btn {
      width: auto; 
      padding: 8px 12px; 
      font-size: .7rem; 
      white-space: nowrap;
  }
  
  .hero .ladder{ margin-top: 16px; padding: 16px; }

  .main-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    background: var(--header-solid); 
    box-shadow: var(--shadow-xl);
    padding:10px 16px 16px;
    z-index:99;
  }
  .main-nav.open{ display:flex; }
  .main-nav a{ 
    padding:10px 4px; 
    border-bottom:1px solid rgba(255,255,255,.2); 
    color: #ffffff; 
    white-space: normal; 
    text-align: left; 
    line-height: 1.4;
    width: 100%;
    max-width: 100%;
  }
  .main-nav a:last-child{ border-bottom:none; }
  .main-nav a::after{ display:none; }
  .main-nav-lang{
    display:flex;
    gap:8px;
    margin-top:10px;
    flex-wrap: wrap; 
    width: 100%;
  }
  .main-nav-lang a{
    flex:1;
    text-align:center;
    padding:8px;
    border:1px solid rgba(255,255,255,.4);
    border-radius:8px;
    font-size:.75rem;
    font-weight:600;
    color: #ffffff;
    white-space: normal; 
    width: 100%;
    max-width: 100%;
  }
  .main-nav-lang a.active{
    background: #ffffff;
    color: var(--gold-deep);
    border-color: #ffffff;
  }
  
  /* Smaller icon-only pills on small screens */
  .dash-nav { padding: 8px !important; gap: 6px !important; }
  .dash-nav a {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
  }
  .dash-nav a .icon { width: 20px !important; height: 20px !important; }

  .stat-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .stat-card { padding: 8px 10px !important; border-radius: 6px !important; }
  .stat-card .val { font-size: .85rem !important; }
  .stat-card .lbl { font-size: .5rem !important; }

  .panel { padding: 10px 8px !important; margin-bottom: 10px !important; border-radius: 6px !important; }
  .panel-head h2 { font-size: .7rem !important; }
  .panel-head .btn { padding: 3px 10px !important; font-size: .55rem !important; }

  table { font-size: .55rem !important; min-width: 300px !important; }
  th, td { padding: 4px 5px !important; }
  
  .footer-grid{ grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .footer-grid h4{ font-size: .7rem; }
  .footer-grid a{ font-size: .75rem; padding: 4px 0; }
  .footer-bottom{ justify-content: center; text-align: center; font-size: .65rem; }

  .grid{ grid-template-columns:1fr; }
  .winner-list{ grid-template-columns:1fr; }
  .auth-card{ padding:20px 16px; }
}

@media (max-width: 480px){
  .dash-shell { padding: 8px 8px 15px !important; }
  .stat-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 4px !important; }
  .stat-card { padding: 6px 8px !important; border-radius: 5px !important; }
  .stat-card .val { font-size: .75rem !important; }
  .stat-card .lbl { font-size: .45rem !important; }
}

@media (max-width: 400px){
  .header-actions .lang-switch{ display:none; }
  .hero-cta .btn{ width: 100%; justify-content:center; } 
  
  .dash-shell { padding: 6px 6px 12px !important; }
  .dash-nav { padding: 6px !important; gap: 5px !important; }
  .dash-nav a {
    width: 40px !important;
    height: 40px !important;
    border-radius: 9px !important;
  }
  .dash-nav a .icon { width: 18px !important; height: 18px !important; }

  .stat-cards { grid-template-columns: 1fr 1fr !important; gap: 3px !important; }
  .stat-card { padding: 5px 6px !important; border-radius: 4px !important; }
  .stat-card .val { font-size: .65rem !important; }
  .stat-card .lbl { font-size: .4rem !important; }
  
  .footer-grid{ grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .footer-grid h4{ font-size: .65rem; }
  .footer-grid a{ font-size: .65rem; padding: 4px 0; }
}

/* PIN — aligned left to match the phone number field */
.pin-input{
  letter-spacing:.4em;
  text-align:left;
  font-size:1.3rem;
  padding-left: 18px;   /* compensates for the trailing letter-spacing unit */
  text-indent: 2px;     /* nudges the first digit off the border */
}

/* Hero — single column */
.hero-grid.hero-grid-single{
  grid-template-columns:1fr;
  justify-items:start;
}
.hero-grid.hero-grid-single > div{
  max-width:640px;
  text-align:left;
}

/* Carousel */
.hero-carousel-section{ padding-top:8px; }
.auction-carousel{ position:relative; padding:0 46px; }
.carousel-track{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:4px;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-slide{
  flex:0 0 calc((100% - 40px) / 3);
  scroll-snap-align:start;
  min-width:0;
}
.carousel-slide .card{ height:100%; }
.carousel-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--border, rgba(0,0,0,.12));
  background:#fff;
  color:var(--gold-deep, #b8860b);
  font-size:1.4rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  transition:background .15s ease, transform .15s ease;
  z-index:2;
}
.carousel-arrow:hover{ background:var(--gold-deep, #b8860b); color:#fff; }
.carousel-prev{ left:0; }
.carousel-next{ right:0; }
.carousel-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:18px;
}
.carousel-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  border:none;
  background:var(--border, rgba(0,0,0,.15));
  cursor:pointer;
  padding:0;
  transition:background .15s ease, transform .15s ease;
}
.carousel-dot.active{
  background:var(--gold-deep, #b8860b);
  transform:scale(1.25);
}
.carousel-empty{ text-align:center; }
@media (max-width: 960px){ .carousel-slide{ flex:0 0 calc((100% - 20px) / 2); } }
@media (max-width: 640px){
  .auction-carousel{ padding:0 8px; }
  .carousel-slide{ flex:0 0 88%; }
  .carousel-arrow{ display:none; }
}

/* Auction card v2 */
.bid-count-chip{
  position:absolute;
  top:16px;
  right:16px;
  z-index:1;
  background: rgba(255,255,255,.92);
  color: var(--gold-deep);
  font-family: var(--font-mono);
  font-size:.7rem;
  font-weight:600;
  padding:6px 12px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.card-fee-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:.82rem;
}
.fee-chip{ color: var(--text-secondary); }
.fee-chip b{
  font-family: var(--font-mono);
  color: var(--gold-deep);
  font-size:.95rem;
}
.code-chip{
  font-family: var(--font-mono);
  font-size:.72rem;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding:3px 10px;
  border-radius: var(--radius-full);
  border:1px solid var(--border-light);
}
.card-countdown{
  font-family: var(--font-mono);
  font-size:.85rem;
  font-weight:600;
  color: var(--red);
  letter-spacing:.02em;
  border-top:1px solid var(--border-light);
  padding-top:12px;
  margin-top:2px;
}
.card-countdown i{
  font-style:normal;
  font-size:.68rem;
  color: var(--text-muted);
  margin-right:2px;
}
.card-countdown.is-ended{ color: var(--text-muted); font-weight:500; }
.btn-cta-bid{
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  color:#ffffff;
  font-weight:700;
  box-shadow: 0 6px 20px var(--gold-glow);
}
.btn-cta-bid:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--gold-glow);
  color:#ffffff;
}

/* ==================================================================
   PREMIUM POLISH LAYER — v29
   ================================================================== */
a, button, .btn{ -webkit-tap-highlight-color: transparent; }
.btn{ touch-action: manipulation; }

.btn-gold, .btn-cta-bid{ position: relative; overflow: hidden; }
.btn-gold::after, .btn-cta-bid::after{
  content:'';
  position:absolute;
  top:0; left:-60%;
  width:40%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .65s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.btn-gold:hover::after, .btn-cta-bid:hover::after{ left: 130%; }

.card, .winner-mini, .stat-card, .panel{ position: relative; }
.card::before, .winner-mini::before, .stat-card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep), var(--gold));
  opacity:0;
  transform: scaleX(.4);
  transform-origin: center;
  transition: opacity .35s ease, transform .35s cubic-bezier(.4,0,.2,1);
  border-radius: var(--radius) var(--radius) 0 0;
}
.card:hover::before, .winner-mini:hover::before, .stat-card:hover::before{
  opacity:1;
  transform: scaleX(1);
}
.stat-card, .winner-mini{ transition: var(--transition), box-shadow .35s ease; }

.countdown .box{
  background: linear-gradient(180deg, var(--bg-secondary), rgba(255,255,255,.5));
  transition: var(--transition), border-color .3s ease;
}
.countdown .box:hover{ border-color: var(--gold); }

.bid-box{ transition: box-shadow .35s ease, border-color .35s ease; }
.bid-box:focus-within{
  border-color: var(--gold);
  box-shadow: var(--shadow-md), 0 0 0 4px var(--gold-pale);
}

.js-reveal .card,
.js-reveal .step,
.js-reveal .winner-mini,
.js-reveal .stat-card,
.js-reveal .panel,
.js-reveal .auth-card{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.js-reveal .in-view{ opacity: 1 !important; transform: none !important; }

.table-wrap{ scrollbar-width: thin; scrollbar-color: var(--border-medium) transparent; }
.table-wrap::-webkit-scrollbar{ height: 6px; }
.table-wrap::-webkit-scrollbar-track{ background: transparent; }
.table-wrap::-webkit-scrollbar-thumb{
  background: var(--border-medium);
  border-radius: var(--radius-full);
}
.table-wrap::-webkit-scrollbar-thumb:hover{ background: var(--gold); }
.table-wrap{ position: relative; }
.table-wrap::after{
  content:'';
  position:absolute;
  top:0; right:0; bottom:6px;
  width:22px;
  background: linear-gradient(90deg, transparent, var(--bg-card));
  pointer-events:none;
}

@media (max-width: 640px){
  input[type=text],
  input[type=tel],
  input[type=password],
  input[type=number],
  input[type=email],
  textarea,
  select{ font-size: 16px !important; }
}
.site-header{ padding-top: env(safe-area-inset-top, 0px); }
.site-footer{ padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 640px){
  .btn{ min-height: 40px; }
  .btn-sm{ min-height: 36px; }
}
@media (max-width: 640px){ .nav-toggle{ min-width: 44px; min-height: 40px; } }
@media (prefers-reduced-motion: reduce){
  .btn-gold::after, .btn-cta-bid::after{ display:none; }
}

/* ==================================================================
   ★ PREMIUM ENHANCEMENT LAYER — v30/v31 ★
   ================================================================== */
.site-header{ transition: box-shadow .35s ease, background-color .35s ease; }
.site-header .inner{ transition: padding .35s cubic-bezier(.4,0,.2,1); }
.site-header.header-scrolled{ box-shadow: 0 8px 32px rgba(0, 100, 50, .35); }
.site-header.header-scrolled .inner{ padding-top: 6px; padding-bottom: 6px; }   /* tighter when scrolled */
.site-header.header-scrolled .logo .mark{ width: 34px; height: 34px; font-size: .95rem; }
html.pre-scrolled .site-header .inner{ padding-top: 6px; padding-bottom: 6px; }

body::before{
  content: '';
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: var(--scroll-progress, 0%);
  background: linear-gradient(90deg, var(--gold), var(--gold-deep), var(--accent-blue));
  z-index: 9999;
  pointer-events: none;
  transition: width .15s linear;
}

.btn{ position: relative; overflow: hidden; }
.btn-ripple{
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transform: scale(0);
  animation: ripple-out .6s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.btn-outline .btn-ripple,
.btn-outline-green .btn-ripple,
.btn-white .btn-ripple{ background: rgba(0, 148, 68, .25); }
@keyframes ripple-out{ to{ transform: scale(2.6); opacity: 0; } }

.btn{
  transition: background-color .3s cubic-bezier(.4,0,.2,1),
              color .3s cubic-bezier(.4,0,.2,1),
              border-color .3s cubic-bezier(.4,0,.2,1),
              transform .35s cubic-bezier(.34,1.56,.64,1),
              box-shadow .35s ease;
}
.card{
  transition: transform .45s cubic-bezier(.16,1,.3,1),
              box-shadow .45s ease,
              border-color .35s ease;
  will-change: transform;
}
.card:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(26, 42, 72, .18), 0 0 0 1px rgba(141, 198, 63, .25);
}
.stat-card .val{ transition: transform .35s cubic-bezier(.34,1.56,.64,1), color .3s ease; }
.stat-card:hover .val{ transform: scale(1.08); }

.card-countdown.countdown-urgent,
.countdown .box.countdown-urgent b,
.countdown .box.countdown-urgent{ animation: cd-urgent 1.2s ease-in-out infinite; }
@keyframes cd-urgent{ 0%,100%{ opacity: 1; } 50%{ opacity: .55; } }

.badge-live, .badge-ending{
  box-shadow: 0 0 0 0 rgba(255, 51, 51, .5);
  animation: badge-breathe 2s ease-in-out infinite;
}
@keyframes badge-breathe{
  0%,100%{ box-shadow: 0 0 0 0 rgba(255, 51, 51, .45); }
  50%{ box-shadow: 0 0 0 6px rgba(255, 51, 51, 0); }
}

.main-nav a::after{ transition: width .35s cubic-bezier(.4,0,.2,1); }

.wallet-chip{ transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease; }
.wallet-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.2), 0 0 0 2px rgba(141, 198, 63, .35);
}

.carousel-arrow{
  transition: background .25s ease, color .25s ease,
              transform .25s cubic-bezier(.34,1.56,.64,1),
              box-shadow .25s ease;
}
.carousel-arrow:hover{
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 8px 24px rgba(0, 148, 68, .35);
}
.carousel-dot{ transition: background .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1), width .3s ease; }
.carousel-dot.active{ transform: scale(1.4); width: 22px; border-radius: 6px; }

.step .step-number{ transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .4s ease; }
.step:hover .step-number{ transform: translateY(-6px) scale(1.08); }

input, textarea, select{
  transition: border-color .25s ease,
              box-shadow .3s ease,
              background-color .25s ease,
              transform .25s ease;
}
input:focus, textarea:focus, select:focus{ transform: translateY(-1px); }

.footer-grid a{
  position: relative;
  transition: color .25s ease, padding-left .3s cubic-bezier(.4,0,.2,1);
}
.footer-grid a::before{
  content: '→';
  position: absolute;
  left: -14px;
  opacity: 0;
  transition: opacity .25s ease, left .3s cubic-bezier(.4,0,.2,1);
}
.footer-grid a:hover{ padding-left: 8px; }
.footer-grid a:hover::before{ opacity: 1; left: 0; }

.logo{ transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.logo:hover{ transform: scale(1.03); }
.logo .mark{ transition: transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
.logo:hover .mark{
  transform: rotate(-8deg) scale(1.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 0 3px rgba(255,255,255,.15);
}

.bid-box{ transition: box-shadow .4s ease, border-color .4s ease, transform .4s ease; }
.bid-box:hover{ box-shadow: var(--shadow-lg), 0 0 0 1px rgba(141, 198, 63, .2); }

.winner-banner .trophy{ display: inline-block; animation: trophy-bob 3s ease-in-out infinite; }
@keyframes trophy-bob{
  0%,100%{ transform: translateY(0) rotate(-2deg); }
  50%{ transform: translateY(-8px) rotate(2deg); }
}

.winner-mini{
  transition: transform .45s cubic-bezier(.16,1,.3,1),
              box-shadow .45s ease,
              border-color .35s ease;
}
.winner-mini:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(0, 148, 68, .18), 0 0 0 2px rgba(141, 198, 63, .4);
}

.bid-count-chip{ transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
.card:hover .bid-count-chip{ transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 18px rgba(0,0,0,.15); }

.code-chip{ transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.card:hover .code-chip{ background: var(--gold-pale); color: var(--gold-deep); border-color: var(--gold); }

.fee-chip b{ transition: color .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1); display: inline-block; }
.card:hover .fee-chip b{ color: var(--gold); transform: scale(1.12); }

.section-head h2{ position: relative; display: inline-block; }
.section-head h2::after{
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep), transparent);
  border-radius: 2px;
  transition: width .55s cubic-bezier(.4,0,.2,1);
}
.section-head:hover h2::after{ width: 100%; }

.eyebrow::before{
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
  background-size: 200% 100%;
  animation: eyebrow-shimmer 3s linear infinite;
}
@keyframes eyebrow-shimmer{
  0%{ background-position: 0% 0; }
  100%{ background-position: 200% 0; }
}

.alert{ animation: alert-slide .4s cubic-bezier(.16,1,.3,1); }
@keyframes alert-slide{
  from{ opacity: 0; transform: translateY(-8px); }
  to{ opacity: 1; transform: translateY(0); }
}

.ladder-row .bar > i{ position: relative; overflow: hidden; }
.ladder-row .bar > i::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform: translateX(-100%);
  animation: bar-shimmer 2.6s ease-in-out infinite;
}
@keyframes bar-shimmer{
  0%, 100%{ transform: translateX(-100%); }
  50%{ transform: translateX(100%); }
}

.hero h1 .accent{ display: inline-block; animation: accent-float 4s ease-in-out infinite; }
@keyframes accent-float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}

:focus-visible{
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-offset .2s ease;
}

.page-btn{
  transition: background-color .25s ease, color .25s ease,
              border-color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.page-btn:hover{ transform: translateY(-2px); }
.page-btn.active{ transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 148, 68, .3); }

.bid-group[open] .bid-group-detail{ animation: detail-expand .4s cubic-bezier(.16,1,.3,1); }
@keyframes detail-expand{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}

tbody tr{ transition: background-color .2s ease; }
tbody tr:hover{ background-color: rgba(141, 198, 63, .06); }

.amount-chips button{
  transition: background-color .25s ease, color .25s ease,
              border-color .25s ease,
              transform .3s cubic-bezier(.34,1.56,.64,1),
              box-shadow .25s ease;
}
.amount-chips button.active{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 18px rgba(0, 148, 68, .25);
}

.product-hero-media{ transition: box-shadow .4s ease, transform .4s ease; }
.product-hero-media img{ transition: transform .8s cubic-bezier(.16,1,.3,1); }
.product-hero-media:hover img{ transform: scale(1.03); }
.product-hero-media:hover{ box-shadow: 0 20px 50px rgba(26, 42, 72, .18); }

.spec{
  transition: transform .35s cubic-bezier(.16,1,.3,1),
              box-shadow .35s ease,
              border-color .3s ease;
}
.spec:hover{
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 10px 26px rgba(0, 148, 68, .12);
}

/* Desktop-only dash nav slide accent */
@media (min-width: 1025px){
  .dash-nav a{ position: relative; overflow: hidden; }
  .dash-nav a::before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--gold);
    border-radius: 2px;
    transition: height .3s cubic-bezier(.4,0,.2,1);
  }
  .dash-nav a:hover::before,
  .dash-nav a.active::before{ height: 60%; }
  .dash-nav a[href*="logout"]::before{ background: var(--red); }
}

.panel{ transition: box-shadow .4s ease, border-color .35s ease; }
.panel:hover{ box-shadow: var(--shadow-md); }

.footer-grid h4{ position: relative; }
.footer-grid h4::after{
  content: '';
  position: absolute;
  bottom: -9px;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.footer-grid > div:hover h4::after{ width: 48px; }

html{
  scrollbar-width: thin;
  scrollbar-color: var(--border-medium) transparent;
}
html::-webkit-scrollbar{ width: 10px; }
html::-webkit-scrollbar-track{ background: transparent; }
html::-webkit-scrollbar-thumb{
  background: var(--border-medium);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: content-box;
}
html::-webkit-scrollbar-thumb:hover{
  background: var(--gold);
  background-clip: content-box;
}

.js-reveal .card,
.js-reveal .step,
.js-reveal .winner-mini,
.js-reveal .stat-card,
.js-reveal .panel,
.js-reveal .auth-card,
.js-reveal .spec,
.js-reveal .bid-group{
  transition: opacity .7s cubic-bezier(.16,1,.3,1),
              transform .7s cubic-bezier(.16,1,.3,1);
}

@media (prefers-reduced-motion: reduce){
  .btn-ripple,
  .badge-live,
  .badge-ending,
  .eyebrow::before,
  .ladder-row .bar > i::after,
  .hero h1 .accent,
  .winner-banner .trophy,
  .card-countdown.countdown-urgent,
  .countdown .box.countdown-urgent b,
  .countdown .box.countdown-urgent,
  .alert{ animation: none !important; }
  .card:hover, .winner-mini:hover, .stat-card:hover,
  .spec:hover, .page-btn:hover, .btn:hover{ transform: none !important; }
  .card{
    transition: box-shadow .3s ease, border-color .3s ease !important;
    transform: none !important;
  }
}