@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

:root {
  --night: #161c34;
  --night-2: #1f2747;
  --paper: #f6efe0;
  --paper-2: #ece2cc;
  --ink: #2b2418;
  --sakura: #e18aa8;
  --sakura-deep: #c65b83;
  --gold: #c9a15a;
  --torii: #b3402b;
  --jade: #4f7a63;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  background: var(--night);
  color: var(--ink);
}

.layout {
  display: flex;
  min-height: 100vh;
}

/* SIDEBAR */
.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  border-right: 1px solid rgba(201,161,90,0.25);
  display: flex;
  flex-direction: column;
  position: relative;
}
.brand { padding: 24px 20px 16px; }
.brand-kanji { color: var(--gold); font-family: 'Shippori Mincho', serif; font-size: 28px; font-weight: 700; }
.brand-sub { color: var(--paper); opacity: 0.8; font-size: 13px; }

.nav { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; }
.nav-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  color: var(--paper);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.nav-btn .kanji { font-family: 'Shippori Mincho', serif; opacity: 0.5; font-size: 12px; }
.nav-btn.active { background: rgba(201,161,90,0.16); color: var(--gold); border-left-color: var(--gold); font-weight: 700; }

.stamp {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 52px;
  height: 52px;
  border: 2.5px solid var(--torii);
  color: var(--torii);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  transform: scale(0.5) rotate(-15deg);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), opacity 0.4s;
}
.stamp.show { transform: scale(1) rotate(-8deg); opacity: 1; }

/* CONTENT */
.content { flex: 1; padding: 32px; max-width: 100%; overflow-x: hidden; }
.content h1 {
  color: var(--paper);
  font-family: 'Shippori Mincho', serif;
  font-size: 28px;
  margin: 0;
}
.divider { height: 2px; width: 160px; background: linear-gradient(90deg, var(--gold), transparent); margin: 10px 0 24px; }

.tab-section { display: none; }
.tab-section.active { display: block; }

.card {
  background: var(--paper);
  border: 1px solid var(--paper-2);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(22,28,52,0.12);
}

.stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.stat-box {
  background: #fffdf8;
  border: 1px solid var(--paper-2);
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 130px;
  flex: 1;
}
.stat-label { font-size: 11px; text-transform: uppercase; color: var(--night-2); opacity: 0.7; }
.stat-value { font-family: 'Shippori Mincho', serif; font-size: 22px; font-weight: 700; color: var(--sakura-deep); }

.grid-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; color: var(--night-2); }
.grid-form input, .grid-form select {
  border: 1px solid var(--paper-2);
  background: #fffdf8;
  color: var(--ink);
  border-radius: 6px;
  padding: 9px 10px;
  font-size: 14px;
  font-family: inherit;
}
.grid-form input:focus, .grid-form select:focus { outline: none; border-color: var(--sakura-deep); }
.full { grid-column: 1 / -1; }

.auto-hint {
  grid-column: 1 / -1;
  font-size: 12px;
  background: var(--paper-2);
  color: var(--night-2);
  padding: 8px 12px;
  border-radius: 6px;
  min-height: 14px;
}

.btn-primary, .btn-secondary {
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.btn-primary { background: var(--sakura-deep); color: #fff; }
.btn-secondary { background: var(--paper-2); color: var(--ink); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

.search {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--paper-2);
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 14px;
  background: #fffdf8;
  font-family: inherit;
}

.hint-text { font-size: 14px; color: var(--night-2); margin-top: 0; }

.table-wrap { overflow-x: auto; border: 1px solid var(--paper-2); border-radius: 10px; }
table.ledger { width: 100%; border-collapse: collapse; font-size: 13px; }
table.ledger th {
  background: var(--night-2);
  color: var(--paper);
  text-align: left;
  padding: 9px 12px;
  white-space: nowrap;
  font-weight: 500;
}
table.ledger td { padding: 9px 12px; white-space: nowrap; border-top: 1px solid var(--paper-2); }
table.ledger tr:nth-child(even) td { background: var(--paper); }
table.ledger tr:nth-child(odd) td { background: #fffdf8; }
table.ledger .empty { text-align: center; opacity: 0.6; padding: 24px; }
.mou-cell { color: var(--sakura-deep); font-weight: 700; }
.sisa-pos { color: var(--jade); font-weight: 700; }
.sisa-neg { color: var(--torii); font-weight: 700; }
.del-btn { background: none; border: none; color: var(--torii); cursor: pointer; font-size: 14px; }

@media (max-width: 800px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; }
  .nav { flex-direction: row; overflow-x: auto; padding: 8px 12px 12px; }
  .nav-btn { flex-shrink: 0; }
  .brand { display: none; }
  .stamp { display: none; }
  .content { padding: 16px; }
  .grid-form { grid-template-columns: 1fr; }
}