:root{
  color-scheme:light dark;
  --bg:#0B0C0E;
  --glow:rgba(30,32,36,.48);
  --glow0:rgba(11,12,14,0);
  --surf:#141518;
  --line:rgba(255,255,255,.065);
  --line2:rgba(255,255,255,.11);
  --tint:rgba(255,255,255,.045);
  --tint2:rgba(255,255,255,.10);
  --tint-soft:rgba(255,255,255,.022);
  --ink:#F3F2EF;
  --ink2:#93959B;
  --ink3:#8B8E96;
  --gold:#D6B278;
  --gold-d:#8C7245;
  --gold-soft:rgba(214,178,120,.13);
  --gold-line:rgba(214,178,120,.40);

  --green:#76B58A;
  --green-line:rgba(118,181,138,.38);

  --rust:#BE7168;
  --rust-line:rgba(190,113,104,.35);
  --sheet:#0F1013;
  --tabs:#1A1B1F;
  --veil:rgba(0,0,0,.6);
  --toast-bg:rgba(240,239,236,.96);
  --toast-ink:#111214;
  --hdr:11,12,14;
  --shadow:0 10px 34px rgba(0,0,0,.5);
  --glow-op:1;
  --r:18px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#F2F1EE;
    --glow:rgba(255,255,255,.55);
    --glow0:rgba(242,241,238,0);
    --surf:#FFFFFF;
    --line:rgba(0,0,0,.075);
    --line2:rgba(0,0,0,.13);
    --tint:rgba(0,0,0,.04);
    --tint2:rgba(0,0,0,.075);
    --tint-soft:rgba(0,0,0,.018);
    --ink:#16171A;
    --ink2:#6C6E74;
    --ink3:#676A72;
    --gold:#8F6A31;
    --gold-d:#B79A66;
    --gold-soft:rgba(143,106,49,.09);
    --gold-line:rgba(143,106,49,.32);

    --green:#477A57;
    --green-line:rgba(71,122,87,.30);

    --rust:#A4534A;
    --rust-line:rgba(164,83,74,.3);
    --sheet:#F7F6F3;
    --tabs:#FFFFFF;
    --veil:rgba(0,0,0,.26);
    --toast-bg:rgba(22,23,26,.95);
    --toast-ink:#F5F4F1;
    --hdr:242,241,238;
    --shadow:0 8px 26px rgba(0,0,0,.13);
    --glow-op:.5;
  }
}
*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;

  scrollbar-width:none;
  -ms-overflow-style:none;

  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

*::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

input:focus,
textarea:focus{
  user-select:text;
  -webkit-user-select:text;
  -webkit-touch-callout:default;
}

html{
  width:100%;
  height:100vh;
  overflow:hidden;

  background:var(--bg);
}

body{
  position:relative;

  width:100%;
  height:100vh;
  margin:0;
  overflow:hidden;

  color:var(--ink);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size:16px;
  line-height:1.35;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;

  background:
    radial-gradient(
      130% 55% at 50% -10%,
      var(--glow) 0%,
      var(--glow0) 60%
    ),
    var(--bg);

  touch-action:pan-y;
  overscroll-behavior:none;
}

body.app-booting > header,
body.app-booting > main,
body.app-booting > .bottom-controls{
  visibility:hidden;
}

.boot-cover{
  position:fixed;
  inset:0;
  z-index:1000;

  background:
    radial-gradient(
      130% 55% at 50% -10%,
      var(--glow) 0%,
      var(--glow0) 60%
    ),
    var(--bg);
}

body:not(.app-booting) > .boot-cover{
  display:none;
}

body.auth-login-entering > header,
body.auth-login-entering > main,
body.auth-login-entering > .bottom-controls{
  opacity:0;
}

body.auth-login-entering.auth-login-entering-ready > header,
body.auth-login-entering.auth-login-entering-ready > main,
body.auth-login-entering.auth-login-entering-ready > .bottom-controls{
  opacity:1;

  transition:
    opacity
    .30s
    ease;
}

button,input,select{font-family:inherit}

/* шапка */
header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:20;

  padding:
    calc(14px + env(safe-area-inset-top))
    20px
    12px;

  background:
    linear-gradient(
      180deg,
      rgba(var(--hdr),.94) 62%,
      rgba(var(--hdr),0)
    );

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.nav{display:flex;align-items:center;justify-content:center;gap:6px}
.nav button{
  width:34px;
  height:34px;
  padding:0;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--tint);
  color:var(--ink2);
  cursor:pointer;
  display:grid;
  place-items:center;
}

.nav button svg{
  width:12px;
  height:16px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nav button.period{
  flex:1;
  position:relative;
  min-width:0;
  min-height:34px;
  padding:0 10px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:0;
  border-radius:0;
  outline:0;
  background:transparent;
  box-shadow:none;

  appearance:none;
  -webkit-appearance:none;

  text-align:center;
  text-indent:.095em;
  font-size:12px;
  font-weight:600;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink);

  user-select:none;
  -webkit-user-select:none;
}

.period.clickable{
  cursor:pointer;
}

.period.clickable::after{
  content:"";
  position:absolute;
  left:50%;
  top:calc(50% + 11px);
  width:5px;
  height:5px;
  border-right:1.5px solid var(--ink3);
  border-bottom:1.5px solid var(--ink3);
  transform:translateX(-50%) rotate(45deg);
  opacity:.8;
}

main{
  position:relative;

  width:100%;
  height:100vh;
  max-width:620px;
  margin:0 auto;

  overflow-x:hidden;
  overflow-y:auto;

  padding:
    calc(76px + env(safe-area-inset-top))
    16px
    calc(120px + env(safe-area-inset-bottom));

  -webkit-overflow-scrolling:touch;

  touch-action:pan-y;
  overscroll-behavior-x:none;
  overscroll-behavior-y:contain;
}

main.shifts-layout{
  padding-bottom:
    calc(78px + env(safe-area-inset-bottom));

  overflow:hidden;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

main.shifts-layout > .ml:first-child{
  margin-top:16px;
}

.shift-window{
  flex:1;
  min-height:0;

  overflow:hidden;
}

.shift-scroll{
  width:100%;
  height:100%;

  overflow-x:hidden;
  overflow-y:auto;

  -webkit-overflow-scrolling:touch;

  touch-action:pan-y;
  overscroll-behavior:contain;
}

/* типографика */
.ml{font-size:10px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--ink3);margin:22px 4px 9px}
.ml:first-child{margin-top:6px}
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.card + .card{margin-top:10px}

/* герой */
.hero{
  padding:17px 20px 15px;
  position:relative;
  overflow:hidden;
}

.hero:before{
  content:"";
  position:absolute;
  inset:-55% -30% auto auto;
  width:190px;
  height:190px;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(214,178,120,.14),
    rgba(214,178,120,0) 68%
  );
  opacity:var(--glow-op);
  pointer-events:none;
}

.hero .k{
  font-size:10px;
  font-weight:700;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink3);
}

.hero .n{
  margin-top:5px;
  margin-left:-2px;
  font-size:40px;
  font-weight:500;
  line-height:1.05;
  letter-spacing:-1.4px;
  color:var(--gold);
}

.hero .n.starts-one{
  margin-left:-5px;
}

.hero .n small{
  margin-left:3px;
  font-size:22px;
  letter-spacing:-.5px;
  color:var(--gold-d);
}

.hero .sub{
  margin-top:6px;
  font-size:13px;
  line-height:1.4;
  color:var(--ink2);
  white-space:normal;
}

/* строки */
.row{display:flex;align-items:center;gap:14px;padding:13px 16px;border-top:1px solid var(--line)}
.row:first-child{border-top:none}
.row .l{flex:1;min-width:0}
.row .t{font-size:15px;letter-spacing:-.15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .s{font-size:12px;color:var(--ink2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .v{font-size:15px;font-weight:500;letter-spacing:-.2px;white-space:nowrap}
.pos{color:var(--green)}.neg{color:var(--rust)}
.total{background:var(--tint-soft)}
.total .t{font-weight:600}.total .v{font-weight:600;font-size:16px}

/* смена */
.sh{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 16px;
  border-top:1px solid var(--line);
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
}

.sh:first-child{
  border-top:none;
}

.sh .day{
  width:34px;
  flex:none;
  text-align:center;
}

.sh .day .d{
  display:block;
  width:2ch;
  margin:0 auto;
  text-align:center;

  font-family:
    ui-monospace,
    "SFMono-Regular",
    Menlo,
    monospace;

  font-size:19px;
  font-weight:500;
  line-height:1;
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
}

.sh .day .w{
  display:block;
  width:2ch;
  margin:3px auto 0;
  text-align:center;

  font-family:
    ui-monospace,
    "SFMono-Regular",
    Menlo,
    monospace;

  font-size:9px;
  font-weight:700;
  line-height:1;
  letter-spacing:0;
  text-transform:uppercase;
  color:var(--ink3);
}

.sh .mid{flex:1;min-width:0}
.sh .p{font-size:14.5px;letter-spacing:-.15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh .meta{font-size:11.5px;color:var(--ink2);margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sh .amt{font-size:15px;font-weight:500;letter-spacing:-.2px;white-space:nowrap;text-align:right}
.tag{
  height:18px;
  padding:0 5px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid var(--line2);
  border-radius:4px;

  color:var(--ink2);

  font-size:9px;
  font-weight:700;
  line-height:1;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}

.tag.g{
  border-color:var(--gold-line);
  color:var(--gold);
}

.tag.bonus{
  border-color:var(--green-line);
  color:var(--green);
}

.tag.r{
  border-color:var(--rust-line);
  color:var(--rust);
}

/* прогресс */
.prog{padding:14px 16px;border-top:1px solid var(--line)}
.prog .top{
  display:flex;
  justify-content:space-between;
  gap:12px;

  font-size:11.5px;
  color:var(--ink2);
}

.prog .top span:last-child{
  white-space:nowrap;
}

.prog .limit{
  margin-top:5px;
  margin-bottom:8px;

  display:grid;
  gap:2px;

  font-size:11px;
  color:var(--ink3);
}

.prog .limit-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}

.prog .limit-value{
  flex:none;
  white-space:nowrap;
  text-align:right;
}

.prog .track{height:4px;border-radius:2px;background:var(--tint2);overflow:hidden}
.prog .fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--gold-d),var(--gold))}

/* таббар */
.bottom-controls{
  position:fixed;
  left:0;
  right:0;
  bottom:calc(8px + env(safe-area-inset-bottom));
  z-index:30;

  display:flex;
  align-items:center;
  justify-content:center;

  pointer-events:none;
}

nav.tabs{
  pointer-events:auto;
}

nav.tabs{
  position:static;
  transform:none;
  flex:none;

  height:50px;

  display:flex;
  gap:2px;
  padding:4px;
  border-radius:25px;

  background:var(--tabs);
  border:1px solid var(--line2);

  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);

  box-shadow:var(--shadow);
}

nav.tabs button{
  padding:8px 17px;
  border:0;
  border-radius:20px;
  background:transparent;
  color:var(--ink2);
  font-size:12.5px;
  font-weight:500;
  cursor:pointer;
  white-space:nowrap;

  appearance:none;
  -webkit-appearance:none;

  transition:
    background-color .20s ease,
    color .20s ease,
    transform .12s cubic-bezier(.32,.72,0,1),
    opacity .12s ease;
}

nav.tabs button.on{
  background:var(--tint2);
  color:var(--ink);
}

.tab-label-short{
  display:none;
}

/* управление */
.manage-menu{
  overflow:hidden;
}

.manage-row{
  width:100%;
  min-height:66px;
  padding:13px 16px;

  display:flex;
  align-items:center;
  gap:14px;

  border:0;
  border-top:1px solid var(--line);

  background:transparent;
  color:var(--ink);

  text-align:left;
  cursor:pointer;

  appearance:none;
  -webkit-appearance:none;

  transition:
    background-color .16s ease,
    box-shadow .16s ease,
    opacity .12s ease;
}

.manage-row:first-child{
  border-top:0;
}

.manage-row-copy{
  flex:1;
  min-width:0;

  display:grid;
  gap:3px;
}

.manage-row-title{
  font-size:15px;
  font-weight:500;
  line-height:1.25;
  letter-spacing:-.15px;
}

.manage-row-detail{
  overflow:hidden;

  color:var(--ink2);

  font-size:12px;
  line-height:1.35;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.manage-chevron{
  width:20px;
  height:28px;
  flex:none;

  display:grid;
  place-items:center;

  color:var(--ink3);
}

.manage-chevron svg{
  width:8px;
  height:14px;

  display:block;

  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.manage-back{
  min-height:36px;
  margin:
    2px
    0
    8px
    -4px;

  padding:
    0
    8px
    0
    4px;

  display:inline-flex;
  align-items:center;
  gap:7px;

  border:0;
  border-radius:10px;

  background:transparent;
  color:var(--ink2);

  font-size:13px;
  font-weight:500;

  cursor:pointer;

  appearance:none;
  -webkit-appearance:none;

  transition:
    opacity .12s ease,
    background-color .16s ease;
}

.manage-back svg{
  width:8px;
  height:14px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.manage-placeholder{
  padding:20px 18px;
}

.manage-placeholder-title{
  color:var(--ink);

  font-size:15px;
  font-weight:500;
  line-height:1.35;
}

.manage-placeholder-detail{
  margin-top:5px;

  color:var(--ink2);

  font-size:12.5px;
  line-height:1.45;
}

.manage-row.touch-active{
  box-shadow:
    inset 0 0 0 999px
    var(--tint) !important;
}

.manage-back.touch-active{
  opacity:.58;
  box-shadow:none !important;
}

.manage-loading,
.employee-empty{
  padding:28px 18px;

  color:var(--ink2);

  font-size:13px;
  line-height:1.45;
  text-align:center;
}

.manage-add{
  width:100%;
  min-height:48px;
  padding:0 16px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  border:1px solid var(--gold-line);
  border-radius:14px;

  background:var(--gold-soft);
  color:var(--gold);

  font-size:14px;
  font-weight:600;

  cursor:pointer;

  appearance:none;
  -webkit-appearance:none;

  transition:
    opacity .12s ease,
    box-shadow .16s ease;
}

.manage-add-plus{
  position:relative;

  width:14px;
  height:14px;
  flex:none;
}

.manage-add-plus::before,
.manage-add-plus::after{
  content:"";

  position:absolute;
  left:50%;
  top:50%;

  width:13px;
  height:1.5px;

  border-radius:2px;

  background:currentColor;

  transform:
    translate(-50%,-50%);
}

.manage-add-plus::after{
  transform:
    translate(-50%,-50%)
    rotate(90deg);
}

.manage-add.touch-active{
  opacity:.68;
  box-shadow:none !important;
}

#pointAdd + .manage-menu,
#pointAdd + .card{
  margin-top:12px;
}

.employee-row{
  min-height:76px;
}

.employee-title-line{
  min-width:0;

  display:flex;
  align-items:center;
  gap:7px;
}

.employee-title-line .manage-row-title{
  min-width:0;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.employee-state{
  flex:none;

  padding:2px 5px;

  border:1px solid var(--line2);
  border-radius:5px;

  color:var(--ink3);

  font-size:8.5px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.employee-account-label{
  overflow:hidden;

  color:var(--ink3);

  font-size:10.5px;
  line-height:1.3;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.employee-detail .s{
  margin:
    0
    0
    3px;
}

.employee-detail .t{
  white-space:normal;
}

.employee-editor .row .t{
  width:108px;
}

.employee-editor input,
.employee-editor select{
  min-width:0;
}

#employeeSearch{
  direction:ltr;
  text-align:left;
}

#employeeSearch:focus::placeholder{
  color:transparent;
}

.employee-editor select{
  direction:ltr;
  text-align:right;
  text-align-last:right;
}

.employee-help{
  margin:
    7px
    4px
    0;

  color:var(--ink3);

  font-size:10.5px;
  line-height:1.35;
}

.employee-help + .employee-password-card{
  margin-top:10px;
}

.employee-password-row{
  cursor:default;
}

.employee-account-row,
.employee-password-row{
  min-height:63px;
}

.employee-password-row > .t{
  width:108px;
  flex:none;

  color:var(--ink2);

  font-size:14.5px;
}

.employee-password-control{
  min-width:0;
  flex:1;

  display:flex;
  align-items:center;
  gap:8px;
}

.employee-secret-input{
  position:relative;

  min-width:0;
  flex:1;
}

.employee-secret-input input{
  width:100%;
  min-width:0;
}

.employee-secret-input:not(.is-visible) input{
  color:transparent;
  -webkit-text-fill-color:transparent;

  caret-color:var(--ink);
}

.employee-secret-mask{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:flex-end;

  overflow:hidden;

  color:var(--ink);
  white-space:nowrap;

  pointer-events:none;
}

.employee-secret-input.is-visible
.employee-secret-mask{
  display:none;
}

.employee-password-toggle{
  width:36px;
  height:36px;
  flex:none;

  display:grid;
  place-items:center;

  padding:0;
  border:0;
  border-radius:10px;

  background:transparent;
  color:var(--ink2);

  cursor:pointer;
}

.employee-password-toggle svg{
  width:20px;
  height:20px;

  overflow:visible;

  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.employee-password-slash{
  display:none;
}

.employee-password-toggle[aria-pressed="true"]
.employee-password-slash{
  display:block;
}

.employee-points{
  overflow:hidden;
}

.employee-point{
  width:100%;
  min-height:48px;

  padding:
    10px
    15px;

  display:flex;
  align-items:center;
  gap:11px;

  border:0;
  border-top:1px solid var(--line);

  background:transparent;
  color:var(--ink);

  text-align:left;

  cursor:pointer;

  appearance:none;
  -webkit-appearance:none;

  transition:
    background-color .16s ease,
    opacity .12s ease;
}

.employee-point:first-child{
  border-top:0;
}

.employee-point-check{
  width:22px;
  height:22px;
  flex:none;

  display:grid;
  place-items:center;

  border:1px solid var(--line2);
  border-radius:7px;

  color:transparent;

  font-size:13px;
  font-weight:700;

  transition:
    border-color .18s ease,
    background-color .18s ease,
    color .18s ease;
}

.employee-point.on .employee-point-check{
  border-color:var(--gold-line);
  background:var(--gold-soft);
  color:var(--gold);
}

.employee-point-name{
  min-width:0;

  overflow:hidden;

  font-size:13.5px;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.employee-point.touch-active{
  background:var(--tint);
}

.adjustment-list,
.tariff-tiers{
  overflow:hidden;
}

.adjustment-row,
.tariff-tier{
  border-top:1px solid var(--line);
}

.adjustment-row:first-child,
.tariff-tier:first-child{
  border-top:0;
}

.adjustment-remove,
.tariff-tier-remove{
  min-height:40px;
  border:0;
  background:transparent;
  color:var(--rust);
  font:inherit;
  cursor:pointer;
}

.adjustment-remove{
  width:100%;
  border-top:1px solid var(--line);
  font-size:12px;
}

.adjustment-add-row{
  width:100%;
  min-height:50px;

  padding:
    12px
    15px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  border:0;
  border-top:1px solid var(--line);

  background:transparent;
  color:var(--ink);

  font:inherit;
  font-size:14px;
  font-weight:500;
  text-align:left;

  cursor:pointer;
}

.adjustment-add-row:first-child{
  border-top:0;
}

.adjustment-add-plus{
  color:var(--gold);
  font-size:20px;
  font-weight:400;
  line-height:1;
}

.tariff-tier{
  min-height:72px;
  padding:10px 12px;
  display:flex;
  align-items:flex-end;
  gap:8px;
}

.tariff-tier-fields{
  min-width:0;
  flex:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  align-items:center;
}

.tariff-tier-field{
  min-width:0;

  display:grid;
  gap:5px;
}

.tariff-tier-field > span{
  color:var(--ink2);

  font-size:10.5px;
  line-height:1.2;
}

.tariff-tier-field:nth-child(2) > span{
  text-align:right;
}

.tariff-tier-fields input{
  width:100%;
  min-width:0;
  height:36px;
  padding:0 10px;

  border:1px solid var(--line);
  border-radius:10px;
  outline:0;
  background:var(--tint-soft);
  color:var(--ink);

  text-align:right;
  font:inherit;
  font-variant-numeric:tabular-nums;
}

.tariff-tier-open{
  min-width:0;
  height:36px;
  padding:0 10px;

  display:flex;
  align-items:center;
  justify-content:flex-end;

  overflow:hidden;

  border:1px solid var(--line);
  border-radius:10px;
  background:var(--tint-soft);
  color:var(--ink2);

  font-size:12px;
  font-weight:400;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tariff-tier-remove,
.tariff-tier-remove-space{
  width:32px;
  flex:none;
}

.tariff-tier-remove{
  min-height:32px;
  height:32px;
  margin-bottom:2px;

  border-radius:10px;
  background:var(--tint-soft);

  font-size:19px;
  line-height:1;
}

.tariff-info-card{
  overflow:hidden;
}

.tariff-info-head{
  min-height:66px;
  padding:13px 16px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.tariff-info-head .s{
  margin:0 0 3px;
}

.tariff-info-head .t{
  font-size:15px;
  white-space:normal;
}

.tariff-info-date{
  max-width:180px;

  color:var(--ink2);

  font-size:11px;
  line-height:1.35;
  text-align:right;
}

.tariff-rate-list{
  border-top:1px solid var(--line);
}

.tariff-rate-row{
  min-height:44px;
  padding:10px 16px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  border-top:1px solid var(--line);

  color:var(--ink2);

  font-size:13px;
  line-height:1.3;
}

.tariff-rate-row:first-child{
  border-top:0;
}

.tariff-rate-row strong{
  flex:none;

  color:var(--ink);

  font-size:14px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}

.tariff-change-button{
  margin-top:10px;
}

.tariff-new-block{
  margin-top:2px;
}

.tariff-history-list{
  overflow:hidden;
}

.tariff-history-item{
  border-top:1px solid var(--line);
}

.tariff-history-item:first-child{
  border-top:0;
}

.tariff-history-item summary{
  min-height:58px;
  padding:11px 16px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  list-style:none;
  cursor:pointer;
}

.tariff-history-item summary::-webkit-details-marker{
  display:none;
}

.tariff-history-item summary strong{
  display:block;

  color:var(--ink);

  font-size:14px;
  font-weight:500;
}

.tariff-history-item summary small{
  display:block;
  margin-top:3px;

  color:var(--ink2);

  font-size:11px;
  line-height:1.3;
}

.tariff-history-chevron{
  flex:none;

  color:var(--ink2);

  font-size:17px;

  transition:transform .2s ease;
}

.tariff-history-item[open] .tariff-history-chevron{
  transform:rotate(180deg);
}

.tariff-history-body{
  border-top:1px solid var(--line);
  background:var(--tint-soft);
}

.tariff-history-body .tariff-rate-row{
  padding-left:20px;
  padding-right:20px;
}

@media (max-width:430px){
  .tariff-info-head{
    align-items:flex-start;
  }

  .tariff-info-date{
    max-width:135px;
  }

  nav.tabs button{
    padding:
      8px
      12px;
  }
}

@media (max-width:360px){
  nav.tabs button{
    padding:
      8px
      9px;

    font-size:12px;
  }

  .tab-label-full{
    display:none;
  }

  .tab-label-short{
    display:inline;
  }
}

/* шторка */
.veil{
  position:fixed;
  inset:0;
  z-index:40;

  background:var(--veil);
  opacity:0;
  pointer-events:none;

  transition:
    opacity .34s ease;
}

.veil.on{
  opacity:1;
  pointer-events:auto;
}

.sheet{
  display:none;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:41;

  height:93vh;
  height:93dvh;
  max-height:93vh;
  max-height:
    calc(
      100dvh -
      max(
        12px,
        env(safe-area-inset-top)
      )
    );
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;

  background:var(--sheet);
  border-top:1px solid var(--line2);
  border-radius:22px 22px 0 0;

  transform:translate3d(
    0,
    calc(100% + 24px),
    0
  );

  opacity:.96;

  will-change:
    transform,
    opacity;

  visibility:hidden;
  pointer-events:none;

  transition:
    transform .48s cubic-bezier(.4,0,.2,1),
    opacity .30s ease,
    visibility 0s linear .48s;

  padding-bottom:
    calc(28px + env(safe-area-inset-bottom));
}

.sheet.on{
  transform:translate3d(
    0,
    var(--sheet-drag, 0px),
    0
  );

  opacity:1;
  visibility:visible;
  pointer-events:auto;

  transition:
    transform .48s cubic-bezier(.4,0,.2,1),
    opacity .30s ease,
    visibility 0s;
}

body.sheet-open{
  overflow:hidden;
}

.sheet .grab,
.sheet .shead{
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  cursor:grab;
}

.sheet .grab:active,
.sheet .shead:active{
  cursor:grabbing;
}
.grab{width:34px;height:4px;border-radius:2px;background:var(--line2);margin:9px auto 0}
.shead{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;padding:12px 18px;background:var(--sheet);border-bottom:1px solid var(--line)}
.shead .ttl{grid-column:2;text-align:center;font-size:11px;font-weight:700;letter-spacing:.19em;text-transform:uppercase}
.shead>:first-child{grid-column:1;justify-self:start}
.shead>:last-child{grid-column:3;justify-self:end}
.lnk{background:none;border:none;padding:0;font-size:14.5px;color:var(--ink2);cursor:pointer}
.lnk.b{color:var(--gold);font-weight:600}

.lnk:disabled{
  opacity:.45;
  cursor:default;
}

.sbody{padding:4px 16px 0;max-width:620px;margin:0 auto}

@media (min-width:900px){
  .sheet{
    left:24px;
    right:24px;

    width:auto;
    max-width:720px;
    margin:0 auto;

    border-left:1px solid var(--line2);
    border-right:1px solid var(--line2);
  }
}

/* поля */
label.row{display:flex;cursor:text}
label.row .t{flex:none;width:112px;color:var(--ink2);font-size:14.5px}
input,
select{
  width:100%;
  padding:0;
  border:0;
  outline:0;
  box-shadow:none;
  background:transparent;
  color:var(--ink);
  font-size:16px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

input:focus,
input:focus-visible{
  border:0;
  outline:0;
  box-shadow:none;
}

input[type="number"]{
  appearance:textfield;
  -webkit-appearance:textfield;
  -moz-appearance:textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
  margin:0;
  -webkit-appearance:none;
  appearance:none;
}

input::placeholder{
  color:var(--ink3);
}

.shift-note-input{
  text-align:left;
}

.shift-note-input:focus::placeholder{
  color:transparent;
}

select{
  appearance:none;
  text-align-last:right;
  direction:rtl;
}

select option{direction:ltr;background:var(--surf);color:var(--ink)}
/* свой выбор пункта */
.point-row{
  width:100%;
  border:0;
  border-top:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}

.point-row .t{
  flex:none;
  width:56px;
  color:var(--ink2);
  font-size:14.5px;
}

.point-value{
  flex:1;
  min-width:0;

  overflow:hidden;

  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:clamp(11px,3vw,13px);
  letter-spacing:-.25px;
}

.shift-employee-row .t{
  width:88px;
}

.stats-filter-row .t{
  width:92px;
}

.stats-filter-row .point-value{
  font-size:14.5px;
  letter-spacing:0;
}

.stats-filter-row:disabled{
  opacity:1;
  cursor:default;
}

.stats-filter-row:disabled .point-value{
  color:var(--ink3);
}

.stats-filter-row:first-child{
  border-top:0;
}

#f-employee{
  font-size:clamp(11px,3vw,13px);
  letter-spacing:-.25px;
}

.calc-error{
  padding:16px;
  color:var(--rust);
  font-size:13px;
  line-height:1.45;
}

.adjustment-readonly-row{
  align-items:flex-start;
  gap:14px;
}

.adjustment-readonly-row .l{
  padding-right:0;
}

.adjustment-readonly-row .t{
  overflow:visible;
  white-space:normal;
  text-overflow:clip;
  overflow-wrap:anywhere;
  line-height:1.4;
}

.adjustment-readonly-row .v{
  flex:none;
  padding-top:1px;
}

.shift-detail-readonly-row .s{
  margin:0 0 3px;
}

.point-veil{
  position:fixed;
  inset:0;
  z-index:48;

  background:var(--veil);
  opacity:0;
  pointer-events:none;
  touch-action:none;

  transition:
    opacity .32s ease;
}

.point-veil.on{
  opacity:1;
  pointer-events:auto;
}

.point-picker{
  display:none;
  position:fixed;
  left:8px;
  right:8px;
  bottom:calc(8px + env(safe-area-inset-bottom));
  z-index:49;

  width:auto;
  max-width:604px;
  margin:0 auto;

  max-height:78vh;
  overflow:hidden;

  background:var(--sheet);
  border:1px solid var(--line2);
  border-radius:22px;
  box-shadow:var(--shadow);

  transform:translate3d(
    0,
    calc(100% + 24px),
    0
  );

  opacity:.96;
  pointer-events:none;

  will-change:
    transform,
    opacity;

  transition:
    transform .42s cubic-bezier(.4,0,.2,1),
    opacity .27s ease;
}

.point-picker.on{
  transform:translate3d(
    0,
    var(--point-drag, 0px),
    0
  );

  opacity:1;
  pointer-events:auto;
}

@media (min-width:760px) and (hover:hover) and (pointer:fine){
  .point-veil.app-picker-anchored-veil{
    background:transparent;
    transition:none;
  }

  .point-picker.app-picker-anchored{
    left:var(--app-picker-left);
    right:auto;
    top:var(--app-picker-top);
    bottom:auto;

    width:var(--app-picker-width);
    max-height:var(--app-picker-max-height);
    margin:0;

    border-radius:14px;

    transform:translate3d(0,4px,0) scale(.99);
    transform-origin:center;

    opacity:0;
    will-change:transform,opacity;
    transition:
      transform .16s ease-out,
      opacity .13s ease-out;
  }

  .point-picker.app-picker-anchored.app-picker-above{
    transform:translate3d(0,-4px,0) scale(.99);
    transform-origin:bottom center;
  }

  .point-picker.app-picker-anchored.on,
  .point-picker.app-picker-anchored.app-picker-above.on{
    transform:translate3d(0,0,0) scale(1);
    opacity:1;
  }

  .point-picker.app-picker-anchored .point-list{
    max-height:var(--app-picker-max-height);
    border-top:0;
  }

  .point-picker.app-picker-anchored .point-picker-handle,
  .point-picker.app-picker-anchored .picker-toolbar{
    display:none;
  }

  .point-picker.app-picker-anchored .point-option:hover:not(.on){
    background:var(--tint);
  }
}

body.point-picker-open{
  overflow:hidden;
}

body.point-picker-open .sheet{
  overflow:hidden;
}

.point-picker-handle{
  height:18px;
  display:grid;
  place-items:center;

  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  cursor:grab;
}

.point-picker-handle:active{
  cursor:grabbing;
}

.point-picker-grab{
  width:34px;
  height:4px;
  border-radius:2px;
  background:var(--line2);
}

.point-picker .picker-toolbar{
  margin-left:12px;
  margin-right:12px;
}

.point-list{
  max-height:calc(78vh - 62px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  border-top:1px solid var(--line);
}

.point-option{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;

  padding:12px 13px;

  border:0;
  border-top:1px solid var(--line);
  background:transparent;
  color:var(--ink);

  font-size:clamp(11.5px,3.15vw,13.5px);
  line-height:1.15;
  letter-spacing:-.25px;
  text-align:left;

  cursor:pointer;
}

.point-option:first-child{
  border-top:0;
}

.point-option.on{
  color:var(--gold);
  background:var(--gold-soft);
}

.point-check{
  width:17px;
  flex:none;
  text-align:center;
  font-size:14px;
  font-weight:700;
}

.point-name{
  white-space:nowrap;
}

/* календарь даты */
.date-veil{
  position:fixed;
  inset:0;
  z-index:52;

  background:var(--veil);
  opacity:0;
  pointer-events:none;
  touch-action:none;

  transition:
    opacity .32s ease;
}

.date-veil.on{
  opacity:1;
  pointer-events:auto;
}

.date-picker{
  overflow:hidden;
  display:none;
  position:fixed;
  left:8px;
  right:8px;
  bottom:calc(8px + env(safe-area-inset-bottom));
  z-index:53;

  max-width:604px;
  margin:0 auto;
  padding:0 12px 12px;

  background:var(--sheet);
  border:1px solid var(--line2);
  border-radius:22px;
  box-shadow:var(--shadow);

  transform:translate3d(
    0,
    calc(100% + 24px + env(safe-area-inset-bottom)),
    0
  );

  opacity:.96;
  pointer-events:none;

  will-change:
    transform,
    opacity;

  transition:
    transform .42s cubic-bezier(.4,0,.2,1),
    opacity .27s ease;
}

.date-picker.on{
  transform:translate3d(
    0,
    var(--date-drag, 0px),
    0
  );

  opacity:1;
  pointer-events:auto;
}

body.date-picker-open{
  overflow:hidden;
}

body.date-picker-open .sheet{
  overflow:hidden;
}

.date-picker-handle{
  height:18px;
  margin:0 -12px;

  display:grid;
  place-items:center;

  touch-action:none;
  user-select:none;
  -webkit-user-select:none;

  cursor:grab;
}

.date-picker-handle:active{
  cursor:grabbing;
}

.date-picker-grab{
  width:34px;
  height:4px;
  border-radius:2px;
  background:var(--line2);
}

.date-calendar-head{
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}

.date-calendar-title{
  min-width:0;
  padding:8px 24px;
  position:relative;

  border:0;
  border-radius:11px;
  background:transparent;

  text-align:center;
  text-indent:.13em;

  font-size:13px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink);

  cursor:pointer;
}

.date-calendar-title::after{
  content:"";
  position:absolute;
  right:9px;
  top:50%;

  width:5px;
  height:5px;

  border-right:1.5px solid var(--ink3);
  border-bottom:1.5px solid var(--ink3);

  transform:translateY(-65%) rotate(45deg);
}

.date-jump{
  display:block;
  position:absolute;
  left:12px;
  right:12px;
  top:68px;
  z-index:4;

  padding:12px;

  background:var(--sheet);
  border:1px solid var(--line2);
  border-radius:17px;
  box-shadow:var(--shadow);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:
    translate3d(0,-7px,0)
    scale(.985);

  transform-origin:
    50% 0;

  will-change:
    transform,
    opacity;

  transition:
    opacity .26s ease,
    transform .34s cubic-bezier(.4,0,.2,1),
    visibility 0s linear .34s;
}

.date-jump.on{
  opacity:1;
  visibility:visible;
  pointer-events:auto;

  transform:
    translate3d(0,0,0)
    scale(1);

  transition:
    opacity .28s ease,
    transform .34s cubic-bezier(.4,0,.2,1),
    visibility 0s;
}

.date-jump-dismiss{
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:68px;
  bottom:0;
  z-index:3;
  background:transparent;
  touch-action:none;
}

.date-picker.jump-open .date-jump-dismiss{
  display:block;
}

.date-jump-year{
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.date-jump-year-value{
  text-align:center;
  font-size:18px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

.date-jump-months{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}

.date-jump-month{
  min-width:0;
  padding:10px 3px;

  border:1px solid var(--line);
  border-radius:11px;

  background:transparent;
  color:var(--ink2);

  font-size:11px;
  cursor:pointer;
}

.date-jump-month.on{
  border-color:var(--gold-line);
  background:var(--gold-soft);
  color:var(--gold);
  font-weight:600;
}

.date-grid{
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

.date-calendar-nav{
  width:42px;
  height:38px;
  padding:0;

  display:grid;
  place-items:center;

  border:1px solid var(--line);
  border-radius:12px;

  background:var(--tint);
  color:var(--ink2);
  cursor:pointer;
}

.date-calendar-nav svg{
  width:14px;
  height:14px;
  display:block;

  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.date-weekdays,
.date-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:4px;
}

.date-weekdays{
  margin-bottom:5px;
}

.date-weekdays span{
  padding:4px 0;
  text-align:center;

  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink3);
}

.date-day{
  min-width:0;
  aspect-ratio:1;

  border:0;
  border-radius:50%;

  background:transparent;
  color:var(--ink);

  font-size:13px;
  font-weight:500;
  font-variant-numeric:tabular-nums;

  cursor:pointer;
}

button.touch-active{
  box-shadow:
    inset 0 0 0 999px var(--tint2) !important;
}

nav.tabs button.touch-active,
.seg button.touch-active{
  box-shadow:none !important;
  transform:scale(.97);
  opacity:.72;
}

.sh.touch-active{
  box-shadow:
    inset 0 0 0 999px var(--tint) !important;
}

.period.touch-active,
.lnk.touch-active{
  opacity:.55;
  box-shadow:none !important;
}

.date-day.outside{
  color:var(--ink3);
  opacity:.45;
}

.date-day.today:not(.on){
  color:var(--gold);
  box-shadow:inset 0 0 0 1px var(--gold-line);
}

.date-day.on{
  background:var(--gold);
  color:var(--sheet);
  box-shadow:none;
}

/* выбор месяца */
.month-veil{
  position:fixed;
  inset:0;
  z-index:46;
  background:var(--veil);
  opacity:0;
  pointer-events:none;
  transition:opacity .32s ease;
}

.month-veil.on{
  opacity:1;
  pointer-events:auto;
}

.month-picker{
  display:none;
  position:fixed;
  left:8px;
  right:8px;
  bottom:calc(8px + env(safe-area-inset-bottom));
  z-index:47;

  width:auto;
  max-width:604px;
  margin:0 auto;

  background:var(--sheet);
  border:1px solid var(--line2);
  border-radius:22px;
  box-shadow:var(--shadow);

  transform:translate3d(
    0,
    calc(100% + 24px + env(safe-area-inset-bottom)),
    0
  );

  will-change:transform;

  transition:
    transform .42s cubic-bezier(.4,0,.2,1);

  padding:0 12px 14px;
}

.month-picker.on{
  transform:translate3d(
    0,
    var(--month-drag, 0px),
    0
  );
}

body.month-picker-open{
  overflow:hidden;
}

.month-picker-handle{
  height:18px;
  margin:0 -12px 0;

  display:grid;
  place-items:center;

  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  cursor:grab;
}

.month-picker-handle:active{
  cursor:grabbing;
}

.month-picker-grab{
  width:34px;
  height:4px;
  border-radius:2px;
  background:var(--line2);
}

.picker-toolbar{
  height:38px;
  min-height:38px;
  margin-bottom:6px;

  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.picker-toolbar-title{
  position:absolute;
  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  width:max-content;
  max-width:calc(100% - 160px);

  text-align:center;
  text-indent:.19em;

  font-size:10px;
  font-weight:700;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink3);
  white-space:nowrap;

  pointer-events:none;
}

.picker-toolbar-btn{
  position:relative;
  z-index:1;

  width:72px;
  flex:none;
  padding:9px 0;

  border:0;
  border-radius:10px;
  background:transparent;

  font-size:14.5px;
  color:var(--ink2);
  cursor:pointer;
}

.picker-toolbar-btn.cancel{
  text-align:left;
}

.picker-toolbar-btn.done{
  text-align:right;
  color:var(--gold);
  font-weight:600;
}

.picker-toolbar-btn.touch-active{
  opacity:.55;
  background:transparent !important;
  box-shadow:none !important;
}

.month-picker-head{
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.month-year{
  text-align:center;

  font-size:18px;
  font-weight:600;
  letter-spacing:.08em;
  text-indent:.08em;
  font-variant-numeric:tabular-nums;
}

.month-year-btn,
.date-jump-year-btn{
  width:42px;
  height:38px;
  padding:0;

  position:relative;
  display:grid;
  place-items:center;

  border:1px solid var(--line);
  border-radius:12px;

  background:var(--tint);
  color:var(--ink2);

  font-size:0;
  line-height:0;
  cursor:pointer;
}

.month-year-btn::before,
.date-jump-year-btn::before{
  content:"";

  position:absolute;
  left:50%;
  top:50%;

  width:11px;
  height:2px;

  border-radius:2px;
  background:currentColor;

  transform:translate(-50%,-50%);
}

.month-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}

.month-option{
  min-width:0;
  padding:11px 3px;
  border:1px solid var(--line);
  border-radius:12px;
  background:transparent;
  color:var(--ink2);
  font-size:12px;
  cursor:pointer;
}

.month-option.on{
  color:var(--gold);
  border-color:var(--gold-line);
  background:var(--gold-soft);
  font-weight:600;
}

.month-today,
.date-today{
  width:100%;
  height:42px;
  margin-top:10px;
  padding:0;

  display:grid;
  place-items:center;

  border:1px solid var(--line);
  border-radius:12px;

  background:var(--tint);
  color:var(--ink2);

  text-align:center;
  font-size:13px;
  line-height:1;

  cursor:pointer;
}

.seg{
  display:flex;
  gap:3px;
  padding:3px;
  background:var(--tint);
  border-radius:13px;
}

.seg button{
  flex:1;
  padding:9px 4px;

  border:0;
  border-radius:11px;
  background:transparent;
  color:var(--ink2);

  font-size:13px;
  letter-spacing:-.1px;
  cursor:pointer;

  appearance:none;
  -webkit-appearance:none;

  transition:
    background-color .18s ease,
    color .18s ease,
    transform .12s cubic-bezier(.32,.72,0,1),
    opacity .12s ease,
    box-shadow .18s ease;
}

.seg button.on{
  background:var(--surf);
  color:var(--ink);
  font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.14);
}

.seg button.touch-active,
.seg button.on.touch-active{
  box-shadow:none !important;
  transform:scale(.97);
  opacity:.72;
}

.segbox{
  padding:5px;
}

.payment-mode-box .seg button{
  min-width:0;
}

/* расчёт */
.calc{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px}
.calc .ln{display:flex;justify-content:space-between;font-size:13px;color:var(--ink2);padding:3px 0}
.calc .ln b{font-weight:500;color:var(--ink)}
.calc .tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:11px;padding-top:12px;border-top:1px solid var(--line)}
.calc .tot span:first-child{font-size:10px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--ink3)}
.calc .tot span:last-child{font-size:24px;font-weight:500;letter-spacing:-.7px;color:var(--gold)}

.btn{width:100%;padding:14px;border-radius:14px;border:1px solid var(--line2);cursor:pointer;background:var(--tint);color:var(--ink);font-size:15px;font-weight:500;margin-top:10px}
.btn.gold{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold)}
.btn.warn{color:var(--rust);border-color:var(--rust-line)}
textarea{width:100%;margin-top:10px;min-height:118px;padding:12px;border-radius:14px;background:var(--surf);border:1px solid var(--line);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;outline:none;resize:vertical}
textarea::placeholder{color:var(--ink3)}
.note{font-size:12px;color:var(--ink3);padding:9px 4px 0;line-height:1.5}
.developer-credit{
  margin:34px 0 8px;

  text-align:center;

  font-size:11px;
  line-height:1.6;
  color:var(--ink3);
}

/* собственное окно подтверждения */
.app-confirm{
  position:fixed;
  inset:0;
  z-index:100;

  display:grid;
  place-items:center;
  padding:20px;

  background:rgba(0,0,0,.58);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  transition:
    opacity .2s ease,
    visibility 0s linear .2s;
}

.app-confirm.on{
  opacity:1;
  visibility:visible;
  pointer-events:auto;

  transition:
    opacity .2s ease,
    visibility 0s;
}

.app-confirm-box{
  width:min(100%,360px);

  overflow:hidden;

  background:var(--sheet);
  border:1px solid var(--line2);
  border-radius:22px;
  box-shadow:var(--shadow);

  transform:
    translateY(10px)
    scale(.97);

  transition:
    transform .24s cubic-bezier(.32,.72,0,1);
}

.app-confirm.on .app-confirm-box{
  transform:
    translateY(0)
    scale(1);
}

.app-confirm-text{
  min-height:88px;
  padding:24px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;

  text-align:center;
}

.app-confirm-title{
  width:100%;
  max-width:300px;

  color:var(--ink);

  font-size:17px;
  font-weight:500;
  line-height:1.35;
  letter-spacing:-.15px;
}

.app-confirm-detail{
  width:100%;
  max-width:300px;

  color:var(--ink2);

  font-size:14px;
  font-weight:400;
  line-height:1.4;
}

.app-confirm-detail[hidden]{
  display:none;
}

.app-confirm-actions{
  display:grid;
  grid-template-columns:1fr 1fr;

  border-top:1px solid var(--line);
}

.app-confirm-btn{
  min-height:52px;
  padding:12px;

  border:0;
  background:transparent;

  color:var(--ink2);
  font-size:15px;
  font-weight:600;

  cursor:pointer;
}

.app-confirm-btn + .app-confirm-btn{
  border-left:1px solid var(--line);
}

.app-confirm-btn.ok{
  color:var(--gold);
}

.app-confirm-btn.ok.danger{
  color:var(--rust);
}

body.confirm-open{
  overflow:hidden;
}

button:disabled{
  opacity:.45;
  pointer-events:none;
}

.toast{
  position:fixed;
  left:50%;
  bottom:calc(96px + env(safe-area-inset-bottom));
  z-index:110;

  width:max-content;
  max-width:calc(100vw - 32px);
  padding:10px 17px;

  transform:translateX(-50%) translateY(10px);
  opacity:0;
  pointer-events:none;
  transition:.22s;

  border-radius:22px;
  background:var(--toast-bg);
  color:var(--toast-ink);
  box-shadow:var(--shadow);

  text-align:center;
  font-size:13px;
  font-weight:500;
  line-height:1.35;
}
.toast.on{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.data-status{
  min-height:28px;
  padding:2px 4px;

  display:flex;
  align-items:center;
  gap:12px;
}

.data-status-copy{
  min-width:0;
}

.data-status-title{
  color:var(--ink);

  font-size:15px;
  line-height:1.35;
  letter-spacing:-.15px;
}

.data-status-count{
  color:var(--gold);
  font-weight:500;
  white-space:nowrap;
}

.data-status-detail{
  margin-top:3px;

  color:var(--ink2);

  font-size:12px;
  line-height:1.4;
}

.dot{width:7px;height:7px;border-radius:4px;background:var(--gold);flex:none;box-shadow:0 0 0 3px var(--gold-soft)}
.dot.off{background:var(--rust);box-shadow:0 0 0 3px var(--rust-line)}
@media (hover:hover) and (pointer:fine){

  /*
    Обычные кнопки приложения.
  */
  button:active{
    box-shadow:
      inset 0 0 0 999px var(--tint2) !important;
  }

  /*
    Таббар и сегментированные
    переключатели слегка прожимаются.
  */
  nav.tabs button:active,
  .seg button:active{
    box-shadow:none !important;
    transform:scale(.97);
    opacity:.72;
  }

  .seg button.on:active{
    box-shadow:none !important;
  }

  /*
    Строка существующей смены.
  */
  .sh:active{
    box-shadow:
      inset 0 0 0 999px var(--tint) !important;
  }

  /*
    Верхний месяц и текстовые
    Отмена / Готово.
  */
  .period:active,
  .lnk:active{
    opacity:.55;
    box-shadow:none !important;
  }

  /*
    Отмена / Готово внутри
    календарей и выбора месяца.
  */
  .picker-toolbar-btn:active{
    opacity:.55;
    background:transparent !important;
    box-shadow:none !important;
  }

}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* ===== hardening / accessibility ===== */
.period{
  border:0;
  background:transparent;
  font-family:inherit;
  min-height:44px;
  padding:0 10px;
}

.is-hidden{
  visibility:hidden !important;
  pointer-events:none !important;
}

.sh{
  width:100%;
  border-left:0;
  border-right:0;
  border-bottom:0;
  background:transparent;
  color:inherit;
  text-align:left;
  font-family:inherit;
}

.sh .day,
.sh .mid,
.sh .p,
.sh .meta,
.sh .amt{
  display:block;
}

.sh .meta{
  display:flex;
}

button,
.period,
.sh,
.grab,
.shead,
.point-picker-head,
.month-picker-handle,
.date-picker-handle{
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

input,
select,
textarea{
  font-size:16px;
}

.wrap{
  white-space:normal !important;
}

.sheet-spacer{
  height:8px;
}

.future-note{
  margin-top:10px;
}

.advance-progress{
  display:block;
  width:100%;
  height:4px;
  margin:0;
  border:0;
  border-radius:2px;
  overflow:hidden;
  appearance:none;
  -webkit-appearance:none;
  background:var(--tint2);
}

.advance-progress::-webkit-progress-bar{
  background:var(--tint2);
  border-radius:2px;
}

.advance-progress::-webkit-progress-value{
  background:var(--gold);
  border-radius:2px;
}

.advance-progress::-moz-progress-bar{
  background:var(--gold);
  border-radius:2px;
}

.nav button,
.month-year-btn,
.date-jump-year-btn,
.date-calendar-nav,
.picker-toolbar-btn,
.month-today,
.date-today,
.lnk{
  min-height:44px;
}

.nav button{
  width:44px;
  height:44px;
}

.point-option{
  min-height:44px;
}

button:focus-visible,
.period:focus-visible,
.sh:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

#sheet:focus,
#sheet:focus-visible{
  outline:none;
  outline-offset:0;
}

.point-option:focus:not(:focus-visible),
nav.tabs button:focus:not(:focus-visible),
.seg button:focus:not(:focus-visible){
  outline:none;
  outline-offset:0;
}

@media (hover:hover) and (pointer:fine){
  *:focus:not(:focus-visible){
    outline:none;
  }

  .point-option:focus-visible,
  nav.tabs button:focus-visible,
  .seg button:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:2px;
  }
}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}

/* Final hardening: native buttons used as custom controls must not inherit browser chrome. */
.period{
  border:0;
  padding:0;
  background:transparent;
  appearance:none;
  -webkit-appearance:none;
}

.sh{
  width:100%;
  border-left:0;
  border-right:0;
  border-bottom:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  appearance:none;
  -webkit-appearance:none;
}

/* Comfortable keyboard/touch targets without changing the visual glyph size. */
.nav button,
.date-calendar-nav,
.month-year-btn,
.date-jump-year-btn{
  min-width:44px;
  min-height:44px;
}

.date-calendar-head,
.date-jump-year,
.month-picker-head{
  grid-template-columns:44px 1fr 44px;
}

/* iOS Safari does not auto-zoom editable controls at 16px+. */
textarea{
  font-size:16px;
}

/* ===== плавный переход месяца ===== */

:root{
  --motion-ease:
    cubic-bezier(.22,.72,.22,1);

  --motion-month:320ms;
  --motion-tab:250ms;
}

#app{
  position:relative;
  view-transition-name:month-content;
}

#period{
  view-transition-name:month-period;
}

nav.tabs{
  view-transition-name:none;
}

html[data-bottom-motion] nav.tabs{
  view-transition-name:bottom-tabs;
}

::view-transition-group(bottom-tabs){
  z-index:1000;
  animation-duration:.36s;
  animation-timing-function:var(--motion-ease);
}

::view-transition-old(bottom-tabs){
  animation:none;
  opacity:0;
}

::view-transition-new(bottom-tabs){
  animation:none;
  opacity:1;
  mix-blend-mode:normal;
}

/*
  Убираем стандартный crossfade всей
  страницы. Двигаются только месяц
  и название месяца.
*/

::view-transition-old(root){
  animation:none;
  opacity:0;
}

::view-transition-new(root){
  animation:none;
  opacity:1;
}

::view-transition-old(month-content),
::view-transition-new(month-content),
::view-transition-old(month-period),
::view-transition-new(month-period){
  mix-blend-mode:normal;
}

/* Следующий месяц */

html[data-month-motion="next"]::view-transition-old(month-content){
  animation:
    month-content-out-next
    var(--motion-month)
    var(--motion-ease)
    both;
}

html[data-month-motion="next"]::view-transition-new(month-content){
  animation:
    month-content-in-next
    var(--motion-month)
    var(--motion-ease)
    both;
}

html[data-month-motion="next"]::view-transition-old(month-period){
  animation:
    month-period-out-next
    var(--motion-month)
    var(--motion-ease)
    both;
}

html[data-month-motion="next"]::view-transition-new(month-period){
  animation:
    month-period-in-next
    var(--motion-month)
    var(--motion-ease)
    both;
}

/* Предыдущий месяц */

html[data-month-motion="prev"]::view-transition-old(month-content){
  animation:
    month-content-out-prev
    var(--motion-month)
    var(--motion-ease)
    both;
}

html[data-month-motion="prev"]::view-transition-new(month-content){
  animation:
    month-content-in-prev
    var(--motion-month)
    var(--motion-ease)
    both;
}

html[data-month-motion="prev"]::view-transition-old(month-period){
  animation:
    month-period-out-prev
    var(--motion-month)
    var(--motion-ease)
    both;
}

html[data-month-motion="prev"]::view-transition-new(month-period){
  animation:
    month-period-in-prev
    var(--motion-month)
    var(--motion-ease)
    both;
}

@keyframes month-content-out-next{
  from{
    opacity:1;
    transform:translate3d(0,0,0);
  }

  to{
    opacity:0;
    transform:translate3d(-28px,0,0);
  }
}

@keyframes month-content-in-next{
  from{
    opacity:0;
    transform:translate3d(28px,0,0);
  }

  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes month-content-out-prev{
  from{
    opacity:1;
    transform:translate3d(0,0,0);
  }

  to{
    opacity:0;
    transform:translate3d(28px,0,0);
  }
}

@keyframes month-content-in-prev{
  from{
    opacity:0;
    transform:translate3d(-28px,0,0);
  }

  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes month-period-out-next{
  from{
    opacity:1;
    transform:translate3d(0,0,0);
  }

  to{
    opacity:0;
    transform:translate3d(-10px,0,0);
  }
}

@keyframes month-period-in-next{
  from{
    opacity:0;
    transform:translate3d(10px,0,0);
  }

  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@keyframes month-period-out-prev{
  from{
    opacity:1;
    transform:translate3d(0,0,0);
  }

  to{
    opacity:0;
    transform:translate3d(10px,0,0);
  }
}

@keyframes month-period-in-prev{
  from{
    opacity:0;
    transform:translate3d(-10px,0,0);
  }

  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

#monthGrid,
#dateJumpMonths{
  touch-action:pan-y;
}

/* ===== авторизация ===== */

html:has(body.login-page),
body.login-page{
  width:100%;
  height:100%;
  margin:0;

  overflow:hidden;
  overscroll-behavior:none;

  background:var(--bg);
}

.auth-gate{
  position:fixed;
  inset:0;
  z-index:200;

  display:grid;
  place-items:center;

  padding:
    calc(24px + env(safe-area-inset-top))
    20px
    calc(24px + env(safe-area-inset-bottom));

  overflow:hidden;

  background:var(--bg);
}

.auth-card{
  position:fixed;

  left:50%;
  top:35%;

  width:min(
    calc(100% - 40px),
    390px
  );

  padding:28px 24px 24px;

  border:1px solid var(--line);
  border-radius:24px;

  background:var(--surf);
  box-shadow:var(--shadow);

  transform:
    translate3d(
      -50%,
      -50%,
      0
    );

  transition:none;

  animation:
    auth-card-in
    .34s
    cubic-bezier(.22,.72,.22,1)
    both;

  will-change:auto;
}

@keyframes auth-card-in{
  from{
    opacity:0;

    transform:
      translate3d(
        -50%,
        calc(-50% + 10px),
        0
      )
      scale(.985);
  }

  to{
    opacity:1;

    transform:
      translate3d(
        -50%,
        -50%,
        0
      )
      scale(1);
  }
}

.auth-brand{
  color:var(--gold);

  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.auth-title{
  margin:
    10px
    0
    0;

  color:var(--ink);

  font-size:28px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.5px;
}

.auth-subtitle{
  margin-top:7px;

  color:var(--ink2);

  font-size:14px;
  line-height:1.4;
}

.auth-form{
  margin-top:24px;

  display:grid;
  gap:14px;
}

.auth-field{
  display:grid;
  gap:7px;

  color:var(--ink2);

  font-size:12px;
  font-weight:500;

  pointer-events:none;
}

.auth-field input{
  pointer-events:auto;

  --auth-input-bg:
    color-mix(
      in srgb,
      var(--surf) 95.5%,
      var(--ink) 4.5%
    );

  width:100%;
  height:48px;

  padding:0 14px;

  border:1px solid var(--line2);
  border-radius:14px;
  outline:0;

  background:var(--auth-input-bg);
  color:var(--ink);

  direction:ltr;
  text-align:left;

  font-size:16px;
  line-height:1;

  appearance:none;
  -webkit-appearance:none;

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

body.login-page.auth-focus-enabled
.auth-field input:focus{
  border-color:var(--gold-line);

  box-shadow:
    0 0 0 3px
    var(--gold-soft);
}

body.login-page:not(.auth-focus-enabled)
.auth-field input{
  caret-color:transparent;
}

@keyframes auth-autofill-detected{
  from{
    opacity:1;
  }

  to{
    opacity:1;
  }
}

.auth-field input:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);

  -webkit-box-shadow:
    0 0 0 1000px
    var(--auth-input-bg)
    inset;

  box-shadow:
    0 0 0 1000px
    var(--auth-input-bg)
    inset;

  animation-name:
    auth-autofill-detected;

  animation-duration:.001s;

  transition:
    background-color
    9999s
    ease-out
    0s;
}

body.login-page.auth-focus-enabled
.auth-field input:-webkit-autofill:focus{
  -webkit-box-shadow:
    0 0 0 1000px
    var(--auth-input-bg)
    inset,
    0 0 0 3px
    var(--gold-soft);

  box-shadow:
    0 0 0 1000px
    var(--auth-input-bg)
    inset,
    0 0 0 3px
    var(--gold-soft);
}

.auth-error{
  color:var(--rust);

  font-size:12px;
  line-height:1.4;
}

.auth-submit{
  width:100%;
  height:48px;

  margin-top:2px;

  border:1px solid var(--gold-line);
  border-radius:14px;
  outline:0;

  background:var(--gold-soft);
  color:var(--gold);

  font-size:15px;
  font-weight:600;

  cursor:pointer;

  appearance:none;
  -webkit-appearance:none;

  transition:
    background-color .12s ease,
    border-color .12s ease,
    color .12s ease,
    box-shadow .18s ease;
}

.auth-submit:active:not([aria-disabled="true"]):not(.press-cancelled){
  box-shadow:
    inset 0 0 0 999px
    var(--gold-soft);
}

.auth-submit:focus-visible{
  box-shadow:
    0 0 0 3px
    var(--gold-soft);
}

.auth-submit[aria-disabled="true"]{
  color:var(--gold-d);
  pointer-events:none;
  box-shadow:none;
}

body.auth-signing-out{
  pointer-events:none;
}

body.auth-signing-out::after{
  content:"";

  position:fixed;
  inset:0;
  z-index:10000;

  background:var(--bg);

  opacity:0;

  animation:
    auth-page-out
    .24s
    ease
    forwards;
}

@media (display-mode:standalone){
  body.auth-signing-out::after{
    background:
      radial-gradient(
        130% 55% at 50% -10%,
        var(--glow) 0%,
        var(--glow0) 60%
      ),
      var(--bg);
  }
}

@keyframes auth-page-out{
  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}

@media (prefers-reduced-motion:reduce){
  body.login-page .auth-card{
    animation:none;
  }

  body.auth-signing-out::after{
    animation:none;
    opacity:1;
  }
}