:root { --blue:#0071e3; --ink:#1d1d1f; --sub:#6e6e73; --line:#e5e5e7; --canvas:#f5f5f7; --card:#fff; --green:#16824a; --red:#d03939; } * { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--canvas); font-family:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; } button,input { font:inherit; } button { cursor:pointer; } .app-shell { width:min(100%, 720px); min-height:100dvh; margin:0 auto; padding:42px 20px 64px; } .app-header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:38px; } .eyebrow { margin:0 0 7px; color:var(--blue); font:600 11px/1 'Outfit',sans-serif; letter-spacing:.13em; } h1,h2,p { margin:0; } h1 { font-size:clamp(30px,7vw,40px); letter-spacing:-.055em; line-height:1.18; } .subtitle { margin-top:9px; color:var(--sub); font-size:14px; } .date-pill { margin-top:4px; padding:8px 10px; background:#e9e9eb; border-radius:9px; color:#55555a; font:600 12px 'Outfit',sans-serif; white-space:nowrap; } .section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; } .section-heading h2 { font-size:19px; letter-spacing:-.04em; } .section-heading p { color:var(--sub); font-size:12px; } .total-balance { font:700 20px 'Outfit',sans-serif; letter-spacing:-.03em; } .person-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .person-card { display:grid; grid-template-columns:34px 1fr; column-gap:10px; padding:13px; text-align:left; border:1px solid transparent; background:var(--card); border-radius:16px; box-shadow:0 1px 1px #00000005; transition:.2s ease; } .person-card:hover,.person-card.active { border-color:#97c7f8; background:#f6fbff; } .person-initial { display:grid; place-items:center; grid-row:span 2; width:34px; height:34px; background:#e6f2ff; color:#0066cc; border-radius:50%; font-weight:700; font-size:14px; } .person-card-copy strong { font-size:14px; font-weight:600; } .person-card-copy small { display:block; margin-top:2px; color:var(--sub); font-size:10px; } .card-balance { grid-column:2; margin-top:8px; font:700 17px 'Outfit',sans-serif; letter-spacing:-.03em; } .negative { color:var(--red)!important; } .entry-panel { margin-top:34px; padding:21px; border:1px solid #e8e8ea; background:var(--card); border-radius:23px; box-shadow:0 5px 20px #00000008; } .compact { margin-bottom:19px; } fieldset { padding:0; margin:0 0 20px; border:0; } legend { margin-bottom:9px; color:var(--sub); font-size:12px; font-weight:600; } .person-selector,.type-selector { display:grid; gap:7px; } .person-selector { grid-template-columns:repeat(4,1fr); } .type-selector { grid-template-columns:repeat(4,1fr); } .person-option,.type-option { min-width:0; border:1px solid var(--line); color:#48484c; background:#fff; border-radius:12px; transition:.18s ease; } .person-option { padding:10px 3px; font-size:13px; } .type-option { display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 2px; font-size:11px; } .person-option.selected,.type-option.selected { border-color:var(--blue); color:#0066cc; background:#f1f8ff; box-shadow:inset 0 0 0 1px var(--blue); } .type-icon { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; color:#fff; background:var(--blue); font-size:15px; font-weight:500; line-height:1; } .type-icon.buy { background:#e66161; } .type-icon.win { background:#25a160; } .type-icon.clear { background:#8a8a8e; font-size:12px; } .amount-field { display:flex; align-items:center; padding:7px 0 5px; border-bottom:1px solid var(--line); } .amount-field > span:first-child { flex:1; color:var(--sub); font-size:13px; } .currency-mark { padding:0 3px; font:600 27px 'Outfit',sans-serif; } #amount-input { width:min(57%,180px); padding:0; border:0; outline:0; text-align:right; color:var(--ink); font:600 32px 'Outfit',sans-serif; letter-spacing:-.04em; } #amount-input::placeholder { color:#c7c7cc; } .quick-amounts { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:11px 0 19px; } .quick-amounts button { padding:7px 2px; border:0; border-radius:8px; color:#0071e3; background:#f1f7fd; font:600 11px 'Outfit',sans-serif; } .date-field { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; margin-bottom:14px; border-bottom:1px solid var(--line); } .date-field > span { color:var(--sub); font-size:12px; font-weight:600; } #occurred-on-input { min-width:145px; border:0; outline:0; color:var(--ink); background:transparent; font:600 13px 'Outfit',sans-serif; } .note-field { display:block; margin-bottom:17px; } .note-field > span { display:block; margin-bottom:7px; color:var(--sub); font-size:12px; font-weight:600; } .note-field em { color:#a1a1a6; font-size:10px; font-style:normal; font-weight:400; } #note-input { width:100%; padding:10px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; outline:0; background:transparent; font-size:14px; } .save-button { width:100%; border:0; border-radius:13px; padding:14px; color:#fff; background:var(--blue); box-shadow:0 6px 12px #0071e337; font-weight:700; transition:background .2s,transform .2s; } .save-button:hover { background:#0077ed; transform:translateY(-1px); } .save-button:disabled { opacity:.6; cursor:wait; } .history-section { margin-top:36px; } .filter-button { padding:6px 10px; border:0; background:transparent; color:var(--blue); font-size:12px; font-weight:600; } .history-list { overflow:hidden; background:#fff; border:1px solid #e8e8ea; border-radius:18px; } .history-item { display:flex; align-items:center; gap:11px; min-height:68px; padding:11px 14px; border-bottom:1px solid #f0f0f1; } .history-item:last-child { border-bottom:0; } .history-icon { display:grid; flex:0 0 auto; place-items:center; width:30px; height:30px; color:#fff; background:#0071e3; border-radius:50%; font-size:18px; } .history-icon.purchase { background:#e66161; } .history-icon.payout { background:#25a160; } .history-icon.settlement { background:#8a8a8e; font-size:13px; } .history-copy { min-width:0; flex:1; } .history-copy strong { display:block; overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; } .history-copy em { color:var(--sub); font-style:normal; font-weight:400; } .history-copy small { display:block; overflow:hidden; margin-top:3px; color:var(--sub); font-size:10px; text-overflow:ellipsis; white-space:nowrap; } .history-right { display:flex; flex-direction:column; align-items:flex-end; gap:3px; } .history-right strong { font:600 14px 'Outfit',sans-serif; } .history-right .plus { color:var(--green); } .history-right .minus { color:var(--red); } .delete-button { padding:0; border:0; color:#a1a1a6; background:transparent; font-size:9px; } .empty-state { padding:35px 20px; text-align:center; } .empty-state span { display:grid; place-items:center; width:28px; height:28px; margin:0 auto 8px; border-radius:50%; color:#8e8e93; background:#f0f0f2; font-size:17px; } .empty-state p { font-size:14px; font-weight:600; } .empty-state small { display:block; margin-top:4px; color:var(--sub); font-size:11px; } .empty-state.warning span { color:#bd6500; background:#fff2df; } #toast { position:fixed; z-index:3; bottom:25px; left:50%; max-width:calc(100% - 40px); padding:11px 14px; border-radius:12px; color:#fff; background:#1d1d1fe8; font-size:12px; opacity:0; pointer-events:none; transform:translate(-50%,15px); transition:.25s ease; } #toast.visible { opacity:1; transform:translate(-50%,0); } #toast.error { background:#b42318; } @media (min-width:600px) { .app-shell { padding-top:60px; } .entry-panel { padding:28px; } .person-card { padding:16px; } } @media (max-width:370px) { .app-shell { padding-left:14px; padding-right:14px; } .entry-panel { padding:17px; } .person-option { font-size:12px; } }