/* /web/public/home/home.css */
/* Standalone LIGHT theme with gradients */

/* ===== Tokens ===== */
:root{
  --bg:#f6fbff;
  --text:#0b1220;
  --muted:#5b6a7d;
  --card:#ffffff;
  --border:#e6ecf3;
  --shadow:0 14px 36px rgba(10,28,60,.12);
  --pop1:#1583ff;
  --pop2:#7a5cff;
  --pop3:#ffb500;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, #f7fbff 0%, #f3f8ff 45%, #f8fbff 100%);
}

/* ===== Nav ===== */
.site-top{
  position:sticky; top:0; z-index:20;
  background:#fff;
  border-bottom:1px solid var(--border);
}
.top-inner{
  max-width:1200px;
  margin:0 auto;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:14px;
}
.top-left .logo img{height:34px; width:auto; display:block}
.top-search{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  background:#f3f7ff;
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
}
.top-search-input{
  border:none;
  outline:none;
  background:transparent;
  width:100%;
  font-size:14px;
}
.top-search-btn{
  border:none;
  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
  height:32px;
  width:38px;
  cursor:pointer;
}
.top-nav{
  display:flex;
  gap:14px;
  align-items:center;
}
.top-nav a{
  text-decoration:none;
  color:var(--text);
  font-weight:800;
  font-size:14px;
  opacity:.9;
}
.top-auth{display:flex; gap:8px; align-items:center}
.top-auth-btn{
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 10px;
  font-weight:900;
  cursor:pointer;
  background:#fff;
}
.top-auth-btn--primary{
  background:var(--pop1);
  border-color:transparent;
  color:#fff;
}
.top-auth-btn--ghost{background:#fff}

/* ===== Hero ===== */
.hero{
  position:relative;
  overflow:hidden;
  padding:44px 14px 34px;
  border-bottom:1px solid var(--border);
}
.hero-condensed{padding:18px 14px 18px}
.hero-bg{position:absolute; inset:0; pointer-events:none}
.blend{
  position:absolute;
  width:520px; height:520px;
  filter:blur(70px);
  opacity:.40;
  border-radius:999px;
}
.b1{left:-160px; top:-190px; background:#8bd4ff}
.b2{left:260px; top:-140px; background:#ffe08b}
.b3{right:-220px; top:-160px; background:#ffb6f0}
.hero-inner{max-width:1200px; margin:0 auto; position:relative}
.hero-tag{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--border);
  font-weight:900;
  font-size:12px;
  letter-spacing:.02em;
}
.hero-title{
  margin:18px 0 8px;
  font-size:62px;
  line-height:1.02;
  letter-spacing:-.02em;
  font-weight:1000;
}
.hero-title .pop{
  background:linear-gradient(90deg, var(--pop2), var(--pop1), var(--pop3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-sub{
  margin:0;
  max-width:720px;
  color:var(--muted);
  font-size:16px;
  line-height:1.55;
}
.cta-row{display:flex; gap:12px; margin-top:16px}
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  padding:12px 14px;
  font-weight:1000;
  text-decoration:none;
  border:1px solid var(--border);
}
.cta.primary{
  background:var(--pop1);
  border-color:transparent;
  color:#fff;
}
.cta.ghost{
  background:#fff;
  color:var(--text);
}

/* ===== Layout ===== */
.page{
  max-width:1200px;
  margin:0 auto;
  padding:18px 14px 40px;
  display:grid;
  grid-template-columns:1.55fr .9fr;
  gap:18px;
}
@media (max-width: 980px){
  .page{grid-template-columns:1fr}
}
.main-col{min-width:0}
.side-col{min-width:0}

/* ===== Search results ===== */
.search-results{margin-bottom:18px}
.search-results-hidden{display:none}
.search-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px}
.search-query-label{color:var(--muted); font-weight:800}
.search-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:12px;
}
@media (max-width: 980px){
  .search-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 560px){
  .search-grid{grid-template-columns:1fr}
}
.search-empty{
  display:none;
  margin-top:10px;
  color:var(--muted);
}
.search-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.search-card-thumb{
  position:relative;
  display:block;
  height:130px;
  background:#eef6ff;
}
.search-card-thumb img{width:100%; height:100%; object-fit:cover}
.search-card-logo{
  position:absolute;
  top:10px; left:10px;
  width:44px; height:44px;
  border-radius:999px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.search-card-logo img{width:100%; height:100%; object-fit:cover}
.search-card-body{padding:12px 12px 14px}
.search-card-title{margin:0; font-size:16px; font-weight:1000}
.search-card-sector{display:inline-flex; margin-left:8px; font-weight:900; font-size:12px; color:var(--muted)}
.search-card-line{margin:6px 0 0; color:var(--muted); font-size:12px}
.search-card-meta{margin:10px 0 0; color:var(--muted); font-size:13px; line-height:1.45}
.search-card-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.search-tag{
  font-size:11px;
  font-weight:900;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#f7fbff;
}
.search-card-link{
  display:inline-block;
  margin-top:12px;
  font-size:12px;
  color:var(--pop1);
  text-decoration:none;
  font-weight:1000;
}

/* ===== Rail ===== */
.rail{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:14px;
}
.card-xl{padding:18px}
.rail-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.rail-head h2{margin:0; font-size:18px; font-weight:1000}
.rail-ctrl{display:flex; gap:8px}
.rail-ctrl button{
  border:1px solid var(--border);
  background:#fff;
  border-radius:12px;
  width:38px; height:36px;
  cursor:pointer;
  font-size:18px;
}
.rail-track{
  display:flex;
  gap:14px;
  overflow:auto;
  padding-bottom:8px;
  scroll-snap-type:x mandatory;
}

/* existing rail card base */
.rail-card{
  scroll-snap-align:start;
  min-width:260px; max-width:260px;
  border:1px solid var(--border); border-radius:16px;
  overflow:hidden; background:#fff; box-shadow:var(--shadow)
}
.rail-card .thumb{height:140px; background:#eef6ff}
.rail-card .thumb img{width:100%; height:100%; object-fit:cover}
.rail-card .meta{padding:10px 12px}
.rail-card .meta-head{display:flex; align-items:center; gap:8px; margin-bottom:4px}
.rail-card .meta-head img{
  width:32px; height:32px; border-radius:999px; object-fit:cover; border:1px solid var(--border)
}
.rail-card .meta-head .name{font-weight:900; font-size:14px}
.rail-card .meta-head .tagline{
  font-size:12px; color:var(--muted); margin-top:2px;
}
.rail-card .link{
  display:inline-block; margin-top:6px;
  font-size:12px; color:var(--pop1); text-decoration:none; font-weight:700;
}

/* ===== Live Brands Rail (upgraded to match Brands Hub cards) ===== */

.rail-card--hub .thumb{
  position: relative;
  height: 170px;
}
.rail-card--hub .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.rail-card--hub .thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.55));
  pointer-events:none;
}
.rail-logo-badge{
  position:absolute;
  top:12px;
  left:12px;
  width:44px;
  height:44px;
  border-radius:999px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 10px 24px rgba(0,0,0,0.22);
  z-index:2;
}
.rail-logo-badge img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.rail-hero-name{
  position:absolute;
  left:12px;
  right:12px;
  bottom:10px;
  z-index:2;
  font-weight:900;
  font-size:16px;
  color:#fff;
  text-shadow:0 10px 22px rgba(0,0,0,0.45);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rail-featured{margin-top:2px}
.rail-featured-title{
  font-size:11px;
  letter-spacing:0.08em;
  font-weight:900;
  color:rgba(20,32,50,0.65);
  margin-bottom:8px;
}
.rail-featured--empty .rail-empty{
  font-size:12px;
  color:var(--muted);
  padding:10px 0 6px;
}
.rail-prod-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}
.rail-prod{
  display:block;
  text-decoration:none;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 22px rgba(0,0,0,0.08);
  transition:transform 140ms ease, box-shadow 140ms ease;
}
.rail-prod:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(0,0,0,0.12);
}
.rail-prod-img{
  height:78px;
  background:#f3f6fb;
}
.rail-prod-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.rail-prod-meta{
  padding:8px 8px 9px;
}
.rail-prod-name{
  font-size:12px;
  font-weight:900;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rail-prod-price{
  margin-top:4px;
  font-size:12px;
  font-weight:900;
  color:var(--pop1);
}

/* How it works */
.how{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px; margin-top:22px
}
.glass{background:#ffffffd9; border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow)}
.step{padding:16px}
.step .num{
  width:28px; height:28px; border-radius:10px;
  background:rgba(255,181,0,.35); display:flex; align-items:center; justify-content:center;
  font-weight:1000; margin-bottom:10px;
}
.step h3{margin:0; font-weight:1000}
.step p{margin:8px 0 0; color:var(--muted)}

/* ===== Board / leaderboard ===== */
.board{padding:16px}
.board-tabs{display:flex; gap:8px; margin-bottom:12px}
.tab{
  border:1px solid var(--border);
  background:#fff;
  border-radius:14px;
  padding:10px 12px;
  font-weight:1000;
  cursor:pointer;
  flex:1;
}
.tab.active{background:#fff6d6}
.board-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.hidden{display:none}
.entry{
  display:grid;
  grid-template-columns:34px 1fr auto;
  gap:10px;
  align-items:center;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 10px;
}
.entry .pos{
  width:28px; height:28px;
  border-radius:10px;
  background:#eef6ff;
  font-weight:1000;
  display:flex; align-items:center; justify-content:center;
}
.entry .who .name{font-weight:1000}
.entry .who .meta{font-size:12px; color:var(--muted)}
.entry .stat{font-weight:1000; color:var(--muted)}

/* ===== Footer ===== */
.site-foot{
  border-top:1px solid var(--border);
  background:#fff;
}
.foot-inner{
  max-width:1200px;
  margin:0 auto;
  padding:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.foot-links{display:flex; gap:14px}
.foot-links a{color:var(--muted); text-decoration:none; font-weight:900}

/* ===== Auth modal ===== */
.auth-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
}
.auth-modal-open{display:flex}
.auth-modal-dialog{
  width:min(420px, calc(100vw - 24px));
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.25);
  position:relative;
}
.auth-modal-close{
  position:absolute;
  top:10px;
  right:10px;
  border:1px solid var(--border);
  background:#fff;
  width:34px;
  height:34px;
  border-radius:12px;
  cursor:pointer;
}
.auth-modal-title{margin:0; font-weight:1000}
.auth-modal-sub{margin:8px 0 14px; color:var(--muted)}
.auth-google-btn{
  width:100%;
  border:1px solid var(--border);
  background:#fff;
  padding:12px;
  border-radius:14px;
  cursor:pointer;
  font-weight:1000;
}
.auth-divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0;
  color:var(--muted);
  font-weight:900;
}
.auth-divider:before,
.auth-divider:after{
  content:"";
  height:1px;
  background:var(--border);
  flex:1;
}
.auth-form{display:flex; flex-direction:column; gap:10px}
.auth-label{font-weight:1000; font-size:13px}
.auth-label input{
  margin-top:6px;
  width:100%;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
}
.auth-submit-btn{
  margin-top:6px;
  width:100%;
  border:none;
  background:var(--pop1);
  color:#fff;
  border-radius:14px;
  padding:12px;
  font-weight:1000;
  cursor:pointer;
}
.auth-error{color:#c0392b; font-weight:900; margin:10px 0 0}
/* ===== Live Brands Rail (REDESIGNED) ===== */

/* make the rail area use the space better */
.rail-track{
  align-items: stretch;
  padding-bottom: 10px;
}

/* premium card */
.livecard{
  min-width: 480px;
  max-width: 480px;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

@media (max-width: 980px){
  .livecard{ min-width: 86vw; max-width: 86vw; }
}

/* hero */
.livecard-hero{
  position: relative;
  height: 210px;
  display: block;
  text-decoration: none;
  color: #fff;
  background: #eef6ff;
}
.livecard-hero-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.livecard-hero-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.62) 100%);
}

/* logo badge */
.livecard-logo{
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 16px 36px rgba(0,0,0,0.26);
  z-index: 3;
  display: grid;
  place-items: center;
}
.livecard-logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.livecard-logo--placeholder{
  font-weight: 1000;
  font-size: 20px;
  color: #0b1220;
}

/* title overlay */
.livecard-title{
  position: absolute;
  left: 80px;
  right: 14px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.livecard-name{
  font-weight: 1000;
  font-size: 18px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 14px 30px rgba(0,0,0,0.45);
}
.livecard-sub{
  font-weight: 900;
  font-size: 12px;
  opacity: 0.92;
  text-shadow: 0 14px 30px rgba(0,0,0,0.45);
}

/* body */
.livecard-body{
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* featured header */
.livecard-featured-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(20,32,50,0.7);
}
.livecard-featured-count{
  letter-spacing: normal;
  font-weight: 1000;
  color: rgba(20,32,50,0.55);
}

.livecard-prod-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 560px){
  .livecard-prod-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* product mini cards */
.livecard-prod{
  display: block;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 26px rgba(0,0,0,0.10);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.livecard-prod:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0,0,0,0.14);
}
.livecard-prod img{
  width: 100%;
  height: 92px;
  object-fit: cover;
  display: block;
  background: #f3f6fb;
}
.livecard-prod-meta{
  padding: 8px 9px 10px;
}
.livecard-prod-name{
  font-weight: 1000;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.livecard-prod-price{
  margin-top: 5px;
  font-weight: 1000;
  font-size: 12px;
  color: var(--pop1);
}

.livecard-empty{
  font-size: 13px;
  color: var(--muted);
  padding: 8px 0 2px;
}

/* CTA */
.livecard-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--pop1);
  color: #fff;
  text-decoration: none;
  font-weight: 1000;
}

/* skeleton */
.livecard-skel{
  min-width: 480px;
  max-width: 480px;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 14px;
}
.skel-hero{
  height: 210px;
  border-radius: 14px;
  background: linear-gradient(90deg, #eef2f7 0%, #f6f8fb 50%, #eef2f7 100%);
  background-size: 220% 100%;
  animation: sk 1.15s infinite linear;
}
.skel-row{
  margin-top: 12px;
  height: 16px;
  border-radius: 10px;
  background: linear-gradient(90deg, #eef2f7 0%, #f6f8fb 50%, #eef2f7 100%);
  background-size: 220% 100%;
  animation: sk 1.15s infinite linear;
}
.skel-row.short{ width: 60%; }
@keyframes sk{
  0%{ background-position: 0% 0; }
  100%{ background-position: 220% 0; }
}