:root{
  --bg: #f7fafc;
  --panel: #ffffff;
  --accent: #0284c7;
  --accent-2: #16a34a;
  --muted: #475569;
  --text: #0f172a;
  --danger: #dc2626;
  --ring: rgba(2,132,199,.28);
  --border: #e5e7eb;
  --soft: #f1f5f9;
}
*{ box-sizing: border-box; }
html,body{ height:100%; margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg); color: var(--text); }
.app-shell{ display:flex; flex-direction:column; min-height:100%; max-width: 900px; margin: 0 auto; }
.topbar{ position:sticky; top:0; z-index:10; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.80)); backdrop-filter: blur(6px); padding: 8px 12px; border-bottom: 1px solid var(--border); }
.last-saved{ font-weight:700; font-size: 14px; }
.live-line{ font-size: 12px; color: var(--muted); margin-top: 2px; }
.content{ flex:1; padding: 10px 12px 100px; }
.status-row{ display:flex; gap:6px; align-items:center; margin-bottom: 8px; flex-wrap:wrap; }
.status-row .btn.small{ padding:5px 8px; font-size:11px; }
.badge{ background: rgba(2,132,199,.08); color: var(--accent); border: 1px solid rgba(2,132,199,.25); border-radius: 999px; padding: 6px 10px; font-size: 12px; }
.badge.secondary{ background: rgba(22,163,74,.08); border-color: rgba(22,163,74,.25); color: var(--accent-2); }
.btn{ background: linear-gradient(180deg, #ffffff, #f7fafc); color: var(--text); border:1px solid var(--border); border-radius: 10px; padding: 8px 12px; font-weight:700; cursor:pointer; transition: transform .05s ease, box-shadow .2s ease; box-shadow: 0 6px 16px rgba(15,23,42,.06); }
.btn.small{ padding:6px 10px; font-size:12px; }
.btn.ghost{ background: #fff; border-style: dashed; }
.btn.danger{ border-color: rgba(220,38,38,.35); color:#b91c1c; }
.btn:focus{ outline: none; box-shadow: 0 0 0 4px var(--ring); }
.btn:active{ transform: translateY(1px) scale(.99); }

.screen{ display:none; }
.screen.active{ display:block; }

.data-wrap{ background: var(--panel); border:1px solid var(--border); border-radius: 16px; padding: 12px; box-shadow: 0 10px 24px rgba(15,23,42,.04); }
.map-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 0 6px 6px; border-bottom: 1px dashed var(--border); margin-bottom: 8px; }
.map-title{ font-weight:700; }

.table-wrap{ overflow:auto; max-height: 60vh; }
table{ width:100%; border-collapse: collapse; }
thead th{ position: sticky; top: 0; background: var(--soft); border-bottom: 1px solid var(--border); text-align:left; padding: 8px; font-size: 12px; color: var(--muted); }
tbody td{ padding: 8px; border-bottom: 1px solid var(--soft); font-size: 14px; }
tbody tr:hover{ background: #f9fbfd; }
.row-actions{ white-space: nowrap; }
.row-btn{ background:none; border:none; cursor:pointer; padding:2px 4px; opacity:0.5; font-size:14px; }
.row-btn:hover{ opacity:1; }

.pad{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.key{
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  user-select:none;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: clamp(16px, 5.2vw, 22px);
  font-weight: 900; letter-spacing:.3px;
  cursor: pointer;
  transition: transform .06s ease, filter .2s ease, background .2s ease, box-shadow .2s;
  box-shadow: 0 6px 12px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.65);
}
.key.toggler{ color: var(--muted); font-weight:800; font-size: clamp(14px, 4.5vw, 20px); }
.key.cancel{ background: linear-gradient(180deg, #fef2f2, #fee2e2); border-color: rgba(220,38,38,.3); color: #b91c1c; }
.key.shore{ background: linear-gradient(180deg, #ffffff, #f8fafc); border-color: var(--border); color: var(--muted); font-size: clamp(10px, 3vw, 14px); }
.key:active{ transform: translateY(1px) scale(.99); filter: brightness(.98); box-shadow: 0 4px 10px rgba(15,23,42,.08) inset; }

.bottombar{ position: fixed; bottom: 0; left: 0; right:0; display:flex; align-items:center; justify-content:space-between; background: linear-gradient(0deg, rgba(255,255,255,.95), rgba(255,255,255,.85)); backdrop-filter: blur(6px); padding: 12px 16px 20px; border-top: 1px solid var(--border); }
.bottombar-left{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.bottombar-project{ font-weight:600; font-size:13px; color: var(--accent-2); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bottombar-change{ background:none; border:none; color:var(--muted); font-size:11px; padding:0; cursor:pointer; text-decoration:underline; }
.bottombar-change:hover{ color:var(--accent); }
.bottombar-right{ display:flex; gap:10px; }
.weeds-btn, .fish-btn, .map-btn{
  width:52px; height:52px; border-radius: 14px;
  display:grid; place-items:center; cursor:pointer;
  background: linear-gradient(180deg, #ffffff, #f1f5f9);
  border: 1px solid var(--border);
  box-shadow: 0 12px 22px rgba(15,23,42,.08);
  font-size: 20px;
}
.weeds-btn:active, .fish-btn:active, .map-btn:active{ transform: translateY(1px) scale(.98); }
.toast { position: fixed; right: 12px; bottom: 92px; background: #111827; border:1px solid rgba(0,0,0,.12); padding:8px 10px; border-radius: 10px; color: white; box-shadow: 0 10px 24px rgba(0,0,0,.25); font-size: 13px;}
.hidden{ display:none; }

/* Project selection screen */
.projects-wrap{ background: var(--panel); border:1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: 0 10px 24px rgba(15,23,42,.04); }
.projects-header{ margin-bottom: 12px; }
.projects-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; max-height: 50vh; overflow-y:auto; }
.project-item{ display:flex; align-items:center; justify-content:space-between; padding: 12px 14px; background: var(--soft); border: 1px solid var(--border); border-radius: 10px; cursor:pointer; transition: background .15s, border-color .15s; }
.project-item:hover{ background: #e8f4fc; border-color: var(--accent); }
.project-name{ font-weight:600; }
.project-count{ font-size:12px; color: var(--muted); }
.project-delete{ background:none; border:none; color: var(--danger); cursor:pointer; font-size:16px; padding:4px 8px; opacity:0.6; }
.project-delete:hover{ opacity:1; }
.projects-actions{ display:flex; gap:8px; }
.project-input{ flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-size:14px; }
.project-input:focus{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.project-badge{ background: rgba(22,163,74,.1); color: var(--accent-2); border-color: rgba(22,163,74,.3); }
.logger-content.hidden{ display:none; }

/* Map screen styles */
.map-wrap{ background: var(--panel); border:1px solid var(--border); border-radius: 16px; overflow:hidden; box-shadow: 0 10px 24px rgba(15,23,42,.04); }
.map-wrap .map-header{ padding: 12px; border-bottom: 1px dashed var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.map-layers{ display:flex; gap:10px; flex-wrap:wrap; }
.layer-toggle{ display:flex; align-items:center; gap:4px; font-size:12px; color: var(--muted); cursor:pointer; user-select:none; }
.layer-toggle input{ accent-color: var(--accent); cursor:pointer; }
.layer-toggle input:not(:checked) + span{ opacity:0.5; text-decoration:line-through; }
#depth-map{ height: 51vh; min-height: 280px; }
.map-legend{ display:flex; gap:8px; flex-wrap:wrap; padding:8px 12px; border-bottom: 1px dashed var(--border); }
.legend-item{ display:flex; align-items:center; gap:4px; font-size:11px; color: var(--muted); }
.legend-swatch{ width:16px; height:12px; border-radius:2px; border:1px solid rgba(0,0,0,.15); }
.legend-weeds{ width:12px; height:12px; border-radius:50%; background:#228B22; border:2px solid #006400; }
.legend-fish{ font-size:14px; }
.fish-map-marker{ font-size:20px; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.shore-map-marker{ font-size:20px; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.weed-cloud-blur{ filter: url(#weed-blur); }

/* Settings dropdown */
.settings-dropdown{ position:relative; }
.settings-menu{ position:absolute; top:100%; right:0; margin-top:4px; background:var(--panel); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(15,23,42,.12); z-index:100; min-width:140px; overflow:hidden; }
.settings-menu.hidden{ display:none; }
.settings-item{ display:block; width:100%; padding:10px 14px; background:none; border:none; text-align:left; font-size:13px; cursor:pointer; transition:background .15s; }
.settings-item:hover{ background:var(--soft); }
.settings-item:not(:last-child){ border-bottom:1px solid var(--border); }

/* Live Map screen */
.livemap-container{ display:flex; flex-direction:column; height: calc(100vh - 160px); }
.live-map{ flex:0 0 45%; min-height:180px; border-radius:12px; overflow:hidden; border:1px solid var(--border); }
.pad-compact{ grid-template-columns: repeat(5, minmax(0, 1fr)); gap:4px; padding:8px 0; }
.pad-compact .key{ aspect-ratio: 1.2 / 1; font-size: clamp(12px, 4vw, 16px); border-radius:8px; }
.pad-compact .key.toggler{ font-size: clamp(10px, 3.5vw, 14px); }
.live-marker{ background:#ef4444; border:3px solid #fff; border-radius:50%; width:16px; height:16px; box-shadow:0 2px 6px rgba(0,0,0,.4); }

/* Modal styles */
.modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; }
.modal.hidden{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
.modal-content{ position:relative; background:var(--panel); border-radius:16px; width:90%; max-width:400px; max-height:90vh; overflow:auto; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--border); }
.modal-header h3{ margin:0; font-size:16px; }
.modal-close{ background:none; border:none; font-size:24px; cursor:pointer; padding:4px 8px; color:var(--muted); }
.modal-close:hover{ color:var(--text); }
.modal-body{ padding:16px; }
.modal-footer{ display:flex; justify-content:flex-end; gap:8px; padding:16px; border-top:1px solid var(--border); }
.form-group{ margin-bottom:12px; }
.form-group label{ display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
.form-group input, .form-group textarea{ width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-size:14px; font-family:inherit; }
.form-group input:focus, .form-group textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.form-row{ display:flex; gap:12px; }
.form-row .form-group{ flex:1; }
.fish-location{ font-size:12px; color:var(--muted); text-align:center; padding-top:8px; }
.checkbox-label{ display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; padding:8px 0; }
.checkbox-label input[type="checkbox"]{ width:18px; height:18px; accent-color:var(--accent); cursor:pointer; }
.form-warning{ background:rgba(220,38,38,.1); color:#b91c1c; padding:8px 12px; border-radius:8px; font-size:12px; margin-top:8px; }
.form-warning.hidden{ display:none; }

@media (max-height: 680px){
  .content{ padding: 8px 10px 90px; }
  .pad{ gap: 6px; }
  .key{ border-radius: 10px; }
  #depth-map{ height: 43vh; }
}