:root {
  --bg:#f5f8f6;
  --bg-gradient:linear-gradient(180deg,#e8fff5 0%,#ffffff 55%);
  --panel:#ffffff;
  --border:#d6ede2;
  --text:#0b2b1b;
  --text-dim:#4d6a58;
  --accent:#00e082;
  --accent-soft:#d8fbe8;
  --radius:18px;
  --pad:1.35rem;
  --font:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --shadow:0 28px 60px rgba(22,71,48,.12);
}

:root[data-theme="dark"] {
  --bg:#05130d;
  --bg-gradient:linear-gradient(180deg,#031008 0%,#0c1f14 60%,#10291b 100%);
  --panel:#11271d;
  --border:#1c3a2c;
  --text:#e0f5ea;
  --text-dim:#94b8a5;
  --accent:#27d683;
  --accent-soft:rgba(39,214,131,.18);
  --shadow:0 28px 60px rgba(3,12,8,.55);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg-gradient);
  color:var(--text);
  font-family:var(--font);
  line-height:1.4;
  display:flex;
  justify-content:center;
  padding:1.5rem 1.1rem 3rem;
  touch-action:manipulation;
}
.app{
  width:100%;
  max-width:520px;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.hero-block{
  padding:1.6rem var(--pad) 1.25rem;
  display:flex;
  flex-direction:column;
  gap:1.4rem;
}
.dashboard-footer{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.block{
  background:var(--panel);
  border:1px solid rgba(0,0,0,.02);
  border-radius:var(--radius);
  padding:var(--pad);
  box-shadow:var(--shadow);
}
.hero{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}
.hero-brand{
  display:flex;
  align-items:center;
  gap:1rem;
}
.hero-logo{
  width:52px;
  height:52px;
  border-radius:16px;
  background:#0b3722;
  color:#fff;
  font-weight:700;
  font-size:1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 30px rgba(11,55,34,.22);
}
.hero-text h1{
  margin:0;
  font-size:1.35rem;
  line-height:1.2;
  color:var(--text);
}
.hero-text p{
  margin:.25rem 0 0;
  font-size:.85rem;
  color:var(--text-dim);
}
.hero-meta{
  font-size:.8rem;
  color:var(--text-dim);
  border-left:3px solid var(--accent);
  padding-left:.75rem;
}
h1,h2{
  margin:0;
  font-size:1.05rem;
  font-weight:700;
  color:var(--text);
  line-height:1.2;
}
small{
  color:var(--text-dim);
  font-size:.75rem;
  line-height:1.3;
  display:block;
  margin-top:.5rem;
}
.topbar{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.75rem;
  align-items:center;
}
.topbar-left{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:.8rem;
  font-weight:600;
  color:var(--text-dim);
}
.topbar-left:before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
}
.topbar-label{letter-spacing:.02em;text-transform:uppercase;}
.topbar-right{
  display:flex;
  gap:.45rem;
}
.topbar-btn{
  background:#fff;
  border:1px solid rgba(0,0,0,.04);
  border-radius:16px;
  padding:.55rem .9rem;
  font-size:.8rem;
  font-weight:600;
  color:var(--accent);
  line-height:1.2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  cursor:pointer;
  transition:all .18s ease;
  min-width:112px;
  white-space:nowrap;
  touch-action:manipulation;
}
.topbar-btn--danger{
  color:#e75555;
  border-color:rgba(231,85,85,.28);
}
.topbar-btn--danger:hover,
.topbar-btn--danger:focus,
.topbar-btn--danger.is-active{
  background:#e75555;
  color:#fff;
  border-color:#e75555;
}
.topbar-btn:hover:not(.topbar-btn--danger),
.topbar-btn.is-active:not(.topbar-btn--danger){
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.topbar-btn:active{
  transform:scale(.98);
}

/* krok bloky */
.step-block{display:none;}

/* zoznam peňaženky */
.money-list{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin-top:1rem;
}
.money-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#f6fdfa;
  border:1px solid rgba(0,0,0,.03);
  border-radius:var(--radius);
  padding:.7rem .85rem;
  gap:.75rem;
  flex-wrap:wrap;
}
.leftside{
  display:flex;
  align-items:center;
  gap:.6rem;
  min-width:0;
  font-size:.9rem;
  font-weight:500;
  color:var(--text);
  line-height:1.2;
}
.denom-label{
  display:flex;
  flex-direction:column;
}
.denom-label span.sub{
  font-size:.7rem;
  color:var(--text-dim);
  font-weight:400;
  line-height:1.2;
}
/* ikonky minca / bankovka */
.icon-coin,
.icon-note{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.7rem;
  font-weight:700;
  line-height:1;
  color:#0b2b1b;
  border:1px solid rgba(11,43,27,.3);
}
.icon-coin{
  width:32px;
  height:32px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#facc15 0%,#d97706 75%);
}
.icon-note{
  min-width:44px;
  height:28px;
  border-radius:6px;
  background:linear-gradient(135deg,#00e082 0%,#10b981 100%);
  color:#0b2b1b;
  font-size:.7rem;
  padding:0 .35rem;
  text-align:center;
}

/* pravá časť riadku */
.rightside{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.quick-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1rem;
}
.pillBtn{
  flex:1 1 140px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:999px;
  padding:.65rem 1rem;
  font-size:.85rem;
  font-weight:600;
  color:var(--accent);
  text-align:center;
  cursor:pointer;
  transition:all .18s ease;
  touch-action:manipulation;
}
.pillBtn:hover{
  background:var(--accent-soft);
  border-color:var(--accent);
}
.pillBtn:active{
  transform:scale(.97);
}
.pillBtn-danger{
  border-color:#dc2626;
  color:#dc2626;
}
.pillBtn-danger:hover{
  border-color:#b91c1c;
  background:rgba(220,38,38,.1);
}
.counter-btn{
  width:56px;
  height:56px;
  border-radius:14px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.05);
  color:var(--accent);
  font-size:1.35rem;
  font-weight:600;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .18s ease;
  touch-action:manipulation;
}
.counter-btn:hover{
  background:var(--accent-soft);
}
.counter-btn:active{
  transform:scale(.96);
}
.count-display{
  min-width:56px;
  text-align:center;
  font-size:1rem;
  font-weight:600;
  color:var(--text);
  line-height:1.2;
  background:#0000;
  border:0;
  pointer-events:none;
}

/* veľký input pre sumu */
.big-input-wrap{
  margin-top:1rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.big-input-label{
  font-size:.9rem;
  font-weight:500;
  color:var(--text);
  line-height:1.2;
}
.big-input-field{
  width:100%;
  background:#fff;
  border:2px solid rgba(0,224,130,.18);
  border-radius:12px;
  color:var(--text);
  font-size:2rem;
  font-weight:600;
  line-height:1.2;
  padding:.6rem .8rem;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.big-input-field:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(0,224,130,.18);
}
.round-info{
  margin-top:.5rem;
  font-size:.8rem;
  color:var(--text-dim);
  line-height:1.4;
}
.tip-controls{
  margin-top:1rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.tip-controls-title{
  font-size:.85rem;
  font-weight:600;
  color:var(--text);
}
.tip-available{
  font-size:.78rem;
  color:var(--text-dim);
  margin-top:-.2rem;
}
.tip-option{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:flex-start;
  gap:.6rem;
  padding:.65rem .75rem;
  border:1px solid var(--border);
  border-radius:12px;
  background:#f8fafc;
}
.tip-option input[type="radio"]{
  margin-top:.25rem;
}
.tip-option label{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  font-size:.8rem;
  color:var(--text);
  cursor:pointer;
}
.tip-option-title{
  font-weight:600;
  font-size:.85rem;
  color:var(--text);
}
.tip-option small{
  margin:0;
  font-size:.72rem;
}
.tip-option-partial{
  row-gap:.4rem;
}
.tip-option-partial .tip-partial-input{
  grid-column:2/3;
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.tip-partial-input label{
  font-size:.75rem;
  font-weight:600;
  color:var(--text);
}
.tip-partial-input input{
  border:1px solid var(--border);
  border-radius:8px;
  padding:.4rem .55rem;
  font-size:.85rem;
  font-weight:600;
  color:var(--text);
  background:#fff;
}
.tip-partial-input input:disabled{
  opacity:.5;
  background:#f1f5f9;
}
.tip-total-input{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  padding:.75rem .75rem;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}
.tip-total-input label{
  font-size:.78rem;
  font-weight:600;
  color:var(--text);
}
.tip-total-input input{
  border:1px solid var(--border);
  border-radius:8px;
  padding:.45rem .6rem;
  font-size:.95rem;
  font-weight:600;
  color:var(--text);
  background:#f8fafc;
}
.tip-total-input input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.tip-total-input input:disabled{
  opacity:.6;
  background:#f1f5f9;
}
.tip-total-input small{
  margin:0;
  font-size:.72rem;
  color:var(--text-dim);
}
.wallet-summary{
  margin-top:.5rem;
  font-size:.8rem;
  color:var(--text-dim);
  line-height:1.4;
}

.summary-line{
  margin-top:1rem;
  font-size:.85rem;
  font-weight:600;
  color:var(--text);
  line-height:1.3;
}

/* alerts */
.alert{
  display:none;
  border-radius:12px;
  padding:.85rem 1rem;
  font-size:.85rem;
  font-weight:500;
  line-height:1.3;
}
.alert-info{
  background:#d7f6e7;
  color:#0f5132;
}
.alert-success{
  background:#c9f6db;
  color:#0f5132;
}
.alert-error{
  background:#fde8e8;
  color:#b91c1c;
}
.alert-warning{
  background:#fff5dc;
  color:#8a4b16;
}
.device-notice{
  display:none;
  margin-top:.25rem;
}
@media (min-width:640px){
  .device-notice{
    display:block;
  }
}
.hidden{display:none!important;}

.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  backdrop-filter:blur(2px);
  z-index:90;
}
.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  z-index:100;
}
.modal-content{
  width:100%;
  max-width:420px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 24px 60px rgba(15,23,42,.18);
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.modal-content h3{
  margin:0;
  font-size:1.1rem;
  font-weight:700;
  color:var(--text);
}
.modal-content p{
  margin:0;
  color:var(--text-dim);
  font-size:.9rem;
  line-height:1.4;
}
.modal-list{
  margin:0;
  padding-left:1.1rem;
  display:flex;
  flex-direction:column;
  gap:.35rem;
  color:var(--text-dim);
  font-size:.85rem;
}
.modal-list li{line-height:1.4;}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:.75rem;
}
.modal-actions .pillBtn{
  flex:0 1 auto;
  padding:.55rem 1rem;
}
.modal-actions .actionBtn{
  flex:1 1 180px;
  margin-top:0;
}

/* tlačidlá akcie */
.step-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.2rem;
}
.actionBtn{
  width:100%;
  background:linear-gradient(120deg,var(--accent) 0%,#00c96d 100%);
  border:0;
  border-radius:12px;
  padding:1rem .75rem;
  font-size:1rem;
  font-weight:600;
  color:#0b2b1b;
  line-height:1.2;
  text-align:center;
  margin-top:1.2rem;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
  touch-action:manipulation;
}
.step-actions .actionBtn{
  flex:1 1 180px;
  margin-top:0;
}
.actionBtn:active{
  transform:scale(.98);
}
.actionBtn:hover{
  box-shadow:0 15px 25px rgba(0,201,109,.25);
}
.actionBtn--secondary{
  background:linear-gradient(135deg,#ecf8f2 0%,#d7f7e5 100%);
  color:var(--text);
}
.actionBtn--secondary:hover{
  box-shadow:0 15px 25px rgba(67,97,82,.18);
}
.actionBtn-danger{
  background:linear-gradient(135deg,#f87171 0%,#dc2626 100%);
  color:#fff;
}
.actionBtn-danger:hover{
  box-shadow:0 15px 25px rgba(220,38,38,.25);
}

/* výsledok krok */
.big-total{
  text-align:center;
  font-size:2rem;
  font-weight:700;
  line-height:1.2;
  color:var(--accent);
  margin-top:.75rem;
  word-break:break-word;
}

.stats-grid{
  margin-top:1rem;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.8rem;
}

.stat-card{
  background:#f6fdfa;
  border:1px solid rgba(0,0,0,.04);
  border-radius:12px;
  padding:.85rem;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}

.stat-label{
  font-size:.75rem;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.stat-value{
  font-size:1.35rem;
  font-weight:700;
  color:var(--text);
}

.stats-meta{
  margin-top:1rem;
  font-size:.78rem;
  color:var(--text-dim);
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.history-empty{
  margin-top:1rem;
  font-size:.85rem;
  color:var(--text-dim);
  text-align:center;
}

/* tabuľky */
.table-block{
  margin-top:1rem;
  overflow-x:auto;
}
.table-title{
  font-size:.8rem;
  color:var(--text-dim);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.03em;
  margin-bottom:.5rem;
}
.table-head,
.table-row{
  display:flex;
  width:100%;
  font-size:.8rem;
  min-width:440px;
}
.table-head{
  font-weight:600;
  color:var(--text);
  background:var(--accent-soft);
  border:1px solid rgba(0,0,0,.05);
  border-radius:8px 8px 0 0;
}
.table-head div{
  flex:1;
  padding:.6rem .6rem;
}
.table-head .actions-col{
  flex:0 0 120px;
  text-align:right;
}
.table-body{
  border:1px solid rgba(0,0,0,.05);
  border-top:0;
  border-radius:0 0 8px 8px;
  overflow:hidden;
}
.table-row{
  border-top:1px solid rgba(0,0,0,.04);
}
.table-row:first-child{
  border-top:0;
}
.table-row div{
  flex:1;
  padding:.6rem .6rem;
  background:#f8fafc;
  color:var(--text);
  line-height:1.3;
  word-break:break-word;
  font-size:.8rem;
}
.table-row .actions-col{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:.5rem;
}
.history-delete-btn{
  flex:1 1 110px;
}
.table-row div small{
  display:block;
  color:var(--text-dim);
  font-size:.7rem;
  font-weight:400;
  margin-top:.25rem;
  line-height:1.2;
}

:root[data-theme="dark"] body{
  color:var(--text);
}

:root[data-theme="dark"] .block{
  border:1px solid rgba(255,255,255,.04);
  box-shadow:0 28px 60px rgba(3,12,8,.4);
}

:root[data-theme="dark"] .hero-logo{
  background:#1a3f2c;
  color:#d4ffe9;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}

:root[data-theme="dark"] .hero-meta{
  color:var(--text-dim);
}

:root[data-theme="dark"] .topbar-left{
  color:var(--text-dim);
}

:root[data-theme="dark"] .topbar-btn{
  background:rgba(16,41,28,.9);
  border:1px solid rgba(39,214,131,.32);
  color:var(--text);
  box-shadow:0 12px 22px rgba(3,12,8,.35);
}

:root[data-theme="dark"] .topbar-btn--danger{
  color:#ff8d8d;
  border-color:rgba(255,141,141,.4);
}

:root[data-theme="dark"] .topbar-btn--danger:hover,
:root[data-theme="dark"] .topbar-btn--danger:focus,
:root[data-theme="dark"] .topbar-btn--danger.is-active{
  background:#ff5f5f;
  border-color:#ff5f5f;
  color:#1b0707;
}

:root[data-theme="dark"] .topbar-btn:hover:not(.topbar-btn--danger),
:root[data-theme="dark"] .topbar-btn.is-active:not(.topbar-btn--danger){
  color:#04130b;
}

:root[data-theme="dark"] .money-row{
  background:rgba(15,45,30,.85);
  border:1px solid rgba(39,214,131,.18);
}

:root[data-theme="dark"] .icon-coin,
:root[data-theme="dark"] .icon-note{
  color:#d9f9e9;
  border-color:rgba(217,249,233,.25);
}

:root[data-theme="dark"] .pillBtn{
  background:rgba(16,41,28,.9);
  border:1px solid rgba(39,214,131,.28);
  color:var(--text);
}

:root[data-theme="dark"] .pillBtn:hover{
  background:rgba(39,214,131,.18);
  border-color:rgba(39,214,131,.5);
}

:root[data-theme="dark"] .pillBtn-danger{
  border-color:rgba(255,141,141,.4);
  color:#ff8d8d;
}

:root[data-theme="dark"] .pillBtn-danger:hover{
  border-color:rgba(255,141,141,.6);
  background:rgba(255,141,141,.12);
}

:root[data-theme="dark"] .counter-btn{
  background:rgba(16,41,28,.9);
  border:1px solid rgba(39,214,131,.28);
  color:var(--text);
}

:root[data-theme="dark"] .count-display{
  color:var(--text);
}

:root[data-theme="dark"] .big-input-field{
  background:rgba(10,30,20,.9);
  border:2px solid rgba(39,214,131,.35);
  box-shadow:none;
}

:root[data-theme="dark"] .big-input-field:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(39,214,131,.25);
}

:root[data-theme="dark"] .tip-option{
  background:rgba(16,41,28,.85);
  border:1px solid rgba(39,214,131,.18);
}

:root[data-theme="dark"] .tip-partial-input input,
:root[data-theme="dark"] .tip-total-input{
  background:rgba(15,35,25,.9);
  border:1px solid rgba(39,214,131,.22);
}

:root[data-theme="dark"] .tip-total-input input{
  background:rgba(10,30,20,.85);
  border:1px solid rgba(39,214,131,.22);
  color:var(--text);
}

:root[data-theme="dark"] .tip-total-input input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(39,214,131,.2);
}

:root[data-theme="dark"] .tip-partial-input input:disabled,
:root[data-theme="dark"] .tip-total-input input:disabled{
  background:rgba(26,45,34,.6);
  opacity:.7;
}

:root[data-theme="dark"] .alert-info,
:root[data-theme="dark"] .alert-success{
  background:rgba(39,214,131,.18);
  color:var(--text);
}

:root[data-theme="dark"] .alert-error{
  background:rgba(255,141,141,.18);
  color:#ffbcbc;
}
:root[data-theme="dark"] .alert-warning{
  background:rgba(255,245,220,.12);
  color:#fbe0af;
}

:root[data-theme="dark"] .modal-content{
  background:#122c1f;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}

:root[data-theme="dark"] .modal-backdrop{
  background:rgba(4,13,9,.75);
}

:root[data-theme="dark"] .table-head{
  background:rgba(39,214,131,.18);
  border-color:rgba(39,214,131,.28);
}

:root[data-theme="dark"] .table-body{
  border-color:rgba(39,214,131,.28);
}

:root[data-theme="dark"] .table-row{
  border-top:1px solid rgba(39,214,131,.12);
}

:root[data-theme="dark"] .table-row div{
  background:rgba(16,41,28,.82);
}

:root[data-theme="dark"] .stat-card{
  background:rgba(15,45,30,.85);
  border:1px solid rgba(39,214,131,.18);
}

:root[data-theme="dark"] .actionBtn{
  color:#04140c;
  box-shadow:0 15px 25px rgba(39,214,131,.25);
}

:root[data-theme="dark"] .actionBtn:hover{
  box-shadow:0 15px 25px rgba(39,214,131,.32);
}

:root[data-theme="dark"] .actionBtn--secondary{
  background:linear-gradient(135deg,rgba(39,214,131,.28) 0%,rgba(20,98,65,.6) 100%);
  color:var(--text);
}

:root[data-theme="dark"] .actionBtn--secondary:hover{
  box-shadow:0 15px 25px rgba(39,214,131,.32);
}

:root[data-theme="dark"] .actionBtn-danger{
  color:#ffecec;
}

:root[data-theme="dark"] .actionBtn-danger:hover{
  box-shadow:0 15px 25px rgba(220,38,38,.35);
}

@media (max-width: 540px){
  :root{
    --pad:1rem;
  }
  body{
    padding:1.1rem .65rem 2.25rem;
  }
  .app{
    max-width:100%;
    gap:.85rem;
  }
  .topbar{
    flex-direction:column;
    align-items:stretch;
    gap:.65rem;
  }
  .topbar-right{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:.45rem;
  }
  .topbar-btn{
    flex:1 1 calc(50% - .25rem);
    min-width:0;
    padding:.55rem .75rem;
  }
  .topbar-btn:last-child{
    flex-basis:100%;
  }
  .counter-btn{
    width:48px;
    height:48px;
  }
  .count-display{
    min-width:48px;
  }
  .big-input-field{
    font-size:1.75rem;
  }
  .quick-actions{
    gap:.5rem;
  }
  .pillBtn{
    flex:1 1 120px;
  }
  .table-head,
  .table-row{
    min-width:100%;
    font-size:.75rem;
  }
  .table-head div,
  .table-row div{
    padding:.55rem .5rem;
  }
  .table-head .actions-col,
  .table-row .actions-col{
    flex:0 0 96px;
  }
}

@media (min-width: 768px){
  body{
    padding:2.5rem 2rem 4rem;
  }
  .app{
    max-width:760px;
  }
  .dashboard-footer{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.2rem;
  }
  .dashboard-footer .block{
    height:100%;
  }
}

@media (min-width: 1024px){
  body{
    padding:3rem 3.5rem 4.5rem;
  }
  .app{
    max-width:1200px;
    display:grid;
    grid-template-columns:minmax(320px,380px) minmax(0,1fr);
    gap:1.5rem;
    align-items:start;
  }
  .app > .block:first-of-type,
  #globalAlert,
  #statementBlock{
    grid-column:1 / -1;
  }
  #stepWallet,
  #stepAmount,
  #stepPayment,
  #stepResult{
    grid-column:1 / 2;
  }
  .dashboard-footer{
    grid-column:2 / 3;
    display:flex;
    flex-direction:column;
    gap:1.2rem;
    position:sticky;
    top:3rem;
  }
  .dashboard-footer .block{
    position:relative;
  }
}

@media (min-width: 1280px){
  .app{
    grid-template-columns:minmax(340px,420px) minmax(0,1fr);
  }
  .big-input-field{
    font-size:2.25rem;
  }
  .stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}