/* ============================================================
   PADELPOINT · Prototipo demo · Sistema de diseño
   Rooted in padel: court-teal night + ball-lime + court-cyan
   ============================================================ */

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

:root{
  /* Court-night base */
  --bg:        #071211;
  --bg-2:      #0a1917;
  --surface:   #0f2321;
  --surface-2: #143029;
  --surface-3: #1a3b33;
  --line:      rgba(216,255,67,.12);
  --line-soft: rgba(255,255,255,.07);
  --line-hard: rgba(255,255,255,.14);

  /* Padel-ball lime (primary) */
  --ball:      #d8ff43;
  --ball-2:    #b9f01f;
  --ball-dim:  rgba(216,255,67,.14);

  /* Court cyan (secondary) */
  --court:     #22cad9;
  --court-dim: rgba(34,202,217,.14);

  /* Mediterranean sun (warm, used sparingly) */
  --sun:       #ff7a3c;

  /* Text */
  --text:      #eef5ee;
  --muted:     #9bb0aa;
  --muted-2:   #6f877f;

  /* Status */
  --ok:        #46e08a;
  --warn:      #ffcf4d;
  --bad:       #ff5d6c;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;

  --shadow: 0 20px 50px -20px rgba(0,0,0,.75);
  --glow: 0 0 40px -8px rgba(216,255,67,.45);

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

  --maxw: 1240px;
  --nav-h: 76px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(34,202,217,.10), transparent 60%),
    radial-gradient(900px 500px at 0% 10%, rgba(216,255,67,.07), transparent 55%),
    var(--bg);
  line-height:1.55;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.05; letter-spacing:-.02em; margin:0; }
p{ margin:0 0 1rem; }
.mono{ font-family:var(--font-mono); }

::selection{ background:var(--ball); color:#0a1410; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px; }
.section{ padding-block:clamp(56px,8vw,110px); position:relative; }
.section-tight{ padding-block:clamp(36px,5vw,64px); }
.grid{ display:grid; gap:22px; }
.center{ text-align:center; }

/* court-line motif divider */
.court-rule{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg,transparent, var(--line-hard) 20%, var(--ball) 50%, var(--line-hard) 80%, transparent);
  opacity:.5;
}

/* ---------- Eyebrow / headings ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ball);
  padding:6px 12px; border:1px solid var(--line); border-radius:999px;
  background:var(--ball-dim);
}
.eyebrow.cyan{ color:var(--court); background:var(--court-dim); border-color:rgba(34,202,217,.18); }
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; }

.h-xl{ font-size:clamp(2.6rem,7vw,5.4rem); }
.h-lg{ font-size:clamp(2rem,4.5vw,3.4rem); }
.h-md{ font-size:clamp(1.5rem,3vw,2.2rem); }
.lead{ font-size:clamp(1.02rem,1.6vw,1.22rem); color:var(--muted); max-width:60ch; }
.section-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:34px; }
.section-head .titles{ max-width:640px; }
.section-head h2{ margin-top:14px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px; border-radius:999px; border:1px solid transparent;
  font-weight:600; font-size:.96rem; letter-spacing:.01em;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{ background:var(--ball); color:#0a1410; box-shadow:var(--glow); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 0 55px -6px rgba(216,255,67,.6); }
.btn-cyan{ background:var(--court); color:#04201f; }
.btn-cyan:hover{ transform:translateY(-2px); box-shadow:0 0 40px -8px rgba(34,202,217,.6); }
.btn-ghost{ background:rgba(255,255,255,.05); color:var(--text); border-color:var(--line-hard); backdrop-filter:blur(6px); }
.btn-ghost:hover{ background:rgba(255,255,255,.1); transform:translateY(-2px); }
.btn-outline{ background:transparent; border-color:var(--ball); color:var(--ball); }
.btn-outline:hover{ background:var(--ball-dim); transform:translateY(-2px); }
.btn-sm{ padding:9px 15px; font-size:.85rem; }
.btn-lg{ padding:17px 30px; font-size:1.05rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

/* ---------- Chips / badges ---------- */
.chip{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px;
  font-size:.8rem; font-weight:600; background:var(--surface-2); border:1px solid var(--line-soft); color:var(--muted); }
.chip.on{ background:var(--ball); color:#0a1410; border-color:transparent; }
.chip.cyan{ background:var(--court-dim); color:var(--court); border-color:rgba(34,202,217,.25); }
.badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.7rem;
  padding:4px 9px; border-radius:6px; letter-spacing:.06em; text-transform:uppercase; }
.badge.lime{ background:var(--ball-dim); color:var(--ball); }
.badge.cyan{ background:var(--court-dim); color:var(--court); }
.badge.ok{ background:rgba(70,224,138,.14); color:var(--ok); }
.badge.warn{ background:rgba(255,207,77,.14); color:var(--warn); }
.badge.bad{ background:rgba(255,93,108,.14); color:var(--bad); }
.badge.sun{ background:rgba(255,122,60,.14); color:var(--sun); }

/* ---------- Cards ---------- */
.card{
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:26px; position:relative; overflow:hidden;
}
.card-hover{ transition:transform .2s ease, border-color .2s, box-shadow .2s; }
.card-hover:hover{ transform:translateY(-5px); border-color:var(--line); box-shadow:var(--shadow); }
.card-media{ padding:0; }
.card-media .ph{ aspect-ratio:16/10; }
.card-media .card-body{ padding:22px; }

/* photo wrapper with brand duotone + gradient */
.ph{ position:relative; overflow:hidden; background:var(--surface-2); }
.ph img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.6,.2,1); }
.ph::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,18,17,.05) 0%, rgba(7,18,17,.55) 100%),
             radial-gradient(120% 90% at 90% 0%, rgba(34,202,217,.18), transparent 55%);
  mix-blend-mode:normal; pointer-events:none; }
.ph.tint-lime::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg, rgba(216,255,67,.22), transparent 60%); mix-blend-mode:overlay; pointer-events:none; }
.card-hover:hover .ph img{ transform:scale(1.06); }

/* ---------- Stat ---------- */
.stat{ }
.stat .num{ font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3.2rem); font-weight:700; line-height:1;
  background:linear-gradient(120deg,var(--ball),var(--court)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .lbl{ color:var(--muted); font-size:.9rem; margin-top:6px; }

/* ---------- Header / Nav ---------- */
.site-header{ position:sticky; top:0; z-index:80; }
.nav-shell{
  backdrop-filter:blur(16px);
  background:linear-gradient(180deg, rgba(7,18,17,.9), rgba(7,18,17,.62));
  border-bottom:1px solid var(--line-soft);
}
.nav{ height:var(--nav-h); display:flex; align-items:center; gap:14px; }
.brand{ display:flex; align-items:center; gap:11px; margin-right:6px; flex:0 0 auto; }
.brand svg{ display:block; }
.brand b{ font-family:var(--font-display); font-size:1.15rem; letter-spacing:-.02em; white-space:nowrap; }
.brand b span{ color:var(--ball); }
.nav-links{ display:flex; align-items:center; gap:1px; margin-left:auto; }
.nav-links > a, .nav-item > button{
  padding:9px 11px; border-radius:10px; color:var(--muted); font-size:.885rem; font-weight:500; white-space:nowrap;
  background:transparent; border:0; transition:color .15s, background .15s; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
}
.nav-links > a:hover, .nav-item:hover > button, .nav-links > a.active{ color:var(--text); background:rgba(255,255,255,.05); }
.nav-item{ position:relative; }
.nav-item .caret{ width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-3px; opacity:.6; }
.dropdown{
  position:absolute; top:calc(100% + 8px); left:0; min-width:230px;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:8px; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(8px);
  transition:.18s ease; z-index:90;
}
.nav-item:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:flex; gap:10px; padding:10px 12px; border-radius:10px; color:var(--muted); font-size:.9rem; }
.dropdown a:hover{ background:rgba(255,255,255,.06); color:var(--text); }
.dropdown a b{ color:var(--text); font-weight:600; display:block; }
.dropdown a small{ color:var(--muted-2); font-size:.78rem; }

.nav-actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.lang{ display:flex; gap:2px; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:999px; padding:3px; }
.lang button{ border:0; background:transparent; color:var(--muted); font-size:.72rem; font-weight:700; padding:4px 9px; border-radius:999px; }
.lang button.on{ background:var(--ball); color:#0a1410; }
.icon-btn{ position:relative; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line-soft); color:var(--text); }
.icon-btn:hover{ border-color:var(--line-hard); }
.cart-count{ position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; border-radius:999px;
  background:var(--ball); color:#0a1410; font-size:.66rem; font-weight:700; display:grid; place-items:center; }
.msg-dot{ position:absolute; top:-3px; right:-3px; width:10px; height:10px; border-radius:50%;
  background:var(--sun); border:2px solid var(--bg); }
.nav-user{ display:flex; align-items:center; gap:9px; padding:5px 12px 5px 5px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line-soft); }
.nav-user img{ width:32px; height:32px; border-radius:50%; }
.nav-user b{ font-size:.85rem; }

.burger{ display:none; width:44px; height:44px; border-radius:12px; background:var(--surface-2);
  border:1px solid var(--line-soft); flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.burger span{ width:20px; height:2px; background:var(--text); border-radius:2px; transition:.2s; }

/* mobile drawer */
.mnav{ position:fixed; inset:0; z-index:120; background:rgba(4,12,11,.75); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:.2s; }
.mnav.open{ opacity:1; visibility:visible; }
.mnav-panel{ position:absolute; right:0; top:0; height:100%; width:min(360px,86vw);
  background:var(--bg-2); border-left:1px solid var(--line-soft); padding:22px; overflow-y:auto;
  transform:translateX(100%); transition:.25s cubic-bezier(.2,.7,.2,1); }
.mnav.open .mnav-panel{ transform:translateX(0); }
.mnav-panel a{ display:block; padding:13px 6px; border-bottom:1px solid var(--line-soft); color:var(--muted); font-weight:500; }
.mnav-panel a:hover{ color:var(--text); }
.mnav-panel .grp{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ball); margin-top:18px; }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:clamp(560px,84vh,820px); display:flex; align-items:center; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,18,17,.55) 0%, rgba(7,18,17,.35) 40%, rgba(7,18,17,.92) 100%),
    linear-gradient(90deg, rgba(7,18,17,.9) 0%, rgba(7,18,17,.2) 55%, transparent 100%); }
.hero-lines{ position:absolute; inset:0; z-index:-1; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(216,255,67,.07) 1px, transparent 1px);
  background-size:100% 70px; mask-image:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent); }
.hero-inner{ padding-block:60px; max-width:760px; }
.hero h1{ margin:18px 0 20px; }
.hero .lead{ font-size:clamp(1.05rem,1.8vw,1.3rem); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.hero-app{ display:flex; align-items:center; gap:14px; margin-top:30px; color:var(--muted); font-size:.9rem; }
.store-badge{ display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid var(--line-hard); }
.store-badge b{ font-size:.9rem; }
.store-badge small{ display:block; font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }
.ball-orb{ position:absolute; width:22px; height:22px; border-radius:50%; background:var(--ball);
  box-shadow:0 0 30px 6px rgba(216,255,67,.6); z-index:-1; animation:floatball 7s ease-in-out infinite; }
@keyframes floatball{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(30px,-40px);} }

/* ---------- Quick actions strip ---------- */
.quick{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.quick a{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:160px; display:flex; align-items:flex-end;
  border:1px solid var(--line-soft); transition:transform .2s, border-color .2s; }
.quick a:hover{ transform:translateY(-5px); border-color:var(--ball); }
.quick a .ph{ position:absolute; inset:0; }
.quick a .q-body{ position:relative; padding:18px; z-index:2; }
.quick a .q-body b{ font-family:var(--font-display); font-size:1.05rem; display:block; }
.quick a .q-body span{ font-size:.8rem; color:var(--muted); }
.quick a .q-ico{ position:absolute; top:14px; right:14px; z-index:2; width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center; background:var(--ball); color:#0a1410; }

/* ---------- Feature list ---------- */
.feature-list{ display:grid; gap:14px; }
.feature-list li{ display:flex; gap:14px; align-items:flex-start; list-style:none; }
.feature-list .fi{ width:40px; height:40px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--ball-dim); color:var(--ball); }
ul.clean{ list-style:none; padding:0; margin:0; }

/* ---------- Court booking grid ---------- */
.book-toolbar{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  padding:18px; border:1px solid var(--line-soft); border-radius:var(--r-lg); background:var(--surface); margin-bottom:22px; }
.daypick{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
.daypick button{ flex:0 0 auto; min-width:74px; padding:9px 12px; border-radius:12px; text-align:center;
  background:var(--surface-2); border:1px solid var(--line-soft); color:var(--muted); }
.daypick button.on{ background:var(--ball); color:#0a1410; border-color:transparent; }
.daypick button b{ display:block; font-family:var(--font-display); font-size:1.05rem; color:inherit; }
.daypick button small{ font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; }
.seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:999px; padding:4px; gap:2px; }
.seg button{ border:0; background:transparent; color:var(--muted); padding:8px 14px; border-radius:999px; font-size:.85rem; font-weight:600; }
.seg button.on{ background:var(--court); color:#04201f; }

.grid-scroll{ overflow-x:auto; border:1px solid var(--line-soft); border-radius:var(--r-lg); background:var(--surface); }
.court-grid{ display:grid; min-width:900px; }
.cg-row{ display:grid; grid-template-columns:150px repeat(var(--cols,10),1fr); border-bottom:1px solid var(--line-soft); }
.cg-row:last-child{ border-bottom:0; }
.cg-head{ position:sticky; top:0; background:var(--bg-2); z-index:3; }
.cg-time{ padding:12px 8px; text-align:center; font-family:var(--font-mono); font-size:.74rem; color:var(--muted); border-left:1px solid var(--line-soft); }
.cg-court{ position:sticky; left:0; background:var(--surface); z-index:2; padding:12px 14px; display:flex; flex-direction:column; gap:3px; border-right:1px solid var(--line-soft); }
.cg-court b{ font-family:var(--font-display); }
.cg-court small{ color:var(--muted-2); font-size:.72rem; }
.slot{ border-left:1px solid var(--line-soft); padding:8px 4px; min-height:58px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; cursor:pointer; transition:background .15s; position:relative; }
.slot .p{ font-family:var(--font-mono); font-size:.74rem; }
.slot.free{ color:var(--ball); }
.slot.free:hover{ background:var(--ball-dim); }
.slot.free::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ball); box-shadow:0 0 8px var(--ball); }
.slot.busy{ color:var(--muted-2); cursor:not-allowed; background:repeating-linear-gradient(45deg,transparent,transparent 6px,rgba(255,255,255,.02) 6px,rgba(255,255,255,.02) 12px); }
.slot.busy .p{ text-decoration:line-through; opacity:.6; }
.slot.match{ color:var(--court); background:var(--court-dim); }
.slot.sel{ background:var(--ball); color:#0a1410; }
.slot.sel::before{ background:#0a1410; box-shadow:none; }

.legend{ display:flex; flex-wrap:wrap; gap:16px; margin-top:16px; color:var(--muted); font-size:.82rem; }
.legend span{ display:inline-flex; align-items:center; gap:7px; }
.legend i{ width:12px; height:12px; border-radius:4px; display:inline-block; }

/* ---------- Play! match cards ---------- */
.match-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; }
.match-card{ background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); overflow:hidden; transition:transform .2s, border-color .2s; }
.match-card:hover{ transform:translateY(-4px); border-color:var(--court); }
.match-top{ position:relative; padding:16px 18px; display:flex; justify-content:space-between; align-items:flex-start; }
.match-top .ph{ position:absolute; inset:0; z-index:0; }
.match-top > *{ position:relative; z-index:2; }
.match-when b{ font-family:var(--font-display); font-size:1.35rem; display:block; }
.match-when small{ color:var(--muted); font-family:var(--font-mono); font-size:.78rem; }
.match-body{ padding:18px; }
.slots{ display:flex; gap:10px; margin:14px 0; }
.pslot{ flex:1 1 0; min-width:0; aspect-ratio:1; border-radius:14px; border:1px dashed var(--line-hard); display:grid; place-items:center;
  position:relative; background:var(--surface-2); overflow:hidden; }
.pslot img{ width:100%; height:100%; object-fit:cover; border-radius:13px; display:block; }
.pslot.empty{ cursor:pointer; color:var(--muted); }
.pslot.empty:hover{ border-color:var(--ball); color:var(--ball); background:var(--ball-dim); }
.pslot .lvl{ position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); font-family:var(--font-mono);
  font-size:.62rem; background:var(--bg); border:1px solid var(--line-soft); padding:1px 6px; border-radius:999px; }
.levelbar{ height:8px; border-radius:999px; background:var(--surface-3); overflow:hidden; }
.levelbar i{ display:block; height:100%; background:linear-gradient(90deg,var(--court),var(--ball)); }
.match-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }

/* ---------- Shop ---------- */
.shop-layout{ display:grid; grid-template-columns:250px 1fr; gap:26px; align-items:start; }
.shop-filters{ position:sticky; top:calc(var(--nav-h) + 16px); }
.filter-group{ border-bottom:1px solid var(--line-soft); padding:16px 0; }
.filter-group h4{ font-size:.95rem; margin-bottom:12px; }
.check{ display:flex; align-items:center; gap:10px; padding:6px 0; color:var(--muted); font-size:.9rem; cursor:pointer; }
.check input{ accent-color:var(--ball); width:16px; height:16px; }
.product-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:20px; }
.product{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden;
  transition:transform .2s, border-color .2s; }
.product:hover{ transform:translateY(-4px); border-color:var(--line); }
.product .ph{ aspect-ratio:1; background:radial-gradient(circle at 50% 40%, var(--surface-3), var(--surface)); }
.product .pr-body{ padding:15px; }
.product .pr-brand{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--court); }
.product h3{ font-size:1rem; margin:5px 0 8px; }
.product .price{ font-family:var(--font-display); font-size:1.25rem; font-weight:700; }
.product .price s{ color:var(--muted-2); font-size:.9rem; font-weight:400; margin-left:8px; }

/* ---------- Forms ---------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.82rem; color:var(--muted); margin-bottom:7px; font-weight:600; }
.input, select.input, textarea.input{
  width:100%; padding:13px 15px; border-radius:12px; background:var(--surface-2);
  border:1px solid var(--line-soft); color:var(--text); font-family:inherit; font-size:.95rem; transition:border-color .15s, box-shadow .15s;
}
.input:focus{ outline:0; border-color:var(--ball); box-shadow:0 0 0 3px var(--ball-dim); }
.input::placeholder{ color:var(--muted-2); }
.auth-wrap{ display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - var(--nav-h)); }
.auth-media{ position:relative; }
.auth-media .ph{ position:absolute; inset:0; }
.auth-media .ph::after{ background:linear-gradient(120deg, rgba(7,18,17,.75), rgba(7,18,17,.25)); }
.auth-quote{ position:absolute; bottom:40px; left:40px; right:40px; z-index:2; }
.auth-form{ display:flex; align-items:center; justify-content:center; padding:40px; }
.auth-form .inner{ width:100%; max-width:420px; }

/* ---------- Panels / lists ---------- */
.panel{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); overflow:hidden; }
.panel-head{ padding:18px 20px; border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; align-items:center; gap:14px; }
.panel-body{ padding:20px; }
.list-row{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line-soft); }
.list-row:last-child{ border-bottom:0; }
.avatar{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:0 0 auto; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line-soft); background:var(--bg-2); margin-top:40px; }
.foot-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px; padding-block:56px; }
.foot-top h5{ font-family:var(--font-display); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 16px; }
.foot-top a{ display:block; color:var(--muted); font-size:.9rem; padding:5px 0; }
.foot-top a:hover{ color:var(--ball); }
.foot-social{ display:flex; gap:10px; margin-top:18px; }
.foot-social a{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line-soft); color:var(--text); }
.foot-social a:hover{ border-color:var(--ball); color:var(--ball); }
.foot-bottom{ border-top:1px solid var(--line-soft); padding-block:22px; display:flex; flex-wrap:wrap; gap:14px;
  justify-content:space-between; align-items:center; color:var(--muted-2); font-size:.82rem; }
.demo-ribbon{ display:inline-flex; align-items:center; gap:8px; padding:5px 12px; border-radius:999px;
  background:var(--sun); color:#2b0f04; font-weight:700; font-size:.74rem; letter-spacing:.04em; }
.foot-bottom .mkz{ color:var(--ball); font-weight:700; letter-spacing:.01em; }
.foot-bottom .mkz:hover{ text-decoration:underline; }

/* ---------- Toast ---------- */
.toast-wrap{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:10px; align-items:center; }
.toast{ background:var(--surface); border:1px solid var(--ball); color:var(--text); padding:13px 20px; border-radius:14px;
  box-shadow:var(--shadow); display:flex; align-items:center; gap:11px; font-size:.9rem; animation:toastin .3s ease; max-width:92vw; }
.toast .tdot{ width:8px; height:8px; border-radius:50%; background:var(--ball); box-shadow:0 0 10px var(--ball); }
@keyframes toastin{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }

/* ---------- Modal ---------- */
.modal{ position:fixed; inset:0; z-index:150; background:rgba(4,12,11,.7); backdrop-filter:blur(6px);
  display:grid; place-items:center; padding:20px; opacity:0; visibility:hidden; transition:.2s; }
.modal.open{ opacity:1; visibility:visible; }
.modal-card{ width:min(560px,100%); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px; transform:translateY(14px) scale(.98); transition:.22s; max-height:90vh; overflow:auto; }
.modal.open .modal-card{ transform:none; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Utilities ---------- */
.tac{ text-align:center; } .tar{ text-align:right; }
.muted{ color:var(--muted); } .lime{ color:var(--ball); } .cyan{ color:var(--court); }
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.flex{ display:flex; } .between{ justify-content:space-between; } .items-center{ align-items:center; }
.gap-8{ gap:8px; } .gap-14{ gap:14px; } .gap-20{ gap:20px; } .wrap-f{ flex-wrap:wrap; }
.cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.cols-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.cols-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.span-2{ grid-column:span 2; }
.pill-row{ display:flex; flex-wrap:wrap; gap:10px; }
.hr{ height:1px; background:var(--line-soft); border:0; margin:20px 0; }
.tag-price{ font-family:var(--font-display); font-weight:700; }

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  .foot-top{ grid-template-columns:1fr 1fr; }
  .quick{ grid-template-columns:repeat(2,1fr); }
  .shop-layout{ grid-template-columns:1fr; }
  .shop-filters{ position:static; }
  .auth-wrap{ grid-template-columns:1fr; }
  .auth-media{ min-height:200px; }
  .cols-4{ grid-template-columns:1fr 1fr; }
  .cols-3{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; }
  .span-2{ grid-column:auto; }
  .quick{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr; }
  .section-head{ flex-direction:column; align-items:flex-start; }
  .nav-actions .lang{ display:none; }
  .hero-cta .btn{ flex:1; }
}