:root { --paper-bg: #fefdf5; --ink-color: #4b3832; --border-thick: 3px; --success-green: #22c55e; }
body { font-family: 'Zen Maru Gothic', sans-serif; background-color: var(--paper-bg); color: var(--ink-color); background-image: radial-gradient(#e5e7eb 1.5px, transparent 1.5px); background-size: 30px 30px; }
.hand-drawn-card { background: white; border: var(--border-thick) solid var(--ink-color); border-radius: 35px; box-shadow: 10px 10px 0px var(--ink-color); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; }
.wobble-hover:hover { transform: translate(-6px, -6px) rotate(-1.5deg); box-shadow: 16px 16px 0px var(--ink-color); }
.month-chip { aspect-ratio: 1/1; border: var(--border-thick) solid var(--ink-color); border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; background: white; position: relative; }
.month-chip:hover { transform: scale(1.05); background: #f8fafc; }
.inline-input { background: #fffcea; border: 2px solid #4b3832; border-radius: 8px; padding: 4px; width: 100%; font-size: 0.9rem; font-weight: 900; color: #1e293b; outline: none; }
.table-container { overflow-x: auto; border: var(--border-thick) solid var(--ink-color); border-radius: 20px; background: white; box-shadow: 10px 10px 0px var(--ink-color); }
table { table-layout: fixed; width: 100%; border-collapse: collapse; min-width: 1000px; }
th { background: #f8fafc; border-bottom: var(--border-thick) solid var(--ink-color); padding: 12px 8px; text-align: left; font-size: 0.85rem; font-weight: 900; position: relative; }
td { border-bottom: 1px dashed #e2e8f0; padding: 10px 8px; font-size: 0.9rem; min-height: 48px; }
.nowrap { white-space: nowrap; }
.resize-handle { position: absolute; right: 0; top: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 10; }
.resize-handle:hover { background: rgba(0,0,0,0.1); }
.drag-handle { cursor: grab; color: #cbd5e1; font-size: 1.2rem; user-select: none; padding: 0 4px; }
.summary-card { display: flex; align-items: center; justify-content: flex-end; padding: 20px 0; }
.summary-badge { background: white; border: var(--border-thick) solid var(--ink-color); padding: 10px 25px; border-radius: 15px; box-shadow: 6px 6px 0px var(--ink-color); display: flex; flex-direction: column; align-items: flex-end; }
.summary-badge.all-paid { border-color: var(--success-green); box-shadow: 6px 6px 0px var(--success-green); }
.summary-amount { font-size: 2rem; line-height: 1; margin-top: 4px; }
tr.dragging { opacity: 0.4; background: #f1f5f9; }