* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  background: #fbf5ee;
  background-image:
    radial-gradient(circle at 12% 8%, #fcebe0 0, transparent 35%),
    radial-gradient(circle at 90% 14%, #e8f1e4 0, transparent 40%),
    radial-gradient(circle at 50% 120%, #fce8dc 0, transparent 50%);
  color: #4a3b33;
  -webkit-text-size-adjust: 100%;
  min-height: 100vh;
}

header {
  background: linear-gradient(135deg, #d8957c 0%, #c6836e 100%);
  color: #fff;
  padding: 16px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(200, 131, 110, 0.2);
  position: relative;
}
header::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0; right: 0;
  height: 6px;
  background:
    radial-gradient(circle at 10px 0, #d8957c 6px, transparent 6px) 0 0 / 20px 6px;
}
header h1 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
header h1::before {
  content: "🫧 ";
  margin-right: 4px;
  filter: saturate(1.2);
}
header .sub { font-size: 0.82rem; opacity: 0.95; background: rgba(255,255,255,0.18); padding: 3px 10px; border-radius: 12px; }

main { max-width: 960px; margin: 0 auto; padding: 20px 16px; }

.card {
  background: #fff;
  border-radius: 18px;
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow:
    0 2px 6px rgba(200, 131, 110, 0.08),
    0 8px 24px rgba(200, 131, 110, 0.06);
  border: 1px solid rgba(232, 220, 201, 0.6);
  position: relative;
}
.card h2 {
  margin: 0 0 14px;
  font-size: 1.05rem;
  color: #6a4a3d;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 2px dashed #f0d8c8;
}
.card h2::before {
  content: "❁";
  color: #d8957c;
  font-size: 1.1rem;
  transform: translateY(1px);
}
/* テーマ別 section icon (HTMLで class を指定) */
.card h2.t-money::before  { content: "💝"; color: inherit; }
.card h2.t-yen::before    { content: "🪙"; color: inherit; }
.card h2.t-note::before   { content: "📝"; color: inherit; }
.card h2.t-plant::before  { content: "🌱"; color: inherit; }
.card h2.t-bubble::before { content: "🫧"; color: inherit; }
.card h2.t-save::before   { content: "💾"; color: inherit; }
.card h2.t-gift::before   { content: "🎁"; color: inherit; }
.card h2.t-lock::before   { content: "🔒"; color: inherit; }
.card h2.t-shake::before  { content: "🤝"; color: inherit; }
.card h2.t-sparkle::before{ content: "✨"; color: inherit; }
.card h2.t-pencil::before { content: "✏️"; color: inherit; }

label {
  display: block;
  margin: 10px 0 4px;
  font-size: 0.88rem;
  color: #8a6e60;
  font-weight: 500;
}

input, select, button, textarea {
  font-size: 1rem;
  padding: 11px 14px;
  border: 1.5px solid #ead7c5;
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  width: 100%;
  max-width: 100%;
  color: #4a3b33;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #d8957c;
  box-shadow: 0 0 0 3px rgba(216, 149, 124, 0.15);
}

button {
  background: linear-gradient(135deg, #d8957c 0%, #c6836e 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 6px rgba(198, 131, 110, 0.25);
  transition: transform 0.08s, box-shadow 0.15s, filter 0.15s;
}
button:hover { filter: brightness(1.05); box-shadow: 0 4px 10px rgba(198, 131, 110, 0.3); }
button:active { transform: translateY(1px); }
button.secondary {
  background: linear-gradient(135deg, #b8a894 0%, #a09082 100%);
  box-shadow: 0 2px 6px rgba(160, 144, 130, 0.25);
}
button.danger {
  background: linear-gradient(135deg, #d17a6b 0%, #b5604f 100%);
  box-shadow: 0 2px 6px rgba(181, 96, 79, 0.25);
}
button.small { padding: 6px 12px; font-size: 0.82rem; width: auto; border-radius: 10px; }

.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 120px; }

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
th, td {
  padding: 10px 8px;
  border-bottom: 1px solid #f5e7da;
  text-align: left;
  vertical-align: top;
}
th {
  background: #fbf0e4;
  font-weight: 600;
  color: #8a6e60;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fdf8f3; }
tr.paid-row td { background: #f5faf0; }
tr.paid-row:hover td { background: #eef5e5; }

.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 14px;
  font-size: 0.72rem;
  background: #f3ebe1;
  color: #8a6e60;
  font-weight: 500;
  letter-spacing: 0.03em;
}
.tag.paid { background: #e4efd9; color: #5d7a3f; }
.tag.unpaid { background: #fde2d5; color: #a8513d; }
.tag.paid::before { content: "✿ "; }
.tag.unpaid::before { content: "⌛ "; }

.num { font-variant-numeric: tabular-nums; text-align: right; }

.empty {
  padding: 32px 20px;
  text-align: center;
  color: #b09a8a;
  font-size: 0.9rem;
}
.empty::before {
  content: "✿ ";
  color: #e0b4a2;
}

.error { color: #b5604f; font-size: 0.88rem; margin-top: 8px; }
.success { color: #5d7a3f; font-size: 0.88rem; margin-top: 8px; font-weight: 500; }

.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  padding: 4px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 14px;
}
.tabs button {
  width: auto;
  background: transparent;
  color: #8a6e60;
  border-radius: 10px;
  padding: 8px 16px;
  font-weight: 500;
  box-shadow: none;
  font-size: 0.9rem;
}
.tabs button:hover { background: rgba(216, 149, 124, 0.1); }
.tabs button.active {
  background: linear-gradient(135deg, #d8957c 0%, #c6836e 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(198, 131, 110, 0.25);
}

.hidden { display: none !important; }

.totals { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.total-box {
  flex: 1;
  min-width: 140px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fdf3e8 0%, #fae6d3 100%);
  border: 1px solid #f2dcc5;
  position: relative;
}
.total-box::before {
  content: "🪙";
  position: absolute;
  top: 10px; right: 14px;
  font-size: 1.2rem;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.08));
}
.total-box .label { font-size: 0.78rem; color: #a8816e; letter-spacing: 0.05em; }
.total-box .label::before { content: "✿ "; color: #d8957c; }
.total-box .value {
  font-size: 1.55rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #6a4a3d;
  margin-top: 4px;
}
.total-box.unpaid {
  background: linear-gradient(135deg, #fde4d8 0%, #fcd1bd 100%);
  border-color: #f5c7ae;
}
.total-box.unpaid::before { content: "🎀"; }
.total-box.unpaid .label::before { content: "⌛ "; color: #d88a72; }
.total-box.unpaid .value { color: #a8513d; }

/* 支払メタ情報(支払い完了日時・受け取り日時) */
.payment-meta {
  font-size: 0.78rem;
  color: #8a6e60;
  line-height: 1.5;
}
.payment-meta .label {
  display: inline-block;
  width: 6em;
  color: #a8816e;
  font-weight: 500;
}
.payment-meta .value { font-variant-numeric: tabular-nums; color: #5d4a3f; }
.payment-meta .placeholder { color: #c5b0a0; }

/* 情報カード(画面上部の案内) */
.info-card {
  background: linear-gradient(135deg, #fff8ec 0%, #fdefd9 100%);
  border: 1px solid #f3dfb9;
  border-left: 5px solid #e0b35e;
  border-radius: 16px;
  padding: 14px 18px 14px 46px;
  margin-bottom: 18px;
  color: #7a5a1e;
  font-size: 0.88rem;
  line-height: 1.7;
  position: relative;
}
.info-card b { color: #5a4312; }
.info-card::before {
  content: "🌼";
  position: absolute;
  left: 14px;
  top: 12px;
  font-size: 1.3rem;
}

/* 注意(黄色・オレンジ系) */
.notice-card {
  background: linear-gradient(135deg, #fff5f0 0%, #ffe5d6 100%);
  border: 1px solid #f6c6a8;
  border-left: 5px solid #ef8d60;
  border-radius: 16px;
  padding: 14px 18px 14px 46px;
  margin-bottom: 18px;
  color: #8a4a1e;
  font-size: 0.88rem;
  line-height: 1.7;
  position: relative;
}
.notice-card b { color: #5a2f0e; }
.notice-card::before {
  content: "🔔";
  position: absolute;
  left: 14px;
  top: 12px;
  font-size: 1.3rem;
  animation: wiggle 2.5s ease-in-out infinite;
}
@keyframes wiggle {
  0%, 80%, 100% { transform: rotate(0); }
  85% { transform: rotate(-12deg); }
  90% { transform: rotate(12deg); }
  95% { transform: rotate(-8deg); }
}

/* 成功(支払い済など明るい系) */
.success-card {
  background: linear-gradient(135deg, #eef6e5 0%, #d9ecc8 100%);
  border: 1px solid #b8d59a;
  border-left: 5px solid #7ea858;
  border-radius: 16px;
  padding: 14px 18px 14px 46px;
  margin-bottom: 18px;
  color: #3d5a24;
  font-size: 0.88rem;
  line-height: 1.7;
  position: relative;
}
.success-card::before {
  content: "✨";
  position: absolute;
  left: 14px;
  top: 12px;
  font-size: 1.3rem;
}

/* 初回パスワード変更バナー(強い警告) */
.alert-card {
  background: linear-gradient(135deg, #fde8e0 0%, #fcd5c6 100%);
  border: 1px solid #f4b8a0;
  border-left: 5px solid #d8745c;
  border-radius: 16px;
  padding: 14px 18px 14px 46px;
  margin-bottom: 18px;
  color: #8a4026;
  position: relative;
}
.alert-card::before {
  content: "💌";
  position: absolute;
  left: 14px;
  top: 12px;
  font-size: 1.3rem;
}

/* 2週間以上遅延の警告 */
.warn-card {
  background: linear-gradient(135deg, #fcd9c7 0%, #f7b89a 100%);
  border: 1.5px solid #e59472;
  border-left: 6px solid #c26a48;
  border-radius: 16px;
  padding: 14px 18px 14px 50px;
  margin-bottom: 18px;
  color: #7a3820;
  font-weight: 500;
  position: relative;
}
.warn-card::before {
  content: "⚠️";
  position: absolute;
  left: 14px;
  top: 12px;
  font-size: 1.4rem;
  animation: wiggle 1.8s ease-in-out infinite;
}

/* 1ヶ月以上遅延の重大アラート */
.danger-card {
  background: linear-gradient(135deg, #fcdbe0 0%, #f8b8c2 100%);
  border: 1.5px solid #e17590;
  border-left: 6px solid #c2446a;
  border-radius: 16px;
  padding: 14px 18px 14px 52px;
  margin-bottom: 18px;
  color: #8a1e3d;
  font-weight: 600;
  position: relative;
  animation: pulse-glow 2s ease-in-out infinite;
}
.danger-card::before {
  content: "🚨";
  position: absolute;
  left: 12px;
  top: 10px;
  font-size: 1.5rem;
  animation: shake 0.7s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 2px 10px rgba(194, 68, 106, 0.2); }
  50% { box-shadow: 0 6px 24px rgba(194, 68, 106, 0.45); }
}
@keyframes shake {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-12deg) scale(1.1); }
  75% { transform: rotate(12deg) scale(1.1); }
}

.alert-days {
  display: inline-block;
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 10px;
  border-radius: 12px;
  font-weight: 700;
  margin: 0 4px;
  font-variant-numeric: tabular-nums;
}

code {
  background: #fbf0e4;
  padding: 2px 6px;
  border-radius: 6px;
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 0.88em;
  color: #7a5a4a;
}

@media (max-width: 600px) {
  table { font-size: 0.82rem; }
  th, td { padding: 8px 6px; }
  main { padding: 14px 10px; }
  .card { padding: 16px 18px; border-radius: 16px; }
  header { padding: 14px 16px; }
  header h1 { font-size: 1rem; }
  .totals { gap: 8px; }
  .total-box { padding: 12px 14px; }
  .total-box .value { font-size: 1.35rem; }
}