/* ================================================================
   XFARMER — Indian Market Price Advisor
   Theme: Deep forest green + parchment cream + saffron accent
   ================================================================ */

:root {
  --xf-green-950: #0b1f16;
  --xf-green-900: #0f2a1d;
  --xf-green-800: #143726;
  --xf-green-700: #1b4a33;
  --xf-green-600: #256b47;
  --xf-green-500: #3a8f63;
  --xf-green-400: #66b088;
  --xf-cream: #f6f1e4;
  --xf-cream-2: #efe7d1;
  --xf-ink: #0e1a13;
  --xf-ink-2: #2b3a30;
  --xf-muted: #5c6b60;
  --xf-line: #e2d9bf;
  --xf-saffron: #e8892a;
  --xf-saffron-2: #f2a94a;
  --xf-red: #c0392b;
  --xf-blue: #3d6d9a;
  --xf-radius: 18px;
  --xf-shadow: 0 20px 60px rgba(11, 31, 22, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Manrope', system-ui, sans-serif;
  background: var(--xf-cream);
  color: var(--xf-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--xf-green-700); color: #fff; }

.container { max-width: 1200px; }

/* --------- NAV --------- */
.xf-nav {
  background: rgba(11, 31, 22, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: .7rem 0;
}
.xf-brand { display: flex; align-items: center; gap: .6rem; color: var(--xf-cream) !important; text-decoration: none; }
.xf-brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(140deg, var(--xf-green-500), var(--xf-green-700));
  color: #fff; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.xf-brand-text {
  font-family: 'Fraunces', serif; font-weight: 900; letter-spacing: .5px; font-size: 1.15rem;
}
.xf-brand-text sup { color: var(--xf-saffron-2); font-family: 'Manrope',sans-serif; font-weight: 700; font-size: .55em; margin-left: 2px; }
.xf-nav .nav-link { color: rgba(246,241,228,.75) !important; font-weight: 500; padding: .5rem .9rem; border-radius: 10px; transition: color .2s ease, background .2s ease; }
.xf-nav .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.06); }
.xf-nav .nav-link.active { color: #fff !important; background: rgba(58,143,99,.25); }
.navbar-toggler { border-color: rgba(255,255,255,.2); }
.navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(2); }

/* --------- HERO --------- */
.xf-hero {
  position: relative;
  padding: 110px 0 90px;
  background:
    radial-gradient(1200px 500px at 100% -20%, rgba(58,143,99,.28), transparent 60%),
    radial-gradient(900px 400px at -20% 40%, rgba(232,137,42,.15), transparent 60%),
    linear-gradient(160deg, var(--xf-green-950) 0%, var(--xf-green-800) 100%);
  color: var(--xf-cream);
  overflow: hidden;
}
.xf-hero-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.15 0 0 0 0 0.1 0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}
.xf-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .85rem; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  color: var(--xf-cream); font-size: .82rem; font-weight: 600; letter-spacing: .2px;
  margin-bottom: 1.4rem;
}
.xf-eyebrow i { color: var(--xf-saffron-2); }
.xf-hero-title {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -1px;
  margin-bottom: 1.1rem;
}
.xf-underline {
  background: linear-gradient(180deg, transparent 60%, rgba(232,137,42,.55) 60%);
  padding: 0 .1em;
}
.xf-hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(246,241,228,.82);
  max-width: 560px; margin-bottom: 2rem; line-height: 1.55;
}

/* Buttons */
.xf-btn-primary {
  background: var(--xf-saffron);
  border: 1px solid var(--xf-saffron);
  color: #1a0d00;
  font-weight: 700;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
  box-shadow: 0 10px 30px rgba(232,137,42,.35);
}
.xf-btn-primary:hover { background: var(--xf-saffron-2); transform: translateY(-2px); color: #1a0d00; }
.xf-btn-primary:active { transform: translateY(0); }
.xf-btn-ghost {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--xf-cream);
  font-weight: 600;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  transition: background .2s ease, transform .18s ease;
}
.xf-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; transform: translateY(-2px); }

/* Stats */
.xf-hero-stats { max-width: 480px; }
.xf-stat { padding: 1rem 0; border-top: 1px dashed rgba(255,255,255,.15); }
.xf-stat-num { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.6rem; color: #fff; }
.xf-stat-label { font-size: .82rem; color: rgba(246,241,228,.6); letter-spacing: .3px; text-transform: uppercase; }

/* Hero Card */
.xf-hero-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(20px);
  padding: 1.5rem;
  border-radius: 22px;
  color: var(--xf-cream);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.xf-chip {
  display: inline-flex; gap: .4rem; align-items: center;
  background: rgba(58,143,99,.22);
  border: 1px solid rgba(102,176,136,.35);
  color: #d7f0e2; padding: .3rem .7rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600;
}
.xf-chip-alt { background: rgba(232,137,42,.18); border-color: rgba(242,169,74,.4); color: #ffd9b0; }
.xf-hero-card-title { font-family: 'Fraunces', serif; margin: .4rem 0 .2rem; font-weight: 700; }
.xf-hero-price { font-family: 'Fraunces', serif; font-weight: 900; font-size: 2.6rem; line-height: 1; }
.xf-hero-delta { font-weight: 700; padding-bottom: .35rem; }
.xf-up { color: #7be0a0; }
.xf-down { color: #ff8c7a; }
.xf-mini-chart { margin: 1rem 0 .8rem; }
.xf-hero-note { font-size: .88rem; color: rgba(246,241,228,.75); display: flex; align-items: center; gap: .5rem; padding-top: .8rem; border-top: 1px dashed rgba(255,255,255,.15); }

/* --------- SECTIONS --------- */
.xf-section { padding: 80px 0; position: relative; }
.xf-section-features { background: linear-gradient(180deg, transparent, rgba(11,31,22,.05)); }

.xf-h2 { font-family: 'Fraunces', serif; font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--xf-green-950); letter-spacing: -.5px; }

/* --------- SEARCH --------- */
.xf-search-card {
  background: #fff;
  border: 1px solid var(--xf-line);
  border-radius: var(--xf-radius);
  padding: 1.6rem;
  box-shadow: var(--xf-shadow);
  margin-top: -50px;
  position: relative;
  z-index: 5;
}
.xf-label { display: block; font-size: .78rem; letter-spacing: .4px; text-transform: uppercase; color: var(--xf-muted); font-weight: 700; margin-bottom: .4rem; }
.xf-input {
  border: 1.5px solid var(--xf-line);
  border-radius: 12px;
  padding: .75rem .9rem;
  background: var(--xf-cream);
  color: var(--xf-ink);
  font-weight: 500;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.xf-input:focus {
  outline: none;
  border-color: var(--xf-green-600);
  box-shadow: 0 0 0 4px rgba(37,107,71,.12);
  background: #fff;
}
select.xf-input { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%235c6b60' d='M6 8L0 0h12z'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 2.2rem; }

/* --------- MIC / VOICE SEARCH --------- */
.xf-input-wrap { position: relative; }
.xf-input-has-mic { padding-right: 3rem; }
.xf-mic {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border: 1px solid var(--xf-line);
  background: linear-gradient(140deg, #ffffff, #f5efdd);
  color: var(--xf-green-700);
  border-radius: 12px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.xf-mic:hover { background: var(--xf-green-600); color: #fff; border-color: var(--xf-green-600); transform: translateY(-50%) scale(1.05); }
.xf-mic:active { transform: translateY(-50%) scale(.96); }
.xf-mic.listening {
  background: var(--xf-red);
  border-color: var(--xf-red);
  color: #fff;
  box-shadow: 0 0 0 0 rgba(192,57,43,.55);
  animation: xf-mic-pulse 1.2s infinite;
}
@keyframes xf-mic-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(192,57,43,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(192,57,43,0); }
  100% { box-shadow: 0 0 0 0 rgba(192,57,43,0); }
}
.xf-mic-hint {
  margin-top: .4rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--xf-green-800);
  padding: .35rem .6rem;
  background: rgba(58,143,99,.10);
  border-left: 3px solid var(--xf-green-600);
  border-radius: 6px;
  animation: xf-rise .3s ease both;
}
.xf-mic-hint.warn { color: #7a4310; background: rgba(232,137,42,.12); border-left-color: var(--xf-saffron); }
.xf-mic-hint.err  { color: #7a1a10; background: rgba(192,57,43,.10); border-left-color: var(--xf-red); }

/* --------- NAV AUTH --------- */
.xf-nav-cta {
  background: var(--xf-saffron);
  color: #1a0d00 !important;
  font-weight: 700;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--xf-saffron);
  transition: background .18s ease, transform .18s ease;
}
.xf-nav-cta:hover { background: var(--xf-saffron-2); transform: translateY(-1px); color: #1a0d00 !important; }
.xf-user-chip {
  display: inline-flex !important; align-items: center; gap: .55rem;
  color: var(--xf-cream) !important; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  padding: .35rem .8rem .35rem .35rem !important; font-weight: 600;
}
.xf-user-chip:hover { background: rgba(255,255,255,.12); color: #fff !important; }
.xf-user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(140deg, var(--xf-saffron), var(--xf-saffron-2));
  color: #1a0d00; font-weight: 800; font-size: .85rem;
  display: grid; place-items: center;
}
.xf-user-dropdown {
  border: 1px solid var(--xf-line);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(11,31,22,.18);
  padding: .4rem;
  min-width: 220px;
}
.xf-user-dropdown .dropdown-item { border-radius: 10px; padding: .6rem .8rem; font-weight: 500; color: var(--xf-ink); }
.xf-user-dropdown .dropdown-item:hover { background: var(--xf-cream); color: var(--xf-green-800); }
.xf-user-dropdown .dropdown-item i { color: var(--xf-green-700); }

/* --------- AUTH MODAL --------- */
.xf-auth-modal {
  border-radius: 22px;
  border: 1px solid var(--xf-line);
  background: linear-gradient(180deg, #fff, #fbf6e8);
  box-shadow: 0 40px 80px rgba(11,31,22,.35);
}
.xf-auth-title { font-family: 'Fraunces', serif; font-weight: 800; color: var(--xf-green-950); margin: 0; }
.xf-auth-title sup { color: var(--xf-saffron); font-family: 'Manrope', sans-serif; font-size: .55em; }
.xf-auth-tabs {
  background: var(--xf-cream);
  padding: .3rem;
  border-radius: 12px;
  gap: .3rem;
}
.xf-auth-tabs .nav-link {
  border-radius: 10px;
  color: var(--xf-muted);
  font-weight: 700;
  padding: .5rem .9rem;
  border: none;
  background: transparent;
}
.xf-auth-tabs .nav-link.active {
  background: #fff;
  color: var(--xf-green-800);
  box-shadow: 0 4px 12px rgba(11,31,22,.08);
}
.xf-auth-form label.xf-label { margin-top: .3rem; }
.xf-auth-note { font-size: .82rem; }
.xf-auth-error {
  padding: .7rem .9rem;
  border-radius: 10px;
  background: rgba(192,57,43,.10);
  color: #7a1a10;
  border-left: 3px solid var(--xf-red);
  font-size: .88rem;
  font-weight: 500;
}
.xf-auth-error.success {
  background: rgba(37,107,71,.10);
  color: var(--xf-green-800);
  border-left-color: var(--xf-green-600);
}

/* --------- SAVE TO WATCHLIST BTN --------- */
.xf-btn-save {
  background: #fff;
  border: 1.5px solid var(--xf-saffron);
  color: var(--xf-saffron);
  font-weight: 700;
  border-radius: 999px;
  padding: .4rem .9rem;
  transition: background .18s ease, color .18s ease, transform .15s ease;
}
.xf-btn-save:hover { background: var(--xf-saffron); color: #1a0d00; transform: translateY(-1px); }
.xf-btn-save.saved { background: var(--xf-saffron); color: #1a0d00; }
.xf-btn-save.saved .bi::before { content: "\f588"; /* bi-star-fill */ }

/* --------- WATCHLIST / HISTORY --------- */
.xf-watchlist { display: flex; flex-wrap: wrap; gap: .5rem; min-height: 60px; }
.xf-watch-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--xf-cream);
  border: 1px solid var(--xf-line);
  padding: .5rem .5rem .5rem .9rem;
  border-radius: 999px;
  font-weight: 600;
  color: var(--xf-green-900);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.xf-watch-chip:hover { border-color: var(--xf-green-500); background: #fff; transform: translateY(-1px); }
.xf-watch-chip small { color: var(--xf-muted); font-weight: 500; }
.xf-watch-chip button {
  border: none; background: rgba(192,57,43,.08); color: var(--xf-red);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  transition: background .15s ease;
}
.xf-watch-chip button:hover { background: rgba(192,57,43,.2); }
.xf-history { display: flex; flex-direction: column; gap: .35rem; }
.xf-hist-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--xf-cream); border: 1px solid var(--xf-line); border-radius: 10px;
  padding: .55rem .9rem; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.xf-hist-row:hover { background: #fff; border-color: var(--xf-green-400); }
.xf-hist-row .xf-hist-meta { font-size: .78rem; color: var(--xf-muted); }


.xf-status {
  padding: .75rem 1rem;
  border-radius: 10px;
  background: rgba(58,143,99,.10);
  color: var(--xf-green-800);
  font-size: .9rem; font-weight: 500;
  border-left: 3px solid var(--xf-green-600);
}
.xf-status.xf-status-warn { background: rgba(232,137,42,.10); color: #7a4310; border-left-color: var(--xf-saffron); }
.xf-status.xf-status-err  { background: rgba(192,57,43,.10); color: #7a1a10; border-left-color: var(--xf-red); }

/* --------- LOADING --------- */
.xf-loading { display: flex; align-items: center; gap: 1rem; padding: 2rem; justify-content: center; }
.xf-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 4px solid rgba(37,107,71,.15);
  border-top-color: var(--xf-green-600);
  animation: xf-spin .9s linear infinite;
}
@keyframes xf-spin { to { transform: rotate(360deg); } }
.xf-loading-text { font-weight: 600; color: var(--xf-green-800); }

/* Error */
.xf-alert {
  background: #fff;
  border: 1px solid rgba(192,57,43,.25);
  border-left: 4px solid var(--xf-red);
  color: #7a1a10;
  border-radius: 12px;
  padding: 1rem 1.2rem;
  font-weight: 500;
}

/* --------- PANELS --------- */
.xf-panel {
  background: #fff;
  border: 1px solid var(--xf-line);
  border-radius: var(--xf-radius);
  padding: 1.6rem;
  box-shadow: var(--xf-shadow);
  height: 100%;
  animation: xf-rise .5s ease both;
}
@keyframes xf-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.xf-panel-eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--xf-saffron); }
.xf-panel-title { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.6rem; color: var(--xf-green-950); margin: .2rem 0 .2rem; }
.xf-panel-sub { color: var(--xf-muted); font-weight: 500; font-size: .95rem; }
.xf-panel-date { color: var(--xf-muted); font-size: .82rem; }

.xf-divider { border-top: 1px dashed var(--xf-line); margin: 1.4rem 0; opacity: 1; }

/* Metrics */
.xf-metric { background: var(--xf-cream); border: 1px solid var(--xf-line); border-radius: 14px; padding: .9rem 1rem; position: relative; overflow: hidden; }
.xf-metric::after { content: ""; position: absolute; right: -8px; top: -8px; width: 60px; height: 60px; border-radius: 50%; background: rgba(37,107,71,.05); }
.xf-metric-label { font-size: .72rem; letter-spacing: .6px; text-transform: uppercase; color: var(--xf-muted); font-weight: 700; }
.xf-metric-val { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.35rem; color: var(--xf-green-900); margin-top: .2rem; }
.xf-metric-hi .xf-metric-val { color: var(--xf-green-700); }
.xf-metric-lo .xf-metric-val { color: var(--xf-red); }
.xf-metric-avg .xf-metric-val { color: var(--xf-blue); }
.xf-metric-inc { background: linear-gradient(140deg, #fff5e5, #fce9cc); border-color: #f0d9a8; }
.xf-metric-inc .xf-metric-val { color: #7a4310; }

.xf-info { display: flex; gap: .8rem; align-items: flex-start; padding: .4rem 0; }
.xf-info i { color: var(--xf-green-600); font-size: 1.2rem; margin-top: 2px; }
.xf-info-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; color: var(--xf-muted); font-weight: 700; }
.xf-info-val { font-weight: 600; color: var(--xf-ink); }

/* Prediction */
.xf-predict { background: linear-gradient(180deg, #fff, #fbf6e8); }
.xf-trend { padding: .4rem .8rem; border-radius: 999px; background: rgba(37,107,71,.12); color: var(--xf-green-800); font-weight: 700; font-size: .85rem; }
.xf-trend.xf-down-bg { background: rgba(192,57,43,.12); color: var(--xf-red); }
.xf-predict-current { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.9rem; color: var(--xf-ink); }
.xf-predict-next { font-family: 'Fraunces', serif; font-weight: 900; font-size: 2.2rem; color: var(--xf-green-700); }
.xf-predict-delta { font-weight: 800; font-size: 1.1rem; color: var(--xf-green-700); }
.xf-predict-delta.down { color: var(--xf-red); }
.xf-chart-wrap { background: #fff; border: 1px solid var(--xf-line); border-radius: 12px; padding: .6rem; }

/* Weather */
.xf-weather { background: linear-gradient(140deg, #eef7f1, #e6efe9); border-color: #cfe0d5; }
.xf-w-metric { display: flex; gap: .8rem; align-items: center; background: rgba(255,255,255,.7); padding: .8rem 1rem; border-radius: 14px; border: 1px solid rgba(37,107,71,.1); }
.xf-w-metric i { font-size: 1.6rem; color: var(--xf-green-700); }
.xf-alerts { display: flex; flex-wrap: wrap; gap: .5rem; }
.xf-alert-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
  border: 1px solid;
  animation: xf-pulse 2s ease-in-out infinite;
}
.xf-alert-chip.rain { background: #e0eef8; color: #1f4c74; border-color: #b6d3ea; }
.xf-alert-chip.thunder { background: #efe4f5; color: #4b1f74; border-color: #d1bce0; }
.xf-alert-chip.heat { background: #fbe7d5; color: #7a3d0f; border-color: #f0c896; }
@keyframes xf-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* --------- FEATURES --------- */
.xf-feat {
  background: #fff;
  border: 1px solid var(--xf-line);
  padding: 1.4rem;
  border-radius: var(--xf-radius);
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.xf-feat:hover { transform: translateY(-4px); box-shadow: var(--xf-shadow); border-color: var(--xf-green-400); }
.xf-feat-icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(140deg, var(--xf-green-500), var(--xf-green-700)); color: #fff; display: grid; place-items: center; font-size: 1.3rem; margin-bottom: 1rem; }
.xf-feat h5 { font-family: 'Fraunces', serif; font-weight: 700; color: var(--xf-green-950); }
.xf-feat p { color: var(--xf-muted); margin-bottom: 0; }

/* --------- FOOTER --------- */
.xf-footer {
  background: var(--xf-green-950);
  color: rgba(246,241,228,.85);
  padding: 40px 0 30px;
  margin-top: 40px;
}
.xf-footer .xf-brand-text { color: var(--xf-cream); }
.xf-footer-note { color: rgba(246,241,228,.7); }
.xf-footer-dev { color: var(--xf-cream); font-weight: 500; }
.xf-footer-small { color: rgba(246,241,228,.5); font-size: .82rem; margin-top: .3rem; }

/* --------- RESPONSIVE --------- */
@media (max-width: 991px) {
  .xf-hero { padding: 90px 0 70px; }
  .xf-search-card { margin-top: -30px; }
  .xf-nav { background: rgba(11,31,22,.95); }
  .xf-hero-stats { max-width: 100%; }
}
@media (max-width: 575px) {
  .xf-hero { padding: 70px 0 50px; }
  .xf-hero-price { font-size: 2rem; }
  .xf-section { padding: 60px 0; }
  .xf-panel { padding: 1.2rem; }
  .xf-search-card { padding: 1.2rem; }
}