* { box-sizing: border-box; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
body {
  margin: 0;
  color: #102a46;
  background:
    radial-gradient(1100px 500px at 15% -10%, rgba(43, 141, 178, 0.25), transparent 60%),
    radial-gradient(900px 450px at 95% 0%, rgba(227, 74, 67, 0.18), transparent 55%),
    #072847;
}
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at top right, #2b8db2, #072847 52%, #061d34); }
.login-card { width: 100%; max-width: 440px; background: #f7f1df; border-radius: 18px; padding: 24px; box-shadow: 0 20px 40px rgba(2,6,23,0.45); border: 1px solid #c9bd96; }
header {
  background: linear-gradient(135deg, #072847, #102a46 55%, #2b8db2);
  color: white;
  padding: 24px 20px;
  border-bottom: 4px solid #b8c56a;
}
.brand-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.brand-logo { height: 118px; width: auto; background: transparent; padding: 0; border-radius: 0; box-shadow: none; }
.login-brand-row { justify-content: center; }
.login-logo { height: 160px; }
.brand { display: inline-block; background: #f7f1df; color: #102a46; font-weight: 800; letter-spacing: 0.4px; padding: 4px 10px; border-radius: 999px; margin-bottom: 0; }
header h1 { margin: 0 0 6px; font-size: 1.45rem; letter-spacing: 0.2px; }
.sub { margin: 0; opacity: 0.95; color: #e9dfc1; }
main { max-width: 1180px; margin: 24px auto 36px; padding: 0 16px; }
.function-tabs { display:flex; gap:10px; flex-wrap:wrap; max-width:1180px; margin:14px auto 0; padding:0 16px; }
.function-tab { background:#f7f1df; color:#102a46; border:1px solid #c9bd96; border-radius:999px; padding:10px 14px; font-weight:700; }
.function-tab.active { background:#2b8db2; color:#fff; border-color:#2b8db2; }
.card {
  background: rgba(247, 241, 223, 0.98);
  border: 1px solid #c9bd96;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.06);
}
.grid { display: grid; gap: 10px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
label { display: flex; flex-direction: column; font-size: 0.9rem; gap: 6px; color: #173753; font-weight: 600; }
label:has(input[required])::after,
label:has(select[required])::after,
.check:has(input[required])::after { content: " *"; color: #dc2626; font-weight: 700; }
.inline-field { display: flex; gap: 8px; align-items: center; }
.inline-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.na-option { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; white-space: nowrap; font-weight: 500; color: #64748b; }
input, select, button {
  padding: 10px 12px;
  border: 1px solid #9db0b9;
  border-radius: 10px;
  font-size: 0.95rem;
  transition: all 140ms ease;
}
input:focus, select:focus {
  outline: none;
  border-color: #2b8db2;
  box-shadow: 0 0 0 4px rgba(43, 141, 178, 0.2);
}
button {
  background: linear-gradient(135deg, #2b8db2, #e34a43);
  color: white;
  border: none;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.1px;
}
button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(227, 74, 67, 0.32); }
button:disabled { background: #94a3b8; cursor: not-allowed; box-shadow: none; transform: none; }
h2, h3 { margin-top: 4px; color: #102a46; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
.check { display: block; margin: 8px 0; font-weight: 500; color: #173753; }
.check input { margin-right: 8px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 0.9rem; background: #fffdf6; border-radius: 10px; overflow: hidden; }
th { background: #dbe7e3; color: #102a46; font-weight: 700; }
th, td { border-bottom: 1px solid #e5e7eb; padding: 9px; text-align: left; }
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 10px; }
.summary div { background: linear-gradient(180deg, #fffdf6, #f4ecd7); border: 1px solid #d5c8a3; padding: 11px; border-radius: 10px; }
.result-card { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dashboard-list { display: grid; gap: 8px; }
.dashboard-item { border: 1px solid #d5c8a3; background: linear-gradient(180deg, #fffdf6, #f4ecd7); border-radius: 10px; padding: 9px; display: grid; gap: 3px; }
.product-row { display: grid; grid-template-columns: 1fr 1fr 120px 1fr 140px auto; gap: 8px; }
.dashboard-list.emergency .dashboard-item, .emergency-item { border-color: #ef4444; background: #fff1f2; }
.muted { color: #6f858f; }
.status-row { display: flex; align-items: center; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.hint { color: #6f858f; font-size: 0.85rem; }
.field-meta { font-size: 0.76rem; line-height: 1.25; margin-top: 2px; }
pre { background: #102a46; color: #e9dfc1; padding: 12px; border-radius: 10px; overflow: auto; border: 1px solid #2b8db2; }
body.mobile-mode main { max-width: 760px; padding: 0 10px; }
body.mobile-mode .card { border-radius: 12px; padding: 14px; }
body.mobile-mode input,
body.mobile-mode select,
body.mobile-mode button { min-height: 46px; font-size: 1rem; }
body.mobile-mode .status-row { align-items: stretch; }
body.mobile-mode .status-row button { width: 100%; }

.view-tabs { display:flex; gap:8px; flex-wrap:wrap; max-width:1180px; margin:14px auto 0; padding:0 16px; }
.tab { background:#f7f1df; color:#102a46; border:1px solid #c9bd96; border-radius:999px; padding:8px 12px; font-weight:700; }
.tab.active { background:#2b8db2; color:#fff; border-color:#2b8db2; }
.next-action { background:#eef6f8; border:1px solid #2b8db2; color:#102a46; padding:10px; border-radius:10px; margin-bottom:10px; font-weight:600; }
.completion-meter { width:100%; background:#e5e7eb; border-radius:999px; height:10px; overflow:hidden; margin-bottom:8px; }
#consultCompletionBar { height:100%; width:0%; background:linear-gradient(90deg,#2b8db2,#e34a43); transition:width .2s ease; }
.progress-chips { display:flex; gap:4px; flex-wrap:wrap; }
.chip { font-size:.72rem; padding:2px 6px; border-radius:999px; border:1px solid #cbd5e1; }
.chip.on { background:#eef4d6; border-color:#b8c56a; color:#506627; }
.chip.off { background:#f8fafc; color:#64748b; }
.search-group { display:grid; gap:6px; }
.member-cards { display:none; gap:10px; margin-top:10px; }
.member-card { border:1px solid #d5c8a3; border-radius:10px; padding:10px; background:#fffdf6; display:grid; gap:8px; }
.member-card-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.member-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.member-checks { display:grid; gap:6px; }
.mobile-actions { display:none; }

@media (max-width: 800px) {
  body { font-size: 16px; }
  .grid.two, .grid.three, .summary, .kpi-grid, .inline-pair, .product-row { grid-template-columns: 1fr; }
  header { padding: 16px 12px; }
  header h1 { font-size: 1.2rem; }
  .brand-logo { height: 84px; }
  .login-logo { height: 112px; }
  .card { padding: 14px; border-radius: 12px; }
  .view-tabs { gap: 6px; }
  .tab { padding: 11px 12px; font-size: 0.95rem; }
  .inline-form { flex-direction: column; }
  .inline-form input, .inline-form select, .inline-form button { width: 100%; min-height: 46px; }
  .status-row { align-items: stretch; }
  .status-row button { width: 100%; min-height: 44px; }
  input, select, button { font-size: 1rem; min-height: 44px; }
  .dashboard-item { padding: 11px; }
  .result-card { flex-direction: column; align-items: flex-start; }
  .result-card button { width: 100%; }
  .table-wrap { display:none; }
  .member-cards { display:grid; }
  .member-card-grid { grid-template-columns:1fr; }
  .mobile-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    position: sticky;
    bottom: 0;
    z-index: 50;
    background: rgba(7, 40, 71, 0.97);
    border-top: 1px solid #2b8db2;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  }
  main { padding-bottom: 78px; }
}