:root{
  --bg:#f2f2f7;
  --surface:#ffffff;
  --surface-2:#f9f9fb;
  --text:#0b0b0d;
  --muted:#7a7a80;
  --line:rgba(0,0,0,.08);
  --accent:#34c759;
  --accent-soft:rgba(52,199,89,.13);
  --danger:#ff3b30;
  --shadow:0 18px 50px rgba(0,0,0,.10);
  --card-gradient:linear-gradient(145deg,#232527 0%,#0f1112 58%,#1b1d1f 100%);
  --card-text:#fff;
  --card-muted:rgba(255,255,255,.62);
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#000;
    --surface:#1c1c1e;
    --surface-2:#161618;
    --text:#f5f5f7;
    --muted:#8e8e93;
    --line:rgba(255,255,255,.09);
    --accent:#30d158;
    --accent-soft:rgba(48,209,88,.14);
    --danger:#ff453a;
    --shadow:0 18px 50px rgba(0,0,0,.42);
    --card-gradient:
      radial-gradient(circle at 80% 10%,rgba(48,209,88,.23),transparent 34%),
      linear-gradient(145deg,#25282a 0%,#101112 58%,#1a1d1b 100%);
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",sans-serif}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text)}
button,input,select{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}

.app{width:min(100%,720px);margin:0 auto;padding:0 16px calc(118px + env(safe-area-inset-bottom))}
.topbar{
  position:sticky;top:0;z-index:12;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top)) 2px 13px;
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)
}
.brand{font-size:24px;font-weight:800;letter-spacing:-1px}
.brand span{color:var(--accent)}
.icon-btn{
  width:34px;height:34px;border:0;border-radius:50%;
  background:var(--surface);color:var(--text);font-size:17px;
  display:grid;place-items:center;box-shadow:0 1px 0 var(--line)
}

.page{display:none}.page.active{display:block}
.page-heading{padding:12px 2px 18px}
.page-heading .eyebrow{margin-bottom:6px}
.page-heading h1{font-size:38px;line-height:1;letter-spacing:-1.8px;margin:0 0 9px}
.page-heading p{margin:0;color:var(--muted);font-size:13px;line-height:1.45;max-width:500px}

.eyebrow{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.01em}
.hero{
  position:relative;overflow:hidden;
  margin-top:12px;padding:22px 20px 18px;
  border-radius:27px;background:var(--card-gradient);color:var(--card-text);
  box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.07)
}
.hero:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.10),transparent 26%,transparent 68%,rgba(255,255,255,.03))
}
.hero>*{position:relative;z-index:1}
.hero .eyebrow{color:var(--card-muted)}
.hero-amount{font-size:46px;font-weight:780;line-height:1.02;letter-spacing:-2.4px;margin-top:7px}
.hero-amount.small{font-size:40px}
.hero-note{margin-top:8px;color:var(--card-muted);font-size:12px;line-height:1.42}
.hero.compact{padding-top:19px;padding-bottom:17px}

.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:21px}
.metrics>div{
  padding:10px 11px;border-radius:15px;
  background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.055)
}
.metrics span{display:block;color:var(--card-muted);font-size:9.5px}
.metrics b{display:block;margin-top:3px;color:#fff;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.month-strip{
  display:flex;gap:7px;overflow:auto;
  margin:0 -16px;padding:4px 16px 7px;
  scrollbar-width:none
}
.month-strip::-webkit-scrollbar,.filter-strip::-webkit-scrollbar{display:none}
.month-chip{
  border:0;border-radius:999px;padding:8px 12px;
  background:var(--surface);color:var(--muted);
  font-size:11.5px;font-weight:650;white-space:nowrap;
  box-shadow:inset 0 0 0 1px var(--line)
}
.month-chip.active{
  background:var(--text);color:var(--bg);
  box-shadow:none
}

.section{margin-top:28px}
.section.tight{margin-top:14px}
.section-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:0 3px 9px
}
.section-head h2{margin:0;font-size:18px;letter-spacing:-.45px}
.section-head>span{font-size:11px;color:var(--muted)}
.text-btn{
  border:0;background:transparent;color:var(--accent);
  font-size:12px;font-weight:700;padding:3px 0
}

.rows,.month-list{
  overflow:hidden;border-radius:22px;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line)
}
.row{
  position:relative;display:grid;
  grid-template-columns:31px 1fr auto;gap:11px;align-items:center;
  padding:13px 15px
}
.row+.row:before{
  content:"";position:absolute;top:0;right:15px;left:57px;height:1px;background:var(--line)
}
.row.no-check{grid-template-columns:1fr auto}
.row.no-check+.row.no-check:before{left:15px}
.row-title{font-size:14px;font-weight:650;letter-spacing:-.15px}
.row-sub{font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.35}
.row-amount{font-size:13.5px;font-weight:700;text-align:right;white-space:nowrap}
.row.done .row-title,.row.done .row-amount{opacity:.42;text-decoration:line-through}
.check{
  width:27px;height:27px;border:0;border-radius:50%;
  background:var(--surface-2);color:#fff;
  display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line)
}
.check.done{background:var(--accent);box-shadow:none}
.empty{padding:25px 17px;text-align:center;color:var(--muted);font-size:12px;line-height:1.5}

.month-focus{
  margin-top:13px;padding:20px 18px 18px;border-radius:24px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)
}
.month-focus .hero-amount{color:var(--text)}
.month-focus .metrics>div{background:var(--surface-2);border-color:transparent}
.month-focus .metrics span{color:var(--muted)}
.month-focus .metrics b{color:var(--text)}
.month-row{
  position:relative;display:grid;grid-template-columns:64px 1fr auto;
  gap:12px;align-items:center;padding:14px 15px
}
.month-row+.month-row:before{content:"";position:absolute;left:15px;right:15px;top:0;height:1px;background:var(--line)}
.month-row strong{font-size:13px}
.month-row small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.month-row .remain{font-size:13px;font-weight:760;text-align:right}
.month-row.selected{background:var(--accent-soft)}
.month-row.selected .remain{color:var(--accent)}

.debt-row{
  position:relative;padding:15px 16px;background:var(--surface)
}
.debt-row:first-child{border-radius:22px 22px 0 0}
.debt-row:last-child{border-radius:0 0 22px 22px}
.debt-row:only-child{border-radius:22px}
.debt-row+.debt-row:before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:var(--line)}
.debt-top{display:flex;justify-content:space-between;gap:12px}
.debt-name{font-size:14px;font-weight:680}
.debt-balance{font-size:14px;font-weight:760;text-align:right}
.debt-meta{font-size:10.5px;color:var(--muted);margin-top:4px;line-height:1.35}
.mini-bar{height:4px;background:var(--surface-2);border-radius:99px;overflow:hidden;margin-top:10px}
.mini-bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
#debtList{border-radius:22px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}

.import-button{
  width:100%;border:0;border-radius:22px;padding:15px 16px;
  display:flex;align-items:center;justify-content:space-between;text-align:left;
  background:var(--surface);color:var(--text);
  box-shadow:inset 0 0 0 1px var(--line)
}
.import-button b{display:block;font-size:14px}
.import-button small{display:block;color:var(--muted);font-size:10.5px;margin-top:3px}
.import-button>span:last-child{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-size:18px
}

.catbar{
  display:grid;grid-template-columns:83px 1fr 67px;gap:10px;align-items:center;
  padding:7px 1px
}
.catbar>span{font-size:10.5px;color:var(--muted)}
.catbar .bar{height:6px;background:var(--surface);border-radius:99px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.catbar .bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.catbar b{font-size:10.5px;text-align:right}

.filter-strip{
  display:flex;gap:7px;overflow:auto;margin:0 -16px;padding:0 16px 10px;scrollbar-width:none
}
.chip,.filter-chip{
  border:0;border-radius:999px;padding:8px 11px;
  background:var(--surface);color:var(--muted);
  font-size:11px;font-weight:650;white-space:nowrap;
  box-shadow:inset 0 0 0 1px var(--line)
}
.chip.active,.filter-chip.active{background:var(--text);color:var(--bg);box-shadow:none}

.bottom-nav{
  position:fixed;z-index:30;left:50%;bottom:calc(8px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(calc(100% - 20px),700px);
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:7px;border-radius:24px;
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  backdrop-filter:blur(24px) saturate(1.35);-webkit-backdrop-filter:blur(24px) saturate(1.35);
  box-shadow:0 10px 34px rgba(0,0,0,.18),inset 0 0 0 1px var(--line)
}
.bottom-nav button{
  border:0;background:transparent;color:var(--muted);
  min-height:47px;border-radius:17px;padding:5px 2px;
  font-size:9.5px;font-weight:650
}
.bottom-nav button span{display:block;font-size:18px;line-height:1;margin-bottom:3px}
.bottom-nav button.active{background:var(--accent-soft);color:var(--accent)}

.sheet{
  position:fixed;inset:0;z-index:50;
  background:rgba(0,0,0,.45);display:none;align-items:flex-end
}
.sheet.show{display:flex}
.panel{
  width:min(100%,720px);margin:0 auto;
  padding:13px 16px calc(22px + env(safe-area-inset-bottom));
  max-height:88vh;overflow:auto;
  border-radius:28px 28px 0 0;background:var(--surface);
  box-shadow:0 -18px 45px rgba(0,0,0,.18)
}
.handle{width:38px;height:5px;border-radius:99px;background:var(--line);margin:0 auto 15px}
.panel h3{font-size:19px;letter-spacing:-.35px;margin:0 0 14px}
.field{display:block;margin:11px 0}
.field>span,.field label{display:block;font-size:10.5px;color:var(--muted);margin-bottom:5px}
.field input,.field select{
  width:100%;border:0;border-radius:15px;padding:12px;
  background:var(--surface-2);color:var(--text);
  box-shadow:inset 0 0 0 1px var(--line);outline:none
}
.field input:focus,.field select:focus{box-shadow:inset 0 0 0 1.5px var(--accent)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.button-row,.sheet-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.primary,.secondary{
  border-radius:14px;padding:11px 13px;font-weight:700
}
.primary{border:0;background:var(--accent);color:#001708}
.secondary{border:0;background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.secondary.danger{color:var(--danger)}
.grow{flex:1}
.privacy{font-size:10.5px;color:var(--muted);line-height:1.45;margin:12px 0 0}

.import-loading{padding:34px 0 40px;display:grid;justify-items:center;gap:8px}
.import-loading b{font-size:14px}.import-loading span{font-size:10.5px;color:var(--muted)}
.spinner{width:24px;height:24px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.import-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:13px 0}
.import-stats>div{padding:10px;border-radius:15px;background:var(--surface-2)}
.import-stats b{font-size:16px;display:block}.import-stats span{font-size:10px;color:var(--muted)}
.preview-list{border-radius:18px;overflow:hidden;background:var(--surface-2);max-height:280px;overflow:auto}
.preview-row{display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
.preview-row:last-child{border-bottom:0}.preview-row b{font-size:11.5px;display:block}.preview-row span{font-size:9.5px;color:var(--muted);display:block;margin-top:3px}.preview-row strong{font-size:11.5px}
.clickable,.debt-row,.month-row{cursor:pointer}

@media(min-width:680px){
  .app{padding-left:24px;padding-right:24px}
  .hero-amount{font-size:54px}
  .month-strip,.filter-strip{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
}

/* Wallet polish */
body{overscroll-behavior-y:none}
.app{width:min(100%,560px)}
.topbar{padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:10px}
.brand{font-size:22px}
.icon-btn{width:36px;height:36px;font-size:18px;background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:inset 0 0 0 1px var(--line)}

.hero{min-height:222px;padding:24px 20px 19px}
.hero:before{
  content:"";position:absolute;left:14px;right:14px;bottom:-10px;height:26px;
  border-radius:0 0 25px 25px;background:rgba(255,255,255,.035);filter:blur(.1px)
}
.hero-amount{font-size:50px}
.hero-note{max-width:92%}
.metrics{margin-top:24px}
.metrics>div{background:rgba(255,255,255,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

.section{margin-top:30px}
.section-head h2{font-size:19px}
.rows{box-shadow:inset 0 0 0 1px var(--line),0 8px 24px rgba(0,0,0,.035)}
@media(prefers-color-scheme:dark){
  .rows{box-shadow:inset 0 0 0 1px var(--line)}
}

.bottom-nav{
  width:min(calc(100% - 18px),540px);
  padding:6px 7px;
  border-radius:25px;
}
.bottom-nav button{
  min-height:50px;border-radius:18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:9.5px
}
.bottom-nav button svg{
  width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;display:block
}
.bottom-nav button span{display:block;font-size:9.5px;line-height:1;margin:0}
.bottom-nav button.active{background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 15%,transparent)}
.bottom-nav button.active svg{stroke-width:2}

.month-chip{transition:background .18s ease,color .18s ease,transform .18s ease}
.month-chip:active{transform:scale(.96)}
.row,.debt-row,.month-row,.import-button{transition:background .15s ease,transform .12s ease}
.clickable:active,.debt-row:active,.month-row:active,.import-button:active{transform:scale(.992)}

@media(max-width:480px){
  .app{padding-left:14px;padding-right:14px}
  .month-strip,.filter-strip{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .hero{border-radius:25px;padding-left:18px;padding-right:18px}
  .hero-amount{font-size:46px}
  .metrics{gap:7px}
  .metrics>div{padding:9px}
  .metrics b{font-size:12px}
  .row{padding:13px 14px}
  .bottom-nav{bottom:calc(6px + env(safe-area-inset-bottom))}
}

.payment-meter{
  height:5px;margin:10px 5px 0;border-radius:999px;
  background:var(--surface);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)
}
.payment-meter i{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 68%,white));
  transition:width .22s ease
}
.hero-amount.negative{color:#ff6b63}

#debtList{
  display:grid;gap:10px;
  border-radius:0;overflow:visible;box-shadow:none
}
.debt-row{
  display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;
  border-radius:20px!important;padding:14px;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line);
  overflow:hidden
}
.debt-row+.debt-row:before{display:none}
.debt-icon{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--surface-2),color-mix(in srgb,var(--surface) 72%,var(--accent) 28%));
  color:var(--text);font-size:12px;font-weight:800;letter-spacing:-.2px;
  box-shadow:inset 0 0 0 1px var(--line)
}
.debt-main{min-width:0}
.debt-name{font-size:14px;font-weight:700}
.debt-meta{font-size:10.5px;color:var(--muted);margin-top:2px}
.debt-monthly{font-size:10.5px;color:var(--muted);margin-top:6px}
.debt-side{min-width:84px;text-align:right}
.debt-balance{font-size:14px;font-weight:780}
.debt-side .mini-bar{width:74px;margin:8px 0 0 auto}

.hero-topline{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hero-topline>span{
  font-size:10.5px;font-weight:750;color:rgba(255,255,255,.76);
  padding:6px 8px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)
}
.section-count{
  min-width:34px;text-align:center;padding:5px 8px;border-radius:999px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  font-weight:700!important;color:var(--muted)!important
}
.txn-row{grid-template-columns:34px 1fr auto}
.txn-icon{
  width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;
  font-size:11px;font-weight:800;
  color:var(--text);background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line)
}
.txn-row+.txn-row:before{left:61px}

.cash-usage{margin-top:16px}
.cash-usage-track{
  position:relative;height:8px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)
}
.cash-usage-track i,.cash-usage-track b{
  position:absolute;top:0;bottom:0;display:block;transition:width .25s ease,left .25s ease
}
.cash-usage-track i{left:0;background:rgba(255,255,255,.44)}
.cash-usage-track b{background:var(--accent)}
.cash-usage-labels{
  display:flex;justify-content:space-between;gap:8px;
  margin-top:7px;color:var(--card-muted);font-size:9.5px
}

.month-chart{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;
  padding:16px 12px 12px;border-radius:22px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)
}
.chart-col{
  min-width:0;border:0;background:transparent;color:var(--muted);
  padding:0;display:grid;grid-template-rows:20px 108px auto;gap:7px;align-items:end
}
.chart-value{
  font-size:8.5px;line-height:1;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center
}
.chart-rail{
  position:relative;height:108px;border-radius:999px;
  background:var(--surface-2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)
}
.chart-rail i{
  position:absolute;left:0;right:0;bottom:0;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 62%,var(--surface));
  transition:height .22s ease
}
.chart-col.negative .chart-rail i{background:color-mix(in srgb,var(--danger) 68%,var(--surface))}
.chart-col span{font-size:10px;font-weight:650;text-align:center}
.chart-col.active{color:var(--text)}
.chart-col.active .chart-rail{box-shadow:inset 0 0 0 1.5px var(--accent)}
.chart-col.active .chart-value{color:var(--text);font-weight:700}

@media(max-width:420px){
  .month-chart{gap:5px;padding-left:9px;padding-right:9px}
  .chart-col{grid-template-rows:18px 94px auto}
  .chart-rail{height:94px}
  .chart-value{font-size:8px}
}

.category-card{
  padding:11px 13px;border-radius:22px;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line)
}
.category-card .catbar{padding:8px 0}
.category-card .catbar+.catbar{border-top:1px solid var(--line)}

.subscription-passes{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,78%);
  gap:10px;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;
  scroll-snap-type:x proximity;scrollbar-width:none
}
.subscription-passes::-webkit-scrollbar{display:none}
.subscription-pass{
  scroll-snap-align:start;min-height:142px;border:0;border-radius:22px;padding:14px;
  color:white;text-align:left;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 12px 30px rgba(0,0,0,.16);overflow:hidden;position:relative
}
.subscription-pass:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.16),transparent 30%,transparent 70%,rgba(255,255,255,.05))
}
.subscription-pass>*{position:relative;z-index:1}
.pass-0{background:linear-gradient(145deg,#ee7a46,#bf4d2a 60%,#6f2515)}
.pass-1{background:linear-gradient(145deg,#63a9ff,#3978dd 58%,#1f3c8a)}
.pass-2{background:linear-gradient(145deg,#ff4d69,#d92d48 58%,#7d1830)}
.pass-top,.pass-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pass-top span,.pass-bottom small{font-size:9.5px;color:rgba(255,255,255,.72)}
.pass-icon{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.14);
  font-size:10px;font-weight:800
}
.pass-name{font-size:17px;font-weight:760;letter-spacing:-.35px;margin:14px 0 16px}
.pass-bottom strong{font-size:14px}

.debt-isbank{background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 86%,#c93b3b 14%),var(--surface))}
.debt-enpara{background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 86%,#7c50c9 14%),var(--surface))}
.debt-deniz{background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 86%,#3f77c7 14%),var(--surface))}
.debt-garanti-card,.debt-garanti-yap{background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 86%,#49a16a 14%),var(--surface))}
.debt-fair{background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 86%,#d09a45 14%),var(--surface))}
.debt-akbank{background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 86%,#d34848 14%),var(--surface))}

@media(max-width:420px){
  .subscription-passes{grid-auto-columns:minmax(210px,82%)}
}

.quick-actions{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:12px;margin:16px 4px 0
}
.quick-action{
  border:0;background:transparent;color:var(--text);
  display:grid;justify-items:center;gap:7px;padding:0
}
.quick-icon{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface);
  color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--line),0 7px 18px rgba(0,0,0,.07);
  transition:transform .12s ease,background .15s ease
}
.quick-icon svg{
  width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round
}
.quick-action b{font-size:10.5px;font-weight:650}
.quick-action:active .quick-icon{transform:scale(.94);background:var(--accent-soft)}

#paymentsSection{scroll-margin-top:76px}

@media(max-width:420px){
  .quick-actions{gap:8px;margin-top:14px}
  .quick-icon{width:44px;height:44px}
}

.hero-daily{
  margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.72);font-size:10.5px;line-height:1.35
}

body:before{
  content:"";position:fixed;inset:0 0 auto 0;height:260px;pointer-events:none;z-index:-1;
  background:radial-gradient(circle at 50% -30%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 64%)
}
.hero{
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 18px 42px rgba(0,0,0,.16),
    0 7px 0 -3px color-mix(in srgb,var(--surface) 86%,transparent),
    0 13px 0 -6px color-mix(in srgb,var(--surface) 58%,transparent)
}

.debt-summary-card{
  display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:8px;
  margin:2px 0 18px;padding:18px;border-radius:25px;
  background:var(--card-gradient);color:#fff;
  box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.07)
}
.debt-summary-card>div{
  min-width:0;padding:3px 0
}
.debt-summary-card>div+div{
  padding-left:12px;border-left:1px solid rgba(255,255,255,.10)
}
.debt-summary-card span{
  display:block;color:var(--card-muted);font-size:9.5px;margin-bottom:6px
}
.debt-summary-card strong{
  display:block;font-size:28px;line-height:1;letter-spacing:-1.2px
}
.debt-summary-card b{
  display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

.page.active{
  animation:pageIn .22s cubic-bezier(.2,.7,.2,1)
}
@keyframes pageIn{
  from{opacity:.55;transform:translateY(4px)}
  to{opacity:1;transform:none}
}
.panel{
  animation:sheetIn .25s cubic-bezier(.2,.8,.2,1)
}
@keyframes sheetIn{
  from{transform:translateY(18px);opacity:.65}
  to{transform:none;opacity:1}
}
@media(max-width:430px){
  .debt-summary-card{grid-template-columns:1fr 1fr;padding:16px}
  .debt-summary-card>div:first-child{grid-column:1/-1;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.10)}
  .debt-summary-card>div:nth-child(2){padding-left:0;border-left:0}
}

.section-head>div{min-width:0}
.section-subtotal{
  display:block;margin-top:3px;color:var(--muted);
  font-size:10.5px;font-weight:600
}

.txn-row.cat-market .txn-icon{background:color-mix(in srgb,#34c759 16%,var(--surface-2));color:#28a745}
.txn-row.cat-yemek .txn-icon{background:color-mix(in srgb,#ff9500 18%,var(--surface-2));color:#d97800}
.txn-row.cat-kahve .txn-icon{background:color-mix(in srgb,#a86f3d 18%,var(--surface-2));color:#8a572c}
.txn-row.cat-dijital .txn-icon,.txn-row.cat-abonelik .txn-icon{background:color-mix(in srgb,#5856d6 18%,var(--surface-2));color:#5856d6}
.txn-row.cat-ulasim .txn-icon{background:color-mix(in srgb,#5ac8fa 20%,var(--surface-2));color:#168ec2}
.txn-row.cat-fatura .txn-icon{background:color-mix(in srgb,#ffcc00 19%,var(--surface-2));color:#b48700}
.txn-row.cat-alisveris .txn-icon{background:color-mix(in srgb,#ff2d55 16%,var(--surface-2));color:#d91e48}
.txn-row.cat-seyahat .txn-icon{background:color-mix(in srgb,#007aff 17%,var(--surface-2));color:#0067d8}
.txn-row.cat-saglik .txn-icon{background:color-mix(in srgb,#ff3b30 15%,var(--surface-2));color:#d8322b}
.txn-row.cat-borc-transfer .txn-icon{background:color-mix(in srgb,#8e8e93 18%,var(--surface-2));color:var(--muted)}

/* Final UI pass */
.sheet-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.sheet-header h3{margin:0}
.sheet-close{border:0;background:transparent;color:var(--accent);font-size:13px;font-weight:760;padding:4px 0}
.settings-group,.settings-actions{overflow:hidden;border-radius:18px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.settings-row{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:14px;align-items:center;padding:12px 13px}
.settings-row+.settings-row,.settings-action+.settings-action{border-top:1px solid var(--line)}
.settings-row span{min-width:0}
.settings-row b{display:block;font-size:13px}
.settings-row small{display:block;color:var(--muted);font-size:9.5px;margin-top:3px}
.settings-row input{width:100%;border:0;background:transparent;color:var(--text);text-align:right;font-size:13px;font-weight:650;outline:none;padding:6px 0}
.settings-row input::placeholder{color:var(--muted)}
.settings-label{margin:18px 4px 7px;color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.settings-action{width:100%;border:0;background:transparent;color:var(--text);display:flex;align-items:center;justify-content:space-between;padding:13px;text-align:left;font-size:13px}
.settings-action b{color:var(--muted);font-size:18px;font-weight:500;line-height:1}
.settings-action.danger span{color:var(--danger)}
.row-amount.expense{color:var(--text);font-variant-numeric:tabular-nums}

.catbar .bar i{background:var(--accent)}
.catbar.cat-market .bar i{background:#34c759}
.catbar.cat-yemek .bar i{background:#ff9500}
.catbar.cat-kahve .bar i{background:#a86f3d}
.catbar.cat-dijital .bar i,.catbar.cat-abonelik .bar i{background:#5856d6}
.catbar.cat-ulasim .bar i{background:#5ac8fa}
.catbar.cat-fatura .bar i{background:#ffcc00}
.catbar.cat-alisveris .bar i{background:#ff2d55}
.catbar.cat-seyahat .bar i{background:#007aff}
.catbar.cat-saglik .bar i{background:#ff3b30}
.catbar.cat-borc-transfer .bar i{background:#8e8e93}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* Feature sections */
.import-history,.relief-list{
  overflow:hidden;border-radius:22px;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line)
}
.import-history-row,.relief-row{
  position:relative;display:grid;align-items:center;gap:11px;padding:13px 14px
}
.import-history-row{grid-template-columns:34px minmax(0,1fr) auto}
.import-history-row+.import-history-row:before,
.relief-row+.relief-row:before{
  content:"";position:absolute;left:14px;right:14px;top:0;height:1px;background:var(--line)
}
.import-history-icon{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  color:var(--accent);background:var(--accent-soft);font-size:16px;font-weight:800
}
.import-history-main{min-width:0}
.import-history-main b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.import-history-main span{display:block;margin-top:3px;color:var(--muted);font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.import-undo{
  border:0;border-radius:999px;padding:7px 9px;background:var(--surface-2);color:var(--accent);
  font-size:10px;font-weight:700;box-shadow:inset 0 0 0 1px var(--line)
}
.import-old{font-size:9.5px;color:var(--muted)}
.relief-row{grid-template-columns:minmax(0,1fr) auto}
.relief-row b{display:block;font-size:13px}
.relief-row span{display:block;margin-top:3px;color:var(--muted);font-size:9.5px}
.relief-row strong{font-size:12.5px;color:var(--accent);white-space:nowrap}

/* Month close / snapshot */
.month-close-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line)
}
.month-close-row>div{min-width:0}
.month-close-row b{display:block;font-size:12px}
.month-close-row span{display:block;margin-top:3px;color:var(--muted);font-size:9.5px;line-height:1.35}
.month-close-btn{
  flex:0 0 auto;border:0;border-radius:999px;padding:8px 11px;
  background:var(--text);color:var(--bg);font-size:10.5px;font-weight:750
}
.month-close-btn.reopen{
  background:var(--surface-2);color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--line)
}
.month-chip.closed{position:relative;padding-right:17px}
.month-chip.closed:after{
  content:"";position:absolute;right:8px;top:50%;width:4px;height:4px;margin-top:-2px;
  border-radius:50%;background:var(--accent)
}
.row.locked .check{opacity:.7}
.row.locked{background:color-mix(in srgb,var(--surface) 92%,var(--accent) 8%)}

/* Debt payment sheet */
.payment-card{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  margin-bottom:14px;padding:14px;border-radius:18px;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)
}
.payment-card>div+div{padding-left:12px;border-left:1px solid var(--line)}
.payment-card span{display:block;color:var(--muted);font-size:9.5px;margin-bottom:5px}
.payment-card b{display:block;font-size:14px}
.payment-option{
  display:flex;align-items:flex-start;gap:10px;margin-top:12px;
  padding:12px 13px;border-radius:16px;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line)
}
.payment-option input{margin-top:2px;width:18px;height:18px;accent-color:var(--accent)}
.payment-option span{min-width:0}
.payment-option b{display:block;font-size:12.5px}
.payment-option small{display:block;color:var(--muted);font-size:9.5px;line-height:1.4;margin-top:3px}

/* Category budgets */
.budget-status{
  margin:0 0 9px;padding:9px 11px;border-radius:14px;
  background:var(--accent-soft);color:var(--accent);
  font-size:10.5px;font-weight:700
}
.budget-status.danger{
  background:color-mix(in srgb,var(--danger) 12%,transparent);
  color:var(--danger)
}
.budget-help{margin:0 0 12px}
.budget-fields{
  overflow:hidden;border-radius:18px;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line)
}
.budget-field{
  display:grid;grid-template-columns:minmax(0,1fr) 112px;
  gap:14px;align-items:center;padding:11px 13px
}
.budget-field+.budget-field{border-top:1px solid var(--line)}
.budget-field span{min-width:0}
.budget-field b{display:block;font-size:13px}
.budget-field small{display:block;margin-top:3px;color:var(--muted);font-size:9.5px}
.budget-field input{
  width:100%;border:0;background:transparent;color:var(--text);
  text-align:right;font-size:13px;font-weight:700;outline:none;padding:6px 0
}
.budget-field input::placeholder{color:var(--muted)}
.catbar>span small{
  display:block;margin-top:2px;font-size:8.5px;color:var(--muted);font-weight:500
}
.catbar.over>span small{color:var(--danger)}
.catbar.over .bar i{background:var(--danger)!important}
.catbar.over b{color:var(--danger)}
.category-card .catbar{
  grid-template-columns:88px minmax(40px,1fr) minmax(92px,auto)
}
.category-card .catbar b{
  width:auto;min-width:92px;white-space:nowrap
}

/* Month-to-month comparison */
.comparison-card{
  overflow:hidden;border-radius:22px;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line)
}
.comparison-summary{
  padding:15px 16px;background:var(--surface-2)
}
.comparison-summary span{display:block;color:var(--muted);font-size:9.5px}
.comparison-summary b{display:block;margin-top:4px;font-size:16px;letter-spacing:-.25px}
.comparison-summary small{display:block;margin-top:4px;color:var(--muted);font-size:9.5px}
.comparison-summary.up b{color:var(--danger)}
.comparison-summary.down b{color:var(--accent)}
.comparison-rows{padding:0 14px}
.comparison-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 1px
}
.comparison-row+.comparison-row{border-top:1px solid var(--line)}
.comparison-row div{min-width:0}
.comparison-row b{display:block;font-size:12.5px}
.comparison-row span{display:block;margin-top:3px;color:var(--muted);font-size:9.5px}
.comparison-row strong{font-size:12px;white-space:nowrap}
.comparison-row strong.up{color:var(--danger)}
.comparison-row strong.down{color:var(--accent)}

/* Monthly attention insights */
.insight-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px
}
.insight-card{
  min-width:0;min-height:112px;border:0;border-radius:20px;padding:13px;
  background:var(--surface);color:var(--text);text-align:left;
  box-shadow:inset 0 0 0 1px var(--line);
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .12s ease,background .15s ease
}
.insight-card:active:not(:disabled){transform:scale(.985)}
.insight-card span{
  margin-bottom:auto;color:var(--muted);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.035em
}
.insight-card b{
  display:block;margin-top:16px;font-size:13.5px;line-height:1.2;
  letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.insight-card small{
  display:block;margin-top:4px;color:var(--muted);font-size:9.5px;line-height:1.35
}
.insight-card.danger{
  background:color-mix(in srgb,var(--danger) 9%,var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 20%,transparent)
}
.insight-card.danger b{color:var(--danger)}
.insight-card.warning{
  background:color-mix(in srgb,#ff9500 10%,var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#ff9500 22%,transparent)
}
.insight-card.warning b{color:#d97800}
.insight-card.accent{
  background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent)
}
.insight-card.accent b{color:var(--accent)}
.insight-card:disabled{opacity:.9}
.insight-empty{
  grid-column:1/-1;padding:22px 16px;text-align:center;
  border-radius:20px;background:var(--surface);color:var(--muted);
  font-size:11px;box-shadow:inset 0 0 0 1px var(--line)
}
@media(max-width:390px){
  .insight-grid{grid-template-columns:1fr}
  .insight-card{min-height:96px}
}

/* Transaction search + filters */
.txn-toolbar{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;
  margin-bottom:9px
}
.txn-search{
  min-width:0;height:40px;border-radius:14px;
  display:flex;align-items:center;gap:8px;padding:0 11px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)
}
.txn-search svg,.txn-filter-btn svg{
  width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round
}
.txn-search svg{color:var(--muted);flex:0 0 auto}
.txn-search input{
  width:100%;min-width:0;border:0;outline:none;background:transparent;color:var(--text);
  font-size:12px;padding:0
}
.txn-search input::placeholder{color:var(--muted)}
.txn-filter-btn{
  position:relative;height:40px;border:0;border-radius:14px;padding:0 11px;
  display:flex;align-items:center;gap:6px;
  background:var(--surface);color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:10.5px;font-weight:700
}
.txn-filter-btn.active{color:var(--accent);background:var(--accent-soft)}
.txn-filter-btn b{
  min-width:17px;height:17px;border-radius:999px;padding:0 5px;
  display:grid;place-items:center;background:var(--accent);color:white;
  font-size:9px;line-height:1
}
#txnFilterSheet .field{margin-top:10px}

/* Debt load projection */
.debt-projection-card{
  border-radius:22px;padding:14px;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line)
}
.projection-summary{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px
}
.projection-summary>div{
  min-width:0;padding:10px;border-radius:15px;background:var(--surface-2)
}
.projection-summary span{display:block;color:var(--muted);font-size:9px}
.projection-summary b{
  display:block;margin-top:4px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.debt-projection-chart{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;align-items:end
}
.debt-projection-col{
  min-width:0;border:0;background:transparent;color:var(--muted);padding:0;
  display:grid;grid-template-rows:18px 92px auto;gap:6px
}
.debt-projection-value{
  font-size:8px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.debt-projection-rail{
  position:relative;height:92px;border-radius:999px;overflow:hidden;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)
}
.debt-projection-rail i{
  position:absolute;left:0;right:0;bottom:0;border-radius:999px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 72%,white),var(--accent));
  transition:height .2s ease
}
.debt-projection-col span{text-align:center;font-size:9.5px;font-weight:650}
.debt-projection-col.active{color:var(--text)}
.debt-projection-col.active .debt-projection-rail{box-shadow:inset 0 0 0 1.5px var(--accent)}
.projection-note{
  margin:11px 2px 0;color:var(--muted);font-size:9.5px;line-height:1.45
}
@media(max-width:390px){
  .projection-summary{grid-template-columns:1fr 1fr}
  .projection-summary>div:first-child{grid-column:1/-1}
  .debt-projection-col{grid-template-rows:16px 80px auto}
  .debt-projection-rail{height:80px}
}

/* Firebase cloud sync */
.top-actions{display:flex;align-items:center;gap:8px}
.sync-indicator{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)
}
.sync-indicator i,.cloud-state-dot{
  width:8px;height:8px;border-radius:50%;display:block;background:var(--muted)
}
.sync-indicator.local i,.cloud-state-dot.local{background:var(--muted)}
.sync-indicator.online i,.cloud-state-dot.online{background:var(--accent)}
.sync-indicator.syncing i,.cloud-state-dot.syncing{background:#ff9f0a;animation:syncPulse .9s ease-in-out infinite alternate}
.sync-indicator.error i,.cloud-state-dot.error{background:var(--danger)}
@keyframes syncPulse{to{opacity:.35;transform:scale(.72)}}

.cloud-card{
  border-radius:18px;padding:13px;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line)
}
.cloud-status-row{
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center
}
.cloud-avatar{
  width:38px;height:38px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--accent-soft),var(--surface));
  box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:800
}
.cloud-status-copy{min-width:0}
.cloud-status-copy b{display:block;font-size:13px}
.cloud-status-copy span{
  display:block;margin-top:3px;color:var(--muted);font-size:9.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.cloud-state-dot{width:9px;height:9px}
.cloud-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.cloud-primary,.cloud-secondary{
  border:0;border-radius:13px;padding:10px 11px;font-size:10.5px;font-weight:740
}
.cloud-primary{background:var(--text);color:var(--bg)}
.cloud-secondary{
  background:var(--surface);color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--line)
}
.cloud-secondary:disabled{opacity:.4;color:var(--muted)}
.cloud-card>small{
  display:block;margin-top:9px;color:var(--muted);font-size:9px;line-height:1.4
}

/* Encrypted cloud unlock */
.crypto-lock{
  display:grid;justify-items:center;text-align:center;
  padding:10px 12px 14px
}
.crypto-lock-icon{
  width:54px;height:54px;border-radius:18px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent)
}
.crypto-lock-icon svg{
  width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round
}
.crypto-lock>b{margin-top:11px;font-size:15px;letter-spacing:-.2px}
.crypto-lock>span{
  margin-top:5px;max-width:360px;color:var(--muted);font-size:10px;line-height:1.45
}
.crypto-error{
  margin-top:10px;padding:9px 11px;border-radius:13px;
  background:color-mix(in srgb,var(--danger) 11%,transparent);
  color:var(--danger);font-size:10.5px;font-weight:650
}
#cryptoSheet .panel{max-width:560px}