/* Weight Manager minimal modern styles */
:root {
  --wm-bg: #ffffff;
  --wm-fg: #111827;
  --wm-muted: #6b7280;
  --wm-border: #e5e7eb;
  --wm-accent: #2563eb;
}

.wm-container {
  max-width: 500px;
  margin: 24px auto;
  padding: 0 16px;
  color: var(--wm-fg);
}
.wm-title {
  margin: 0 0 12px;
  font-size: clamp(1.1rem, 3.5vw, 1.35rem);
  font-weight: 600;
}
.wm-subtle {
  color: var(--wm-muted);
  font-size: 0.9rem;
}

.wm-card {
  background: var(--wm-bg);
  border: 1px solid var(--wm-border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.06);
}
.wm-card {
  overflow: hidden;
}
.wm-stack {
  display: grid;
  gap: 12px;
}
.wm-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.wm-form label {
  display: grid;
  gap: 6px;
  font-size: 0.95rem;
  width: 100%;
}
.wm-input,
.wm-select,
.wm-date,
.wm-number,
.wm-file {
  appearance: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--wm-border);
  border-radius: 10px;
  background: #fff;
  font-size: 0.95rem;
}
.wm-btn {
  appearance: none;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--wm-accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.wm-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.wm-linkbar {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.wm-table {
  width: 100%;
  border-collapse: collapse;
}
.wm-table th,
.wm-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--wm-border);
}
.wm-table th {
  text-align: left;
  font-weight: 600;
  color: var(--wm-muted);
  font-size: 0.9rem;
}
.wm-table td {
  font-size: 0.95rem;
  text-align: left;
}
.wm-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.wm-kpi {
  padding: 12px;
  border: 1px solid var(--wm-border);
  border-radius: 10px;
}
.wm-kpi strong {
  font-variant-numeric: tabular-nums;
}

/* Album grid */
.wm-album {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.wm-album-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wm-album img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.wm-caption {
  font-size: 12px;
  color: var(--wm-muted);
}
.wm-delete-btn {
  appearance: none;
  border: 1px solid var(--wm-border);
  background: transparent;
  color: #ef4444;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  :root {
    --wm-bg: #0b0f1a;
    --wm-fg: #e5e7eb;
    --wm-muted: #9ca3af;
    --wm-border: #1f2937;
    --wm-accent: #3b82f6;
  }
  .wm-card {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  }
  .wm-input,
  .wm-select,
  .wm-date,
  .wm-number,
  .wm-file {
    background: #0e1422;
    color: var(--wm-fg);
  }
}

/* Mobile-like bottom tab bar */
.wm-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  z-index: 50;
  pointer-events: none;
}
.wm-tabbar-inner {
  pointer-events: auto;
  display: flex;
  gap: 10px;
  background: var(--wm-bg);
  border: 1px solid var(--wm-border);
  border-radius: 16px;
  padding: 8px;
  max-width: 500px;
  width: calc(100% - 32px);
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.18);
}
.wm-tabbar a {
  flex: 1 1 0;
  text-align: center;
  text-decoration: none;
  color: var(--wm-fg);
  border: 1px solid var(--wm-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 600;
  background: #fff;
}
.wm-tabbar a[aria-current="page"] {
  background: var(--wm-accent);
  color: #fff;
  border-color: transparent;
}
/* Visual order: record | home | analysis */
.wm-tabbar a:nth-child(1) {
  order: 2;
}
.wm-tabbar a:nth-child(2) {
  order: 1;
}
.wm-tabbar a:nth-child(3) {
  order: 3;
}
@media (prefers-color-scheme: dark) {
  .wm-tabbar-inner {
    background: #0b0f1a;
  }
  .wm-tabbar a {
    background: #0e1422;
  }
  .wm-tabbar a[aria-current="page"] {
    background: var(--wm-accent);
    color: #fff;
  }
}