* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #1a1a2e; color: #ccc; display: flex; height: 100vh; overflow: hidden; }

#sidebar {
  display: none !important;
  width: 220px; min-width: 220px;
  background: #12121f;
  border-right: 1px solid #2a2a40;
  display: flex; flex-direction: column;
  overflow-y: auto; z-index: 10;
}
#sidebar h1 { font-size: 15px; font-weight: 500; padding: 16px 16px 12px; border-bottom: 1px solid #2a2a40; color: #e8e4d0; }
.sb-section { padding: 12px 16px; border-bottom: 1px solid #2a2a40; display: flex; flex-direction: column; gap: 8px; }
.sb-label { font-size: 11px; color: #666; text-transform: uppercase; letter-spacing: 0.04em; }
#sidebar input[type=text], #sidebar select, #sidebar textarea {
  padding: 6px 8px; font-size: 12px;
  border: 1px solid #333; border-radius: 6px;
  background: #1e1e30; color: #ccc; width: 100%;
  font-family: system-ui, sans-serif;
}
#sidebar textarea { resize: vertical; }
#loginMessage {
  margin-top: 8px;
  font-size: 12px;
  min-height: 18px;
  color: #a8f;
}
#auth-overlay {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.82);
}
#auth-panel {
  width: min(100%, 360px);
  padding: 24px;
  border-radius: 18px;
  background: #10101d;
  border: 1px solid #333;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  color: #ddd;
  text-align: center;
}
#auth-panel h2 {
  margin-bottom: 12px;
  font-size: 18px;
  color: #fff;
}
#auth-panel p {
  margin: 0;
  line-height: 1.5;
  color: #aaa;
}

.sbtn {
  padding: 7px 10px; font-size: 12px;
  border: 1px solid #333; border-radius: 6px;
  background: #1e1e30; color: #ccc; cursor: pointer; text-align: center; width: 100%;
}
.sbtn:hover { background: #2a2a40; }
#count { font-size: 12px; color: #888; }
#status { font-size: 12px; color: #666; line-height: 1.5; }

.color-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.color-row label { flex: 1; }
.color-row input[type=color] { width: 36px; height: 24px; border: 1px solid #333; border-radius: 4px; padding: 1px; background: none; cursor: pointer; }

/* ── Layout: sidebar / practice-list / map ── */
#content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

#practice-list {
  width: 260px;
  min-width: 160px;
  max-width: 400px;
  background: #12121f;
  border-right: 1px solid #2a2a40;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  resize: horizontal;
  z-index: 9;
  margin: 12px;
  border-radius: 8px;
  border: 1px solid #2a2a40;
}

#practice-list-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  background: #1a1a2e;
  border-bottom: 1px solid #2a2a40;
  user-select: none;
  flex-shrink: 0;
}

#practice-list-header div {
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
#practice-list-header th:not(:last-child) {
  border-right: 1px solid #2a2a40;
}
#practice-list-header th:hover { color: #ccc; }
#practice-list-header th.sort-asc  .sort-arrow::after { content: " ▲"; font-size: 9px; color: #a8f; }
#practice-list-header th.sort-desc .sort-arrow::after { content: " ▼"; font-size: 9px; color: #a8f; }

#practice-list-body {
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: #2a2a40 transparent;
}
#practice-list-body::-webkit-scrollbar { width: 6px; }
#practice-list-body::-webkit-scrollbar-track { background: transparent; }
#practice-list-body::-webkit-scrollbar-thumb { background: #2a2a40; border-radius: 3px; }
#practice-list-body::-webkit-scrollbar-thumb:hover { background: #3a3a55; }

.pl-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  border-bottom: 1px solid #1e1e30;
  cursor: pointer;
  transition: background 0.1s;
}
.pl-row:hover { background: #1e1e30; }
.pl-row div {
  padding: 4px 8px;
  font-size: 10px;
  color: #bbb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: none;
}
.pl-row td:not(:last-child) { border-right: 1px solid #1e1e2a; }
.pl-row td.pl-practice { color: #ddd; }
.pl-row td.pl-state    { color: #888; text-align: center; }

#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }
#map-svg { width: 100%; height: 100%; }

:root {
  --c-ocean:  #0d1117;
  --c-land:   #1c2a1e;
  --c-state:  #243028;
  --c-empty:  #1a2220;
  --c-border: #3a5040;
  --c-nation: #5a7060;
  --c-dot:    #ffffcc;
  --c-label:  #ffffcc;
}
.ocean     { fill: var(--c-ocean); }
.state     { fill: var(--c-state); stroke: var(--c-border); stroke-width: 0.5px; }
.state.empty-state { fill: var(--c-empty); }
.nation    { fill: none; stroke: var(--c-nation); stroke-width: 1px; }
.dot       { fill: var(--c-dot); filter: url(#glow); cursor: pointer; }
.map-label { fill: var(--c-label); font-family: system-ui, sans-serif; letter-spacing: 0.02em; pointer-events: none; }

#state-picker {
  position: absolute; z-index: 500;
  background: #1a1a2e; border: 1px solid #3a3a55;
  border-radius: 10px; padding: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  display: none; flex-direction: column; gap: 8px;
  min-width: 160px;
}
#state-picker-title {
  font-size: 11px; color: #888; text-transform: uppercase;
  letter-spacing: 0.06em; text-align: center;
}
#state-picker-swatches {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px;
}
.swatch {
  width: 22px; height: 22px; border-radius: 5px;
  cursor: pointer; border: 2px solid transparent;
  transition: transform 0.1s, border-color 0.1s;
}
.swatch:hover { transform: scale(1.2); border-color: #fff; }
.swatch.clear {
  background: var(--c-state) !important;
  border: 2px dashed #555;
  position: relative;
}
.swatch.clear::after {
  content: "✕"; font-size: 11px; color: #888;
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
}
#state-picker-custom {
  display: flex; align-items: center; gap: 6px; font-size: 11px; color: #888;
}
#state-picker-custom input[type=color] {
  width: 28px; height: 22px; border: 1px solid #333; border-radius: 4px;
  padding: 1px; background: none; cursor: pointer; flex-shrink: 0;
}

#crop-supersupertitle {
  position: absolute; top: 45px; left: 0; right: 0;
  text-align: center;
  font-family: "Cormorant Garamond";
  font-size: 46px; line-height: 42px;
  color: var(--c-dot); opacity: 1;
  pointer-events: none; letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 12px;
}
#crop-subtitle {
  position: absolute; top: 108px; left: 0; right: 0;
  text-align: center;
  font-family: sans-serif; font-size: 20px;
  color: var(--c-dot); opacity: 0.75;
  pointer-events: none; letter-spacing: 0.04em;
  padding: 0 12px;
}

#crop-stats {
  position: absolute; top: 142px; left: 50%; transform: translateX(-50%);
  font-family: sans-serif; font-size: 16px;
  color: var(--c-dot);
  pointer-events: none;
  border-collapse: collapse;
  opacity: 0.65;
}
#crop-stats td { padding: 1px 8px; text-align: center; }
#crop-footer {
  position: absolute; bottom: 10px; left: 0; right: 0;
  text-align: center;
  font-family: sans-serif;
  font-weight: bold; letter-spacing: 0.1em;
  color: var(--c-nation); opacity: 0.85;
  pointer-events: none;
}

#data-table-wrap { display: none; }
#data-table-scroll { display: none; overflow: auto; max-height: 260px; margin-top: 6px; }
#data-table { width: 100%; border-collapse: collapse; font-size: 11px; }
#data-table th, #data-table td { padding: 4px 6px; border: 1px solid #2a2a40; white-space: nowrap; }
#data-table thead tr { background: #1e1e30; position: sticky; top: 0; }
#data-table tbody tr:nth-child(even) { background: #1a1a2c; }