/* 
  FloraVerse - Playful Digital Garden Design System
  Custom CSS complementing Tailwind CDN
  Palette: #6FA8FF (Blue) #FF718D (Pink) #FFD45C (Yellow) #FF9B70 (Orange) #8BCB8A (Green) #FFFFFF #252525
  Purple is NOT used.
  Custom illustration created for FloraVerse - Open License
*/

:root{
  --blue:#6FA8FF;
  --pink:#FF718D;
  --yellow:#FFD45C;
  --orange:#FF9B70;
  --green:#8BCB8A;
  --charcoal:#252525;
  --muted:#6B7280;
  --card-shadow: 0 8px 32px rgba(37,37,37,0.08);
  --card-shadow-hover: 0 16px 48px rgba(37,37,37,0.12);
}

*{font-family:'Outfit', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;}
h1,h2,h3,.display{font-family:'Nunito', 'Outfit', sans-serif; letter-spacing:-0.02em;}

html{scroll-behavior:smooth; scrollbar-gutter:stable}
body{background:#FFFFFF; color:var(--charcoal); -webkit-font-smoothing:antialiased; cursor:default}

/* Cursor utilities */
button, a[href], select, [role="button"], [onclick], .btn, .cat-pill, .nav-link, .fv-select-btn, .fv-select-option, .menu-toggle, .mobile-nav-panel .nav-link, .mobile-profile-chip{cursor:pointer}
input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], textarea, [contenteditable="true"]{cursor:text}

/* Text cursor for readable content, but NOT inside interactive elements */
:where(button, a[href], [role="button"], .btn, .cat-pill, .nav-link, .fv-select-btn, .fv-select-option, .menu-toggle, .mobile-nav-panel .nav-link, .mobile-profile-chip) * { cursor: inherit; }

/* Wordmark */
.wordmark{font-family:'Nunito', sans-serif; font-weight:800; letter-spacing:-0.04em; color:var(--charcoal);}
.wordmark span{color:var(--blue);}

/* Cards */
.fv-card{
  background:#fff;
  border:1.5px solid #EFEFEF;
  border-radius:24px;
  box-shadow:var(--card-shadow);
  transition: all .25s cubic-bezier(.2,.8,.2,1);
}
.fv-card:hover{transform:translateY(-3px); box-shadow:var(--card-shadow-hover);}
.fv-card.blue{background:var(--blue); border-color:rgba(255,255,255,0.6); color:var(--charcoal);}
.fv-card.pink{background:var(--pink); border-color:rgba(255,255,255,0.6); color:var(--charcoal);}
.fv-card.yellow{background:var(--yellow); border-color:#FFE9A8; color:var(--charcoal);}
.fv-card.orange{background:var(--orange); border-color:#FFD5BF; color:var(--charcoal);}
.fv-card.green{background:var(--green); color:var(--charcoal);}
.fv-card.white{background:#fff;}.commFilter,.feedTab,.gcat,.levelBtn,.cat-pill,.pcat{
  transition:all .2s ease;
}
.commFilter:not(.active),
.feedTab:not(.active),
.gcat:not(.active),
.levelBtn:not(.active),
.cat-pill:not(.active),
.pcat:not(.active){
  background:#fff;
  color:var(--charcoal);
  border-color:#E5E7EB;
}
.commFilter.active,
.feedTab.active,
.gcat.active,
.levelBtn.active,
.cat-pill.active,
.pcat.active{
  background:var(--charcoal);
  color:#fff;
  border-color:var(--charcoal);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.35rem; border-radius:14px; font-weight:700; font-size:.95rem;
  line-height:1; transition:all .2s cubic-bezier(.2,.8,.2,1); cursor:pointer; white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(0.97); transition-duration:.08s}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 8px 20px rgba(111,168,255,.35);}
.btn-primary:hover{background:#5B96F0; box-shadow:0 12px 28px rgba(111,168,255,.4)}
.btn-dark{background:var(--charcoal); color:#fff;}
.btn-dark:hover{background:#1a1a1a}
.btn-ghost{background:#fff; border:1.5px solid #E5E7EB; color:var(--charcoal);}
.btn-ghost:hover{background:#F9FAFB}
.btn-orange{background:var(--orange); color:#fff;}

.bg-white.text-white,
.bg-white\/20.text-white,
.bg-white\/15.text-white,
.bg-white\/10.text-white{
  color:var(--charcoal) !important;
}

.fv-card.orange .bg-white,
.fv-card.orange .bg-white *,
.fv-card.orange .bg-white input,
.fv-card.orange .bg-white select,
.fv-card.orange .bg-white textarea,
.fv-card.orange .bg-white button{
  color:var(--charcoal) !important;
}

.fv-card.blue .bg-white\/20.text-white,
.fv-card.blue .bg-white.text-white,
.fv-card.pink .bg-white\/20.text-white,
.fv-card.pink .bg-white.text-white,
.fv-card.orange .bg-white\/20.text-white,
.fv-card.orange .bg-white.text-white,
.fv-card.green .bg-white\/20.text-white,
.fv-card.green .bg-white.text-white,
.fv-card.yellow .bg-white\/20.text-white,
.fv-card.yellow .bg-white.text-white{
  color:var(--charcoal) !important;
}
.fv-card.blue .bg-white:not(.text-white),
.fv-card.pink .bg-white:not(.text-white),
.fv-card.orange .bg-white:not(.text-white),
.fv-card.green .bg-white:not(.text-white){color:var(--charcoal);}

select,
select option,
select:focus,
input,
textarea{
  color:var(--charcoal) !important;
}

select,
select option{
  background:#fff !important;
  color:var(--charcoal) !important;
}

select {
  appearance:auto;
  -webkit-appearance:menulist;
  color-scheme: light;
}

/* Plant and product images in cards */
.fv-card img, .fv-card .image-fallback{
  object-fit:cover;
}
#productsGrid img, #plantsGrid img{
  aspect-ratio:1; object-fit:cover;
}
.image-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:800;font-size:1.5rem;color:var(--charcoal);background:#F3F4F6}
.fv-card:focus-visible,.btn:focus-visible,.cat-pill:focus-visible,.nav-link:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(111,168,255,.55);outline-offset:3px}

/* Pills / Tags */
.pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .75rem; border-radius:999px; font-size:.75rem; font-weight:700;
  letter-spacing:.02em; border:1px solid transparent;
}
.pill-blue{background:rgba(111,168,255,.15); color:#3B82F6; border-color:rgba(111,168,255,.25)}
.pill-yellow{background:rgba(255,212,92,.25); color:#9A7400; border-color:rgba(255,212,92,.4)}
.pill-orange{background:rgba(255,155,112,.18); color:#E56A2E; border-color:rgba(255,155,112,.3)}
.pill-green{background:rgba(139,203,138,.2); color:#2F7A2E; border-color:rgba(139,203,138,.35)}
.pill-white{background:#F3F4F6; border-color:#E5E7EB; color:var(--charcoal)}.pill[data-cat="Sayuran"]{background:rgba(139,203,138,.15); color:#2F7A2E; border-color:rgba(139,203,138,.3)}.pill[data-cat="Buah"]{background:rgba(255,113,141,.12); color:#FF4D6D; border-color:rgba(255,113,141,.2)}.pill[data-cat="Bunga"]{background:rgba(255,113,141,.14); color:#FF4D6D; border-color:rgba(255,113,141,.2)}.pill[data-cat="Herbal"]{background:rgba(139,203,138,.2); color:#2F7A2E; border-color:rgba(139,203,138,.35)}.pill[data-cat="Hias"]{background:rgba(111,168,255,.12); color:#3B82F6; border-color:rgba(111,168,255,.2)}.pill[data-cat="Pohon buah"]{background:rgba(255,155,112,.15); color:#E56A2E; border-color:rgba(255,155,112,.25)}.pill[data-cat="Sukulen"]{background:rgba(255,212,92,.18); color:#9A7400; border-color:rgba(255,212,92,.3)}.pill[data-cat="Kaktus"]{background:rgba(139,203,138,.15); color:#2F7A2E; border-color:rgba(139,203,138,.25)}

/* Navbar — light glass */
.navbar{
  position:sticky; top:0; z-index:40;
  background:linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.42) 100%);
  backdrop-filter:blur(14px) saturate(1.05);
  -webkit-backdrop-filter:blur(14px) saturate(1.05);
  border-bottom:1px solid rgba(37,37,37,.1);
  transition:background .28s ease, backdrop-filter .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.navbar.is-scrolled{
  background:linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.78) 100%);
  backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  border-bottom-color:rgba(37,37,37,.12);
  box-shadow:0 8px 28px rgba(37,37,37,.06);
}
.navbar #cartBtn{
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.navbar #cartBtn:hover{
  background:rgba(255,255,255,.88);
  border-color:rgba(255,255,255,.75);
}
.nav-link{
  font-weight:600; font-size:.92rem; color:#4B5563; padding:.5rem .85rem; border-radius:12px; transition:.2s;
}
.nav-link:hover{color:var(--charcoal); background:rgba(255,255,255,.72)}
.nav-link.active{background:var(--charcoal); color:#fff;}

.menu-toggle{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; border-radius:12px; background:var(--charcoal); color:#fff;
  border:none; box-shadow:0 8px 18px rgba(37,37,37,.12); transition:all .2s ease;
}
.menu-toggle span{
  position:absolute; left:.7rem; right:.7rem; height:2px; border-radius:999px; background:#fff;
  transition:transform .25s ease, opacity .2s ease, top .25s ease, bottom .25s ease;
}
.menu-toggle span:nth-child(1){top:0.9rem}
.menu-toggle span:nth-child(2){top:1.33rem}
.menu-toggle span:nth-child(3){top:1.76rem}
.menu-toggle.is-open span:nth-child(1){top:1.33rem; transform:rotate(45deg)}
.menu-toggle.is-open span:nth-child(2){opacity:0}
.menu-toggle.is-open span:nth-child(3){top:1.33rem; transform:rotate(-45deg)}
.menu-toggle:hover{background:#1a1a1a}

/* Mobile nav - slide from left */
.mobile-nav-panel{
  position:fixed; top:0; left:0; width:280px; max-width:80vw; height:100%; z-index:62;
  background:#fff; box-shadow:16px 0 48px rgba(0,0,0,.15);
  transform:translateX(-100%); transition:transform .3s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column; padding:0;
}
.mobile-nav-panel.open{transform:translateX(0)}
.mobile-nav-backdrop{position:fixed; inset:0; background:rgba(37,37,37,.35); backdrop-filter:blur(4px); display:none; z-index:61}
.mobile-nav-backdrop.open{display:block}
.mobile-nav-panel .mobile-nav-header{padding:1.25rem 1.5rem; border-bottom:1px solid #F0F0F0; display:flex; align-items:center; justify-content:space-between}
.mobile-nav-panel .mobile-nav-links{padding:1rem; display:flex; flex-direction:column; gap:.5rem}
.mobile-nav-panel .nav-link{padding:.75rem 1rem; border-radius:12px; font-size:1rem; font-weight:600; color:#6B7280; transition:.2s}
.mobile-nav-panel .nav-link:hover{background:#F3F4F6; color:var(--charcoal)}
.mobile-nav-panel .nav-link.active{background:var(--charcoal); color:#fff}
.mobile-nav-panel .mobile-nav-links{flex:1}
.mobile-nav-footer{margin-top:auto; padding:14px 16px 16px; border-top:1px solid #F0F0F0}
.mobile-profile-chip{display:flex; align-items:center; gap:.75rem; padding:.7rem .75rem; border:1.5px solid #EFEFEF; border-radius:14px; background:#FAFAFA; transition:.2s}
.mobile-profile-chip:hover{background:#F3F4F6}
.mpc-avatar{width:38px; height:38px; border-radius:12px; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.72rem; flex-shrink:0}
.mpc-info{display:flex; flex-direction:column; line-height:1.2; min-width:0}
.mpc-info b{font-size:.9rem}
.mpc-info small{color:var(--muted); font-size:.72rem; font-weight:600}
.mpc-xp{margin-left:auto; background:rgba(255,212,92,.4); color:#9A7400; font-size:.7rem; font-weight:800; padding:.28rem .55rem; border-radius:999px; flex-shrink:0}

/* Animations */
body{animation:pageEnter .3s cubic-bezier(.2,.8,.2,1) both;}
body.is-leaving{animation:pageLeave .18s ease-in forwards; pointer-events:none;}

/* Scrollbar — thin, subtle, consistent across all pages */
html{scrollbar-width:thin; scrollbar-color:#D1D5DB transparent}
::-webkit-scrollbar{width:5px; height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#D1D5DB; border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#BDC3C9}

/* Sidebar independent scroll — thin scrollbar, smooth behavior */
.sidebar-scroll{scrollbar-width:thin; scrollbar-color:#D1D5DB transparent; scroll-behavior:smooth; overscroll-behavior:contain}
.sidebar-scroll::-webkit-scrollbar{width:5px}
.sidebar-scroll::-webkit-scrollbar-track{background:transparent}
.sidebar-scroll::-webkit-scrollbar-thumb{background:#D1D5DB; border-radius:999px}
.sidebar-scroll::-webkit-scrollbar-thumb:hover{background:#BDC3C9}

/* Modal */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(37,37,37,.55); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; z-index:60; padding:1rem;
  width:100%; height:100dvh; overflow-y:auto; overscroll-behavior:contain;
}
.modal-backdrop.open{display:flex; animation: modalOverlayIn .2s ease}
.modal{
  background:#fff; border-radius:28px; max-width:640px; width:100%; max-height:90vh; overflow:auto;
  box-shadow:0 24px 64px rgba(0,0,0,.2); animation: modalContentIn .28s cubic-bezier(.2,.8,.2,1);
}
.drawer{
  position:fixed; top:0; right:0; height:100%; width:420px; max-width:92vw; background:#fff;
  transform:translateX(100%); visibility:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s linear .35s;
  z-index:61; box-shadow:-16px 0 48px rgba(0,0,0,.12); display:flex; flex-direction:column;
}
.drawer.open{
  transform:translateX(0);
  visibility:visible;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s;
}
/* overflow-x:clip mem-blockir scroll horizontal tanpa memutus position:sticky (hidden mengubah body jadi scroll container) */
html,body{overflow-x:hidden}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
.drawer-backdrop{position:fixed; inset:0; background:rgba(37,37,37,.35); backdrop-filter:blur(4px); display:none; z-index:60}
.drawer-backdrop.open{display:block}

/* Inline Comment Section */
.comment-section{max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1)}
.comment-section>.comment-section-inner{opacity:0;transform:translateY(-4px);transition:opacity .25s ease .05s,transform .3s ease .05s}
.comment-section.open>.comment-section-inner{opacity:1;transform:translateY(0)}
.comment-btn.active{background:#EFF6FF;border-color:#6FA8FF;color:#6FA8FF}
.comment-chevron{display:inline-block;transition:transform .2s ease}
.comment-chevron.open{transform:rotate(180deg)}

/* Progress */
.progress-track{background:#F3F4F6; border-radius:999px; height:8px; overflow:hidden}
.progress-fill{height:100%; border-radius:999px; transition:width .6s ease}

/* Collapsible sections */
.collapsible-content{max-height:2000px; overflow:hidden; transition:max-height .35s ease, opacity .3s ease; opacity:1}
.collapsible-content.collapsed{max-height:0; opacity:0}

/* Journeys */
.journey-line{position:absolute; left:19px; top:32px; bottom:32px; width:3px; background:#F0F0F0; border-radius:999px}
.journey-dot{width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; border:3px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.08); flex-shrink:0}
.journey-dot.done{background:var(--green); color:#fff}
.journey-dot.active{background:var(--blue); color:#fff; box-shadow:0 8px 20px rgba(111,168,255,.4)}
.journey-dot.todo{background:#fff; color:#9CA3AF; border-color:#E5E7EB}

/* Toast */
#toastBox{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:70; display:flex; flex-direction:column; gap:.6rem; pointer-events:none}
.toast{
  background:var(--charcoal); color:#fff; padding:.9rem 1.15rem; border-radius:12px; font-weight:600; font-size:.88rem;
  box-shadow:0 12px 32px rgba(0,0,0,.18); display:flex; align-items:center; gap:.6rem;
  animation: toastIn .28s cubic-bezier(.2,.8,.2,1); pointer-events:auto; white-space:nowrap; max-width:92vw;
}
.toast.is-leaving{animation: toastOut .2s ease forwards;}

/* Range etc */
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button{display:none}

/* Tiny helpers */
.text-muted{color:var(--muted)}
.divider{height:1px; background:#F0F0F0}
.no-scrollbar{scrollbar-width:none}
.no-scrollbar::-webkit-scrollbar{display:none}

/* Hover lift */
.hover-lift{transition:transform .2s ease, box-shadow .2s ease}
.hover-lift:hover{transform:translateY(-2px)}

/* Range slider drag cursor */
.lab-range{cursor:grab; user-select:none;}
.lab-range::-webkit-slider-thumb{cursor:grab;}
.lab-range::-moz-range-thumb{cursor:grab;}
.lab-range:active,.lab-range.dragging{cursor:grabbing;}
.lab-range:active::-webkit-slider-thumb,.lab-range.dragging::-webkit-slider-thumb{cursor:grabbing;}
.lab-range:active::-moz-range-thumb,.lab-range.dragging::-moz-range-thumb{cursor:grabbing;}

/* Comment expand transition */
.comment-section {
  max-height:0; overflow:hidden; opacity:0;
  transition: max-height .3s cubic-bezier(.2,.8,.2,1), opacity .25s ease, padding .25s ease;
}
.comment-section.open {
  max-height:600px; opacity:1;
}

/* Compact product UI: preserve every feature while reducing visual noise. */
:root{
  --card-shadow:0 4px 18px rgba(37,37,37,.055);
  --card-shadow-hover:0 10px 28px rgba(37,37,37,.10);
}
.navbar > div{height:60px !important;}
.navbar .wordmark{font-size:1.5rem !important; line-height:1;}
.fv-card{border-radius:18px; box-shadow:var(--card-shadow);}
.fv-card:hover{box-shadow:var(--card-shadow-hover);}
.fv-card .fv-card{box-shadow:none; border-color:#F1F2F4; border-radius:14px;}
.fv-card.p-7{padding:1.5rem !important;}
.fv-card.p-6{padding:1.25rem !important;}
.fv-card.p-5{padding:1.125rem !important;}
.btn{padding:.7rem 1.05rem; font-size:.875rem;}
.pill{padding:.28rem .62rem; font-size:.7rem;}
.modal{border-radius:20px;}
.progress-track{height:7px;}
#productsGrid > .fv-card{display:flex; flex-direction:column;}
#productsGrid > .fv-card > .p-4{display:flex; flex:1; flex-direction:column;}
#productsGrid .items-end.justify-between{margin-top:auto !important; padding-top:.65rem;}
.checkout-panel,.checkout-summary{background:#fff; border:1px solid #EFEFEF; border-radius:16px; padding:1rem;}
.checkout-summary{background:#FFF7ED; border-color:#FFD5BF;}
.checkout-input{display:block; width:100%; margin-top:.35rem; padding:.7rem .8rem; border:1px solid #E5E7EB; border-radius:12px; background:#FAFAFA; font-weight:500; outline:none;}
.checkout-input:focus{background:#fff; border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,155,112,.16);}
.checkout-option{display:flex; gap:.55rem; align-items:flex-start; padding:.7rem; border:1px solid #E5E7EB; border-radius:12px; cursor:pointer; font-size:.8rem;}
.checkout-option:has(input:checked){border-color:var(--orange); background:#FFF7ED;}
.checkout-option input{margin-top:.18rem; accent-color:var(--orange);}
.checkout-option span{display:flex; flex-direction:column; gap:.15rem;}
.checkout-option small{color:var(--muted); font-weight:500; line-height:1.25;}

/* Keep the page rhythm predictable across all seven areas. */
body > header,
body > section,
body > main,
body > .max-w-\[1280px\]{margin-top:1.25rem !important;}
body > header:first-of-type{margin-top:1.5rem !important;}
body > section + section{margin-top:1.25rem !important;}
body > header + section{margin-top:1.25rem !important;}

/* Nested panels should support hierarchy instead of competing with the page card. */
.fv-card > .bg-white.rounded-\[24px\],
.fv-card > .bg-white.rounded-2xl{box-shadow:none; border:1px solid #F1F2F4;}
.fv-card > .bg-white.rounded-\[24px\]{border-radius:16px;}

/* Make dense controls read as one toolbar. */
input,select,textarea{border-color:#E5E7EB;}.cat-pill,.pcat,.commFilter,.feedTab,.gcat,.levelBtn{font-size:.8rem !important;}.cat-pill,.pcat,.commFilter,.feedTab,.gcat,.levelBtn{border-radius:11px !important;}
.cat-pill,.pcat{padding-top:.55rem !important; padding-bottom:.55rem !important;}

/* Soften fully-round controls so the radius system stays consistent: cards 18px, controls 12-14px. */
#cartBtn,#menuBtn{border-radius:12px;}
.navbar > div > div a[href="profile.html"]{border-radius:12px;}
input[type="search"]{border-radius:12px;}
#newTaskInput,#journalInput{border-radius:12px;}

/* Styled dropdown: the native <select> stays hidden as the source of truth.
   Sizing classes (w-full, flex-1, sm:w-auto...) are copied onto the wrapper, so
   Tailwind utilities keep controlling width exactly like on the original select. */
.fv-select{position:relative; min-width:0; width:max-content; max-width:100%;}
.fv-native-select{position:absolute !important; top:0; left:0; width:1px !important; height:1px !important; min-height:0 !important; opacity:0 !important; pointer-events:none !important; border:0 !important; padding:0 !important; margin:0 !important;}
.fv-select-btn{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  width:100%; min-height:44px; padding:.55rem .8rem;
  background:#fff; border:1.5px solid #E5E7EB; border-radius:12px;
  font-family:inherit; font-weight:700; font-size:.85rem; color:var(--charcoal);
  cursor:pointer; text-align:left; line-height:1.25;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.fv-select-btn:hover{border-color:#C9D2E0}
.fv-select.open .fv-select-btn{border-color:var(--blue); box-shadow:0 0 0 3px rgba(111,168,255,.16)}
.fv-select-label{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fv-select-chevron{flex-shrink:0; display:flex; align-items:center; color:#6B7280; transition:transform .2s ease;}
.fv-select.open .fv-select-chevron{transform:rotate(180deg)}
.fv-select-panel{
  position:fixed; z-index:65; display:none;
  background:#fff; border:1px solid #EFEFEF; border-radius:14px;
  box-shadow:0 16px 44px rgba(37,37,37,.16);
  padding:.35rem; max-height:268px; overflow:auto; overscroll-behavior:contain;
}
.fv-select-panel.open{display:block}
.fv-select-option{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  width:100%; padding:.62rem .7rem; border:0; background:none; border-radius:9px;
  font-family:inherit; font-weight:600; font-size:.85rem; color:var(--charcoal);
  cursor:pointer; text-align:left; line-height:1.3;
}
.fv-select-option:hover{background:#F3F4F6}
.fv-select-option:focus{outline:none}
.fv-select-option:focus-visible{outline:none; background:#F3F4F6}
.fv-select-option.selected:focus-visible{background:rgba(111,168,255,.14)}
.fv-select-option.selected{background:rgba(111,168,255,.14); color:#3B82F6; font-weight:800}
.fv-select-option .fv-opt-check{visibility:hidden; color:#3B82F6; font-weight:800; flex-shrink:0}
.fv-select-option.selected .fv-opt-check{visibility:visible}

@media (min-width:768px){
  /* Use the available desktop canvas without letting content become unreadably wide. */
  .max-w-\[1280px\]{width:100%; max-width:min(1440px, calc(100vw - 48px)) !important;}
  .fv-card.blue,.fv-card.pink,.fv-card.yellow,.fv-card.orange,.fv-card.green{box-shadow:0 8px 24px rgba(37,37,37,.07);}
}
.section-eyebrow{margin-bottom:.3rem;color:var(--world-accent-strong);font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;}
.section-eyebrow{margin-bottom:.35rem;font-size:.63rem;letter-spacing:.16em;}
.section-eyebrow{margin-bottom:.3rem;color:var(--muted);font-size:.75rem;font-weight:700;letter-spacing:0;text-transform:none;}

/* Lucide icons inherit the surrounding font size (emoji replacement). */
i[data-lucide],svg[data-lucide]{display:inline-block;width:1em;height:1em;flex:0 0 auto;vertical-align:-.15em;}


/* ===== GROUND FOOTER =====
   Kaki halaman FloraVerse: garis tanah + rumput, brand, navigasi, status hidup.
   Dekorasi memakai SVG data-uri supaya satu sumber di file ini. */
:root{
  --fv-sprout2:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2761%27%20height=%2746%27%20viewBox=%270%200%2061%2046%27%3E%3Cg%20fill=%27none%27%20stroke=%27%237FC184%27%20stroke-width=%272.1%27%20stroke-linecap=%27round%27%3E%3Cpath%20d=%27M12%2032c2-8%205-13%2010-16%27/%3E%3Cpath%20d=%27M30%2032c-2-6-5-9-9-11%27/%3E%3Cpath%20d=%27M48%2032c1-7%204-11%208-13%27/%3E%3C/g%3E%3Cg%20fill=%27%239BD9A1%27%3E%3Cpath%20d=%27M20%2021c4%200%207%202%208%206-4%200-7-2-8-6Z%27/%3E%3Cpath%20d=%27M40%2024c-4%200-6%202-7%206%204%200%206-2%207-6Z%27/%3E%3C/g%3E%3C/svg%3E");
  --fv-sprout:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2772%27%20height=%2746%27%20viewBox=%270%200%2072%2046%27%3E%3Crect%20y=%2732%27%20width=%2772%27%20height=%2714%27%20fill=%27%23EADFC8%27/%3E%3Cg%20fill=%27none%27%20stroke=%27%236FB67A%27%20stroke-width=%272.2%27%20stroke-linecap=%27round%27%3E%3Cpath%20d=%27M8%2032c1-6%203-10%207-13%27/%3E%3Cpath%20d=%27M26%2032c-1-8-5-12-10-14%27/%3E%3Cpath%20d=%27M44%2032c1-7%204-11%209-13%27/%3E%3Cpath%20d=%27M62%2032c0-6%202-9%205-11%27/%3E%3C/g%3E%3Cg%20fill=%27%238BCB8A%27%3E%3Cpath%20d=%27M16%2019c5%200%208%203%209%207-5%200-8-3-9-7Z%27/%3E%3Cpath%20d=%27M34%2017c-5%201-7%204-8%208%205-1%207-4%208-8Z%27/%3E%3Cpath%20d=%27M54%2020c-5%200-7%203-8%207%205%200%207-3%208-7Z%27/%3E%3C/g%3E%3Ccircle%20cx=%2744%27%20cy=%2714%27%20r=%273.2%27%20fill=%27%23FF718D%27/%3E%3Ccircle%20cx=%278%27%20cy=%2713%27%20r=%272.8%27%20fill=%27%23FFD45C%27/%3E%3Ccircle%20cx=%2764%27%20cy=%2716%27%20r=%272.6%27%20fill=%27%236FA8FF%27/%3E%3C/svg%3E");
}
body .fv-ground{
  position:relative;
  margin-top:48px;
  padding-top:46px;
  background:linear-gradient(180deg,#E7F2DF 0%,#DCEBD1 100%);
  color:var(--charcoal);
  font-family:'Outfit', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
body .fv-ground.reveal{opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1)}
body .fv-ground.reveal.in{opacity:1; transform:none}


.fv-ground .fv-row{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-rows:auto auto;
  column-gap:clamp(24px,4vw,60px);
  row-gap:14px;
  align-items:start;
}
.fv-ground .fv-brand{grid-area:1/1}
.fv-ground .fv-status{grid-area:2/1}
.fv-ground .fv-nav{grid-area:1/2/3/3; align-self:center}
.fv-ground .fv-social{grid-area:1/3/3/4; align-self:center; justify-self:end}

.fv-ground .fv-mark{
  display:inline-block; text-decoration:none;
  font-family:'Nunito', sans-serif; font-weight:800; font-size:1.5rem;
  letter-spacing:-.03em; color:var(--charcoal);
  transition:transform .2s ease;
}
.fv-ground .fv-mark span{color:var(--blue)}
.fv-ground .fv-mark:hover{transform:translateY(-2px)}
.fv-ground .fv-tag{margin-top:5px; font-size:.92rem; font-weight:500; color:var(--muted)}

.fv-ground .fv-status{
  display:flex; align-items:center; flex-wrap:wrap; gap:7px;
  font-size:.78rem; font-weight:600; color:#4B5563;
}
.fv-ground .fv-status b{font-weight:800; color:var(--charcoal); text-transform:uppercase; letter-spacing:.06em; font-size:.7rem}
.fv-ground .fv-dot{
  width:8px; height:8px; border-radius:50%; background:var(--green); flex:0 0 auto;
  animation:fvPulse 2.8s ease-out infinite;
}
.fv-ground .fv-sep{color:rgba(37,37,37,.3); font-weight:800}
@keyframes fvPulse{
  0%{box-shadow:0 0 0 0 rgba(139,203,138,.55)}
  70%,100%{box-shadow:0 0 0 9px rgba(139,203,138,0)}
}

.fv-ground .fv-nav{display:flex; flex-wrap:wrap; align-items:center; gap:2px clamp(14px,2vw,28px)}
.fv-ground .fv-nav a{
  position:relative; display:inline-flex; align-items:center; min-height:38px;
  font-size:.95rem; font-weight:700; color:#374151; text-decoration:none;
  transition:color .2s ease, transform .2s ease;
}
.fv-ground .fv-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:7px; height:2px; border-radius:2px;
  background:var(--green); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.fv-ground .fv-nav a:hover{color:var(--charcoal); transform:translateY(-2px)}
.fv-ground .fv-nav a:hover::after{transform:scaleX(1)}
.fv-ground .fv-nav a:focus-visible{outline:2px solid var(--blue); outline-offset:4px; border-radius:6px}

.fv-ground .fv-social{display:flex; align-items:center; gap:clamp(12px,2vw,20px)}
.fv-ground .fv-social a{
  display:inline-flex; align-items:center; gap:7px; min-height:36px;
  font-size:.85rem; font-weight:700; color:#4B5563; text-decoration:none;
  transition:color .2s ease, transform .2s ease;
}
.fv-ground .fv-social a i[data-lucide]{color:var(--green); transition:color .2s ease}
.fv-ground .fv-social a:hover{color:var(--charcoal); transform:translateY(-2px)}
.fv-ground .fv-social a:hover i[data-lucide]{color:var(--pink)}
.fv-ground .fv-social a:focus-visible{outline:2px solid var(--blue); outline-offset:4px; border-radius:8px}

.fv-ground .fv-base{
  position:relative; z-index:1;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 18px;
  margin-top:24px; padding-top:13px;
  border-top:1px dashed rgba(37,37,37,.15);
  font-size:.76rem; font-weight:600; color:var(--muted);
}
.fv-ground .fv-edge{
  position:relative; z-index:1;
  height:46px; margin-top:14px;
  background-image:var(--fv-sprout),var(--fv-sprout2);
  background-repeat:repeat-x,repeat-x;
  background-position:0 100%,0 100%;
  background-size:auto 46px,auto 46px;
}