@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;800;900&family=Rajdhani:wght@500;600;700&display=swap');

:root {
  --green: #4fe62e;
  --green-dark: #33b81c;
  --green-glow: rgba(79, 230, 46, 0.65);
  --black: #f1f3f2;
  --gray: #9aa3a0;
  --gray-light: #1d2321;
  --border: rgba(79, 230, 46, 0.16);
  --white: #14181a;
  --bg: #0a0d0c;
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  background: var(--bg);
  color: var(--black);
  position: relative;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.3px; color: var(--black); }
h2 { font-family: var(--font-display); font-weight: 700; color: var(--black); }
p { color: var(--black); }

/* ── Vapeur ambiante ─────────────────────────────────────────────────
   Deux couches de nuages verts flous qui dérivent (fond de page), PLUS
   un vrai système de "particules" (6 volutes qui montent et se dissipent
   en continu, décalées dans le temps) pour un effet nettement plus
   visible et vivant qu'un simple halo statique — toujours purement
   décoratif (pointer-events:none, comportement jamais bloquant). ── */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  filter: blur(70px);
  opacity: 0.9;
}
body::before {
  background:
    radial-gradient(circle at 10% 10%, rgba(79,230,46,0.22), transparent 32%),
    radial-gradient(circle at 90% 6%, rgba(79,230,46,0.16), transparent 28%);
  animation: vapor-drift-a 22s ease-in-out infinite alternate;
}
body::after {
  background:
    radial-gradient(circle at 92% 94%, rgba(79,230,46,0.15), transparent 30%),
    radial-gradient(circle at 6% 90%, rgba(79,230,46,0.17), transparent 32%);
  animation: vapor-drift-b 27s ease-in-out infinite alternate;
}
@keyframes vapor-drift-a {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-5%, 4%) scale(1.18); }
  100% { transform: translate(4%, -3%) scale(1.06); }
}
@keyframes vapor-drift-b {
  0%   { transform: translate(0, 0) scale(1.08); }
  50%  { transform: translate(5%, -5%) scale(0.94); }
  100% { transform: translate(-4%, 5%) scale(1.14); }
}

/* Vraie photo de fumée (licence Unsplash, libre d'usage commercial),
   en mode de fusion "screen" : le fond noir de la photo disparaît dans
   le fond sombre du site, seules les volutes claires restent visibles —
   se déplace lentement pour un effet plus réaliste que le pur CSS. */
.smoke-photo-layer {
  position: fixed;
  inset: -15%;
  z-index: -1;
  pointer-events: none;
  background: url('/assets/smoke-texture.jpg') center/cover no-repeat;
  mix-blend-mode: screen;
  opacity: 0.22;
  animation: smoke-photo-pan 40s ease-in-out infinite alternate;
}
@keyframes smoke-photo-pan {
  0%   { transform: scale(1.1) translate(0, 0); }
  100% { transform: scale(1.25) translate(-3%, -2%); }
}
@media (prefers-reduced-motion: reduce) {
  .smoke-photo-layer { animation: none; }
}

.smoke-particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.smoke-particles span {
  position: absolute;
  bottom: -80px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.5), rgba(79,230,46,0.22) 45%, rgba(79,230,46,0) 75%);
  filter: blur(10px);
  opacity: 0;
  animation: smoke-rise 14s ease-in infinite;
}
.smoke-particles span:nth-child(1) { left: 4%;  width: 70px;  height: 70px;  animation-delay: 0s;  animation-duration: 16s; }
.smoke-particles span:nth-child(2) { left: 22%; width: 110px; height: 110px; animation-delay: 3s;  animation-duration: 19s; }
.smoke-particles span:nth-child(3) { left: 48%; width: 60px;  height: 60px;  animation-delay: 6s;  animation-duration: 14s; }
.smoke-particles span:nth-child(4) { left: 68%; width: 130px; height: 130px; animation-delay: 1.5s;animation-duration: 21s; }
.smoke-particles span:nth-child(5) { left: 84%; width: 80px;  height: 80px;  animation-delay: 8s;  animation-duration: 17s; }
.smoke-particles span:nth-child(6) { left: 92%; width: 50px;  height: 50px;  animation-delay: 4.5s;animation-duration: 15s; }
@keyframes smoke-rise {
  0%   { transform: translateY(0) scale(0.6) translateX(0); opacity: 0; }
  12%  { opacity: 0.55; }
  50%  { transform: translateY(-52vh) scale(1.3) translateX(2vw); opacity: 0.35; }
  100% { transform: translateY(-105vh) scale(1.9) translateX(-3vw); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .smoke-particles span { animation: none; }
}

/* ── En-tête ─────────────────────────────────────────────────────── */
header.site-header {
  border-bottom: 1px solid var(--border);
  background: rgba(10,13,12,0.85);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 0 rgba(79,230,46,0.2);
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
}
/* Écran replié (Fold en mode couverture, ~340-380px de large) : la barre
   de recherche passe sur sa propre ligne plutôt que de forcer un
   débordement horizontal — logo et menu compte restent sur la 1ère ligne. */
@media (max-width: 640px) {
  .header-inner { padding: 10px 14px; }
  .search-bar { order: 3; flex-basis: 100%; }
  #account-menu { flex-wrap: wrap; justify-content: flex-end; gap: 8px; row-gap: 6px; }
}
.logo-link { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.logo-link img {
  height: 44px;
  width: 44px;
  border-radius: 50%;
  animation: logo-float 4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(79,230,46,0.35));
  transition: filter 0.3s;
}
.logo-link:hover img { filter: drop-shadow(0 0 14px var(--green-glow)); }
@keyframes logo-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(-2deg); }
}
.logo-link .wordmark { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: 0.5px; }
.logo-link .wordmark .lor { color: var(--black); }
.logo-link .wordmark .n { color: var(--green); }
.logo-link .wordmark .vape { color: var(--green); }

.search-bar { flex: 1; display: flex; position: relative; }
.search-bar input {
  flex: 1;
  padding: 10px 16px;
  border: 2px solid var(--border);
  border-radius: 999px 0 0 999px;
  font-size: 15px;
  font-family: var(--font-body);
  background: var(--gray-light);
  color: var(--black);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-bar input::placeholder { color: var(--gray); }
.search-bar input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(79,230,46,0.16); }
.search-bar button {
  padding: 10px 20px;
  border: 2px solid var(--green);
  background: var(--green);
  color: #06170a;
  border-radius: 0 999px 999px 0;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.search-bar button:hover { background: var(--green-dark); box-shadow: 0 0 16px var(--green-glow); }

#account-menu { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.account-link { font-size: 14px; font-weight: 600; color: var(--black); white-space: nowrap; }
.account-link--accent {
  background: var(--green);
  color: #06170a;
  padding: 8px 16px;
  border-radius: 999px;
}
.account-link--btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--black);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}

/* ── Bannière d'accueil : montage box + drip tip animé ────────────── */
.hero-banner {
  max-width: 1200px;
  margin: 24px auto 0;
  padding: 0 20px;
}
.hero-inner {
  background:
    linear-gradient(135deg, rgba(10,13,12,0.55), rgba(10,13,12,0.82)),
    url('/assets/smoke-texture.jpg');
  background-size: cover;
  background-position: center 30%;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  padding-top: 70px;
  display: flex;
  align-items: center;
  gap: 32px;
  position: relative;
}
.hero-text { flex: 1; min-width: 200px; }
.hero-text h1 { font-size: 28px; margin: 0 0 10px; text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.hero-text h1 .accent { color: var(--green); }
.hero-text p { color: #d4d8d6; font-size: 16px; margin: 0 0 18px; max-width: 420px; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.hero-mod { position: relative; width: 190px; flex-shrink: 0; }
.hero-mod img {
  width: 100%;
  border-radius: 16px;
  display: block;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(79,230,46,0.25);
}
.hero-vapor {
  position: absolute;
  left: 28%;
  bottom: 88%;
  width: 6px;
  height: 6px;
  pointer-events: none;
}
.hero-vapor span {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.85), rgba(79,230,46,0.35) 50%, rgba(79,230,46,0) 78%);
  filter: blur(4px);
  opacity: 0;
  animation: hero-puff 3.4s ease-out infinite;
}
.hero-vapor span:nth-child(1) { animation-delay: 0s; }
.hero-vapor span:nth-child(2) { animation-delay: 1.1s; margin-left: -6px; width: 20px; height: 20px; }
.hero-vapor span:nth-child(3) { animation-delay: 2.2s; margin-left: -20px; width: 22px; height: 22px; }
@keyframes hero-puff {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  15%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-150px) scale(3.2) translateX(12px); }
}
@media (max-width: 640px) {
  .hero-inner { flex-direction: column-reverse; text-align: center; padding: 24px; }
  .hero-text p { margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-vapor span { animation: none; }
}

/* ── Mise en page principale (recherche / sidebar / contenu / droite) ── */
.layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 60px;
  display: grid;
  grid-template-columns: 190px 1fr 170px;
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar-right { display: none; }
}

.sidebar-left {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  position: sticky;
  top: 84px;
}
.sidebar-left h3 { font-family: var(--font-display); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); margin: 0 0 10px; }
.category-item {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--black);
  margin-bottom: 4px;
  position: relative;
  border-left: 3px solid transparent;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.15s;
}
.category-item:hover, .category-item.active {
  background: var(--gray-light);
  color: var(--green);
  border-left-color: var(--green);
  transform: translateX(2px);
}

.sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sidebar-right .panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}
.sidebar-right .panel img { border-radius: 50%; width: 100px; margin-bottom: 8px; }
.chat-bubble {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green);
  color: #06170a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  cursor: pointer;
  z-index: 20;
  border: none;
  animation: bubble-pulse 2.8s ease-in-out infinite;
  transition: transform 0.15s;
}
.chat-bubble:hover { transform: scale(1.08); animation-play-state: paused; }
@keyframes bubble-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 0 0 rgba(79,230,46,0.6); }
  50% { box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 0 10px rgba(79,230,46,0); }
}

.unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff4757;
  color: white;
  font-size: 11px;
  font-weight: 800;
  margin-left: 4px;
  vertical-align: middle;
  animation: badge-pop 1.6s ease-in-out infinite;
}
@keyframes badge-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-bubble, .unread-badge { animation: none; }
}

/* ── Messagerie (bulle flottante sur annonce.html + fenêtre de chat) ── */
.chat-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 340px;
  max-width: calc(100vw - 32px);
  height: 460px;
  max-height: calc(100vh - 100px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  z-index: 25;
  overflow: hidden;
}
.chat-panel-header {
  background: var(--green);
  color: #06170a;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 14px;
}
.chat-panel-header button {
  background: none;
  border: none;
  color: #06170a;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-msg {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.4;
  word-wrap: break-word;
}
.chat-msg.mine { align-self: flex-end; background: var(--green); color: #06170a; border-bottom-right-radius: 4px; }
.chat-msg.theirs { align-self: flex-start; background: var(--gray-light); color: var(--black); border-bottom-left-radius: 4px; }
.chat-msg .chat-msg-time { display: block; font-size: 10px; opacity: 0.7; margin-top: 3px; }
.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border);
}
.chat-input-row input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  background: var(--gray-light);
  color: var(--black);
  outline: none;
}
.chat-input-row input:focus { border-color: var(--green); }
.chat-input-row button {
  background: var(--green);
  color: #06170a;
  border: none;
  border-radius: 999px;
  padding: 0 16px;
  font-weight: 700;
  cursor: pointer;
}

/* ── messages.html : boîte de réception deux colonnes ─────────────── */
.inbox-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  max-width: 1000px;
  margin: 24px auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  height: 70vh;
  min-height: 480px;
}
@media (max-width: 760px) {
  .inbox-layout { grid-template-columns: 1fr; height: auto; }
  .inbox-layout.thread-open .conversation-list { display: none; }
  .inbox-layout:not(.thread-open) .thread-pane { display: none; }
}
.conversation-list {
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.conversation-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.conversation-item:hover, .conversation-item.active { background: var(--gray-light); }
.conversation-item .thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--gray-light); flex-shrink: 0; }
.conversation-item .meta { flex: 1; min-width: 0; }
.conversation-item .meta .top-row { display: flex; justify-content: space-between; gap: 6px; }
.conversation-item .meta .name { font-weight: 700; font-size: 13px; color: var(--black); }
.conversation-item .meta .listing-title { color: var(--gray); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-item .meta .preview { font-size: 12px; color: var(--gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-pane { display: flex; flex-direction: column; height: 100%; }
.thread-header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 700; display: flex; align-items: center; gap: 10px; }
.thread-header .back-btn { display: none; background: none; border: none; color: var(--black); font-size: 18px; cursor: pointer; }
@media (max-width: 760px) { .thread-header .back-btn { display: block; } }

.section-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 14px;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  color: var(--black);
}
.section-title::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--green), rgba(79,230,46,0));
  animation: underline-glow 3s ease-in-out infinite;
}
@keyframes underline-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(79,230,46,0); }
  50% { box-shadow: 0 0 10px var(--green-glow); }
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 34px;
}
@media (max-width: 600px) { .grid { grid-template-columns: repeat(2, 1fr); } }

.card {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  background: var(--white);
}
.card:hover {
  box-shadow: 0 10px 32px rgba(79,230,46,0.28), 0 4px 10px rgba(0,0,0,0.3);
  transform: translateY(-4px);
  border-color: rgba(79,230,46,0.55);
}
.card .thumb {
  aspect-ratio: 4/3;
  background: var(--gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.card:hover .thumb img { transform: scale(1.06); }
.card .thumb .placeholder { color: var(--gray); font-size: 32px; }
.card .info { padding: 10px 12px; }
.card .title { font-weight: 700; font-size: 14px; margin: 0 0 4px; color: var(--black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .price { font-family: var(--font-display); color: var(--green); font-weight: 800; font-size: 15px; }
.card .condition { color: var(--gray); font-size: 12px; margin-top: 2px; }

.empty-state { color: var(--gray); text-align: center; padding: 30px; grid-column: 1/-1; }

.footer-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-top: 10px;
}

/* ── Boutons / formulaires génériques ────────────────────────────── */
.btn {
  display: inline-block;
  position: relative;
  overflow: visible;
  background: var(--green);
  color: #06170a;
  border: none;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.25s, transform 0.15s;
}
.btn:hover:not(:disabled) {
  background: var(--green-dark);
  box-shadow: 0 0 0 4px rgba(79,230,46,0.18), 0 6px 20px rgba(79,230,46,0.45);
  transform: translateY(-1px);
}
.btn:active:not(:disabled) { transform: translateY(0); }
.btn.secondary { background: var(--gray-light); color: var(--black); border: 1px solid var(--border); }
.btn.secondary:hover:not(:disabled) { box-shadow: 0 0 0 4px rgba(79,230,46,0.12), 0 6px 16px rgba(0,0,0,0.3); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Petites bouffées de vapeur qui s'échappent du bouton au survol —
   3 puffs décalés dans le temps pour un effet plus organique qu'un
   seul point qui monte. Purement décoratif (pointer-events:none). */
.btn:not(:disabled)::before,
.btn:not(:disabled)::after {
  content: '';
  position: absolute;
  left: 30%;
  top: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(79,230,46,0) 70%);
  filter: blur(1.5px);
  opacity: 0;
  pointer-events: none;
}
.btn:not(:disabled)::after { left: 65%; width: 9px; height: 9px; }
.btn:hover:not(:disabled)::before { animation: puff-rise 1.1s ease-out infinite; }
.btn:hover:not(:disabled)::after { animation: puff-rise 1.1s ease-out 0.4s infinite; }
@keyframes puff-rise {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  25%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-30px) scale(2); }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover:not(:disabled)::before, .btn:hover:not(:disabled)::after { animation: none; }
}

.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; color: var(--black); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--gray-light);
  color: var(--black);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--gray); }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: 2px solid var(--green); }

.container-narrow { max-width: 560px; margin: 0 auto; padding: 40px 20px; }
.message { padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.message.error { background: rgba(255,71,87,0.12); color: #ff6b78; }
.message.success { background: rgba(79,230,46,0.12); color: var(--green); }