/* ======================================================================
   02. DASHBOARD
   Hlavna obrazovka: karty, zoznam pohybov, obdobia, FAB

   Poradie suborov v index.html je zavazne -- kaskada od neho zavisi.
   Tento subor obsahuje povodne sekcie 02-02.
   ====================================================================== */

/* ======================================================================
   02. [HOME/QWICK]  qwick-moves-main
   Main stylesheet: dashboard, Qwick entry form, tags,
   move list
   ====================================================================== */
/* Paleta plochy (--surface3, --card-fill, --line, --text, --muted, --ice,
   --ice2, --mint, --mint-dim, --accent, --accent2, --danger, --amber,
   --radius) sa presunula do styles/00-tokens/01-semantic.css. */
.qwick-surface{
  color-scheme: dark;
}
.qwick-surface *{
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}.app-screen-moves{width:100%;overflow-x:hidden;transform:translate3d(0,0,0);margin:0;max-width:100%;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;min-height:100dvh;user-select:none;}
/* Okraje rolovacej plochy su ROLA, nie vlastnost jednej obrazovky. Horny
   odstup musi obsahovat bezpecnu zonu: v prehliadaci je nulova, ale po
   pridani na plochu je to cela vyska stavoveho riadku. Ked ju plocha nema,
   jej hlavicka vyjde pod stavovy riadok a system uz jej tlacidla nedostane --
   presne to sa stalo dashboardu TRIPS, ktory bezpecnu zonu vobec nemal
   a sedel o vysku stavoveho riadku vyssie nez Moves.
   Dolny odstup drzi miesto pre QWICK tlacidlo (bezpecna zona + 31px + 70px
   vysky tlacidla), aby posledna karta nikdy neskoncila pod nim.
   Moves aj kazdy modul sa prihlasia touto triedou -- jedna hodnota, obe
   plochy. Bocny odstup patri k nej, aby sa obsah nikde neprilepil na hranu. */
.qwick-screen-pad{
  padding:calc(env(safe-area-inset-top,0px) + 18px) 14px calc(env(safe-area-inset-bottom,0px) + 135px);
}
.qwick-surface input,
.qwick-surface button,
.qwick-surface select{
  font: inherit;
}
.qwick-surface .tabular{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.qwick-surface .app-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 16px;
}
.qwick-surface .periods{
  display: flex;
  justify-content: center;
  gap: 7px;
  overflow-x: visible;
  padding: 0 2px 13px;
  scrollbar-width: none;
}
.qwick-surface .periods::-webkit-scrollbar{
  display: none;
}
/* Canonical period-pill design (Deň/Týždeň/Mesiac/Rok/Dátum), shared by the
   dashboard and period sheets. Geometry/surface are identical; Moves keeps its
   blue active accent while Trips uses its green active accent. */
.qwick-surface .period{
  flex: 0 0 auto;
  min-width: 0;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  line-height: normal;
}
/* Aktívne obdobie sa označuje IBA farbou textu. Zatmavenie výplne aj
   zmena okraja sú preč: tlačidlo si drží materiál poľa v každom stave,
   takže sa pri prepnutí nemení tvar ani plocha, len text. */
.qwick-surface .period.active{
  color: var(--accent);
}
.qwick-surface .bento{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ---------------------------------------------------------------------
   DASHBOARD COLOUR FIELD

   The colour belongs to the complete dashboard plane rather than to a
   rectangular hero container. Two distant, heavily blurred sources create
   the elegant ambient depth, while the hero owns one quieter local veil.
   Both layers remain physically continuous behind the dashboard cards.
   --------------------------------------------------------------------- */
#app-track{
  isolation:isolate;
  background:var(--bg);
}
#app-track::before,
#app-track::after{
  content:"";
  position:absolute;
  z-index:0;
  width:min(86vw,460px);
  height:min(56vw,300px);
  border-radius:50%;
  pointer-events:none;
  filter:blur(62px);
  opacity:.26;
  transition:opacity .55s ease,transform .72s cubic-bezier(.22,1,.36,1),background .55s ease;
  will-change:transform,opacity;
}
#app-track::before{
  top:-13%;
  left:-24%;
  background:radial-gradient(circle,rgba(69,178,255,.88) 0%,rgba(105,215,255,.32) 38%,transparent 72%);
  transform:translate3d(0,0,0) rotate(-8deg);
}
#app-track::after{
  right:-28%;
  bottom:14%;
  background:radial-gradient(circle,rgba(135,93,255,.72) 0%,rgba(61,220,151,.2) 42%,transparent 72%);
  transform:translate3d(0,0,0) rotate(8deg);
}
.app-screen-moves{
  background:transparent;
}
.qwick-surface .card{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 16px;
}
.qwick-surface .span2{
  grid-column: 1/-1;
}
.qwick-surface .label{
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--muted);
  font-weight: 750;
}
.qwick-surface .value{
  margin-top: 9px;
  font-size: 27px;
  font-weight: 850;
  letter-spacing: -.5px;
}
.qwick-surface .income .value{
  color: var(--mint);
}
.qwick-surface .expense .value{
  color: var(--danger);
}
/* Hero drzi rovnaku vysku na oboch obrazovkach. Bez toho pri prechode medzi
   Moves a Trips cely blok pod nim poskocil, lebo kazde hero bolo ine vysoke.
   Vysku nesie jeden token, nie dve nezavisle cisla. */
.qwick-surface{
  --qwick-hero-height:205px;
  --qwick-hero-head-height:26px;
}
.qwick-surface .balance-card{
  position:relative;
  isolation:isolate;
  min-height:var(--qwick-hero-height);
  padding: 13px 4px 17px;
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow:none;
  overflow: visible;
  cursor:pointer;
  outline:none;
}
.qwick-surface .balance-card:focus-visible::after{
  content:"";
  position:absolute;
  inset:-7px;
  border:1px solid color-mix(in srgb,var(--accent) 52%,transparent);
  border-radius:30px;
  pointer-events:none;
}
.qwick-surface .balance-card::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-14px -7px -8px;
  border-radius:34px;
  background:
    radial-gradient(ellipse at 12% 4%,rgba(105,215,255,.15),transparent 54%),
    radial-gradient(ellipse at 84% 90%,rgba(147,105,255,.12),transparent 60%);
  filter:blur(8px);
  pointer-events:none;
}
/* Hlavicka hero drzi rovnaku vysku bez ohladu na to, co v nej stoji. V Moves
   ju rozsiruje odznak trendu, v Trips je v nej len titulok -- bez tejto vysky
   by titulok aj suma sedeli na kazdej obrazovke inde a pri prechode by
   poskakovali. */
.qwick-surface .balance-card > .balance-hero-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:var(--qwick-hero-head-height);
  margin:0 2px 12px;
}
.qwick-surface .balance-card > .balance-hero-head > .label{
  color:rgba(235,235,242,.62);
}
.qwick-surface #statusLabel{
  flex:0 0 auto;
  height:26px;
  padding:0 11px 0 9px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,currentColor 34%,transparent);
  background:color-mix(in srgb,var(--surface3) 62%,transparent);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  box-sizing:border-box;
  letter-spacing:.2px;
  font-size:12px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}
.qwick-surface #statusLabel.status-plus{color:var(--mint)!important;}
.qwick-surface #statusLabel.status-minus{color:var(--danger)!important;}
.qwick-surface #statusLabel.status-neutral{color:var(--accent);}
.qwick-surface .balance-trend-arrow{
  width:12px;
  height:12px;
  flex:0 0 12px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform-origin:50% 50%;
  transition:transform .34s cubic-bezier(.22,1,.36,1);
}
/* Narast aj pokles pouzivaju tu istu sikmu sipku: hore doprava, pri poklese
   otocenu o 90 stupnov na dole doprava. Stav bez zmeny ma vlastny znak --
   obojsmernu sipku hore aj dole -- lebo otocena sipka rastu by tu tvrdila
   nejaky smer, aj ked ziadny nenastal. */
.qwick-surface #statusLabel.status-minus .balance-trend-arrow{transform:rotate(90deg);}
.qwick-surface .balance-trend-arrow-flat{display:none;}
.qwick-surface #statusLabel.status-neutral .balance-trend-arrow{transform:none;}
.qwick-surface #statusLabel.status-neutral .balance-trend-arrow-move{display:none;}
.qwick-surface #statusLabel.status-neutral .balance-trend-arrow-flat{display:inline;}
.qwick-surface .balance-row{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding:0 2px;
}
.qwick-surface .balance-value.plus{
  color: var(--mint);
}
.qwick-surface .balance-value.minus{
  color: var(--danger);
}
.qwick-surface .qwick-balance-chart{
  width:100%;
  height:58px;
  margin:9px 0 1px;
  overflow:visible;
  pointer-events:none;
}
.qwick-surface .qwick-balance-chart svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}
.qwick-surface .qwick-chart-fill-start,
.qwick-surface .qwick-chart-fill-end{stop-color:var(--accent);}
.qwick-surface .qwick-chart-guide{
  fill:none;
  stroke:rgba(255,255,255,.065);
  stroke-width:1;
  stroke-dasharray:2 7;
}
.qwick-surface .qwick-chart-area{opacity:.66;}
.qwick-surface .qwick-chart-line{
  fill:none;
  stroke:var(--accent);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:none;
}
.qwick-surface .qwick-chart-point{
  fill:var(--accent);
  stroke:color-mix(in srgb,var(--bg) 74%,transparent);
  stroke-width:3;
  filter:none;
}
.qwick-surface .mini-track{
  border-radius: 99px;
  background: var(--surface3);
  overflow: hidden;
  margin: 17px 2px 0;
  display: flex;
  opacity:.9;
  /* Ukazovatel pomeru je zamerne dvojnasobne vysoky, aby bol citatelny
     jednym pohladom aj bez cisel. */
  height:12px;
}
.qwick-surface .mini-track .inc{
  background: var(--mint);
}
.qwick-surface .mini-track .exp{
  background: var(--danger);
}
.qwick-surface .ghost{
  border: 1px solid var(--line);
  background: var(--surface3);
  color: var(--muted);
  padding: 9px 11px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 750;
}
.qwick-surface .move-main{
  min-width: 0;
}
.qwick-surface .move-meta{
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qwick-surface .move-amount{
  font-size: 14.5px;
  font-weight: 850;
  white-space: nowrap;
}
.qwick-surface .move-amount.income{
  color: var(--mint);
}
.qwick-surface .move-amount.expense{
  color: var(--danger);
}
.qwick-surface .empty{
  text-align: center;
  padding: 28px 12px;
  color: var(--muted);
  font-size: 13px;
}
.qwick-surface .fab::before,
.qwick-surface .fab::after{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%,-50%);
}.qwick-surface .fab::after{transform:translate(-50%,-50%) rotate(90deg);}.qwick-surface .fab{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 31px);z-index:50;width:120px;height:70px;padding:0 19px;border-radius:999px;color:var(--accent);box-sizing:border-box;transform:translateX(-50%) scale(var(--tap-scale, 1));display:grid;place-items:center;opacity:1;transition:transform .34s cubic-bezier(.32,.72,.35,1), var(--qwick-fade-in), box-shadow .2s ease-out;}
#fab.fab-hide{
  transform: translateX(-50%) scale(.1);
  opacity: 0;
  pointer-events: none;
  transition: transform .34s cubic-bezier(.32,.72,.35,1), var(--qwick-fade-out);
}
.qwick-surface .fab-choice-row{
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 31px);
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  --qwick-choice-gap:calc((100vw - 296px)/3);
  gap:var(--qwick-choice-gap);
  pointer-events: none;
}
.qwick-surface .fab-choice span{
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.qwick-surface .fab-choice-row.show{
  pointer-events: auto;
}
.qwick-surface .fab-choice-row.show .fab-choice{
  transform: translate3d(0,0,0);
  opacity: 1;
  /* Bocny prichod ma vlastny pohyb; objavenie je spolocny fade-in. Skryty
     zaklad volby nesie fade-out, lebo prechod sa berie z cieloveho stavu. */
  transition: transform .34s cubic-bezier(.32,.72,.35,1), var(--qwick-fade-in);
}
/* Dashboard close: keep the original 0.34 s side move, but let the
   two type buttons visually disappear sooner. */
.qwick-surface .fab-choice-row.qwick-type-closing .fab-choice{
  transition:transform .34s cubic-bezier(.32,.72,.35,1),var(--qwick-fade-out)!important;
}
.qwick-surface .fab-choice{height:70px;width:148px;padding:0 19px;border-radius:999px;color:var(--text);font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;opacity:0;transition:transform .34s cubic-bezier(.32,.72,.35,1), var(--qwick-fade-out);box-sizing:border-box;transform-origin:center center;}
.qwick-surface .fab-choice.is-pressed{
  filter: brightness(1.08);
}
@media (prefers-reduced-motion:reduce){
  #fab,
  #fab.fab-hide,
  .qwick-surface .fab-choice{ transition-duration:.01ms; }
}.qwick-surface .fab-choice-row.tag-mode{width:calc(296px + var(--qwick-choice-gap));display:grid;grid-template-columns:148px 148px;grid-auto-rows:70px;column-gap:var(--qwick-choice-gap);row-gap:12px;align-content:end;max-height:none;overflow:visible;scrollbar-width:none;background:transparent;border:0;box-shadow:none;isolation:isolate;-webkit-overflow-scrolling:auto;}
.qwick-surface .fab-choice-row.tag-mode::-webkit-scrollbar{display:none;}
.qwick-surface .fab-choice-row.qwick-hidden{
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}
.qwick-surface .fab-choice-row.tag-mode .fab-choice{
  width:148px;
  height:70px;
  min-width:148px;
  min-height:70px;
  transform:none;
  opacity:1;
  /* Farbu, okraj a vypln nesie zdielana .qwick-tag-pill; vypln a vynulovane
     rozostrenie zdielany material ovladacieho prvku
     (styles/21-control-material.css). Rozostrenie tu malo vlastne
     vynulovanie kvoli iOS -- teraz ho garantuje material pre vsetky
     tlacidla naraz, takze druhy zdroj tej istej hodnoty tu uz nestoji. */
  transition:background .26s ease,border-color .26s ease,color .26s ease,filter .15s ease;
  overflow:hidden;
}
.qwick-surface .fab-choice-row.tag-mode .fab-choice[hidden]{display:none;}
.qwick-surface .fab-choice-row.tag-mode .qwick-tag-name{
  min-width:0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:18px;
  font-weight:800;
  line-height:1.1;
  text-align:center;
  white-space:normal;
  word-break:break-word;
}
.qwick-surface .fab-choice-row.tag-mode .moves-tag-extra{
  /* Extras sit UNDER the two bottom tags. Their starting transform puts
     them exactly on one of those two pills; they only become visible as they
     physically travel upward out from behind it. */
  z-index:1;
  animation:moves-tag-rise .30s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--qwick-tag-delay,0ms);
}
.qwick-surface .fab-choice-row.tag-mode .moves-tag-choice:not(.moves-tag-extra){
  /* The two morphing bottom tags are the occluding foreground anchors. */
  position:relative;
  z-index:3;
}
@keyframes moves-tag-rise{
  from{opacity:0;transform:translate3d(var(--qwick-rise-x,0px),var(--qwick-rise,70px),0);}
  to{opacity:1;transform:translate3d(0,0,0);}
}
/* Tag pagination uses the same visual language as the main + morph.
   An upward swipe shrinks/fades the current eight pills away, then the next
   page's bottom two anchors grow in while every remaining pill physically
   rises from behind those anchors using moves-tag-rise above. */
@keyframes moves-tag-page-out{
  from{opacity:1;transform:translate3d(0,0,0) scale(1);}
  to{opacity:0;transform:translate3d(0,0,0) scale(.1);}
}
@keyframes moves-tag-page-anchor-in{
  from{opacity:0;transform:translate3d(0,0,0) scale(.1);}
  to{opacity:1;transform:translate3d(0,0,0) scale(1);}
}
.qwick-surface .fab-choice-row.tag-mode.qwick-page-leaving{pointer-events:none;}
/* The outgoing page is cloned into absolute positions before the DOM is rebuilt.
   Keeping those clones at opacity:1/scale(1) for one forced layout prevents the
   old page from disappearing on the replacement frame. Only then does the same
   shrink+fade used by + begin, while the new page is already animating above it. */
.qwick-surface .fab-choice-row.tag-mode .qwick-page-outgoing{
  position:absolute;
  z-index:0;
  pointer-events:none;
  /* These start values must NOT be !important. Important declarations beat
     CSS animations in the cascade, which previously locked every outgoing
     clone at opacity:1 / scale(1) for the whole keyframe timeline and made it
     simply disappear only when JS removed the clone. */
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  animation:none;
  transition:none;
  will-change:transform,opacity;
}
.qwick-surface .fab-choice-row.tag-mode .qwick-page-outgoing.qwick-page-outgoing-active{
  animation:moves-tag-page-out .28s cubic-bezier(.32,.72,.35,1) both;
}
.qwick-surface .fab-choice-row.tag-mode.qwick-page-entering .moves-tag-choice:not(.moves-tag-extra):not(.qwick-page-outgoing){
  position:relative;
  z-index:4;
  animation:moves-tag-page-anchor-in .28s cubic-bezier(.32,.72,.35,1) both;
  animation-delay:0ms;
}
@keyframes moves-tag-retreat{
  from{opacity:1;transform:translate3d(0,0,0) scale(1);}
  to{opacity:0;transform:translate3d(0,var(--qwick-exit,52px),0) scale(.82);}
}
.qwick-surface .fab-choice-row.tag-mode.returning-tags .moves-tag-choice{
  animation:moves-tag-rise .38s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--qwick-tag-delay,0ms);
}
.qwick-surface .fab-choice-row.tag-mode.leaving-tags{pointer-events:none;}
/* Tag -> form: every pill physically folds back toward the original
   two-button baseline while it fades. Nothing is display:none until the
   reverse motion has actually finished. */
@keyframes moves-tag-fold-to-form{
  from{opacity:1;transform:translate3d(0,0,0) scale(1);}
  to{opacity:0;transform:translate3d(var(--qwick-collapse-x,0px),var(--qwick-collapse-y,0px),0) scale(.84);}
}
.qwick-surface .fab-choice-row.tag-mode.leaving-tags .moves-tag-choice{
  animation:moves-tag-fold-to-form .30s cubic-bezier(.4,0,.75,.25) both;
  animation-delay:var(--qwick-exit-delay,0ms);
}
/* Tags -> dashboard is one shared reverse motion. Tag pills retreat
   at the same time as the restored Výdavok / Príjem pair flies back to the
   sides and + grows/fades in. There is no intermediate static type-button frame. */
@keyframes moves-tag-fold-to-dashboard{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1);}
  72%{opacity:0;}
  100%{opacity:0;transform:translate3d(var(--qwick-dashboard-collapse-x,0px),var(--qwick-collapse-y,0px),0) scale(.84);}
}
@keyframes qwick-expense-fly-out{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1);}
  59%{opacity:0;}
  100%{opacity:0;transform:translate3d(-148px,0,0) scale(1);}
}
@keyframes qwick-income-fly-out{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1);}
  59%{opacity:0;}
  100%{opacity:0;transform:translate3d(148px,0,0) scale(1);}
}
.qwick-surface .fab-choice-row.tag-mode.collapsing-to-dashboard{pointer-events:none;}
.qwick-surface .fab-choice-row.tag-mode.collapsing-to-dashboard .moves-tag-choice{
  animation:moves-tag-fold-to-dashboard .22s cubic-bezier(.4,0,.75,.25) both;
  animation-delay:0ms;
}
.qwick-surface .fab-choice-row.tag-mode.collapsing-to-dashboard .fab-choice-exp,
.qwick-surface .fab-choice-row.tag-mode.collapsing-to-dashboard .fab-choice-inc{
}.qwick-surface .fab-choice-row.tag-mode.collapsing-to-dashboard .fab-choice-exp{color:var(--danger);animation:qwick-expense-fly-out .34s cubic-bezier(.32,.72,.35,1) both;}.qwick-surface .fab-choice-row.tag-mode.collapsing-to-dashboard .fab-choice-inc{color:var(--mint);animation:qwick-income-fly-out .34s cubic-bezier(.32,.72,.35,1) both;}

/* Spolocna klavesnicova zakladna (--qwick-keyboard-panel-bottom) je
   v styles/00-tokens/01-semantic.css. */

/* Ked detail upravy ustupi vlastnej klavesnici, jeho spodna hrana je znovu
   viditelna. V tom stave ma sheet styri rohy a rovnaky spodny odstup ako
   vodorovny obsah. */
.qwick-surface .overlay.qwick-keyboard-sheet-raised .sheet{
  border-radius:24px;
  /* The visible lower edge uses the exact same inset as the sheet's horizontal
     content padding, so the gap below Uložiť equals its right-edge gap. */
  padding-bottom:14px;
}


/* Qwick entry form: clean baseline. The shared custom keyboard owns its
   focus and actions; this block owns only the form's layout and transition.

   The prepared form already exists in the render tree while tags are
   visible, but it is completely invisible and non-interactive. */
.qwick-surface .qwick-entry-panel{
  /* Anchor the form to the shared custom-keyboard baseline. Unlike a record
     sheet it already lives above the keyboard and must not be lifted again. */
  position:absolute;
  left:50%;
  /* Permanent qwick-form resting level: approximately the top edge of the
     portrait iOS software keyboard. The form is prepared and later shown at
     this same height; it never originates from the bottom edge anymore. */
  bottom:var(--qwick-keyboard-panel-bottom);
  z-index:61;
  width:min(calc(100vw - 28px),492px);
  box-sizing:border-box;
  display:none;
  flex-direction:column;
  gap:10px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(-50%);
  /* FORMULAR SA OBJAVUJE A MIZNE SPOLU S KLAVESNICOU. Cita preto jej
     casovanie (`--qwick-kb-*`), nie vlastne cislo -- keby mal vlastne,
     rozisli by sa a formular by ostal visiet nad zasunutou klavesnicou.
     `visibility` sa prepina az na konci odchodu, inak by prvok zmizol
     skor, nez fade dobehne -- ten isty vzorec ma vrstva klavesnice. */
  transition:opacity var(--qwick-kb-leave),
             visibility 0s linear var(--qwick-kb-leave-time);
}
/* `prepared` je formular VYKRESLENY, ale priehladny a nedotykovy. Nesmie
   byt `visibility:hidden`: skryte pole sa neda zaostrit, takze by sa
   klavesnica mohla zacat vysuvat az o snimok neskor nez sa formular zacne
   objavovat -- a to su presne tie dva pohyby, ktore maju ist naraz. */
.qwick-surface .qwick-entry-panel.prepared{
  display:flex;
  opacity:0;
  visibility:visible;
  pointer-events:none;
}
/* Formular je uz vykresleny (`prepared`) skor, nez sa ukaze -- bez toho by
   prehliadac nemal z coho prechod zacat a zmena `display` by ho zhltla. */
.qwick-surface .qwick-entry-panel.show{
  display:flex;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity var(--qwick-kb-enter);
}
/* Global Date Picker visual handoff for Qwick Entry. The Qwick form stays mounted in
   place and simply fades away while our own iOS-style calendar owns the
   foreground. No native input[type=date] participates in this flow. */
.qwick-surface .qwick-entry-panel.date-picker-active{
  display:flex;
  opacity:0;
  visibility:visible;
  pointer-events:none;
}
/* Slightly quicker return from the custom date picker. */
.qwick-surface .qwick-entry-panel.date-picker-return{
  transition:var(--qwick-fade-in);
}

.qwick-surface .qwick-entry-meta-row{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:10px;
  align-items:center;
}
.qwick-surface .qwick-entry-note,
.qwick-surface .qwick-entry-date{
  width:100%;
  min-width:0;
  height:42px;
  min-height:42px;
  box-sizing:border-box;
  border-radius:999px;
  outline:none;
  font-weight:750;
  font-size:16px;
}
/* Material pola vlastni styles/17-field.css -- tu ostava iba odsadenie,
   ktore je geometria, nie vzhlad. Povodne tu stal `background:--surface3`
   a `border:--line`, ale 10-materials ich prepisalo cez !important, takze
   sa nikdy nenakreslili. */
.qwick-surface .qwick-entry-note{padding:0 16px;}.qwick-surface .qwick-entry-date{padding:0 8px;text-align:center;-webkit-appearance:none;appearance:none;}
/* Qwick date is a real HTML button now; the native iOS date input is not used
   anywhere in Qwick Entry. Flex centering keeps the label optically centered. */
.qwick-surface button.qwick-entry-date{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  padding-top:0;
  padding-bottom:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.qwick-surface button.qwick-entry-date > span{
  display:block;
  transform:translateY(-1px);
  white-space:nowrap;
}
/* Amount row geometry.
   The Back button now lives inside this wrap, directly right of the Amount
   field. One source of truth for the three horizontal measurements, so the
   Amount field, the gap, the Back circle and the decorative keyboard pill can
   never drift apart:
     --qwick-back-size : Back circle diameter (also its height)
     --qwick-back-gap  : gap between Amount and Back
     --qwick-back-slot : the room reserved on the right of the wrap
   The wrap's padding-right is exactly that slot, so the Amount field ends
   --qwick-back-gap before the Back button and the wrap's own left/right edges
   are identical to [Amount left edge] and [Back right edge]. */
.qwick-surface .qwick-entry-amount-wrap{
  position:relative;
  width:100%;
  --qwick-back-size:56px;
  --qwick-back-gap:10px;
  --qwick-back-slot:calc(var(--qwick-back-size) + var(--qwick-back-gap));
  padding-right:var(--qwick-back-slot);
  box-sizing:border-box;
}
.qwick-surface .qwick-entry-amount{
  width:100%;
  height:56px;
  min-height:56px;
  box-sizing:border-box;
  border-radius:999px;
  padding:0 46px 0 18px;
  outline:none;
  font-size:24px;
  font-weight:850;
  -webkit-appearance:none;
  appearance:none;
}
.qwick-surface .qwick-entry-amount::-webkit-inner-spin-button,
.qwick-surface .qwick-entry-amount::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
/* ---------------------------------------------------------------
   Exclusive field eligibility
   ---------------------------------------------------------------
   Both Qwick fields are ordinary real inputs with fully native editing. During
   a Qwick keyboard session only the focused one is enabled; the other is
   disabled so WebKit has no second assistable control and the accessory bar's
   Previous/Next arrows stay greyed out. That removes the only path that could
   move focus between the two stacked fields while the keyboard is open, which
   is what caused the viewport jump.

   Disabling changes how WebKit treats the field, never how it looks: every
   property the disabled state would alter is restored here, so the inactive
   field renders pixel-identically to the active one. */
.qwick-surface .qwick-entry-note:disabled,
.qwick-surface .qwick-entry-amount:disabled{
  opacity:1;
  -webkit-text-fill-
  cursor:default;
}
.qwick-surface .qwick-entry-note:disabled::placeholder,
.qwick-surface .qwick-entry-amount:disabled::placeholder{
  color:var(--muted);
  -webkit-text-fill-color:var(--muted);
  opacity:.78;
}
.qwick-surface .qwick-entry-currency{
  position:absolute;
  /* 16px inside the Amount field, which now ends one Back slot earlier. */
  right:calc(16px + var(--qwick-back-slot));
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  font-size:16px;
  font-weight:850;
  pointer-events:none;
}
.qwick-surface .qwick-entry-panel[data-entry-type="expense"] .qwick-entry-amount{
  color:var(--danger);
  -webkit-text-fill-color:var(--danger);
}
.qwick-surface .qwick-entry-panel[data-entry-type="income"] .qwick-entry-amount{
  color:var(--mint);
  -webkit-text-fill-color:var(--mint);
}
.qwick-surface .qwick-entry-panel[data-entry-type="expense"] .qwick-entry-amount::placeholder{
  color:rgba(255,107,107,.52);
  -webkit-text-fill-color:rgba(255,107,107,.52);
  opacity:1;
}
.qwick-surface .qwick-entry-panel[data-entry-type="income"] .qwick-entry-amount::placeholder{
  color:rgba(61,220,151,.52);
  -webkit-text-fill-color:rgba(61,220,151,.52);
  opacity:1;
}
/* Back is a 56x56 yellow circle sitting in the reserved slot at the right end
   of the amount row. It is a type="button" and never submits anything; its
   behaviour (return to tags) is unchanged. */
.qwick-surface .qwick-entry-back{
  position:absolute;
  right:0;
  top:0;
  width:var(--qwick-back-size);
  height:var(--qwick-back-size);
  min-width:var(--qwick-back-size);
  min-height:var(--qwick-back-size);
  box-sizing:border-box;
  border-radius:50%;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Vyplň a žltý okraj vlastní zdieľaný materiál ovládacieho prvku
     (`styles/21-control-material.css`). Tu ostáva iba biela šípka --
     to je práve ten rozchod textu a identity, kvôli ktorému si Späť
     tint deklaruje výslovne. */
  color:#fff;
  font-size:20px;
  font-weight:850;
  line-height:1;
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
}
.qwick-surface .qwick-entry-back.is-pressed,
.qwick-surface .qwick-back-yellow.is-pressed{filter:brightness(1.08);}

body.fab-choice-open #app-viewport{touch-action:none;}

@media (prefers-reduced-motion:reduce){
  .qwick-surface .fab-choice-row.tag-mode .moves-tag-extra{animation-duration:.01ms;animation-delay:0ms;}
}
.qwick-surface .sheet-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height:52px;
  padding:6px 3px;
}
.qwick-surface .sheet-title{
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -.4px;
  position: relative;
  top: 0;
}
/* Popiska poľa. Dátumová pilulka je tiež <label> a toto pravidlo jej dáva
   veľkosť, hrúbku aj farbu -- odsadenie, verzálky a preklad písmen si však
   určuje sama. Preto TU zostáva jediné miesto, kde sa proti nej sili:
   vylúčiť ju menovite by jej vzalo aj typografiu, ktorú odtiaľto berie.
   Skutočná oprava je presunúť `.date-control` do vlastného komponentu
   (`styles/20-components/`), kde ho poradie prebije bez sily. */
.qwick-surface .field label{
  display: block;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px 2px;
}
.qwick-surface .input:focus{
  border-color: var(--accent2);
}
.qwick-surface .amount-wrap{
  position: relative;
}
/* Pole sumy. Viazané na kontajner, nie na rolu -- a pole záznamu odtiaľto
   berie časť typografie, takže sa vylúčiť nedá bez zmeny vzhľadu.
   Skutočná oprava je premenovať pravidlo na rolu a presunúť ho ku
   komponentu poľa (`styles/17-field.css`). */
.qwick-surface .amount-wrap input{
  padding-right: 44px;
  font-size: 24px;
  font-weight: 850;
}
.qwick-surface .color-picker-row{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  align-items:center;
  width:100%;
  box-sizing:border-box;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  touch-action:pan-x pan-y;
  /* 4px selection halo + press growth always remain inside the scroll viewport. */
  padding:8px 9px 10px;
  scroll-padding-inline:9px;
  scrollbar-width:none;
}
.qwick-surface .color-picker-row::-webkit-scrollbar{display:none;}
.qwick-surface .color-swatch{
  box-sizing:border-box;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:50%;
  border:2px solid transparent;
  padding:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.qwick-surface .color-swatch.selected{
  border-color:#fff;
  box-shadow:none;
}
.qwick-surface .footer-note{
  text-align: center;
  color: #4c4c56;
  font-size: 11px;
  margin-top: 22px;
  margin-bottom: 76px;
  letter-spacing: .3px;
}
.qwick-surface .footer-note .app-version{
  display: block;
  font-size: 9px;
  color: #3a3a42;
  margin-top: 3px;
  letter-spacing: .3px;
}
/* MINUS a PLUS nesu presnu pilulkovu siluetu tlacidiel typu v QWICK.
   Ktore je ktore, hovori tint vo vlastnej farbe zo zdielaneho materialu
   ovladacieho prvku (styles/21-control-material.css) a farba sumy vnutri;
   farebny okraj uz nie. Adresuje sa ROLA, nie ID -- pravidlo viazane na
   #expenseCard by bolo zamknute za MOVES. */
.qwick-surface .metric-card{
  border-radius:999px;
  /* Ten isty tien ako karta zaznamu a pole. Nahradil --card-shadow-fixed,
     ktory bol posledny zvysok samostatneho materialu karty tu. */
}
.qwick-surface .metric-card{
  width: 100%;
  min-height: 70px;
  height:70px;
  padding:0;
  text-align:center;
  color:var(--text);
  font:inherit;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  display:grid;
  place-items:center;
  box-sizing:border-box;
}
.qwick-surface .metric-card .value{
  margin:0;
  padding:0;
  font-size:25px;
  line-height:1;
  white-space:nowrap;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-sizing:border-box;
}
.qwick-surface .icon-btn{
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  color: var(--accent);
  display: flex;
  place-items: center;
  line-height: 0;
  position: relative;
  align-items: center;
  justify-content: center;
}
.qwick-surface .icon-btn svg{
  display: block;
  width: 20px;
  height: 20px;
  overflow: visible;
  transform: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.qwick-surface .detail-sheet{
  min-height: 0;
}
.qwick-surface .detail-total{
  font-size: 28px;
  font-weight: 900;
  margin-top: 5px;
}
.qwick-surface .detail-periods{
  padding-bottom: 10px;
}
.qwick-surface .detail-sheet .moves-list{
  padding-bottom: 8px;
}
.qwick-surface .tag-summary{
  margin: 0 0 16px;
  padding: 14px;
  background: var(--card-fill);
  border: 1px solid var(--line);
  border-radius: var(--qwick-pill-corner);
}
.qwick-surface .tag-summary-title{
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.05px;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 11px;
}
.qwick-surface .tag-summary-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qwick-surface .tag-summary-row{
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 6px;
  margin: -6px;
  border-radius: 12px;
  transition: background .15s ease;
  cursor: pointer;
}
.qwick-surface .tag-summary-row.active{
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent);
}
.qwick-surface .tag-summary-main{
  min-width: 0;
}
.qwick-surface .tag-summary-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.qwick-surface .tag-summary-share{
  font-size: 10px;
  color: var(--muted);
  font-weight: 750;
  white-space: nowrap;
}
.qwick-surface .tag-summary-track{
  height: 6px;
  border-radius: 999px;
  background: var(--surface3);
  overflow: hidden;
}
.qwick-surface .tag-summary-fill{
  height: 100%;
  border-radius: inherit;
  background: var(--danger);
}
.qwick-surface .tag-summary.income .tag-summary-fill{
  background: var(--mint);
}
.qwick-surface .tag-summary-amount{
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}
.qwick-surface .tag-summary.expense .tag-summary-amount{
  color: var(--danger);
}
.qwick-surface .tag-summary.income .tag-summary-amount{
  color: var(--mint);
}
.qwick-surface .tag-summary-empty{
  font-size: 12px;
  color: var(--muted);
  padding: 4px 0;
  margin: -4px 0;
}
.qwick-surface .input,
.qwick-surface select,
.qwick-surface button{
  max-width: 100%;
  min-width: 0;
}
.qwick-surface .custom-dates .field,
.qwick-surface .custom-dates .input{
  min-width: 0;
  width: 100%;
}
.qwick-surface .moves-more-hint{
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing:.08px;
  color: var(--accent);
  padding: 14px 4px 4px;
}
.qwick-surface .overlay.stacked-parent{z-index:100;}
.qwick-surface .overlay.stacked-child{z-index:140;}
.qwick-surface .tag-settings-btn.active{
  background: rgba(201,138,75,.14);
  border-color: rgba(201,138,75,.82);
  color: #d79a5a;
}
/* has-back no longer needs its own title/padding rules: .close,
   .tag-settings-btn, and .tag-settings-back are all position:absolute in
   every mode, so .sheet-title is the header's only true flex child either
   way — the base .sheet-head/.sheet-title rules already left-align and
   vertically center it exactly like "Kategórie"/"Nastavenia", with nothing
   left in the mode's own layout to compete with a right-positioned arrow. */
.qwick-surface .field{
  margin-bottom: 12px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
/* Rozmery a rytmus pola; material vlastni styles/17-field.css. */
.qwick-surface .input{max-width:100%;min-width:0;width:100%;padding:13px 14px;font-size:16px;display:block;}
.qwick-surface .date-control:focus,
.qwick-surface .date-control:focus-visible,
.qwick-surface .date-control:focus-within{
  outline:none;
}
.qwick-surface .custom-dates{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 10px;
  width: 100%;
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
  align-items: start;
}
.qwick-surface .custom-dates>.field{
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.qwick-surface .custom-dates .date-control{
  width: 100%;
  min-width: 0;
  max-width: 100%;
}.qwick-surface .date-control{position:relative;display:block;align-items:center;justify-content:center;width:100%;min-width:0;max-width:100%;height:58px;overflow:hidden;font-size:16px;font-weight:650;box-sizing:border-box;-webkit-appearance:none;appearance:none;padding:0;margin:0!important;line-height:1;text-transform:none!important;letter-spacing:0!important;cursor:pointer;}
.qwick-surface .date-control>span{
  display: grid;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 10px;
  text-align: center;
  pointer-events: none;
  position: absolute;
  width: auto;
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
  line-height: 1;
  transform: none;
  inset: 0;
  z-index: 1;
  place-items: center;
  height: auto;
  margin: 0;
}
.qwick-surface .custom-dates .date-control>span{
  font-size: 16px;
}
.qwick-surface input,
.qwick-surface textarea,
.qwick-surface [contenteditable="true"]{
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
.qwick-surface .balance-value{
  font-size: 43px;
  font-weight: 900;
  letter-spacing: -1.55px;
  line-height: .96;
}
/* Summary values are copied by long-press, never by native text selection. */
.qwick-surface #balanceCard,
.qwick-surface #balanceCard *,
.qwick-surface #expenseCard,
.qwick-surface #expenseCard *,
.qwick-surface #incomeCard,
.qwick-surface #incomeCard *{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
/* Brief confirmation shown after a successful long-press copy. */
.copy-toast{
  position:fixed;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom) + 92px);
  z-index:10050;
  transform:translate(-50%,10px) scale(.96);
  opacity:0;
  pointer-events:none;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(28,28,32,.92);
  color:#fff;
  font:700 13px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  letter-spacing:.1px;
  /* Bez rozostrenia. Výplň je 92 % nepriehľadná, takže cezeň aj tak nebolo
     nič vidieť -- rozostrenie 18 px sa počítalo naprázdno, a to počas
     vlastnej animácie príchodu. */
  transition:var(--qwick-fade-out),transform .18s ease;
}
.copy-toast.show{
  opacity:1;
  transform:translate(-50%,0) scale(1);
  transition:var(--qwick-fade-in),transform .18s ease;
}
.qwick-surface .period-nav{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -3px 2px 14px;
}
.qwick-surface .period-nav[hidden]{
  display: none;
}

.qwick-surface .period-nav-label{
  min-width: 0;
  flex: 1;
  text-align: center;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qwick-surface .detail-sheet .period-nav{
  margin: 0 2px 12px;
}
.qwick-surface .period-nav-btn:disabled{
  opacity: .28;
  pointer-events: none;
  transform: none;
}
.qwick-surface #periodPrev::before,
.qwick-surface #detailPeriodPrev::before{
  transform: translate(-50%,-50%) rotate(45deg);
  margin-left: 4px;
}
.qwick-surface #periodNext::before,
.qwick-surface #detailPeriodNext::before{
  transform: translate(-50%,-50%) rotate(225deg);
  margin-right: 4px;
}
/* Prekryv drzi tri veci naraz: zavoj (jeho farbu vlastni `04-sheets.css`),
   tuknutie mimo sheetu (`08-qwick-backdrop-close.js`) a zamok plochy pod
   sebou. Farba je tu iba v PRECHODE -- hodnotu si tento subor nepise, aby
   zavoj nemal dvoch vlastnikov. Ziadna vychodzia sa nedeklaruje: prekryv
   je bez nej priehladny a `transparent` do rgba interpoluje spravne. */
.qwick-surface .overlay.open{
  display: flex;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: var(--qwick-fade-in),background-color .24s ease,
              padding-bottom var(--qwick-kb-enter),visibility 0s;
}
.qwick-surface .overlay .sheet{
  animation: none;
  transform: translate3d(0,105%,0);
  opacity: .98;
  transition: transform .36s cubic-bezier(.22,1,.36,1),opacity .22s ease;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0,105%,0);
}
.qwick-surface .overlay.open .sheet{
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  opacity: 1;
}
.qwick-surface .move{
  z-index: 2;
  display: grid;
  border-radius: 999px;
  touch-action: pan-y;
  transform: translate3d(0,0,0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: calc(100% + 2px);
  margin: 0;
  margin-left: -1px;
  margin-right: -1px;
  -webkit-transform: translate3d(0,0,0);
}
.qwick-surface .move-wrap.is-removing{
  pointer-events: none;
  overflow: hidden;
}
.qwick-surface .overlay .sheet::before{
  content:none;
  display:none;
}
.qwick-surface .overlay .sheet.sheet-dragging{
  transition: none;
  user-select: none;
  -webkit-user-select: none;
}
.qwick-surface .overlay.sheet-dragging{
  transition: none;
}
.qwick-surface .moves-list{
  display: flex;
  flex-direction: column;
  gap: 0;
}
.qwick-surface .move-wrap:last-child{
  margin-bottom: 0;
}
.qwick-surface .move-wrap{
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background: transparent;
  isolation: isolate;
  clip-path: none;
  margin-bottom: 9px;
  contain: layout paint;
  box-sizing: border-box;
}
.qwick-surface .move-wrap.is-removing .move{
  pointer-events: none;
  will-change: transform,opacity;
  opacity: 0;
  transform: translate3d(-102%,0,0);
  transition: transform .36s cubic-bezier(.16,1,.3,1),var(--qwick-fade-out);
}
.qwick-surface :is(#entryOverlay.move-detail-mode,.qwick-record-detail-mode) .input,
.qwick-surface :is(#entryOverlay.move-detail-mode,.qwick-record-detail-mode) .amount-wrap,
.qwick-surface :is(#entryOverlay.move-detail-mode,.qwick-record-detail-mode) .date-control{
  cursor:default;
}
.qwick-surface #entryOverlay.move-detail-mode input:disabled:not(#amount){
  opacity:1;
  color:inherit;
  -webkit-text-fill-color:currentColor;
}
@keyframes up{from{transform:translateY(24px);opacity:0}}
@media(min-width:600px){
.app-screen-moves{max-width:520px;margin:0 auto}
}
@media(max-width:360px){
.qwick-surface .custom-dates{gap:8px}
.qwick-surface .custom-dates .date-control{font-size:14px;height:56px}
}
@media (prefers-reduced-motion:reduce){
.qwick-surface .overlay,
.qwick-surface .overlay .sheet{transition-duration:.01ms}
}
/* iOS/PWA modal positioning (consolidated from two prior fixes, both dated
   2026-08: an earlier one anchored the overlay to the bottom via inset and
   let height fill from there; a later "definitive" fix -- kept here, its
   values win -- instead pins inset:0 fully and never lets BODY become a
   fixed positioned element, since a fixed BODY becomes the containing block
   for the overlay/FAB in iOS standalone mode and shifts them by the page
   scroll offset, leaving a black strip at the bottom. Height still comes
   from the JS-synced --app-viewport-height custom property either way,
   since 100dvh alone can under/over-report on iOS standalone/PWA. */
.qwick-surface .overlay{position:fixed;inset:0;width:100vw;max-width:100vw;overflow:hidden;z-index:100;display:flex;align-items:flex-end;justify-content:center;overscroll-behavior:none;touch-action:none;padding:0;box-sizing:border-box;visibility:hidden;opacity:0;pointer-events:none;transition:var(--qwick-fade-out),background-color .24s ease,padding-bottom var(--qwick-kb-leave),visibility 0s linear .36s;contain:layout paint;height:var(--app-viewport-height, 100dvh);min-height:var(--app-viewport-height, 100dvh);max-height:var(--app-viewport-height, 100dvh);}
.qwick-surface .overlay.qwick-keyboard-sheet-raised{
  padding-bottom:var(--qwick-keyboard-panel-bottom);
}
@supports not (height: 100dvh){
.qwick-surface .overlay{
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
  }
}