body {
  font-family: 'Segoe UI', Arial, '微軟正黑體', sans-serif;
  background: #f4f7fa;
  color: #223044;
  margin: 0;
}

.container {
  max-width: 1040px;
  margin: 35px auto 0 auto;
  background: #fff;
  box-shadow: 0 2px 12px #e0e7ef61;
  border-radius: 16px;
  padding: 38px 22px 26px 22px;
  overflow-x: auto;
}

h1 {
  text-align: center;
  color: #1380d3;
  margin-bottom: 20px;
  letter-spacing: 1.3px;
  font-weight: 700;
}
h2 {
  background: linear-gradient(85deg, #e6f2fc 32%, #f4faff 110%);
  font-size: 1.13em;
  padding: .32em 1.2em .22em 1.2em;
  margin-bottom: .7em;
  border-left: 5px solid #5aaaf7;
  border-radius: 7px 17px 17px 8px;
  color: #3361a3;
  font-weight: 600;
  letter-spacing: .11em;
}

.tabs {
  display: flex;
  gap: 1.7em;
  margin-bottom: 12px;
  margin-top: -4px;
  flex-wrap: wrap;
}
.tab-link {
  background: #e9f3fc;
  color: #2576b8;
  border: none;
  padding: 13px 37px 8px 37px;
  cursor: pointer;
  border-radius: 13px 13px 0 0;
  font-size: 1.12em;
  font-weight: 600;
  transition: background .14s, color .15s;
  border-bottom: 3px solid #b7dfff;
  margin-bottom: -2px;
  outline: none;
  letter-spacing:.09em;
}
.tab-link:not(.active):hover {
  background: #d3eaff;
  color: #1770ba;
}
.tab-link.active {
  background: linear-gradient(85deg, #e1f0ff 65%, #deebfc 110%);
  color: #1380d3;
  border-bottom: 3px solid #5aaaf7;
  box-shadow: 0 2px 7px #d6eefa26;
  z-index: 2;
}

.tab-content {
  display: none;
  animation: tabfade .28s;
}
.tab-content.active {
  display: block;
}
@keyframes tabfade {
  from { opacity: 0; transform: translateY(19px);}
  to   { opacity: 1; transform: translateY(0);}
}

.block-section {
  box-shadow: 0 0 11px #e6eefa38;
  background: #fafeff;
  border-radius: 13px;
  padding: 19px 17px 15px 17px;
  margin-bottom: 21px;
  min-width: 340px;
}
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 8px;
}
label {
  display: flex;
  align-items: center;
  min-width: 120px;
  margin-bottom: .10em;
}
input[type=text], input[type=number], input[type=date], select {
  border: 1.7px solid #b4d7eb;
  border-radius: 5px;
  padding: 6px 10px;
  margin-left: 6px;
  font-size: 1em;
  min-width: 74px;
  background: #fff;
}
input[type=number] {
  max-width: 120px;
}

input[type=checkbox], input[type=radio] { margin-right: 0.38em; }
input:focus, select:focus {
  outline-color: #6dc3f2;
  background: #e7f7ff;
}

.btn-main, .btn-danger {
  background: linear-gradient(85deg, #41a7fa 68%, #179edc 100%);
  color: #fff;
  border: none;
  padding: 7px 22px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 1.06em;
  margin-left: .5em;
  margin-top: .4em;
  box-shadow: 0 2px 6px #afd6fa29;
  font-weight: 600;
  transition: box-shadow 0.15s, background 0.11s;
}
.btn-main:hover { background: #28a7e6;}
.btn-danger {
  background: linear-gradient(88deg, #f74c4c 60%, #de092e 100%);
}
.btn-danger:hover { background: #bb1327; }
.btn-sm { padding: 4px 13px; font-size:0.97em; margin-left:0; margin-top:0;}

.table-controls {
  display: flex;
  gap: 24px;
  margin-bottom: 10px;
}

/* 美觀明顯格線表格 */
#recordsTable, #recordsTable th, #recordsTable td,
#settlementTable, #settlementTable th, #settlementTable td {
  border: 1.5px solid #b6c6e9 !important;
}
#recordsTable, #settlementTable {
  width: 100%;
  border-collapse: collapse;
  background: #fafeff;
  margin-top:4px;
  font-size: 1.01em;
  border-radius: 9px;
  overflow: hidden;
}
#recordsTable th, #recordsTable td,
#settlementTable th, #settlementTable td {
  padding: 9px 11px;
  text-align: left;
}
#recordsTable th, #settlementTable th {
  background: #d8eafc;
  color: #224474;
  font-weight: 700;
  letter-spacing: .12em;
}
#recordsTable tr:nth-child(even), #settlementTable tr:nth-child(even) {
  background: #e6f5fe;
}
#recordsTable tr:nth-child(odd), #settlementTable tr:nth-child(odd) {
  background: #fafbfd;
}
#recordsTable td button, #settlementTable td button {
  font-size: 0.98em;
  padding: 3px 11px;
  margin-left: 0;
}
#settlementTable td {
  font-weight: 600;
}
.settle-ok {
  color: #209d4d;
  font-weight: bold;
  font-size:1.09em;
  margin-left: 1em;
  margin-top:.6em;
}

#memberList {
  padding:0; margin:0;
}
#memberList li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #e2f1ff;
  margin: 0.10em 0;
  padding: 9px 14px;
  border-radius: 6px;
}
#memberList .delBtn {
  background: #e25757;
  color: #fff;
  border: none;
  border-radius: 3.5px;
  cursor: pointer;
  padding: 3px 14px;
  font-weight: 600;
}
#memberList .delBtn:hover { background: #b63333; }

#splitPreview {
  margin: 0.7em 0 0.2em 0;
  font-size: 1.09em;
  letter-spacing: 0.09em;
  background:#deeffb4f;
  border-radius:5px;
  padding:7px 11px;
}
#splitPreview b { color: #267ac6; }

.footer-tips {
  text-align: center;
  color: #666;
  font-size: .92em;
  margin-top: 18px;
}

@media (max-width: 620px) {
  .container { padding:5px 2vw 19px 2vw; }
  h1 { font-size:1.13em;}
  .block-section { padding:10px 2vw 8px 2vw;}
  .form-row { gap:.5em;}
  .tabs { gap:.65em;}
  .tab-link { padding: 6px 10px 4px 10px; font-size:.98em;}
}

canvas#statsChart {max-width:98vw;min-height:180px;margin:0 auto;display:block;}

/* 匯率參考區樣式：橫排表格桌機/直排手機自適應 */
.exrate-flex {
  display: flex; 
  align-items: center; 
  flex-wrap: wrap;
  gap: 12px;
}
#exrate-box select.input { min-width: 125px; margin-left: 6px; }
#exrate-msg-wrap { flex: 1 min-content; }
.exrate-table {
  border-collapse: separate;
  border-spacing: 8px 0;
  width: auto;
  min-width: 325px;
}
.exrate-item {
  font-weight: bold;
  color: #1d926a;
  font-size: 1.07em;
  white-space: nowrap;
  padding: 0 6px;
}
.exrate-split {
  font-family: Arial, Helvetica, sans-serif;
  font-weight:400;
  color: #b7b7b7;
  width: 35px;
  text-align:center;
  font-size:1.15em;
  min-width: 16px;
}
@media (max-width: 600px) {
  .exrate-table tr { display:block; }
  .exrate-table td { display:block; width:auto; margin:0; text-align:left; }
  .exrate-split { display: none; }
  #exrate-msg-wrap { margin-top:8px; }
  .exrate-flex { flex-direction:column; align-items:flex-start; }
}