:root{font-family:'Tajawal','IBM Plex Sans Arabic','Cairo',sans-serif;color:#1b3329;background:#f7f5ef}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,24px);border-bottom:1px solid #e5e1d8;background:#fffefa}.brand{font-size:30px;font-weight:800;letter-spacing:-2px;color:#1b4332}.brand-dot{font-size:9px;color:#bb8053;vertical-align:top;margin-right:5px}.environment{background:#eaf2ed;color:#1b4332;padding:9px 13px;border-radius:30px;font-size:13px;font-weight:700}.shell{max-width:1100px;margin:9vh auto 5vh;display:grid;grid-template-columns:.85fr 1fr;gap:min(8vw,90px);padding:0 24px;align-items:start}.intro{padding-top:32px}.eyebrow{color:#aa754b;font-size:14px;font-weight:800;margin-bottom:17px}.intro h1{font-size:clamp(42px,6vw,74px);line-height:1.1;letter-spacing:-2px;margin:0 0 20px}.intro p{font-size:20px;line-height:1.85;color:#637168;max-width:460px}.steps{margin-top:45px;display:flex;flex-wrap:wrap;gap:10px}.steps span{font-size:13px;background:#eeeae0;border:1px solid #e1dacd;border-radius:100px;padding:9px 14px}.panel{background:#fff;border:1px solid #e8e2d7;border-radius:22px;padding:30px;box-shadow:0 16px 48px #203c2b10}.tabs{display:flex;background:#f4f2ed;border-radius:13px;padding:4px;margin-bottom:24px}.tab{flex:1;border:0;background:transparent;border-radius:10px;padding:11px;color:#64746a;font-weight:700}.tab.active{background:#fff;color:#1b4332;box-shadow:0 2px 9px #1b433215}.form{display:grid;gap:16px}.form h2,.member-head h2{margin:0 0 5px;font-size:27px}.form label{display:grid;gap:7px;font-size:14px;font-weight:700}.form input,.form select{width:100%;border:1px solid #dcded6;background:#fff;border-radius:11px;padding:12px 14px;min-height:46px;outline:none;color:#1b3329}.form input:focus,.form select:focus{border-color:#2d6a4f;box-shadow:0 0 0 3px #2d6a4f23}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.primary{border:0;background:#1b4332;color:#fff;border-radius:12px;min-height:48px;padding:12px 18px;font-weight:800;display:flex;align-items:center;justify-content:space-between;margin-top:5px;transition:background .2s,transform .2s}.primary:hover{background:#2d6a4f}.primary:active{transform:scale(.98)}.primary:disabled{opacity:.6;cursor:wait}.outline{border:1px solid #d5ded6;background:white;border-radius:11px;padding:9px 14px;color:#1b4332}.hint{color:#748077;line-height:1.7;font-size:13px;margin:0}.rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px;font-size:13px}.rules li{color:#a33b4b}.rules li:before{content:'○';margin-left:6px}.rules li.ok{color:#16805c}.rules li.ok:before{content:'✓'}.message{border-radius:11px;padding:13px;margin-bottom:18px;background:#eaf2ed;color:#1b4332}.message.error{background:#fff1f0;color:#9f3c45}.member-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:20px}.farm-card{border:1px solid #dae6dc;background:#f2f7f1;border-radius:13px;padding:15px;margin:0 0 16px}.farm-card strong{display:block;font-size:18px}.farm-card span{color:#61746a;font-size:13px}#farms-list:empty{display:none}footer{text-align:center;color:#839087;font-size:13px;padding:20px}[hidden]{display:none!important}@media(max-width:760px){.topbar{height:65px}.shell{margin:30px auto;grid-template-columns:1fr;gap:25px}.intro{padding-top:0}.intro h1{font-size:43px}.intro p{font-size:16px;margin-bottom:0}.steps{margin-top:16px}.panel{padding:20px}.form-grid{grid-template-columns:1fr}}

:root { color-scheme: light; }
button,input,select,textarea { font-family:inherit; }
.member-mode .shell { display:block; max-width:800px; margin:32px auto 5vh; }
.member-mode .intro { display:none; }
.verification-status { margin:0 0 18px; padding:12px 14px; border:1px solid #dce8dd; border-radius:12px; background:#f2f8f2; color:#1b4332; font-weight:700; }
.preview-link { display:block; text-align:center; color:#1b4332; font-size:13px; font-weight:700; margin:-8px 0 18px; }
.preview-mode { background:#f8fafc; }
.preview-shell { max-width:660px; margin:32px auto 70px; padding:0 18px; }
.preview-intro { text-align:center; margin-bottom:22px; }
.preview-intro h1 { font-size:30px; margin:6px 0; }
.preview-intro p { margin:0; color:#65766d; }
.topbar-logo { display:block; width:170px; height:auto; object-fit:contain; flex:none; }
.preview-back { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 16px; border-radius:14px; text-decoration:none; font-size:14px; font-weight:700; transition:background-color .2s,border-color .2s,transform .2s; }
.preview-back:hover { background:#f3f7f4; border-color:#9eb9a5; }
.preview-back:active { transform:scale(.98); }
@media(max-width:600px) { .topbar-logo { width:140px; } .preview-back { padding:9px 12px; font-size:12px; } }
.preview-panel { margin-bottom:25px; scroll-margin-top:24px; }
.preview-panel .auth-steps { margin-inline:auto; }
.preview-button { cursor:default; }

.topbar-actions { display:flex; align-items:center; gap:10px; }
.annotation-toggle { border:1px solid #1b4332; background:#1b4332; color:#fff; border-radius:11px; padding:9px 14px; font-size:13px; font-weight:700; line-height:1.4; }
.annotation-toggle:hover { background:#2d6a4f; }
.annotation-toggle[aria-pressed="true"] { background:#e9d8a6; color:#1b4332; border-color:#dec88e; }
.feedback-copy { border:1px solid #d5ded6; background:#fff; color:#1b4332; border-radius:11px; padding:9px 12px; font-size:13px; font-weight:700; }
.feedback-copy span { background:#e9d8a6; border-radius:99px; padding:1px 6px; margin-inline-start:5px; }
.feedback-notice { position:sticky; top:0; z-index:20; background:#e9d8a6; color:#1b4332; padding:11px 24px; text-align:center; font-size:14px; font-weight:700; }
.feedback-picking * { cursor:crosshair!important; }
.feedback-hover { outline:3px solid #b67440!important; outline-offset:3px; }
.feedback-dialog { border:1px solid #d5ded6; border-radius:16px; width:min(480px,calc(100vw - 30px)); padding:24px; color:#1b3329; background:#fffefa; box-shadow:0 24px 60px #172c2280; }
.feedback-dialog::backdrop { background:#172c2280; }
.feedback-dialog form { display:grid; gap:13px; }
.feedback-dialog h2 { margin:0; font-size:23px; }
.feedback-dialog label { font-weight:700; }
.feedback-dialog textarea { width:100%; resize:vertical; border:1px solid #d5ded6; border-radius:11px; padding:12px; font:inherit; }
.feedback-target { margin:0; color:#61746a; font-size:13px; overflow-wrap:anywhere; }
.feedback-actions { display:flex; justify-content:flex-end; gap:9px; }
.feedback-actions .primary { margin:0; min-height:42px; }
@media(max-width:600px) { .topbar { padding-inline:14px; } .brand { font-size:25px; } .topbar-actions { gap:6px; } .annotation-toggle { padding:8px; font-size:11px; } .environment { display:none; } }
@media(max-width:600px) { .feedback-copy { padding:8px; font-size:11px; } }
.location-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px; background:#f5f7f1; border:1px solid #dae6dc; border-radius:13px; }
.location-row strong { display:block; margin-bottom:5px; }
.edit-location { margin-top:11px; font-size:13px; }
.topbar-logout{min-height:36px;border-color:#d2e1d5;background:#fff;color:#184e38;font-size:12px;font-weight:800;white-space:nowrap}
.topbar-logout:hover{background:#eaf4ec;border-color:#9bc6aa}
.farm-card .open-dashboard{display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin-top:13px;border-color:#184e38;background:#184e38;color:#fff;text-decoration:none;font-size:13px;font-weight:800}
.farm-card .open-dashboard:hover{background:#2d6a4f}
.farm-card .edit-farm{margin:13px 9px 0 0;font-size:13px}
#location-dialog { width:100%; padding:16px; margin:20px 0 28px; border:1px solid #dfe6dc; border-radius:16px; color:#1b3329; background:#f8faf7; }
.map-head,.map-bottom,.map-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.map-head { margin-bottom:14px; }
.map-head h2 { margin:0 0 5px; font-size:24px; }
#close-map { font-size:23px; line-height:1; padding:5px 13px; }
#map-canvas { height:310px; position:relative; border-radius:13px; overflow:hidden; background:#e7ede8; }
#map-fallback,#map-google { position:absolute; inset:0; }
#map-fallback { cursor:grab; touch-action:none; user-select:none; overflow:hidden; }
#map-fallback:active { cursor:grabbing; }
#map-fallback img { position:absolute; width:256px; height:256px; pointer-events:none; }
#map-google { z-index:1; }
#map-google:not(.map-ready) { opacity:0; pointer-events:none; }
#map-attribution { position:absolute; z-index:3; bottom:3px; left:3px; color:#253f30; background:#ffffffe8; font-size:10px; padding:2px 5px; text-decoration:none; }
.map-controls { position:absolute; z-index:3; top:10px; left:10px; display:grid; gap:3px; }
.map-controls button { width:34px; height:34px; border:1px solid #cbd8cd; border-radius:8px; background:#fff; color:#1b4332; font-size:22px; }
#map-placeholder { position:absolute; inset:0; margin:0; padding:30px; display:grid; place-items:center; text-align:center; color:#60766a; background:#edf2ec; line-height:1.7; }
.map-pin { position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-95%); color:#c77243; font-size:49px; line-height:1; text-shadow:0 2px 5px #fff,0 3px 8px #1b43328a; pointer-events:none; }
.map-bottom { margin-top:13px; flex-wrap:wrap; }
.map-actions .primary { margin:0; min-height:41px; }
#map-coordinates { direction:ltr; color:#576c60; font-size:13px; }
.map-error { margin:8px 0; color:#9f3c45; background:#fff1f0; border-radius:9px; padding:10px; font-size:13px; }
.map-note { margin-top:12px; }
.map-note:empty { display:none; }
.map-link-row { display:grid; gap:7px; margin-top:13px; }
.map-link-row label { font-size:14px; font-weight:700; }
.map-link-row > div { display:flex; gap:8px; }
.map-link-row input { flex:1; min-width:0; border:1px solid #dcded6; border-radius:11px; padding:11px 13px; }
.map-link-row .hint a { color:#1b4332; font-weight:700; }
#map-search { margin:0 0 12px; }
#map-search-results { display:grid; gap:4px; padding:0; margin:0; list-style:none; }
#map-search-results button { width:100%; text-align:start; }
@media(max-width:600px) { .location-row,.map-bottom { align-items:stretch; flex-direction:column; } .map-actions { width:100%; } .map-actions button { flex:1; } }

.species-field { margin:0; padding:13px; border:1px solid #e1e7e1; border-radius:13px; }
.species-field legend { padding:0 5px; font-size:14px; font-weight:700; }
.species-field legend small { color:#748077; font-size:12px; font-weight:400; }
.species-options { display:flex; flex-wrap:wrap; gap:8px; }
.species-options label { display:flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid #dce5dc; border-radius:10px; background:#f8faf8; cursor:pointer; }
.species-options input { width:auto; min-height:auto; margin:0; accent-color:#1b4332; }
.sites-editor { display:grid; gap:12px; }
.site-entry { display:grid; gap:11px; border:1px solid #e1e7e1; border-radius:15px; padding:15px; background:#fdfefc; }
.site-heading { display:flex; justify-content:space-between; align-items:center; }
.site-heading strong { color:#1b4332; }
.site-heading .text-button { margin:0; }
#add-site { justify-self:start; }

/* Account access: compact layout shared by registration, login and recovery. */
.guest-mode { background:#f8fafc; }
.guest-mode .topbar { background:#fff; border-color:#e8ece9; }
.guest-mode .shell { display:block; max-width:480px; margin:clamp(22px,5vh,56px) auto 24px; padding:0 18px; }
.guest-mode .intro { display:none; }
.guest-mode .panel { padding:28px; border:1px solid #edf0ed; border-radius:22px; box-shadow:0 16px 42px #14392b0d; }
.guest-mode .tabs { background:#f3f5f6; border-radius:14px; padding:5px; margin-bottom:23px; }
.guest-mode .tab { min-height:39px; border-radius:10px; font-size:13px; color:#64756b; }
.guest-mode .tab.active { color:#1b4332; background:white; box-shadow:0 1px 6px #223b3010; }
.guest-mode .form { gap:13px; }
.auth-steps { display:flex; align-items:center; justify-content:space-between; gap:2px; max-width:318px; margin:2px auto 14px; padding:3px 5px; border:1px solid #e8edf2; border-radius:40px; background:#f8fafc; font-size:11px; color:#8896a7; }
.auth-steps span { display:inline-flex; align-items:center; gap:4px; border-radius:30px; padding:5px 9px; white-space:nowrap; }
.auth-steps span b { display:inline-grid; place-items:center; min-width:17px; height:17px; padding:0 3px; border-radius:50%; background:#e9eef7; color:#697b99; font-size:10px; font-weight:800; }
.auth-steps .current { color:#fff; background:#1b4332; font-weight:800; }
.auth-steps .current b { color:#1b4332; background:#fff; }
.auth-heading { text-align:center; margin:7px 0 4px; }
.auth-heading h2 { font-size:25px; color:#18382d; margin:0 0 5px; font-weight:800; }
.auth-heading p { margin:0; color:#829188; font-size:13px; line-height:1.6; }
.social-row { display:grid; gap:8px; }
.social-button { min-height:44px; display:flex; align-items:center; justify-content:center; gap:8px; background:#fff; color:#25314a; border:1px solid #d9e3dc; border-radius:11px; font-size:14px; font-weight:700; }
.social-button:hover:not(:disabled) { background:#f5f7f6; border-color:#718077; }
.social-button:focus-visible { outline:2px solid #1e5e44; outline-offset:2px; }
.social-button:disabled { opacity:.65; cursor:wait; }
.social-icon { display:block; width:16px; height:16px; flex:none; }
.auth-divider { display:flex; align-items:center; gap:10px; color:#52665a; font-size:12px; text-align:center; }
.auth-divider::before,.auth-divider::after { content:''; height:1px; flex:1; background:#e8eeea; }
.method-tabs { min-height:40px; display:flex; align-items:center; gap:4px; background:#f5f7f6; border:1px solid #e9eeeb; border-radius:12px; padding:4px 10px; font-size:12px; }
.method-tabs span { margin-inline-end:auto; color:#4e6657; }
.method { border:0; background:transparent; color:#66796c; border-radius:8px; padding:6px 9px; font-size:11px; font-weight:700; }
.method.active { color:#1b4332; background:#fff; box-shadow:0 1px 4px #1b433216; }
.guest-mode .form label { font-size:12px; gap:6px; color:#304b3b; }
.guest-mode .form input { min-height:42px; padding:10px 13px; font-size:13px; background:#fafbfa; border-color:#e4ebe6; border-radius:11px; }
.guest-mode .form input::placeholder { color:#a1ada5; }
.password-field { display:flex; align-items:center; position:relative; }
.password-field input { padding-inline-end:46px!important; }
.password-toggle { position:absolute; inset-inline-end:5px; width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:#8a9a8e; }
.password-toggle:hover { background:#eaf2ed; color:#1b4332; }
.guest-mode .rules { gap:5px 10px; font-size:11px; }
.guest-mode .primary { min-height:45px; margin-top:3px; border-radius:11px; font-size:13px; box-shadow:0 5px 10px #1b433226; }
.text-button { justify-self:start; padding:0; border:0; background:none; color:#2d6a4f; font-size:12px; font-weight:800; }
.text-button:hover { text-decoration:underline; }
.guest-mode footer { font-size:11px; color:#98a59d; }
@media(max-width:480px) { .guest-mode .shell { margin:22px auto; padding-inline:12px; } .guest-mode .panel { padding:20px 17px; } .auth-heading h2 { font-size:22px; } .guest-mode .brand { font-size:22px; } }

/* Shared onboarding controls: account, verification, and farm details. */
:root { --onboarding-focus:#1E5E44; --onboarding-ring:rgba(30,94,68,.12); --onboarding-glow:rgba(20,56,44,.35); }
.form .field-label { display:inline; }
.form label:has(input[required],select[required]) > .field-label::after { content:' *'; color:#bc6a42; font-size:15px; line-height:1; }
.required-star { color:#bc6a42; font-size:15px; }
:is(.guest-mode,.member-mode,.preview-mode) .form label { color:#1E293B; font-weight:700; }
:is(.guest-mode,.member-mode,.preview-mode) .form input:not([type="checkbox"]):not([type="hidden"]):not(.otp-digit),
:is(.guest-mode,.member-mode,.preview-mode) .form select,
:is(.guest-mode,.member-mode,.preview-mode) .map-link-row input {
  min-height:48px; border:1px solid #E2E8F0; border-radius:14px; background-color:#fff;
  color:#1E293B; padding:11px 43px 11px 15px; background-repeat:no-repeat;
  background-position:right 15px center; background-size:19px 19px;
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}
:is(.guest-mode,.member-mode,.preview-mode) .form input[dir="ltr"]:not([type="checkbox"]),
:is(.guest-mode,.member-mode,.preview-mode) .map-link-row input[dir="ltr"] {
  padding:11px 15px 11px 43px; background-position:left 15px center;
}
:is(.guest-mode,.member-mode,.preview-mode) .form input::placeholder,
:is(.guest-mode,.member-mode,.preview-mode) .map-link-row input::placeholder { color:#94A3B8; opacity:1; }
:is(.guest-mode,.member-mode,.preview-mode) .form input:not([type="checkbox"]):focus,
:is(.guest-mode,.member-mode,.preview-mode) .form select:focus,
:is(.guest-mode,.member-mode,.preview-mode) .map-link-row input:focus {
  border-color:#1E5E44; box-shadow:0 0 0 4px var(--onboarding-ring); outline:none;
}
:is(.guest-mode,.member-mode,.preview-mode) .form input:is(:disabled,[readonly]),
:is(.guest-mode,.member-mode,.preview-mode) .form select:disabled { background-color:#F8FAFC; }
:is(.guest-mode,.member-mode,.preview-mode) .form .password-field input { padding-inline-end:46px; }
:is(.guest-mode,.member-mode,.preview-mode) .primary,
.preview-button {
  position:relative; isolation:isolate; overflow:hidden; border:0; border-radius:14px;
  background:linear-gradient(to left,#184E38,#0F3324); color:#fff;
  box-shadow:0 7px 16px rgba(20,56,44,.2);
  transition:transform .23s ease,box-shadow .23s ease,filter .23s ease;
}
:is(.guest-mode,.member-mode,.preview-mode) .primary::before,
.preview-button::before {
  content:''; pointer-events:none; position:absolute; inset:-25% auto -25% 0; width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:translateX(380%) skewX(-18deg); animation:onboarding-sweep 6s ease-in-out infinite;
}
@keyframes onboarding-sweep { 0%,72% { transform:translateX(380%) skewX(-18deg); } 90%,100% { transform:translateX(-380%) skewX(-18deg); } }
:is(.guest-mode,.member-mode,.preview-mode) .primary:not(:disabled):hover,
.preview-button:hover { transform:translateY(-3px); box-shadow:0 13px 25px var(--onboarding-glow); filter:brightness(1.05); }
:is(.guest-mode,.member-mode,.preview-mode) .primary:not(:disabled):active { transform:translateY(-1px) scale(.99); box-shadow:0 6px 15px var(--onboarding-glow); }
:is(.guest-mode,.member-mode,.preview-mode) .primary:focus-visible { outline:3px solid #77b89d; outline-offset:3px; }
@media(prefers-reduced-motion:reduce) { :is(.guest-mode,.member-mode,.preview-mode) .primary::before,.preview-button::before { animation:none; } :is(.guest-mode,.member-mode,.preview-mode) .primary,.preview-button { transition:none; } }

/* Quiet leading icons in the three onboarding steps. */
:is(.guest-mode,.member-mode,.preview-mode) .form :is([name="displayName"]) { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%2394A3B8'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'8'%20r%3D'3.2'%2F%3E%3Cpath%20d%3D'M5.5%2020v-1.4a6.5%206.5%200%200%201%2013%200V20'%2F%3E%3C%2Fsvg%3E"); }
:is(.guest-mode,.member-mode,.preview-mode) .form :is(input[type="email"],[name="identifier"]) { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%2394A3B8'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'5'%20width%3D'18'%20height%3D'14'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'm4%207%208%206%208-6'%2F%3E%3C%2Fsvg%3E"); }
:is(.guest-mode,.member-mode,.preview-mode) .form :is(input[type="tel"]) { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%2394A3B8'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%203h4l1%204-2.3%201.4a15%2015%200%200%200%206.9%206.9L17%2012l4%201v4a3%203%200%200%201-3.4%203A16%2016%200%200%201%204%206.4%203%203%200%200%201%206%203Z'%2F%3E%3C%2Fsvg%3E"); }
:is(.guest-mode,.member-mode,.preview-mode) .form :is(input[type="password"]) { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%2394A3B8'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'5'%20y%3D'10'%20width%3D'14'%20height%3D'11'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M8%2010V7a4%204%200%200%201%208%200v3M12%2014v3'%2F%3E%3C%2Fsvg%3E"); }
:is(.guest-mode,.member-mode,.preview-mode) .form :is(#verification-token,#reset-token,[data-icon="code"],#step2-preview input) { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%2394A3B8'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'm8%208-4%204%204%204m8-8%204%204-4%204M14%205l-4%2014'%2F%3E%3C%2Fsvg%3E"); }
:is(.guest-mode,.member-mode,.preview-mode) .form :is(#farm-form [name="name"],[data-icon="farm"]) { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%2394A3B8'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'm3%2010%209-7%209%207v10H3V10Z'%2F%3E%3Cpath%20d%3D'M9%2020v-7h6v7M3%2010h18'%2F%3E%3C%2Fsvg%3E"); }
:is(.guest-mode,.member-mode,.preview-mode) .form :is(#farm-form [name="city"],[data-icon="city"]) { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%2394A3B8'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2020V8l6-3v15m0-10%2010-3v13M7%2010v1m0%203v1m6-3v1m4-2v1m-4%204v1m4-1v1'%2F%3E%3C%2Fsvg%3E"); }
:is(.guest-mode,.member-mode,.preview-mode) .form :is([name="estimatedHeadCount"],[data-icon="herd"]) { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%2394A3B8'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%209h15l2%203v5h-2l-1-3H7l-1%203H4l-1-8ZM5%209V6l3-2%203%202v3m8%200%202-2M8%2017v3m9-3v3'%2F%3E%3C%2Fsvg%3E"); }
:is(.guest-mode,.member-mode,.preview-mode) .form :is(.site-name,[data-icon="pin"]) { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%2394A3B8'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20%2010c0%205-8%2011-8%2011S4%2015%204%2010a8%208%200%201%201%2016%200Z'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'10'%20r%3D'2.5'%2F%3E%3C%2Fsvg%3E"); }
:is(.guest-mode,.member-mode,.preview-mode) .form :is(#plan-select,[data-icon="plan"]) { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%2394A3B8'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'4'%20y%3D'5'%20width%3D'16'%20height%3D'15'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M8%2010h8M8%2014h8M8%2017h5'%2F%3E%3C%2Fsvg%3E"); }
/* Visual language adapted from the supplied farm step reference. */
:is(.guest-mode,.member-mode,.preview-mode) {
  background-color:#f6f8f7;
  background-image:radial-gradient(#14382c0a 1px,transparent 1px);
  background-size:24px 24px;
}
:is(.guest-mode,.preview-mode) .panel,
.member-mode .panel {
  position:relative;
  overflow:hidden;
  border:1px solid #14382c0d;
  border-radius:32px;
  background:#fff;
  box-shadow:0 22px 55px #14382c12,0 4px 15px #14382c08;
}
:is(.guest-mode,.preview-mode) .panel::before,
.member-mode .panel::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:6px;
  background:linear-gradient(to left,#059669,#14b8a6,#14382c);
}
.member-mode .shell { max-width:720px; }
.member-mode .panel { padding:clamp(22px,4vw,40px); }
.preview-shell { max-width:710px; }
.preview-panel { padding:clamp(22px,4vw,40px); }
.auth-steps {
  max-width:385px;
  gap:6px;
  margin:4px auto 25px;
  padding:5px;
  border-color:#e7eced;
  background:#f8fafc;
  font-size:12px;
}
.auth-steps > span { position:relative; padding:6px 11px; }
.auth-steps > span:not(:last-child)::after {
  content:"";
  position:absolute;
  inset-inline-end:-8px;
  top:50%;
  width:9px;
  height:2px;
  background:#dbe4e3;
  transform:translateY(-50%);
}
.auth-steps > span.current { background:#14382c; }
.auth-steps > span.current b { background:#fff; color:#14382c; }
.auth-steps:has(>span:nth-child(2).current) > span:first-child,
.auth-steps:has(>span:nth-child(3).current) > span:nth-child(-n+2) { color:#147d5a; }
.auth-steps:has(>span:nth-child(2).current) > span:first-child b,
.auth-steps:has(>span:nth-child(3).current) > span:nth-child(-n+2) b { font-size:0; color:#fff; background:#169d70; }
.auth-steps:has(>span:nth-child(2).current) > span:first-child b::after,
.auth-steps:has(>span:nth-child(3).current) > span:nth-child(-n+2) b::after { content:"✓"; font-size:12px; }
.auth-heading { margin-bottom:10px; }
.auth-kicker {
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:12px;
  padding:7px 12px;
  border-radius:99px;
  background:#ecfdf5;
  color:#087c57;
  font-size:12px;
  font-weight:800;
}
.auth-kicker::before { content:""; width:6px; height:6px; border-radius:50%; background:#10b981; }
.auth-heading h2 { color:#14382c; font-size:clamp(26px,3.6vw,34px); line-height:1.2; }
.auth-heading p { color:#718096; font-size:14px; }
#approval-result { display:grid; justify-items:center; gap:16px; }
#approval-result h2 { margin:0; }
#approval-result p { max-inline-size:44ch; }
#approval-result .primary { display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; margin:0; text-decoration:none; }
.message.pending { background:#fff7e8; color:#744b1e; }
#farm-form,.preview-mode #step3 .form { gap:21px; }
#farm-form .form-grid,.preview-mode #step3 .form-grid { gap:17px; }
#farm-form label,.preview-mode #step3 label { gap:8px; }
:is(#farm-form,.preview-mode #step3 .form) input:not([type="checkbox"]):not([type="hidden"]),
:is(#farm-form,.preview-mode #step3 .form) select { min-height:52px; background-color:#f8fafc; border-radius:16px; }
:is(#farm-form,.preview-mode #step3 .form) input:not([type="checkbox"]):focus,
:is(#farm-form,.preview-mode #step3 .form) select:focus { background-color:#fff; }
.species-field { padding:0; border:0; }
.species-field legend { padding:0; color:#1e293b; font-size:14px; }
.species-field legend small { margin-inline-start:8px; color:#94a3b8; font-size:12px; }
.species-count { display:block; margin-top:7px; color:#148061; font-size:12px; font-weight:700; }
.species-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:12px; }
.species-options label {
  position:relative;
  justify-content:center;
  flex-direction:column;
  gap:3px;
  min-height:83px;
  padding:12px 5px;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#fff;
  color:#334155;
  font-size:13px;
  font-weight:800;
  transition:border-color .2s,background-color .2s,transform .2s,box-shadow .2s;
}
.species-options label:hover { transform:translateY(-2px); border-color:#86c7ae; box-shadow:0 6px 16px #14382c10; }
.species-options label:has(input:checked) { border-color:#16a375; background:#effbf5; color:#0f674b; }
.species-options label:has(input:focus-visible) { outline:3px solid #7ac6a8; outline-offset:2px; }
.species-options input { position:absolute; width:1px; height:1px; opacity:0; }
.species-icon { font-size:27px; line-height:1.1; }
.species-check { display:none; position:absolute; top:8px; inset-inline-start:8px; width:17px; height:17px; border-radius:50%; color:#fff; background:#16a375; font-size:11px; text-align:center; }
.species-options label:has(input:checked) .species-check { display:block; }
.plan-upgrade { float:left; color:#708578; font-size:12px; font-weight:500; }
.site-entry { gap:17px; padding:22px; border:1px solid #dceee4; border-radius:24px; background:#f2faf5; }
.site-heading { gap:14px; }
.site-title { display:flex; align-items:center; gap:11px; min-width:0; }
.site-title strong { display:block; color:#14382c; font-size:16px; }
.site-title small { display:block; color:#698275; font-size:11px; line-height:1.5; }
.site-icon { display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:13px; background:#d9f3e5; color:#087c57; font-size:27px; }
.site-index { flex:none; padding:6px 10px; border:1px solid #d4e9dc; border-radius:99px; background:#fff; color:#426852; font-size:11px; font-weight:800; }
.site-map-art { position:relative; display:grid; place-content:center; justify-items:center; gap:3px; min-height:115px; overflow:hidden; border:1px solid #d8e9de; border-radius:17px; background-color:#eaf2ed; background-image:radial-gradient(#1e4d3d15 1.5px,transparent 1.5px),linear-gradient(to right,#14382c08 1px,transparent 1px),linear-gradient(to bottom,#14382c08 1px,transparent 1px); background-size:18px 18px,36px 36px,36px 36px; color:#4e7561; }
.site-map-marker { display:grid; place-items:center; width:34px; height:34px; border:6px solid #ffffffa8; border-radius:50%; background:#1b8d65; color:#fff; font-size:22px; line-height:1; box-shadow:0 4px 12px #14382c33; }
.site-map-caption { font-size:12px; font-weight:700; }
.site-map-art.has-location { background-color:#e5f6eb; }
.site-entry .location-row { padding:0; border:0; background:transparent; }
.site-entry .location-row strong { color:#14382c; font-size:13px; }
.site-entry .outline { border-color:#b6dcca; color:#0d714f; font-weight:800; }
.site-entry #location-dialog { padding:0; margin:0; border:0; background:transparent; min-width:0; }
.site-entry .map-head h2 { font-size:17px; }
.site-entry #map-canvas { height:clamp(220px,44svh,310px); }
.site-entry .map-actions button,.site-entry .map-link-row button,.site-entry .location-row > button { min-height:44px; }
.site-entry .map-controls button { width:44px; height:44px; }
.site-entry .map-link-row > div > button { flex:none; }
#farm-submit,.preview-mode #step3 .preview-button { min-height:58px; justify-content:center; gap:12px; font-size:16px; }
#farm-submit > span,.preview-mode #step3 .preview-button > span { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#ffffff26; }
@media(max-width:600px) {
  :is(.guest-mode,.preview-mode) .panel,.member-mode .panel { border-radius:24px; }
  .member-mode .panel,.preview-panel { padding:22px 17px; }
  .species-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .site-entry { padding:17px; }
  .site-heading { align-items:flex-start; }
  .site-title small { max-width:190px; }
}

/* Six-digit verification, shared by email and phone. */
#verify-form,.preview-mode #step2 .form,#step2-preview { gap:18px; }
.verify-icon {
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  margin:2px auto 0;
  border:1px solid #bce5d0;
  border-radius:22px;
  background:linear-gradient(145deg,#f1fdf6,#e1f4ea);
  color:#184e38;
  box-shadow:0 0 0 10px #e8f9ee80,0 8px 25px #0f332412;
}
.verify-icon svg { width:36px; height:36px; }
#verify-form:not([data-method="phone"]) .verify-phone-icon,
#verify-form[data-method="phone"] .verify-email-icon { display:none; }
.verify-target {
  display:inline-block;
  max-width:100%;
  margin-top:11px;
  padding:7px 14px;
  border:1px solid #e2e8f0;
  border-radius:99px;
  background:#f8fafc;
  color:#1e293b;
  font-size:13px;
  font-weight:800;
  overflow-wrap:anywhere;
}
.verify-target:empty { display:none; }
.otp-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#1e293b; font-size:13px; font-weight:800; }
.otp-expiry { padding:5px 10px; border:1px solid #d5f0e2; border-radius:99px; background:#ecfdf5; color:#087c57; font-size:11px; white-space:nowrap; }
.otp-expiry time { display:inline-block; margin-inline-start:4px; font-variant-numeric:tabular-nums; font-weight:800; }
.otp-expiry.expired { border-color:#fecdd3; background:#fff1f2; color:#be123c; }
.otp-digits { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; width:100%; max-width:410px; margin:0 auto; }
:is(.guest-mode,.member-mode,.preview-mode) .form .otp-digits input,
.otp-digits span {
  display:grid;
  place-items:center;
  width:100%;
  min-width:0;
  height:60px;
  min-height:60px;
  padding:0;
  border:2px solid #e2e8f0;
  border-radius:15px;
  background:#f8fafc;
  color:#14382c;
  text-align:center;
  font-family:inherit;
  font-size:26px;
  font-weight:800;
  box-sizing:border-box;
}
:is(.guest-mode,.member-mode,.preview-mode) .form .otp-digits input:focus { background:#fff; border-color:#1e5e44; box-shadow:0 0 0 4px #1e5e441f; outline:none; }
.otp-digits span { color:#abc2b3; }
.demo-code-note { margin:0; padding:12px 14px; border:1px solid #f0e2bf; border-radius:13px; background:#fffaf0; color:#685b3a; text-align:center; font-size:12px; line-height:1.6; }
.demo-code-note strong { display:inline-block; margin-inline-start:5px; color:#14382c; font-size:16px; letter-spacing:3px; }
#verify-form > .primary,.preview-mode #step2 .preview-button { justify-content:center; gap:12px; min-height:56px; font-size:14px; }
#verify-form > .primary span,.preview-mode #step2 .preview-button span { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#ffffff26; }
@media(max-width:480px) {
  .otp-digits { gap:6px; }
  :is(.guest-mode,.member-mode,.preview-mode) .form .otp-digits input,.otp-digits span { height:51px; min-height:51px; border-radius:12px; font-size:22px; }
  .otp-heading { font-size:12px; }
}