* {
  box-sizing: border-box;
}

/* ---------- Plan selector buttons (premium modal) ---------- */
.plan-btn {
  flex: 1;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  line-height: 1.3;
}
.plan-btn:hover {
  border-color: #7CB342;
}
.plan-btn-active {
  border-color: #7CB342;
  background: #f0fdf4;
}
body.dark-mode .plan-btn {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
body.dark-mode .plan-btn-active {
  border-color: #7CB342;
  background: #0f2a14;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont;
  background: #f1f5f9;
  color: #0f172a;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Header ---------- */
header {
  height: 56px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid #e2e8f0;
  gap: 16px;
}

.logo {
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 20px;
  color: #7CB342;
  white-space: nowrap;
}

.header-center {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  justify-content: center;
}

.weather-badge {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #f59e0b;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.3s;
}


.level-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  border: 1px solid #a78bfa;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.xp-bar {
  width: 120px;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #6d28d9);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.xp-text {
  font-size: 12px;
  color: #6b7280;
}

nav {
  display: flex;
  align-items: center;
}

nav button,
nav select {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  padding: 6px 12px;
  margin-left: 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}

nav button:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

/* ---------- Main Content Layout ---------- */
.content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ---------- Panels ---------- */
.panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#leftPanel {
  width: 30%;
  min-width: 280px;
}

#rightPanel {
  position: relative;
  flex: 1;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#farmContainer {
  position: relative;
  flex: 1;
  width: 100%;
}

#farmCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Divider ---------- */
#divider {
  width: 6px;
  cursor: col-resize;
  background: #cbd5e1;
  transition: background 0.15s;
}

#divider:hover {
  background: #94a3b8;
}

/* ---------- Panel Title ---------- */
.panel-title {
  z-index: 10;
  background: rgba(248, 250, 252, 0.95);
  border-bottom: 1px solid #e2e8f0;
  padding: 8px 12px;
  font-size: 14px;
  color: #475569;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-title button {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

.panel-title button:hover:not(:disabled) {
  background: #e2e8f0;
}

.panel-title button:disabled {
  opacity: 0.4;
  cursor: default;
}

#resource {
  font-weight: bold;
  color: #b45309;
  display: inline-block;
  transition: transform 0.1s ease-out;
}

/* ---------- Editor ---------- */
#editor {
  flex: 1;
}

/* ---------- Console ---------- */
.console {
  height: 120px;
  background: #020617;
  color: #22c55e;
  font-family: Consolas, Monaco, monospace;
  font-size: 13px;
  padding: 8px;
  overflow-y: auto;
  border-top: 1px solid #e2e8f0;
  white-space: pre-wrap;
}

/* ---------- Canvas ---------- */
canvas {
  position: absolute;
  inset: 0;
  margin: auto;
  background: transparent;
  cursor: default;
  width: 100%;
  height: 100%;
}

/* ---------- Monaco current line highlight ---------- */
.current-line-highlight {
  background-color: rgba(255, 255, 0, 0.3);
}

.error-line-highlight {
  background-color: rgba(239, 68, 68, 0.3);
}

/* ---------- Tooltip ---------- */
.tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
  max-width: 220px;
  transform: translate(-50%, -100%);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.1);
}

.tooltip.hidden {
  display: none;
}

.tick {
  color: #2ecc71;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(46, 204, 113, 0.6);
}

/* ---------- Mission Panel ---------- */
#missionPanel {
  border-top: 2px solid #e2e8f0;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  max-height: 170px;
  overflow-y: auto;
  flex-shrink: 0;
}

.mission-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  border-bottom: 1px solid #e2e8f0;
  background: rgba(248,250,252,0.95);
  position: sticky;
  top: 0;
}

.mission-progress {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

#missionContent {
  padding: 8px 12px;
}

.mission-body {
  display: flex;
  gap: 0;
  align-items: flex-start;
}

.mission-left {
  flex: 1;
  min-width: 0;
}

.mission-right {
  flex: 0 0 auto;
  width: 230px;
  padding-left: 10px;
  border-left: 1px solid #e2e8f0;
  margin-left: 10px;
}

body.dark-mode .mission-right {
  border-left-color: #334155;
}

.mission-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
}
.mission-premium-tag {
  display: inline-block;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1c1008;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 5px;
}

.mission-desc {
  font-size: 13px;
  color: #475569;
  margin-bottom: 4px;
  line-height: 1.4;
}

.mission-concept {
  display: inline-block;
  font-size: 12px;
  background: #dbeafe;
  color: #1d4ed8;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  margin-bottom: 4px;
}

.mission-syntax {
  /* spacing handled by .mission-right column */
}
.mission-syntax-label {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 3px;
}
.mission-syntax pre {
  margin: 0;
  padding: 6px 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.5;
  color: #1e293b;
  overflow-x: hidden;
  white-space: pre-wrap;
  word-break: break-all;
}
body.dark-mode .mission-syntax pre {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}

.mission-reward {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
}

.mission-hint-wrapper {
  margin-top: 4px;
}

.hint-btn {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.hint-btn:hover {
  background: #fde68a;
}

.mission-hint {
  margin-top: 6px;
  padding: 8px 10px;
  background: #1e293b;
  color: #a5f3fc;
  border-radius: 6px;
  font-size: 12px;
  font-family: Consolas, Monaco, monospace;
  line-height: 1.5;
  white-space: pre-wrap;
}

.mission-hint.hidden {
  display: none;
}

.mission-complete-msg {
  text-align: center;
  padding: 16px;
  font-size: 14px;
  color: #16a34a;
  font-weight: 600;
}

/* ---------- Modals ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(2px);
}

.modal.hidden {
  display: none;
}
.auth-form.hidden {
  display: none;
}
.hidden {
  display: none !important;
}

.modal-content {
  background: #fff;
  border-radius: 12px;
  width: min(560px, 90vw);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.achieve-modal-content {
  width: min(780px, 92vw);
}

.crop-modal-content {
  width: min(820px, 96vw);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  background: #fff;
  border-radius: 12px 12px 0 0;
  z-index: 2;
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #64748b;
  padding: 0 4px;
  position: relative;
  z-index: 3;
}

.modal-close:hover {
  color: #1e293b;
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid #e2e8f0;
}

/* ---------- Share modal ---------- */
.share-modal-content {
  width: 92vw;
  max-width: 460px;
}
body.dark-mode #sharePreviewImg { border-color: #334155; }
.share-platform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.share-platform-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.share-platform-btn:hover { opacity: 0.85; }
.spi { font-size: 15px; line-height: 1; }
#shareNative    { background: #7CB342; justify-content: center; }
#shareTwitter   { background: #000; }
#shareWhatsApp  { background: #25D366; }
#shareTelegram  { background: #2CA5E0; }
#shareWeChat    { background: #07C160; }
#shareInstagram { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
#shareEmail     { background: #EA4335; }
#shareCopyLink  { background: #475569; }
#shareDownload  { background: #6366f1; }


.modal-footer h3 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #334155;
}

.func-ref {
  font-size: 13px;
  color: #475569;
}

.func-ref code {
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #7c3aed;
}

.func-section-header {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 10px 0 4px;
}

.func-section-premium { color: #f59e0b; }

.func-row {
  border-bottom: 1px solid #f1f5f9;
}

.func-row-main {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  line-height: 1.5;
}

.func-brief {
  flex: 1;
  color: #64748b;
  font-size: 12px;
}

.func-toggle {
  flex-shrink: 0;
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  cursor: pointer;
  color: #94a3b8;
  line-height: 1.4;
}

.func-toggle:hover { background: #f1f5f9; color: #475569; }

.func-detail {
  padding: 6px 8px 8px 8px;
  margin-bottom: 2px;
  background: #f8fafc;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.7;
  color: #475569;
}

.func-detail.hidden { display: none; }

/* ---------- Crop List / Table ---------- */
.crop-list {
  display: block;
  overflow-x: auto;
  padding: 0 0 8px;
}

.crop-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.crop-table thead th {
  background: #f8fafc;
  padding: 9px 14px;
  text-align: left;
  font-weight: 600;
  color: #475569;
  border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
}

.crop-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.crop-row:hover td {
  background: #f0fdf4;
}

.crop-row.crop-locked td {
  opacity: 0.6;
}

.crop-row.crop-locked:hover td {
  background: transparent;
}

.crop-row.crop-row-premium {
  cursor: pointer;
}

.crop-row.crop-row-premium:hover td {
  background: #fef9ed;
}

.crop-tc-name {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.crop-emoji {
  font-size: 28px;
  line-height: 1;
}

.crop-name-text {
  font-weight: 600;
  font-size: 13px;
  text-transform: capitalize;
}

.crop-tc-num {
  white-space: nowrap;
  color: #64748b;
}

.crop-profit {
  color: #16a34a;
  font-weight: 600;
  white-space: nowrap;
}

.crop-tc-weather {
  white-space: nowrap;
}

.wb-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin: 1px 2px 1px 0;
  white-space: nowrap;
  position: relative;
  cursor: default;
}

.wb-pos {
  background: #dcfce7;
  color: #15803d;
}

.wb-neg {
  background: #fee2e2;
  color: #b91c1c;
}

.wb-balanced {
  font-size: 12px;
  color: #94a3b8;
}

.wb-badge[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 200;
}

.wb-badge[data-tip]:hover::after {
  opacity: 1;
}

.crop-tag-locked {
  background: linear-gradient(135deg, #94a3b8, #64748b) !important;
}

.crop-tag-premium {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}

.crop-pick-premium-locked {
  opacity: 0.65;
}

.crop-pick-premium-locked:hover {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
}

body.dark-mode .crop-pick-premium-locked:hover {
  background: #3d2a00 !important;
  border-color: #f59e0b !important;
}

.crop-name {
  font-weight: 700;
  font-size: 14px;
  text-transform: capitalize;
  margin-bottom: 4px;
}

.crop-tag {
  display: inline-block;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---------- Market List ---------- */
.market-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  padding: 16px 20px;
}

.market-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.15s;
}

.market-card:hover {
  border-color: #f59e0b;
  background: #fffbeb;
}

.market-emoji {
  font-size: 28px;
}

.market-name {
  font-weight: 700;
  font-size: 13px;
  text-transform: capitalize;
  margin-bottom: 2px;
}

.market-price {
  font-size: 12px;
  color: #64748b;
}

.market-price .price-up {
  color: #22c55e;
  font-weight: 600;
}

.market-price .price-down {
  color: #ef4444;
  font-weight: 600;
}

.market-price .price-normal {
  color: #f59e0b;
  font-weight: 600;
}

.market-info code {
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #7c3aed;
}

/* ---------- Achievement List ---------- */
.achieve-list {
  padding: 12px 16px;
}

.achieve-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.achieve-column {
  min-width: 0;
}

.achieve-col-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}

.achieve-col-farm {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  color: #166534;
  border: 1px solid #86efac;
}

.achieve-col-python {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.achieve-col-icon {
  font-size: 18px;
}

.achieve-col-count {
  margin-left: auto;
  font-size: 12px;
  opacity: 0.7;
  font-weight: 600;
}

.achieve-col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.achieve-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  transition: all 0.2s;
}

.achieve-card.locked {
  opacity: 0.4;
  filter: grayscale(0.8);
}

.achieve-card.unlocked {
  border-color: #f59e0b;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
}

.achieve-emoji {
  font-size: 32px;
  display: block;
  margin-bottom: 6px;
}

.achieve-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
}

.achieve-desc {
  font-size: 12px;
  color: #64748b;
}

/* ---------- Panel Title Right Group ---------- */
.panel-title-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Pest Badge ---------- */
.pest-badge {
  background: #fef2f2;
  border: 1px solid #ef4444;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #ef4444;
  animation: pestPulse 2s infinite;
}

.pest-badge.hidden {
  display: none;
}

@keyframes pestPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ---------- Toast Notifications ---------- */
.toast-container {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: #1e293b;
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  animation: toastIn 0.4s ease, toastOut 0.4s ease 3s forwards;
  max-width: 340px;
  pointer-events: auto;
}

.toast-mission {
  border-left: 4px solid #22c55e;
}

.toast-achieve {
  border-left: 4px solid #f59e0b;
}

.toast-pest {
  border-left: 4px solid #ef4444;
  background: linear-gradient(135deg, #451a03, #7f1d1d);
}


.toast-market {
  border-left: 4px solid #f59e0b;
  background: linear-gradient(135deg, #78350f, #92400e);
}

.toast-levelup {
  border-left: 4px solid #8b5cf6;
  background: linear-gradient(135deg, #1e1b4b, #312e81);
}

.toast-title {
  font-weight: 700;
  margin-bottom: 2px;
}

.toast-detail {
  font-size: 12px;
  color: #94a3b8;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(80px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  from { opacity: 1; }
  to { opacity: 0; transform: translateY(-20px); }
}

/* ---------- About Panel ---------- */
#aboutWrapper {
  position: relative;
}

#aboutPanel {
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
}

#aboutPanel.hidden {
  display: none;
}

#aboutPanel b {
  font-size: 14px;
  color: #0f172a;
}

/* ---------- Settings Panel ---------- */
#settingsWrapper {
  position: relative;
  display: inline-block;
}

#settingsBtn {
  font-size: 16px;
  padding: 6px 10px;
  line-height: 1;
}

#settingsPanel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.06);
  z-index: 1000;
  animation: settingsFadeIn 0.15s ease-out;
}

#settingsPanel.hidden {
  display: none;
}

@keyframes settingsFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.settings-item {
  display: flex;
  align-items: center;
}

.settings-item button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  color: #334155;
  transition: background 0.1s;
  margin-left: 0;
}

.settings-item button:hover {
  background: #f1f5f9;
}

.settings-lang-item {
  padding: 4px 12px;
  gap: 8px;
}

.settings-lang-label {
  font-size: 14px;
}

.settings-lang-item select {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 13px;
  color: #334155;
  background: #fff;
  cursor: pointer;
  margin-left: 0;
}

.settings-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 4px 8px;
}

.welcome-content {
  width: min(440px, 90vw);
  animation: welcomeIn 0.5s ease;
}

.welcome-content button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(34,197,94,0.4);
}

@keyframes welcomeIn {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- Auth Area ---------- */
#authArea {
  display: flex;
  align-items: center;
}

#authModal input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Auth Modal Tabs & Forms */
.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 0;
}
.auth-tab {
  flex: 1;
  padding: 8px 4px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
}
.auth-tab:hover {
  color: #475569;
}
.auth-tab.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
}
.auth-error {
  color: #ef4444;
  font-size: 13px;
  margin-bottom: 8px;
  display: none;
}
.auth-error.visible {
  display: block;
}
.auth-success {
  color: #22c55e;
  font-size: 13px;
  margin-bottom: 8px;
}
.auth-submit-btn {
  width: 100%;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.auth-submit-btn:hover {
  opacity: 0.9;
}
.auth-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Dark mode auth styles */
body.dark .auth-tabs {
  border-bottom-color: #334155;
}
body.dark .auth-tab {
  color: #64748b;
}
body.dark .auth-tab:hover {
  color: #94a3b8;
}
body.dark .auth-tab.active {
  color: #60a5fa;
  border-bottom-color: #60a5fa;
}
body.dark #authModal input {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
body.dark #resendCodeBtn {
  border-color: #334155;
  color: #94a3b8;
}


.auth-title-badge {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 14px;
  margin-right: 6px;
}
.auth-title-badge.guest {
  background: none;
  font-size: 16px;
}
.auth-title-badge.logged {
  background: #3b82f6;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

body.dark-mode .auth-title-badge.logged {
  background: #60a5fa;
  color: #1e3a5f;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ---------- Dark Mode ---------- */
body.dark-mode {
  background: #0f172a;
  color: #e2e8f0;
}

body.dark-mode header {
  background: #1e293b;
  border-bottom-color: #334155;
}

body.dark-mode .logo {
  color: #4ade80;
}

body.dark-mode .panel {
  background: #1e293b;
  border-color: #334155;
}

body.dark-mode .panel-title {
  background: rgba(30, 41, 59, 0.95);
  border-bottom-color: #334155;
  color: #94a3b8;
}

body.dark-mode .panel-title button {
  background: #334155;
  border-color: #475569;
  color: #e2e8f0;
}

body.dark-mode .panel-title button:hover:not(:disabled) {
  background: #475569;
}

body.dark-mode #resource {
  color: #fbbf24;
}

body.dark-mode nav button,
body.dark-mode nav select {
  background: #1e293b;
  border-color: #475569;
  color: #e2e8f0;
}

body.dark-mode nav button:hover {
  background: #475569;
}

body.dark-mode #divider {
  background: #475569;
}

body.dark-mode #divider:hover {
  background: #64748b;
}

body.dark-mode .weather-badge {
  background: linear-gradient(135deg, #78350f, #92400e);
  border-color: #b45309;
  color: #fde68a;
}


body.dark-mode .level-badge {
  background: linear-gradient(135deg, #312e81, #3730a3);
  border-color: #6366f1;
  color: #c4b5fd;
}

body.dark-mode #missionPanel {
  border-top-color: #334155;
  background: linear-gradient(180deg, #1e293b, #0f172a);
}

body.dark-mode .mission-header {
  background: rgba(30, 41, 59, 0.95);
  border-bottom-color: #334155;
  color: #e2e8f0;
}

body.dark-mode .mission-title {
  color: #f1f5f9;
}

body.dark-mode .mission-desc {
  color: #94a3b8;
}

body.dark-mode .mission-concept {
  background: #1e3a5f;
  color: #60a5fa;
}

body.dark-mode .hint-btn {
  background: #78350f;
  border-color: #b45309;
  color: #fde68a;
}

body.dark-mode .hint-btn:hover {
  background: #92400e;
}

body.dark-mode .modal-content {
  background: #1e293b;
  color: #e2e8f0;
}

body.dark-mode .modal-header {
  background: #1e293b;
  border-bottom-color: #334155;
}

body.dark-mode .modal-footer {
  border-top-color: #334155;
}

body.dark-mode .crop-table thead th {
  background: #1e293b;
  color: #94a3b8;
  border-bottom-color: #334155;
}

body.dark-mode .crop-table tbody td {
  border-bottom-color: #1e293b;
}

body.dark-mode .crop-row:hover td {
  background: #14532d;
}

body.dark-mode .crop-row.crop-row-premium:hover td {
  background: #3d2a00;
}

body.dark-mode .crop-tc-num {
  color: #94a3b8;
}

body.dark-mode .wb-pos {
  background: #14532d;
  color: #86efac;
}

body.dark-mode .wb-neg {
  background: #450a0a;
  color: #fca5a5;
}

body.dark-mode .achieve-card {
  border-color: #334155;
}

body.dark-mode .achieve-card.unlocked {
  border-color: #f59e0b;
  background: linear-gradient(135deg, #78350f, #451a03);
}

body.dark-mode .achieve-col-farm {
  background: linear-gradient(135deg, #14532d, #166534);
  border-color: #4ade80;
  color: #bbf7d0;
}

body.dark-mode .achieve-col-python {
  background: linear-gradient(135deg, #1e3a5f, #1e40af);
  border-color: #60a5fa;
  color: #bfdbfe;
}

body.dark-mode .achieve-desc {
  color: #94a3b8;
}

body.dark-mode .market-card {
  border-color: #334155;
}

body.dark-mode .market-card:hover {
  border-color: #f59e0b;
  background: #78350f;
}

body.dark-mode .market-price {
  color: #94a3b8;
}

body.dark-mode .market-info code {
  background: #334155;
  color: #a78bfa;
}

body.dark-mode .pest-badge {
  background: #450a0a;
  border-color: #f87171;
  color: #fca5a5;
}

body.dark-mode #authModal input {
  background: #334155;
  border-color: #475569;
  color: #e2e8f0;
}

body.dark-mode #settingsPanel {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

body.dark-mode .settings-item button {
  color: #e2e8f0;
}

body.dark-mode .settings-item button:hover {
  background: #475569;
}

body.dark-mode .settings-lang-item select {
  background: #334155;
  border-color: #475569;
  color: #e2e8f0;
}

/* Language buttons in settings panel */
.lang-btns-group {
  display: flex;
  gap: 4px;
  flex: 1;
}
.lang-btn-s {
  flex: 1;
  padding: 4px 2px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.lang-btn-s:hover { border-color: #7CB342; }
.lang-btn-s.active { background: #7CB342; color: #fff; border-color: #7CB342; }
body.dark-mode .lang-btn-s { background: #1e293b; border-color: #334155; color: #94a3b8; }
body.dark-mode .lang-btn-s:hover { border-color: #7CB342; }
body.dark-mode .lang-btn-s.active { background: #7CB342; color: #fff; border-color: #7CB342; }

/* About + mute row */
.about-mute-row { gap: 0; justify-content: space-between; }
.about-mute-row #aboutBtn { flex: 0 0 auto; width: auto !important; }
.mute-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  margin-left: auto;
  padding: 6px 10px !important;
  font-size: 15px;
  line-height: 1;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #475569;
  transition: background 0.1s;
}
.mute-btn:hover { background: #f1f5f9 !important; }
body.dark-mode .mute-btn { color: #94a3b8; }
body.dark-mode .mute-btn:hover { background: #334155 !important; }

/* Premium benefits box (dark-mode aware) */
.premium-benefits-box {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.85;
}
body.dark-mode .premium-benefits-box {
  background: #0f2a14;
  border-color: #14532d;
  color: #86efac;
}


.compare-plans-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  text-decoration: none;
  transition: all 0.15s ease;
}
.compare-plans-link:hover {
  color: #1e40af;
  background: #dbeafe;
  border-color: #93c5fd;
}
body.dark-mode .compare-plans-link {
  color: #bfdbfe;
  background: #1e3a8a;
  border-color: #3b82f6;
}
body.dark-mode .compare-plans-link:hover {
  color: #dbeafe;
  background: #1d4ed8;
  border-color: #60a5fa;
}

body.dark-mode .settings-divider {
  background: #334155;
}

body.dark-mode #aboutPanel {
  color: #94a3b8;
}

body.dark-mode #aboutPanel b {
  color: #e2e8f0;
}

body.dark-mode .func-ref {
  color: #94a3b8;
}

body.dark-mode .func-ref code {
  background: #334155;
  color: #a78bfa;
}

body.dark-mode .func-row { border-bottom-color: #1e293b; }
body.dark-mode .func-toggle { border-color: #334155; color: #64748b; }
body.dark-mode .func-toggle:hover { background: #1e293b; color: #94a3b8; }
body.dark-mode .func-detail { background: #0f172a; color: #94a3b8; }
body.dark-mode .func-section-header { color: #64748b; }

body.dark-mode .tooltip {
  background: rgba(2, 6, 23, 0.95);
  border-color: rgba(255,255,255,0.15);
}

body.dark-mode .welcome-content {
  background: #1e293b;
  color: #e2e8f0;
}

/* ==========================================================================
   RESPONSIVE STYLES
   Note: Ensure your HTML includes <meta name="viewport" content="width=device-width, initial-scale=1">
   ========================================================================== */

/* ---------- Wide Desktop (min-width: 1440px) ---------- */
@media (min-width: 1440px) {
  #leftPanel {
    width: 38%;
    max-width: 740px;
  }
}

/* ---------- Tablet (max-width: 900px) ---------- */
@media (max-width: 900px) {
  header {
    padding: 0 12px;
    gap: 10px;
  }

  .header-center {
    display: none;
  }

  nav button,
  nav select {
    padding: 5px 8px;
  }

  .content {
    flex-direction: column;
  }

  #divider {
    display: none;
  }

  /* Default mobile: code panel fills all space, no farm panel */
  #leftPanel {
    width: 100%;
    min-width: 0;
    flex: 1;
  }

  #rightPanel {
    display: none;
  }

  .console {
    height: 80px;
  }
}

/* ---------- Mobile (max-width: 600px) ---------- */
@media (max-width: 600px) {
  header {
    height: auto;
    min-height: 48px;
    flex-wrap: wrap;
    padding: 6px 10px;
    gap: 6px;
  }

  .logo {
    font-size: 17px;
  }

  /* Hide text labels in About and dark-mode toggle; keep icons/emojis */
  nav .btn-text {
    display: none;
  }

  nav button,
  nav select {
    padding: 4px 6px;
    font-size: 12px;
    margin-left: 4px;
  }

  .panel-title button {
    padding: 3px 6px;
    font-size: 12px;
  }

  .panel-title {
    padding: 6px 8px;
    font-size: 13px;
  }

  .console {
    height: 60px;
  }

  #missionPanel {
    max-height: 160px;
  }

  .mission-body {
    flex-direction: column;
  }

  .mission-right {
    width: 100%;
    border-left: none;
    border-top: 1px solid #e2e8f0;
    padding-left: 0;
    padding-top: 6px;
    margin-left: 0;
    margin-top: 6px;
  }

  body.dark-mode .mission-right {
    border-top-color: #334155;
  }

  .toast-container {
    right: 10px;
    left: 10px;
  }

  .toast {
    max-width: 100%;
  }

  .crop-table {
    font-size: 12px;
  }

  .crop-table thead th,
  .crop-table tbody td {
    padding: 8px 10px;
  }

  .achieve-columns {
    grid-template-columns: 1fr;
  }

  .market-list {
    grid-template-columns: 1fr;
  }

  .crop-emoji {
    font-size: 28px;
  }

  .achieve-card {
    padding: 8px;
  }
}

/* ---------- Very Small (max-width: 400px) ---------- */
@media (max-width: 400px) {
  .logo {
    font-size: 16px;
  }

  /* Hide button text, keep emojis only for nav items */
  nav button .btn-label {
    display: none;
  }

  nav button,
  nav select {
    padding: 3px 5px;
    font-size: 12px;
    margin-left: 3px;
  }

  .panel-title {
    font-size: 12px;
    padding: 4px 6px;
  }

  .panel-title button {
    padding: 2px 5px;
    font-size: 12px;
  }

  .modal-header h2 {
    font-size: 15px;
  }

  .crop-list,
  .market-list,
  .achieve-list {
    padding: 10px 12px;
    gap: 8px;
  }
}

/* ---------- Touch-friendly improvements ---------- */
@media (pointer: coarse) {
  nav button,
  nav select {
    min-height: 44px;
    min-width: 44px;
  }

  .panel-title button {
    min-height: 44px;
  }

  .hint-btn {
    min-height: 44px;
    padding: 8px 14px;
  }

  .modal-close {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ---------- Touch devices: remove hover effects that cause stuck states ---------- */
@media (hover: none) {
  nav button:hover {
    background: inherit;
    border-color: inherit;
  }

  .panel-title button:hover:not(:disabled) {
    background: inherit;
  }

  .crop-card:hover {
    border-color: #e2e8f0;
    background: transparent;
  }

  .market-card:hover {
    border-color: #e2e8f0;
    background: transparent;
  }

  .achieve-card:hover {
    transform: none;
  }

  #divider:hover {
    background: #cbd5e1;
  }

  .hint-btn:hover {
    background: #fef3c7;
  }

  .modal-close:hover {
    color: #64748b;
  }

  .welcome-content button:hover {
    transform: none;
    box-shadow: none;
  }

  /* Dark mode touch overrides */
  body.dark-mode nav button:hover {
    background: #475569;
  }

  body.dark-mode .panel-title button:hover:not(:disabled) {
    background: #334155;
  }

  body.dark-mode .crop-card:hover {
    border-color: #334155;
    background: transparent;
  }

  body.dark-mode .market-card:hover {
    border-color: #334155;
    background: transparent;
  }

  body.dark-mode #divider:hover {
    background: #475569;
  }

  body.dark-mode .hint-btn:hover {
    background: #78350f;
  }
}

/* ============================================================
   Grid-to-Code
============================================================ */

/* Canvas cursor — always crosshair for grid-to-code */
#farmCanvas.mouse-mode-cursor {
  cursor: crosshair;
}

/* Context menu */
.grid-code-menu {
  position: absolute;
  z-index: 2000;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
  padding: 4px;
  min-width: 160px;
  animation: gridMenuFadeIn 0.12s ease-out;
}
.grid-code-menu.hidden {
  display: none;
}
@keyframes gridMenuFadeIn {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.grid-code-title {
  padding: 6px 12px 4px;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.grid-code-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  color: #334155;
  transition: background 0.1s;
}
.grid-code-item:hover {
  background: #f1f5f9;
}
.grid-code-item .gc-icon {
  width: 20px;
  text-align: center;
  font-size: 14px;
}
.grid-code-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 4px 8px;
}

/* Crop picker sub-menu */
.grid-crop-picker {
  min-width: 180px;
  padding: 4px;
}
.grid-crop-picker .crop-pick-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  color: #334155;
  transition: background 0.1s;
}
.grid-crop-picker .crop-pick-item:hover {
  background: #f0fdf4;
}
.grid-crop-picker .crop-pick-item .crop-pick-cost {
  margin-left: auto;
  font-size: 12px;
  color: #94a3b8;
}

/* Selection highlight for multi-cell */
#farmCanvas.selecting {
  cursor: crosshair;
}

/* Dark mode overrides for grid-code menu */
body.dark-mode .grid-code-menu {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
body.dark-mode .grid-code-title {
  color: #64748b;
}
body.dark-mode .grid-code-item {
  color: #e2e8f0;
}
body.dark-mode .grid-code-item:hover {
  background: #334155;
}
body.dark-mode .grid-code-divider {
  background: #334155;
}
.grid-code-item-premium {
  opacity: 0.75;
}
.grid-code-item-premium:hover {
  background: #fef9ec !important;
}
body.dark-mode .grid-code-item-premium:hover {
  background: #2d2416 !important;
}
.gc-premium-badge {
  margin-left: auto;
  font-size: 12px;
  color: #f59e0b;
}

/* ---------- Auth area in settings (username + logout) ---------- */
.settings-item .username-btn {
  flex: 1;
  min-width: 0;
  width: auto;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-item .logout-btn {
  flex-shrink: 0;
  width: auto;
  white-space: nowrap;
}

/* --- Letter avatar in username button --- */
.user-letter-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
body.dark-mode .user-letter-avatar {
  background: #60a5fa;
  color: #1e3a5f;
}
.user-letter-avatar--premium {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1c1008;
}
body.dark-mode .user-letter-avatar--premium {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1c1008;
}

/* --- Password show/hide toggle --- */
.pw-field {
  position: relative;
  display: flex;
  align-items: stretch;
}
.pw-field input {
  flex: 1;
  min-width: 0;
  padding-right: 36px !important;
}
.pw-toggle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 34px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  transition: color 0.1s;
}
.pw-toggle:hover { color: #475569; }
body.dark-mode .pw-toggle { color: #64748b; }
body.dark-mode .pw-toggle:hover { color: #94a3b8; }
body.dark-mode .grid-crop-picker .crop-pick-item {
  color: #e2e8f0;
}
body.dark-mode .grid-crop-picker .crop-pick-item:hover {
  background: #1a2e1a;
}
body.dark-mode .grid-crop-picker .crop-pick-item .crop-pick-cost {
  color: #64748b;
}

/* ============================================================
   Mobile Tab Bar  (hidden on desktop, shown on ≤900px)
   ============================================================ */

#mobileTabBar {
  display: none;
}

@media (max-width: 900px) {
  /* ---- Tab bar itself ---- */
  #mobileTabBar {
    display: flex;
    flex-shrink: 0;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    z-index: 10;
  }

  .mobile-tab {
    flex: 1;
    padding: 10px 6px;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: #64748b;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    min-height: 44px;
  }

  .mobile-tab.active {
    color: #7CB342;
    border-bottom-color: #7CB342;
    background: #fff;
    font-weight: 600;
  }

  /* ---- Tab switching: only Farm tab needs an override ---- */
  /* (Code tab is the CSS default: left panel visible, right panel hidden) */
  .content.tab-farm #leftPanel {
    display: none;
  }
  .content.tab-farm #rightPanel {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  /* ---- Floating Stop button during execution on Farm tab ---- */
  #farmContainer {
    position: relative;
  }

  #mobileExecOverlay {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
  }

  #mobileExecOverlay.hidden {
    display: none;
  }

  #mobileStopBtn {
    padding: 10px 28px;
    font-size: 15px;
    font-weight: 600;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    cursor: pointer;
    min-height: 44px;
    white-space: nowrap;
  }

  /* ---- Context menu: larger touch targets ---- */
  .grid-code-item {
    padding: 12px 16px;
    font-size: 14px;
  }

  .grid-code-title {
    padding: 10px 16px 6px;
  }
}

/* Dark mode overrides for mobile tab bar */
body.dark-mode #mobileTabBar {
  background: #1e293b;
  border-color: #334155;
}

body.dark-mode .mobile-tab {
  color: #94a3b8;
}

body.dark-mode .mobile-tab.active {
  color: #7CB342;
  background: #0f172a;
}