/* 一心銀行：套用已選定的粗圓線條 Logo。 */
:root {
  --bg: #061d43;
  --panel: #102a58;
  --line: #31507e;
  --muted: #afc0d9;
  --gold: #f3b331;
  --gold2: #ffd570;
  --blue: #a4c9ff;
}

body {
  background:
    radial-gradient(circle at 75% -10%, #224e8e 0, transparent 30rem),
    linear-gradient(145deg, #051735, #0a285b 55%, #04152f);
}

.sidebar { background: rgba(4, 20, 48, .8); }

.brand-logo {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 15px;
  object-fit: cover;
  box-shadow: 0 10px 26px #0008;
}

.brand small { color: #a9bddc; }
.mobile-brand { display: none; }

.fund-board {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 24px;
  margin-bottom: 22px;
  padding: clamp(22px, 4vw, 38px);
  overflow: hidden;
  border: 1px solid #f3b33166;
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 12%, #ffd5702b 0, transparent 15rem),
    linear-gradient(135deg, #102f67, #091f49 65%, #071936);
  box-shadow: 0 28px 65px #0005, inset 0 1px #ffffff18;
}

.fund-board h2 { margin: 3px 0 2px; font-size: clamp(25px, 4vw, 38px); }
.fund-board-number { display: flex; align-items: baseline; gap: 9px; margin: 4px 0 0; }
.fund-board-number strong { color: var(--gold2); font-size: clamp(48px, 8vw, 82px); line-height: 1; letter-spacing: -.04em; }
.fund-board-number span { color: var(--muted); font-weight: 800; }
.fund-board-gap { margin: 9px 0 16px; color: #fff; font-size: 17px; font-weight: 750; }
.fund-progress { height: 15px; overflow: hidden; border: 1px solid #ffffff1c; border-radius: 99px; background: #020e2580; }
.fund-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #eaa826, #ffe49b); box-shadow: 0 0 22px #f3b33188; transition: width .35s ease; }
.fund-board-meta { display: flex; justify-content: space-between; gap: 15px; margin-top: 8px; color: #dbe8fb; font-size: 13px; font-weight: 700; }
.fund-board-note { margin: 15px 0 0; color: #b9cae2; font-size: 12px; }
.fund-board-side { display: grid; align-content: space-between; gap: 24px; padding: 18px; border: 1px solid #ffffff17; border-radius: 22px; background: #020f2861; }
.board-goal { display: grid; gap: 5px; }
.board-goal span, .board-section-title { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.board-goal strong { color: #fff; font-size: clamp(23px, 3vw, 34px); }
.board-goal small { color: var(--gold2); }
.board-section-title { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.board-section-title small { color: #8fa8ca; letter-spacing: 0; }
.rank-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rank-board-item { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 4px; padding: 10px; border: 1px solid #ffffff12; border-left: 3px solid var(--rank-color, #789); border-radius: 12px; background: #ffffff09; }
.rank-board-item span { overflow: hidden; font-size: 12px; font-weight: 750; text-overflow: ellipsis; }
.rank-board-item strong { color: #fff; font-size: 23px; }
.rank-board-item small { color: var(--muted); font-size: 10px; }
.rank-board-item.bronze, .reward-item.bronze { --rank-color: #9f734c; }
.rank-board-item.silver, .reward-item.silver { --rank-color: #aebccc; }
.rank-board-item.gold, .reward-item.gold { --rank-color: #eabd4a; }
.rank-board-item.platinum, .reward-item.platinum { --rank-color: #64d1d3; }
.rank-board-item.diamond, .reward-item.diamond { --rank-color: #a7a5ff; }
.rank-board-item.stellar, .reward-item.stellar { --rank-color: #ffcf57; }

.stats-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.salary-preview { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.salary-preview > div { min-width: 0; }
.salary-preview span { line-height: 1.35; }
.milestone-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.milestone.done { border-color: #f3b33166; background: linear-gradient(145deg, #f3b33112, transparent); }
.milestone.done small { color: var(--gold2); font-weight: 750; }

.bonus-tier-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.bonus-tier { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #071d42; }
.bonus-tier span { color: var(--muted); font-size: 12px; }
.bonus-tier strong { font-size: 19px; }
.bonus-tier.active { border-color: var(--gold); background: #f3b33116; box-shadow: inset 0 0 0 1px #f3b33122; }
.bonus-tier.active strong { color: var(--gold2); }
.reward-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.reward-item { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 3px 8px; padding: 12px; border: 1px solid #ffffff12; border-top: 3px solid var(--rank-color); border-radius: 13px; background: #071d42; }
.reward-item span { font-weight: 750; }
.reward-item strong { color: #fff; font-size: 21px; }
.reward-item small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.rank-chip.stellar { color: #2d1b00; border-color: #ffcf57; background: linear-gradient(135deg, #ffd568, #fff0b5); box-shadow: 0 0 16px #ffcf5744; }
.rank-row > span:first-child { display: grid; gap: 1px; }
.rank-row > span:first-child small { color: var(--muted); font-size: 10px; }

button:disabled { cursor: not-allowed; opacity: .55; }
td > small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.student-result-grid small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }

@media (max-width: 900px) {
  .mobile-head { background: #051836ed; }
  .mobile-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
  }
  .mobile-brand img {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    object-fit: cover;
  }
  .fund-board { grid-template-columns: 1fr; padding: 21px; border-radius: 22px; }
  .stats-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .milestone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .rank-board, .bonus-tier-list, .reward-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .salary-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fund-board-side { padding: 14px; }
  .fund-board-number strong { font-size: 54px; }
  .fund-board-meta, .board-section-title { flex-wrap: wrap; }
  .fund-board-meta { font-size: 11px; }
  .board-section-title small { font-size: 10px; }
}

/* CloseClaw 03: shared light Bento shell while retaining the bank workflow. */
:root {
  --bg: #f3f5f7;
  --panel: #ffffff;
  --line: #dce4e8;
  --ink: #0a2138;
  --muted: #607080;
  --gold: #e7ba18;
  --gold2: #8a6500;
  --blue: #0a668f;
  --green: #13795b;
  --red: #c64267;
  --radius: 8px;
}

body { background: var(--bg); color: var(--ink); letter-spacing: 0; }
.sidebar { border-color: var(--line); background: #ffffff; backdrop-filter: none; }
.brand strong { color: var(--ink); }
.brand small,.local-note { color: var(--muted); }
.nav-item { border-radius: 8px; color: #405669; }
.nav-item:hover { background: #eef3f5; color: var(--ink); }
.nav-item.active { background: #fff3b3; color: #493900; box-shadow: inset 3px 0 #e3b400; }
.page-heading h1,.student-intro h1 { color: var(--ink); letter-spacing: 0; }
.eyebrow { color: #795b00; letter-spacing: 0; }
.button { border-radius: 8px; border-color: var(--line); background: #fff; color: var(--ink); }
.button:hover { border-color: #b7c7cf; background: #eef3f5; }
.button.gold { border-color: #d9bb3b; background: #ffd21f; color: #111318; box-shadow: none; }
.stat-card,.panel,.student-result,.student-rules { border-radius: 8px; border-color: var(--line); background: #fff; color: var(--ink); box-shadow: 0 12px 30px rgba(10,33,56,.07); }
.stat-card.gold-card { border-color: #e8d06c; background: #fff4b8; }
.stat-card strong,.student-result-grid strong { color: var(--ink); }
.gold-card strong,.salary-preview strong,.balance-box strong,.quick-actions b { color: #725500; }
.milestone,.salary-preview div,.balance-box,.shop-item,.bonus-tier,.reward-item,.student-result-grid div { border-radius: 8px; border-color: var(--line); background: #f6f8f9; color: var(--ink); }
.milestone.done { border-color: #e5c958; background: #fff8d5; }
.panel label { color: #405669; }
.panel input,.panel select,.lookup-form input { border-radius: 8px; border-color: var(--line); background: #fff; color: var(--ink); }
.fund-board { border-radius: 8px; border-color: #bddfd2; background: #dff8ed; box-shadow: 0 12px 30px rgba(10,33,56,.07); }
.fund-board h2,.fund-board-gap,.board-goal strong,.rank-board-item strong,.reward-item strong { color: var(--ink); }
.fund-board-number strong,.board-goal small { color: #6d5200; letter-spacing: 0; }
.fund-progress { background: #c5ddd5; }.fund-progress span { background: #ffd21f; box-shadow: none; }
.fund-board-meta,.fund-board-note { color: #405f59; }
.fund-board-side { border-radius: 8px; border-color: #b8ded0; background: rgba(255,255,255,.74); }
.rank-board-item { border-radius: 8px; border-color: var(--line); background: #fff; }
.rank-chip,.status-chip,.status-pill { border-radius: 5px; }
.record-item,th,td { border-color: #e3e9ec; }
#toast { border-radius: 8px; background: #0a2138; color: #fff; }

@media (max-width: 900px) {
  .mobile-head { border-color: var(--line); background: rgba(255,255,255,.96); }
  .mobile-head a,.icon-button,.mobile-brand { color: var(--ink); }
  .fund-board { border-radius: 8px; }
}