/* Unit 1, Lesson 1: split widget, money-flow map, practice bank app. */
.cs-flow { animation: cs-flow 1.4s linear infinite; }
@keyframes cs-flow { to { stroke-dashoffset: -32; } }
.cs-coin { animation: cs-coin 3.2s var(--ease) infinite; }
@keyframes cs-coin { 0%, 15% { transform: translateY(-40px); opacity: 0; } 30% { opacity: 1; } 70%, 100% { transform: translateY(96px); opacity: 0; } }
.cs-bee { animation: cs-bee 2.6s ease-in-out infinite; }
@keyframes cs-bee { 50% { transform: translate(14px, 6px); } }
.cs-map { display: block; width: 100%; height: auto; margin: 28px 0 8px; }

/* Split your $900 */
.split { background: var(--card); border-radius: 24px; padding: clamp(18px, 3.5vw, 32px); box-shadow: 0 1px 0 var(--line), 0 24px 50px -30px rgba(60, 50, 30, .25); margin-top: 24px; }
.split-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.split-top b { font-family: var(--serif); font-weight: 500; font-size: 34px; color: var(--savings); font-variant-numeric: tabular-nums; }
.split input[type=range] { margin: 14px 0 22px; }
.split-accts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.split-acct { border-radius: 18px; padding: 16px 18px; color: #fff; }
.split-acct.chk { background: var(--needs); }
.split-acct.sav { background: var(--savings); }
.split-acct small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.split-acct b { display: block; font-family: var(--serif); font-weight: 500; font-size: 38px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.split-acct p { margin: 2px 0 0; font-size: 14px; opacity: .92; }
:root[data-theme="dark"] .split-acct { color: var(--on-color); }
.split-bar { display: block; width: 100%; height: auto; margin-top: 18px; }
#sp-fill { transition: width .25s var(--ease); }
.split-msg { margin: 12px 0 0; font-size: 17px; line-height: 1.5; min-height: 3em; padding-left: 14px; border-left: 4px solid var(--line); }
.split-msg[data-tone="good"] { border-color: var(--good); }
.split-msg[data-tone="warn"] { border-color: var(--wants); }
.split-msg[data-tone="bad"] { border-color: var(--danger); }

/* Practice bank app */
.bank-game { display: grid; grid-template-columns: 360px 1fr; gap: 28px; align-items: start; margin-top: 28px; }
.phone {
  background: var(--paper-2); border-radius: 36px; padding: 18px 16px 20px; border: 8px solid var(--ink);
  box-shadow: 0 30px 60px -30px rgba(40, 30, 10, .45); position: sticky; top: 84px;
}
:root[data-theme="dark"] .phone { border-color: #3a382f; }
.ph-bar { display: flex; justify-content: space-between; align-items: center; margin: 0 4px 12px; font-size: 13px; }
.ph-bank { font-family: var(--serif); font-size: 18px; font-style: italic; color: var(--accent); }
.ph-week { font-weight: 700; color: var(--ink-2); }
.ph-acct { border-radius: 18px; padding: 12px 16px; color: #fff; margin-bottom: 10px; transition: box-shadow .3s; }
.ph-acct.chk { background: var(--needs); }
.ph-acct.sav { background: var(--savings); }
:root[data-theme="dark"] .ph-acct { color: var(--on-color); }
.ph-acct small { display: block; font-size: 12px; font-weight: 600; opacity: .9; }
.ph-acct b { display: block; font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ph-acct b.neg { color: #ffd2cb; }
:root[data-theme="dark"] .ph-acct b.neg { color: #6b1a12; }
.ph-acct span { font-size: 12px; opacity: .85; }
.flash-bad { animation: flash-bad .7s ease; }
@keyframes flash-bad { 30% { box-shadow: 0 0 0 5px var(--danger); transform: translateX(-4px); } 60% { transform: translateX(4px); } }
.flash-good { animation: flash-good .7s ease; }
@keyframes flash-good { 40% { box-shadow: 0 0 0 5px var(--highlight); } }
.ph-transfer { background: var(--card); border-radius: 18px; padding: 12px 14px; margin: 4px 0 12px; display: grid; gap: 10px; }
.ph-title { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ph-act-title { display: block; margin: 4px 4px 6px; }
.ph-dir { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ph-dir .chip { font-size: 12.5px; padding: 8px 6px; justify-content: center; text-align: center; }
.ph-amt { display: grid; grid-template-columns: 40px 1fr 40px; gap: 8px; align-items: center; }
.ph-amt .icon-btn { font-size: 20px; line-height: 1; }
.ph-amt-in { display: flex; align-items: center; justify-content: center; gap: 2px; font-family: var(--serif); font-size: 26px; border-bottom: 2px solid var(--line); }
.ph-amt-in input { width: 5ch; border: 0; background: transparent; font: inherit; color: var(--ink); text-align: left; padding: 2px 0; }
.ph-amt-in input:focus { outline: none; }
.ph-amt-in:focus-within { border-color: var(--accent); }
.ph-transfer .btn { width: 100%; justify-content: center; }
.ph-wd { font-size: 12px; color: var(--ink-3); text-align: center; }
.ph-transfer button:disabled, .ph-transfer input:disabled { opacity: .45; cursor: not-allowed; }
.ph-activity { list-style: none; padding: 0; margin: 0; max-height: 300px; overflow-y: auto; background: var(--card); border-radius: 18px; }
.ph-activity li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); animation: ph-in .35s var(--ease); }
.ph-activity li:last-child { border-bottom: 0; }
@keyframes ph-in { from { opacity: 0; transform: translateY(-8px); } }
.ph-activity b { display: block; font-weight: 600; font-size: 14px; line-height: 1.3; }
.ph-activity small { font-size: 12px; color: var(--ink-3); }
.ph-activity em { font-style: normal; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ph-activity .in em { color: var(--good); }
.ph-activity .out em { color: var(--ink); }
.ph-activity .move em { color: var(--accent); }
.ph-activity .fee { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.ph-activity .fee em, .ph-activity .fee b { color: var(--danger); }
.ph-activity .surprise small { color: var(--wants); font-weight: 700; }

.coach .left-big { font-size: 30px; margin: 6px 0 14px; }
.upcoming { list-style: none; padding: 0; margin: 0 0 6px; }
.upcoming li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.upcoming li b { font-variant-numeric: tabular-nums; }
.upcoming li.total { font-weight: 700; border-bottom: 2px solid var(--ink-3); }
.upcoming li.muted { color: var(--ink-3); font-style: italic; border-bottom: 0; font-size: 15px; }
.coach #g-go { margin-top: 16px; }

@media (max-width: 900px) {
  .bank-game { grid-template-columns: 1fr; }
  .phone { position: static; max-width: 400px; margin: 0 auto; width: 100%; box-sizing: border-box; }
}
@media (max-width: 560px) {
  .split-accts { grid-template-columns: 1fr; }
  .split-acct b { font-size: 32px; }
  .phone { border-width: 6px; border-radius: 30px; padding: 14px 12px 16px; }
  .coach .left-big { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .cs-flow, .cs-coin, .cs-bee, .ph-activity li { animation: none; } }