:root{font-family:Inter,Roboto,"Segoe UI",Arial,sans-serif;color:#172231;background:#edf2f5;font-synthesis:none}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.5}svg{flex:none}.shell{max-width:760px;min-height:100dvh;margin:auto;background:#f7f9fb;position:relative;box-shadow:0 0 50px #12233812;padding-bottom:102px}.topbar{height:66px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;background:#fff}.brand{font-size:18px;font-weight:800;letter-spacing:-.04em;display:flex;align-items:center;gap:9px}.brand-mark{width:32px;height:32px;border:7px solid #20bec8;border-radius:50%;color:transparent;display:block}.currency-pill{border:0;background:#eaf2f4;border-radius:30px;padding:8px 12px;font-weight:700;color:#526271}.month-nav{height:54px;display:flex;justify-content:center;align-items:center;gap:22px;background:#fff;border-bottom:1px solid #e6ebef}.month-nav strong{min-width:152px;text-align:center;font-size:14px}.month-nav button{background:none;border:0;color:#72818c;font-size:27px;line-height:1;padding:5px 12px}.summary-bar{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;padding:18px 12px 20px;box-shadow:0 3px 9px #14202a0b}.summary-bar div{text-align:center;border-right:1px solid #e7ebee;min-width:0}.summary-bar div:last-child{border:0}.summary-bar span,.stats-cards span{display:block;color:#788693;font-size:12px;margin-bottom:5px}.summary-bar strong{display:block;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selection-note{margin:14px 18px 0;background:#e5f8f7;color:#076a73;padding:12px;border-radius:12px;font-size:13px}.selection-note button{border:0;background:none;color:#006d79;font-weight:700;text-decoration:underline}.circle-section{padding:24px 17px 4px;background:#fff;margin-top:12px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.section-heading h2,.section-heading h3{margin:0;font-size:16px}.section-heading span{font-size:12px;color:#87939d}.text-button{border:0;background:none;display:flex;align-items:center;gap:3px;color:#108c9b;font-size:13px;font-weight:700}.circle-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 6px}.circle-card{border:0;background:none;min-width:0;display:flex;flex-direction:column;align-items:center;color:#62717d;padding:0 2px 7px}.circle-card.selected .circle{outline:4px solid #203147;outline-offset:3px}.circle-title{display:block;width:100%;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:9px}.circle{height:min(20vw,95px);width:min(20vw,95px);border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:inset 0 -8px 18px #0000000a}.circle.income{background:#17b9d3}.circle.account{background:#ffc823}.circle.idle{background:#c5cbd0}.circle.spent{background:linear-gradient(to top,#19c998 var(--fill),#c5cbd0 var(--fill))}.circle.over{background:#f48172}.circle-card strong{font-size:12px;margin-top:11px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:#05a69a}.circle-card:has(.account) strong{color:#d09a00}.circle-card small{font-size:10px;color:#98a4ad;margin-top:4px}.show-all{display:block;border:0;background:none;color:#138e9d;font-weight:700;padding:18px;margin:0 auto}.bottom-nav{height:75px;position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(760px,100%);background:#fff;border-top:1px solid #e6ecf0;display:grid;grid-template-columns:repeat(4,1fr);z-index:10;padding-bottom:env(safe-area-inset-bottom)}.bottom-nav button{border:0;background:none;color:#8a98a3;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;font-size:11px}.bottom-nav button.active{color:#0d99a7;font-weight:800}.fab{position:fixed;z-index:9;bottom:89px;left:calc(50% + min(380px,50vw) - 75px);height:56px;width:56px;border-radius:50%;border:0;background:#0db6c2;color:#fff;display:grid;place-items:center;box-shadow:0 7px 22px #0a8b9660}.stats-top,.settings-intro{padding:25px 20px 8px}.stats-top h2,.settings-intro h2{margin:0 0 5px;font-size:24px}.stats-top p,.settings-intro p{margin:0;color:#7c8994;font-size:14px}.stats-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 16px}.stats-cards>div{padding:16px 10px;background:#fff;border-radius:14px;min-width:0}.stats-cards strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.panel{margin:14px 16px;padding:20px;background:#fff;border-radius:16px;box-shadow:0 2px 12px #14202a08}.panel h3{margin:0 0 11px;font-size:17px}.panel p{font-size:13px;line-height:1.5;color:#697986}.panel small{font-size:12px;color:#7b8892}.bar-chart{height:220px;display:flex;align-items:end;gap:7px;border-bottom:1px solid #dce3e8;margin:37px 1px 20px}.bar-col{flex:1;height:100%;min-width:0;display:flex;flex-direction:column;justify-content:end;align-items:center;position:relative}.bar{width:100%;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#3ed5c7,#16afc4)}.bar-value{font-size:9px;color:#7f8d99;margin-bottom:4px;white-space:nowrap}.bar-col small{position:absolute;top:calc(100% + 5px);font-size:9px;color:#8b98a3}.donut-wrap{display:flex;justify-content:center;padding:12px}.donut{width:180px;height:180px;border-radius:50%;display:grid;place-items:center}.donut>div{width:122px;height:122px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column}.donut strong{font-size:17px}.donut small{color:#9aa6af}.category-bars{margin-top:6px}.category-row{margin-top:14px;font-size:12px}.category-row>div:first-child{display:flex;align-items:center;gap:7px}.category-row strong{margin-left:auto}.legend-dot{height:9px;width:9px;border-radius:50%;display:inline-block}.track{height:7px;background:#edf1f3;border-radius:10px;margin-top:7px;overflow:hidden}.track span{height:100%;display:block;border-radius:10px}.empty{color:#91a0aa;text-align:center;padding:50px 15px}.history-tools{background:#fff;padding:16px}.history-tools input{width:100%;border:1px solid #e2e8ec;border-radius:11px;background:#f7fafb;padding:12px 14px;outline-color:#17b9c6}.chips{display:flex;gap:7px;overflow:auto;margin-top:14px}.chip{border:1px solid #dce4e8;background:#fff;border-radius:30px;padding:8px 12px;color:#657682;font-size:12px;white-space:nowrap}.chip.active{background:#123246;border-color:#123246;color:#fff}.history-list{background:#fff;margin-top:10px}.history-row{min-height:72px;display:flex;align-items:center;gap:11px;padding:10px 16px;border-bottom:1px solid #eff2f4}.history-symbol{height:36px;width:36px;border-radius:50%;background:#eaf3f6;color:#1caabd;display:grid;place-items:center}.history-symbol.income,.history-symbol.refund{background:#e5f8ef;color:#22ad79}.history-symbol.transfer{background:#f3f0ff;color:#8d78ce}.history-info{min-width:0;flex:1}.history-info strong,.history-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-info strong{font-size:13px}.history-info small{font-size:11px;color:#91a0a9;margin-top:4px}.history-amount{font-size:12px;font-weight:700;white-space:nowrap}.history-amount.expense{color:#d7635b}.history-amount.income,.history-amount.refund{color:#16a875}.row-menu{border:0;background:none;font-size:22px;color:#7c8b97;padding:4px}.settings-intro{padding-bottom:0}.panel label{font-size:12px;color:#647682;display:block;margin-top:14px;font-weight:700}.panel input,.panel select,.sheet input,.sheet select{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid #dce5e9;border-radius:9px;background:#fff;color:#1c2d38;outline-color:#1ab5c1}.primary-button,.secondary-button{border:0;border-radius:10px;padding:12px 16px;font-weight:800;font-size:13px}.primary-button{background:#11b6c2;color:#fff}.secondary-button{background:#e9f4f5;color:#087e88}.file-button{display:inline-block;margin-top:5px}.form-actions{display:flex;gap:9px;margin:17px 0}.import-preview{padding:13px;background:#eefaf9;border-radius:12px;margin-top:14px;display:flex;align-items:flex-start;flex-direction:column;gap:6px;font-size:13px}.import-preview span{color:#68818a}.import-preview button{margin-top:6px}.small-note{font-size:11px!important}.overlay{position:fixed;z-index:20;inset:0;background:#14243180;display:flex;justify-content:center;align-items:flex-end}.sheet{width:min(760px,100%);max-height:91dvh;overflow:auto;background:#fff;border-radius:22px 22px 0 0;padding:20px 22px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -7px 30px #10263526}.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.sheet-head h2{font-size:20px;margin:0}.sheet-head button{border:0;background:none;font-size:26px;color:#84939d}.sheet label{font-size:12px;font-weight:700;color:#637581;display:block;margin:13px 0}.sheet>.primary-button{width:100%;margin-top:13px}.sheet p{font-size:13px;color:#7e8c96}.type-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;background:#edf3f5;border-radius:10px;padding:4px;margin-bottom:18px}.type-tabs button{border:0;background:none;color:#71818c;padding:10px 2px;font-size:12px;border-radius:8px}.type-tabs button.active{background:#fff;color:#0b919f;font-weight:800;box-shadow:0 1px 5px #12324317}.form-error{color:#bd4f4f!important;min-height:16px}.action-stack{display:flex;flex-direction:column;gap:8px;margin-top:20px}.action-stack button{border:1px solid #e4e9ed;background:#fff;padding:14px;text-align:left;border-radius:10px}.action-stack .danger{color:#d45252}.toast{position:fixed;z-index:50;bottom:88px;left:50%;transform:translateX(-50%);width:max-content;max-width:min(90vw,620px);background:#173448;color:#fff;padding:11px 17px;border-radius:10px;font-size:12px;box-shadow:0 5px 20px #1325343d}
@media(max-width:380px){.summary-bar strong{font-size:14px}.circle{height:19vw;width:19vw}.circle-card strong{font-size:11px}.circle-section{padding-left:10px;padding-right:10px}}
.manage-list{display:flex;flex-direction:column}.manage-list>div{display:flex;align-items:center;gap:6px;padding:10px 0;border-bottom:1px solid #edf1f3;font-size:12px}.manage-list>div:last-child{border:0}.manage-list span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.manage-list small{display:block;margin-top:3px}.manage-list button{border:0;background:#edf5f6;color:#0a8792;border-radius:8px;padding:8px;font-size:11px;font-weight:700;white-space:nowrap}
.section-toggle{display:flex;align-items:center;gap:8px;border:0;background:none;padding:4px 0;color:inherit;text-align:left}
.section-toggle .toggle-arrow{display:inline-block;color:#0a9baa;font-size:18px;line-height:1;transition:transform .24s ease}
.section-toggle[aria-expanded="false"] .toggle-arrow{transform:rotate(-90deg)}
.income-content{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .24s ease,opacity .24s ease}
.income-content.collapsed{grid-template-rows:0fr;opacity:0}
.income-content>.circle-grid{min-height:0;overflow:hidden}
.circle-card .circle{touch-action:none;transition:transform .16s ease,opacity .16s ease,outline-color .16s ease}
.circle-card.drag-source .circle{opacity:.24;transform:scale(.88)}
.circle-card.drop-target .circle{outline:4px solid #12c594;outline-offset:4px;transform:scale(1.1);box-shadow:0 0 0 9px #12c59430}
.drag-ghost{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%) scale(1.08);box-shadow:0 14px 28px #1838454d,0 0 0 5px #ffffffb8!important}
.drag-ghost.can-drop{box-shadow:0 14px 28px #1838454d,0 0 0 6px #12c594!important}
@media(prefers-reduced-motion:reduce){.section-toggle .toggle-arrow,.income-content,.circle-card .circle{transition:none}}
.summary-bar{grid-template-columns:repeat(3,minmax(0,1fr)) 46px;align-items:stretch;min-height:72px;padding:0 0 0 6px}
.summary-bar>div{display:flex;flex-direction:column;justify-content:center;padding:10px 2px}
.summary-bar>div:nth-of-type(3){border-right:0}
.summary-bar .income-toggle{border:0;border-left:1px solid #e7ebee;background:#fff;color:#6d7781;font-size:25px;display:grid;place-items:center;touch-action:manipulation}
.summary-bar .income-toggle:focus-visible,.add-circle-card:focus-visible{outline:3px solid #12a7b6;outline-offset:-3px}
.circle-section{margin-top:0;padding:14px 10px 4px;border-bottom:1px solid #e3e8eb}
.income-section{transition:padding .24s ease}
.income-section.collapsed{padding-top:0;padding-bottom:0;border-bottom:0}
.circle-grid{row-gap:10px}
.add-circle-card .add-circle{background:#fff;border:2px solid #d7dde1;color:#c9d0d4;box-shadow:none}
.add-circle-card:active .add-circle{background:#f1f7f8;color:#0eaebb;border-color:#9ddce1}
.add-circle-card strong,.add-circle-card small{visibility:hidden}
@media(max-width:380px){.circle-section{padding-left:7px;padding-right:7px}.summary-bar strong{font-size:13px}}
.summary-bar .income-toggle span{font-size:25px;line-height:1;margin:0;color:#6d7781}
.add-circle-card .circle{touch-action:pan-y}
.topbar-actions{display:flex;align-items:center;gap:8px}
.edit-mode-toggle{border:0;border-radius:18px;padding:8px 12px;background:#e9f5f6;color:#087e88;font-size:13px;font-weight:800}
.edit-mode-toggle.active{background:#183b4a;color:#fff}
.edit-hint{margin:10px 12px 0;padding:9px 12px;border-radius:9px;background:#e9f7f6;color:#0b7280;font-size:12px;text-align:center}
.is-editing .circle-card:not(.add-circle-card) .circle{outline:2px dashed #21aeba;outline-offset:4px}
.is-editing .circle-card:not(.add-circle-card){cursor:grab}
.is-editing .circle-card.drag-source{cursor:grabbing}
.icon-picker{margin-top:18px}
.icon-picker>label{margin:0 0 8px}
.icon-picker input[type="search"]{margin:0 0 10px}
.sheet input[type="hidden"]{display:none}
.icon-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-height:242px;overflow-y:auto;padding:2px}
.icon-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:63px;min-width:0;border:1px solid #e0e7ea;border-radius:9px;background:#fff;color:#5b6d79;padding:5px 2px}
.icon-option span{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.icon-option.selected{border:2px solid #0eafbd;background:#e8f9f9;color:#078793}
.icon-option:focus-visible{outline:3px solid #0eafbd;outline-offset:1px}
@media(min-width:520px){.icon-options{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media(max-width:380px){.brand{font-size:16px}.topbar{padding:0 12px}.edit-mode-toggle{padding:7px 9px}}
.circle-history-page{background:#ededed;padding-bottom:28px}
.circle-history-header{height:78px;background:#fff;display:flex;align-items:center;gap:22px;padding:0 16px;box-shadow:0 2px 4px #00000020;position:sticky;top:0;z-index:5}
.circle-history-header strong{font-size:21px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.circle-history-header button{border:0;background:none;color:#525b5f;font-size:28px;min-width:44px;min-height:44px}
.circle-history-list{padding:1px 20px 12px}
.circle-history-date{font-size:18px;font-weight:500;color:#858585;margin:20px 0 12px}
.circle-history-swipe{position:relative;overflow:hidden;margin-bottom:18px;border-radius:4px;background:linear-gradient(90deg,#24b287 0 50%,#df6666 50%);box-shadow:0 2px 4px #00000028}
.swipe-cue{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:14px;font-weight:800;pointer-events:none}
.refund-cue{left:16px}.delete-cue{right:16px}
.circle-history-card{position:relative;width:100%;border:0;background:#fff;padding:0;text-align:left;display:block;color:#383b3d;touch-action:pan-y;will-change:transform}
.circle-history-primary{min-height:90px;padding:17px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border-bottom:1px solid #ddd}
.circle-history-primary>span{min-width:0;flex:1}
.circle-history-primary small,.circle-history-primary strong,.circle-history-primary em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.circle-history-primary small{font-size:14px;color:#787878;margin-bottom:6px}
.circle-history-primary strong{font-size:16px;font-weight:650}
.circle-history-primary em{font-size:12px;color:#939393;font-style:normal;margin-top:6px}
.circle-history-primary b,.circle-history-change b{font-size:17px;white-space:nowrap}
.circle-history-card .negative{color:#c84b4b}.circle-history-card .positive{color:#0fa879}
.circle-history-change{min-height:82px;background:#fafaf7;padding:22px 18px 12px;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.circle-history-change small{font-size:13px;color:#999}
.circle-history-hint{padding:8px 20px 24px;text-align:center;color:#858585;font-size:12px}
.toast button{margin-left:10px;border:0;background:none;color:#8de7ec;text-decoration:underline;font-weight:800}
@media(max-width:380px){.circle-history-list{padding-left:12px;padding-right:12px}.circle-history-primary b,.circle-history-change b{font-size:15px}}
.server-backups{border-top:1px solid #e8edef;margin-top:20px;padding-top:15px}
.server-backups h4{margin:0 0 7px;font-size:14px}
.server-backups .secondary-button{margin-top:5px}
.backup-list{margin-top:12px}
.backup-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #edf1f3;font-size:13px}
.backup-list span{font-weight:700}.backup-list small{display:block;margin-top:3px;font-weight:400}
.backup-list button{border:0;background:#e9f4f5;color:#087e88;border-radius:8px;padding:9px 11px;font-weight:700;font-size:12px}