:root {
  --app-accent: #002248;
  --app-accent-dark: #001832;
  --app-accent-soft: #d6e6fb;
  --app-accent-border: rgba(0, 34, 72, .28);
  --app-bg: #f2f2f7;
  --app-panel: #ffffff;
  --app-field-bg: #f2f2f7;
  --app-text: #1d1d1f;
  --app-muted: #6e6e73;
  /* Apple's separatorColor formula (rgba(60,60,67,.29)/.36), sampled from
     developer.apple.com/design/human-interface-guidelines/color — real
     hairlines are noticeably stronger than a plain low-alpha black. */
  --app-border: rgba(60, 60, 67, .29);
  --app-border-strong: rgba(60, 60, 67, .36);
  --app-pending: #a06a1e;
  --app-pending-bg: #fff4df;
  --app-danger: #b4233c;
  --app-danger-bg: #fff0f2;
  --app-success: #246b2a;
  --app-success-bg: #e8f4e9;
  --app-radius-sm: 8px;
  --app-radius-md: 12px;
  --app-radius-lg: 16px;
  --app-radius-pill: 999px;
  --app-shadow-sm: 0 1px 3px rgba(0, 0, 0, .10), 0 4px 12px rgba(0, 0, 0, .06);
  --app-shadow-md: 0 8px 24px rgba(0, 0, 0, .08);
  --app-shadow-float: 0 10px 30px rgba(0, 0, 0, .12);
  --app-focus: 3px solid #9cc2ea;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.app-ui {
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--app-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.app-ui h1,
.app-ui h2,
.app-ui h3 {
  color: var(--app-text);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.app-ui .intro,
.app-ui .page-description {
  color: var(--app-muted);
  line-height: 1.55;
}

.app-ui .page-header h1 {
  margin: 0;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.2;
}

.app-ui .card,
.app-ui .panel,
.app-ui .summary-card {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  background: var(--app-panel);
  box-shadow: var(--app-shadow-sm);
}

.app-ui input,
.app-ui select,
.app-ui textarea {
  border: 1px solid transparent;
  border-radius: var(--app-radius-sm);
  color: var(--app-text);
  background: var(--app-field-bg);
}

.app-ui button,
.app-ui input,
.app-ui select,
.app-ui textarea,
.app-ui .card,
.app-ui .panel,
.app-ui .summary-card,
.app-ui .app-nav-home,
.app-ui #appNav a {
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.app-ui button:hover:not(:disabled) {
  filter: none;
}

.app-ui button:active:not(:disabled) {
  transform: scale(.97);
}

.app-ui input:hover,
.app-ui select:hover,
.app-ui textarea:hover {
  border-color: var(--app-border);
}

.app-ui input:focus,
.app-ui select:focus,
.app-ui textarea:focus {
  border-color: var(--app-accent);
  background: var(--app-panel);
  box-shadow: 0 0 0 3px rgba(0, 34, 72, .12);
}

.app-ui .table-wrap {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  background: var(--app-panel);
}

.app-ui .empty-state,
.app-ui .loading-state,
.app-ui .error-state {
  line-height: 1.5;
}

.app-ui .status-dot {
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
}

.app-ui .status-badge.status-success .status-dot { background: var(--app-success); }
.app-ui .status-badge.status-pending .status-dot { background: var(--app-pending); }
.app-ui .status-badge.status-danger .status-dot { background: var(--app-danger); }

/* Common shell geometry; page-specific content keeps its own layout. */
.app-ui #topbar {
  min-height: 52px;
  gap: 12px;
  border-bottom: 1px solid var(--app-border);
}

.app-ui #topbar > .title,
.app-ui .page-header > h1 {
  flex: 0 0 auto;
}

.app-ui #appNav {
  flex: 1 1 auto;
}

.app-ui .page-header {
  gap: 16px;
}

.app-ui .page-header #appNav {
  justify-content: center;
}

@media (max-width: 700px) {
  .app-ui #topbar {
    flex-wrap: wrap;
    padding-block: 8px;
  }

  .app-ui #topbar > .title {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-ui .page-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .app-ui .page-header #appNav {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
  }
}

.app-ui :focus-visible {
  outline: var(--app-focus);
  outline-offset: 2px;
}

.app-ui button,
.app-ui input,
.app-ui select,
.app-ui textarea {
  font: inherit;
}

.app-ui button {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 10px;
}

.app-ui button:disabled {
  cursor: not-allowed;
}

.app-ui button.secondary {
  background: #e8e8ed;
  border-color: var(--app-border-strong);
  color: var(--app-text);
}

.app-ui button.secondary:hover:not(:disabled) {
  background: #dfdfe4;
}

.app-ui .logout-btn {
  min-height: 36px;
  border-radius: var(--app-radius-pill);
}

.app-ui .status-success {
  color: var(--app-success);
  background: var(--app-success-bg);
}

.app-ui .status-pending {
  color: var(--app-pending);
  background: var(--app-pending-bg);
}

.app-ui .status-danger {
  color: var(--app-danger);
  background: var(--app-danger-bg);
}

.app-ui .status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: var(--app-radius-pill);
  font-size: 12px;
  font-weight: 600;
}

.app-ui .panel {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  background: var(--app-panel);
  box-shadow: var(--app-shadow-sm);
}

.app-ui .empty-state,
.app-ui .loading-state,
.app-ui .error-state {
  padding: 36px 20px;
  border: 1px dashed var(--app-border-strong);
  border-radius: var(--app-radius-md);
  color: var(--app-muted);
  text-align: center;
}

.app-ui .error-state {
  border-color: #f0b5bf;
  color: var(--app-danger);
  background: var(--app-danger-bg);
}

@media (max-width: 700px) {
  .app-ui input,
  .app-ui select,
  .app-ui textarea,
  .app-ui button {
    min-height: 42px;
  }
}

/* iOS-style translucent chrome. */
.app-ui #topbar {
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  box-shadow: none;
}

.app-ui #fieldPanel {
  border-color: var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-float);
}

.app-ui #draftBanner {
  border-color: #e6c98a;
  border-radius: var(--app-radius-md);
  box-shadow: var(--app-shadow-md);
}

.app-ui #draftBanner span {
  color: var(--app-text);
  font-weight: 600;
}

.app-ui #fab,
.app-ui #recenterFab {
  box-shadow: var(--app-shadow-float);
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.app-ui #fab:hover:not(:disabled),
.app-ui #recenterFab:hover:not(:disabled) {
  transform: translateY(-2px);
}

.app-ui #fab:active:not(:disabled),
.app-ui #recenterFab:active:not(:disabled) {
  transform: scale(.96);
}

.app-ui #sheet {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg) var(--app-radius-lg) 0 0;
  box-shadow: var(--app-shadow-float);
}

.app-ui .item {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  background: var(--app-panel);
  box-shadow: var(--app-shadow-sm);
}

.app-ui .item:hover,
.app-ui .item:focus-within {
  border-color: var(--app-border-strong);
}

.app-ui .item .meta {
  line-height: 1.5;
}

.app-ui .dup-warn {
  border-radius: var(--app-radius-sm);
  line-height: 1.45;
}

.app-ui .pend-thumb {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--app-radius-sm);
  background: var(--app-field-bg);
}

.app-ui .btn-approve,
.app-ui .btn-edit,
.app-ui .btn-reject {
  border-radius: var(--app-radius-pill);
  transition: background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.app-ui .btn-approve:hover:not(:disabled),
.app-ui .btn-edit:hover:not(:disabled),
.app-ui .btn-reject:hover:not(:disabled) {
  box-shadow: var(--app-shadow-sm);
}

.app-ui #grid {
  contain: layout paint;
}

.app-ui .thumb-card {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  background: var(--app-panel);
  box-shadow: var(--app-shadow-sm);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.app-ui .thumb-card:hover,
.app-ui .thumb-card:focus-visible {
  border-color: var(--app-border-strong);
  box-shadow: var(--app-shadow-md);
  transform: translateY(-2px);
}

.app-ui .thumb-card img {
  background: var(--app-field-bg);
}

.app-ui #lightbox {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.app-ui #lightbox img {
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}

.app-ui .table-wrap thead th {
  background: var(--app-panel);
}

.app-ui .table-wrap tbody tr:hover {
  background: rgba(0, 34, 72, .035);
}

.app-ui .table-wrap td,
.app-ui .table-wrap th {
  line-height: 1.4;
}

.app-ui .action-badge,
.app-ui .badge,
.app-ui .role-badge {
  letter-spacing: .01em;
}

.app-ui .meta-json {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  line-height: 1.45;
}

.app-ui .error,
.app-ui .error-state {
  line-height: 1.45;
}

.app-ui .pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: 1100px;
  margin: 12px auto 20px;
  padding: 10px 12px;
  color: var(--app-muted);
  font-size: 12px;
}

.app-ui .pagination button {
  min-width: 92px;
  min-height: 36px;
  margin: 0;
  padding: 8px 16px;
  border-radius: var(--app-radius-pill);
  font-weight: 600;
  box-shadow: var(--app-shadow-sm);
}

/* HIG: "refrain from adding color to the background of multiple
   controls" — only the forward/primary action (next) gets the accent
   tint; back (prev/.secondary) stays neutral gray. */
.app-ui .pagination button:not(.secondary) {
  border: 1px solid var(--app-accent-border);
  background: var(--app-accent-soft);
  color: var(--app-accent);
}

.app-ui .pagination button:not(.secondary):hover:not(:disabled) {
  background: #c9def7;
}

.app-ui .pagination button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

@media (max-width: 420px) {
  .app-ui .pagination {
    padding-inline: 0;
  }

  .app-ui .pagination button {
    min-width: 0;
  }
}

/* iOS-style controls shared across pages. */
.app-ui .segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: var(--app-field-bg);
}

.app-ui .segmented button {
  min-height: 32px;
  padding: 5px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--app-muted);
  font-size: 13px;
  font-weight: 600;
}

.app-ui .segmented button.active,
.app-ui .segmented button[aria-pressed="true"] {
  border-color: var(--app-border);
  background: var(--app-panel);
  color: var(--app-text);
  box-shadow: var(--app-shadow-sm);
}

.app-ui .chip {
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius-pill);
  background: var(--app-field-bg);
  color: var(--app-text);
  font-weight: 600;
}

.app-ui .chip:hover:not(.active) {
  background: #e8e8ed;
}

.app-ui .chip.active {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: #fff;
}

@media (max-width: 700px) {
  .app-ui #fieldPanel {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .app-ui #topbar .right {
    gap: 6px;
  }

  .app-ui .item {
    padding: 12px;
  }

  .app-ui .thumb-card:hover,
  .app-ui .thumb-card:focus-visible {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-ui *,
  .app-ui *::before,
  .app-ui *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}