* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
html {
  --app-top: 0px;
  --app-left: 0px;
  --app-w: 100%;
  --app-h: 100%;
}
body {
  --accent: #6b1d3a;
  --ink: #14202e;
  --muted: #667385;
  --line: #e6ebf1;
  --card: #fff;
  --app: #efeae3;
  --gold: #e4c27a;
  font-family: Outfit, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: #101820;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.q-webhead {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 0 22px;
  background: linear-gradient(90deg, #0b1b3a, #12316e 55%, #1d4ed8);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: Outfit, "Segoe UI", sans-serif;
}
.q-webrand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  min-width: 0;
}
.q-webrand img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(226, 76, 18, .18);
}
.q-webname {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.q-webname span {
  display: block;
  margin-top: 4px;
  font-family: Outfit, "Segoe UI", sans-serif;
  font-size: 0.62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  font-weight: 600;
}
.q-headlink {
  flex: none;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  color: #0b1b3a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
html.in-phone .q-webhead,
html.in-phone .q-deskbar { display: none; }
.q-deskbar { display: none; }
body[data-tone="health"] { --accent: #0f6e6b; }
body[data-tone="travel"] { --accent: #1d4e89; }
body[data-tone="homes"] { --accent: #7a3b2e; }
body[data-tone="academy"] { --accent: #1e5a38; }
body[data-tone="paint"] { --accent: #0c2f6b; }
body[data-tone="mahal"] { --accent: #6b1d3a; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.top {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: #101820;
  color: #f7f3ec;
  box-shadow: inset 0 -1px 0 rgba(228, 194, 122, .38);
}
.brand { min-width: 0; }
.brand strong { display: block; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand em { display: block; font-style: normal; color: #b7c3d1; font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-open {
  display: none;
}
.q-pop {
  position: fixed;
  inset: 0;
  width: auto;
  max-width: none;
  height: auto;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;
  flex: none;
}
html.auth-on,
html.auth-on body { overflow: hidden !important; }
.q-pop[hidden] { display: none !important; }
.q-pop-bg {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(6, 10, 16, .72);
  backdrop-filter: blur(8px);
  animation: qFade .28s ease both;
}
@keyframes qFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qPop {
  from { opacity: 0; transform: translateY(22px) scale(.96); }
  to { opacity: 1; transform: none; }
}
.q-pop-title {
  margin: 0 36px 2px 0;
  color: #f7f3ec;
  font: 800 20px/1.15 Outfit, "Segoe UI", sans-serif;
}
.q-pop-sub { margin: 0; color: #b7c3d1; font-size: 12px; line-height: 1.35; }
.q-login {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  width: min(360px, 100%);
  margin: 0;
  padding: 18px 16px 16px;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(228, 194, 122, .18), transparent 55%),
    linear-gradient(180deg, #1c2836 0%, #141c27 100%);
  border: 1px solid rgba(228, 194, 122, .5);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  font-family: Outfit, "Segoe UI", sans-serif;
  animation: qPop .42s cubic-bezier(.2, .8, .2, 1) both;
}
.q-login::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f3dfb4, transparent);
  animation: qSweep 2.8s ease-in-out infinite;
  pointer-events: none;
}
.q-login[hidden] { display: none !important; }
@keyframes qSweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
.q-auth {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 999px;
  background: rgba(8, 12, 18, .55);
}
.q-auth-glider {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: linear-gradient(180deg, #f4e2bc, #d7b36a);
  box-shadow: 0 4px 10px rgba(215, 179, 106, .35);
  transition: transform .38s cubic-bezier(.2, .8, .2, 1);
}
.q-login.is-signup .q-auth-glider { transform: translateX(100%); }
.q-auth button {
  position: relative;
  z-index: 1;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #d9c7a2;
  font: 800 12px/1 Outfit, "Segoe UI", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.q-auth button.is-on { color: #1c1408; }
.q-field { display: grid; gap: 4px; }
.q-field span {
  color: #cbb892;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.q-login input {
  width: 100%;
  min-width: 0;
  height: 40px;
  border: 1px solid rgba(228, 194, 122, .28);
  border-radius: 12px;
  background: rgba(8, 12, 18, .45);
  color: #f7f3ec;
  padding: 0 12px;
  font: 600 15px/1 Outfit, "Segoe UI", sans-serif;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.q-login input::placeholder { color: transparent; }
.q-otpbox input { letter-spacing: .22em; }
.q-login input:focus {
  border-color: #e4c27a;
  box-shadow: 0 0 0 3px rgba(228, 194, 122, .18);
}
.q-login input:-webkit-autofill {
  -webkit-text-fill-color: #f7f3ec;
  caret-color: #f7f3ec;
  box-shadow: 0 0 0 1000px #1a2431 inset;
  transition: background-color 9999s ease-out;
}
.q-wa {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  background: rgba(37, 211, 102, .1);
  color: #7dffa8;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.q-wa svg { width: 16px; height: 16px; fill: #3ddc84; flex: none; }
.q-wa[hidden] { display: none !important; }
.q-code { display: none; }
.q-status {
  margin: 0;
  min-height: 16px;
  color: #b7c3d1;
  font-size: 11px;
  line-height: 1.3;
}
.q-login.is-sent .q-status { color: #7dffa8; }
.q-login button {
  height: 40px;
  border: 0;
  border-radius: 12px;
  font: 800 14px/1 Outfit, "Segoe UI", sans-serif;
  transition: transform .15s ease, filter .15s ease;
}
.q-login .q-auth button {
  height: 32px;
  border-radius: 999px;
  background: transparent;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.q-login button:active { transform: scale(.98); }
.q-login a.q-otp,
.q-login button.q-otp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  border-radius: 12px;
  text-decoration: none;
  font: 800 14px/1 Outfit, "Segoe UI", sans-serif;
  background: linear-gradient(180deg, #25d366, #128c7e);
  color: #fff;
  border: 0;
  box-shadow: 0 8px 16px rgba(18, 140, 126, .28);
  cursor: pointer;
}
.q-login button.q-otp:disabled {
  opacity: .72;
  cursor: wait;
}
.q-login .q-pop-x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(228, 194, 122, .35);
  background: rgba(8, 12, 18, .45);
  color: #f3dfb4;
  font: 600 20px/1 Outfit, "Segoe UI", sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.q-login #qEnter {
  background: linear-gradient(180deg, #f4e2bc, #c9963a);
  color: #1c1408;
  box-shadow: 0 8px 16px rgba(201, 150, 58, .28);
}
.otp-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.otp-row[hidden] { display: none !important; }
.otp-row button { padding: 0 14px; }
.otp-note { margin: 0; color: #b7c3d1; font-size: 12px; line-height: 1.4; }
.q-gate {
  position: fixed;
  inset: 0;
  width: auto;
  max-width: none;
  height: auto;
  z-index: 80;
  display: flex;
  background: #eef3f9;
  color: #142033;
  font-family: Outfit, "Segoe UI", sans-serif;
}
.q-gate[hidden] { display: none !important; }
.q-gate-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  background: #eef3f9;
}
.q-gate-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 18px 36px;
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  color: #fff;
}
.q-gate-bar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
  flex: none;
}
.q-gate-bar strong { display: block; font-size: 18px; font-weight: 750; letter-spacing: -.02em; }
.q-gate-bar span { display: block; margin-top: 2px; font-size: 13px; opacity: .88; }
.q-gate-x {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 22px;
  line-height: 1;
}
.q-gate-card {
  margin: -18px 16px 24px;
  padding: 22px 18px 18px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(29, 78, 216, .12);
  animation: q-rise .4s ease;
}
.q-gate-card h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: -.03em; }
.q-gate-lead { margin: 0 0 16px; color: #5b6b80; font-size: 14px; line-height: 1.45; }
.q-gate-card label { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }
.q-gate-card input {
  display: block;
  width: 100%;
  margin-top: 6px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #142033;
  padding: 0 14px;
  font: 600 16px/1 Outfit, "Segoe UI", sans-serif;
  text-transform: none;
  letter-spacing: 0;
}
.q-gate-card button {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 14px;
  background: #2563eb;
  color: #fff;
  font: 750 15px/1 Outfit, "Segoe UI", sans-serif;
}
.q-who {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
  color: #f7f3ec;
  font-size: 14px;
}
.q-who button { border: 0; background: transparent; color: #e4c27a; font-weight: 750; }
.q-who small { display: block; margin-top: 4px; color: #e4c27a; font-size: 12px; }
.login-btn { height: 36px; border-radius: 999px; padding: 0 12px; font-size: 13px; border: 0; background: #e4c27a; color: #1c1404; font-weight: 750; }
.head-auth {
  height: 36px;
  border-radius: 999px;
  padding: 0 12px;
  font: 800 12px/1 Outfit, "Segoe UI", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid rgba(228, 194, 122, .5);
  background: transparent;
  color: #f3dfb4;
}
.head-auth.is-gold {
  border: 0;
  background: linear-gradient(180deg, #f4e2bc, #d7b36a);
  color: #1c1408;
}
.head-auth[hidden],
.q-who[hidden],
#btnLogin[hidden] { display: none !important; }
@keyframes q-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 901px) {
  html:not(.in-phone) .q-webhead { padding-right: 390px; }
  html:not(.in-phone) .q-deskbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 372px;
    padding: 8px 16px;
    background: #182230;
    border-bottom: 1px solid rgba(228, 194, 122, .28);
    overflow: auto;
  }
  html:not(.in-phone) .q-deskbar a,
  html:not(.in-phone) .q-deskbar span {
    flex: none;
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    color: #f7f3ec;
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.15;
  }
  html:not(.in-phone) .q-deskbar small {
    color: #e4c27a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  html:not(.in-phone) body.is-home .q-deskbar,
  html:not(.in-phone) body.is-work .q-deskbar { display: none !important; }
  html:not(.in-phone) .q-gate {
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .46);
  }
  html:not(.in-phone) .q-gate-sheet {
    width: min(420px, 100%);
    min-height: 0;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
  }
}
html.in-phone .q-gate-x { display: none; }
@media (max-width: 900px) {
  html:not(.in-phone) .q-gate-x { display: none; }
}
.top-actions { display: flex; gap: 8px; flex: none; }
.primary, .ghost, .more { font-weight: 700; font-size: 13px; border-radius: 999px; padding: 10px 14px; }
.primary { background: #e4c27a; color: #1c1404; border: 0; }
.ghost { background: transparent; color: #f7f3ec; border: 1px solid rgba(255,255,255,.22); }
.more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(255,255,255,.08);
  color: #f7f3ec;
  border: 0;
}
.more span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f3dfb4;
}
.sheet[hidden] { display: none !important; }
.sheet {
  position: fixed;
  right: 12px;
  top: 60px;
  z-index: 8;
  background: #fff;
  color: var(--ink);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  padding: 6px;
  min-width: 196px;
}
.sheet button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 650;
}
.sheet button:hover { background: #f3f6f9; }
.sheet a {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 650;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}
.sheet a:hover { background: #f3f6f9; }
.app { display: grid; grid-template-columns: 280px minmax(360px, 480px) minmax(0, 1fr); flex: 1; min-height: 0; height: auto; }
.side { background: #101820; color: #e8eef8; overflow: auto; padding: 16px 14px 24px; }
.side-lead { color: #9aabbd; font-size: 13px; line-height: 1.45; margin: 0 4px 8px; }
.side-note { margin: 0 4px 14px; color: #c5d0dc; font-size: 12px; line-height: 1.45; }
.side-note a { color: #e4c27a; font-weight: 750; }
.doc {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: stretch;
  background: #182230;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 16px;
  margin-bottom: 8px;
  overflow: hidden;
}
.doc-pick {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 2px 12px;
  align-items: center;
  text-align: left;
  background: transparent;
  color: inherit;
  border: 0;
  padding: 12px 4px 12px 12px;
  min-width: 0;
}
.doc .ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #243246; font-size: 20px; }
.doc[data-tone="mahal"] .ico { background: #6b1d3a; }
.doc[data-tone="health"] .ico { background: #0f6e6b; }
.doc[data-tone="travel"] .ico { background: #1d4e89; }
.doc[data-tone="homes"] .ico { background: #7a3b2e; }
.doc[data-tone="academy"] .ico { background: #1e5a38; }
.doc[data-tone="paint"] .ico { background: #0c2f6b; }
.doc.is-on {
  background: linear-gradient(90deg, rgba(228, 194, 122, .16), #1c2c40 42%);
  border-color: rgba(228, 194, 122, .7);
  box-shadow: inset 3px 0 0 #e4c27a;
}
.doc .ico { grid-row: 1 / span 2; }
.doc-pick > span { min-width: 0; }
.doc b { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; }
.doc small { display: block; color: #93a4b8; font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-amt { grid-column: 2; font-style: normal; font-size: 12px; font-weight: 700; color: #e4c27a; font-variant-numeric: tabular-nums; }
.doc-go {
  display: grid;
  place-items: center;
  border: 0;
  background: rgba(228, 194, 122, .12);
  color: #f3dfb4;
  padding: 0;
}
.doc-go svg { width: 18px; height: 18px; }
.doc.is-on .doc-go { background: rgba(228, 194, 122, .28); color: #1c1408; }
.form { display: flex; flex-direction: column; background: var(--app); min-width: 0; min-height: 0; }
.form-scroll { flex: 1; min-height: 0; overflow: auto; padding: 14px 14px 8px; }
.card {
  background: var(--card);
  border: 1px solid rgba(20, 32, 46, .06);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 22px rgba(16, 24, 40, .04);
}
.type-row { display: flex; gap: 8px; align-items: stretch; }
.type-row .seg { flex: 1; min-width: 0; }
.card-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.card-h > span, legend {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8a7352;
  font-weight: 750;
}
fieldset { border: 0; margin: 0; padding: 0; }
.hint, .story { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wide { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 650; }
.field input, .field textarea, .nums input, .search input {
  width: 100%;
  color: var(--ink);
  background: #f4f7fa;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 11px 12px;
  font-weight: 600;
}
.field input:focus, .field textarea:focus, .nums input:focus, .search input:focus {
  background: #fff;
  border-color: #d5deea;
}
.field textarea { min-height: 72px; resize: vertical; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.pill {
  flex: none;
  border: 0;
  background: #f0f3f7;
  color: var(--ink);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
}
.pill.is-on { background: var(--accent); color: #fff; }
.seg {
  display: flex;
  background: #eef2f6;
  padding: 4px;
  border-radius: 14px;
  gap: 4px;
  margin-top: 10px;
}
.seg button {
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: 11px;
  padding: 10px 8px;
  font-weight: 700;
  color: #5c6b7c;
}
.seg button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(16,24,40,.08); }
.mini { margin: 0; }
.mini button { flex: none; padding: 7px 10px; font-size: 12px; }
.adv { margin-top: 4px; }
.shelf { margin: 4px 2px 8px; font-size: 12px; font-weight: 750; letter-spacing: .04em; color: #8a7352; text-transform: uppercase; }
.line {
  background: #fff;
  border: 1px solid #e6ebf1;
  border-radius: 14px;
  padding: 2px 10px;
  margin: 6px 0;
}
.line.is-off { opacity: 1; }
.pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 9px 2px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.switch { position: relative; width: 40px; height: 24px; justify-self: end; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; }
.switch i { position: absolute; inset: 0; background: #d5dbe3; border-radius: 99px; pointer-events: none; }
.switch i:before {
  content: "";
  position: absolute;
  width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.16);
  transition: transform .15s ease;
}
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i:before { transform: translateX(16px); }
.line-copy { min-width: 0; }
.ttl { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.line-copy strong { display: block; font-size: 13.5px; font-weight: 650; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line-copy em {
  display: block;
  margin-top: 1px;
  font-style: normal;
  font-size: 11px;
  line-height: 1.3;
  color: #8b97a6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.name-in, .blurb-in { width: 100%; border: 0; background: transparent; padding: 0; font-weight: 750; font-size: 15px; }
.blurb-in { margin-top: 2px; font-weight: 500; font-size: 13px; color: #526173; }
.unit { display: inline; flex: none; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #a0aab6; }
.amt { display: none; color: var(--accent); font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tune { display: none; }
.line:not(.is-off) {
  background: #fff;
  border-color: color-mix(in srgb, var(--accent) 42%, #e6ebf1);
  box-shadow: inset 3px 0 0 var(--accent);
  margin: 6px 0;
  padding: 2px 10px 10px;
}
.line:not(.is-off) .amt { display: block; }
.line:not(.is-off) .unit { display: none; }
.line:not(.is-off) .tune { display: block; }
.nums { display: grid; grid-template-columns: 1fr 1.15fr .75fr; gap: 8px; margin: 0; padding-top: 10px; border-top: 1px solid #e3e9f0; align-items: end; }
.nums label { font-size: 11px; color: var(--muted); font-weight: 700; display: grid; gap: 4px; }
.nums input, .stepper { background: #fff; }
.stepper { display: flex; align-items: center; border-radius: 12px; border: 1px solid var(--line); }
.stepper button { width: 34px; height: 40px; border: 0; background: transparent; font-size: 18px; color: var(--ink); font-weight: 700; }
.stepper input { border: 0; background: transparent; text-align: center; padding: 8px 0; font-variant-numeric: tabular-nums; }
.x { border: 0; background: transparent; color: #9a3b32; font-size: 12px; font-weight: 700; padding: 6px 0 0; }
.add {
  width: 100%;
  margin-top: 4px;
  background: transparent;
  border: 1.5px dashed #c5d0dc;
  border-radius: 14px;
  padding: 12px;
  font-weight: 750;
  color: var(--ink);
}
.empty { margin: 8px 0 12px; color: var(--muted); font-size: 13px; }
.field.search { font-size: 0; }
.search input { padding-left: 14px; background: #f4f7fa; font-size: 15px; }
.form-total {
  flex: none;
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 6px 12px 8px;
}
.dock-row { display: flex; align-items: center; gap: 10px; }
.sum-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 0;
}
.sum-toggle small { display: block; color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .03em; }
.sum-toggle b { display: block; font-size: 15px; letter-spacing: -.02em; color: var(--ink); font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.15; }
.sum-break { display: none; padding-bottom: 6px; }
.form-total.is-open .sum-break, .form-total.always .sum-break { display: block; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 4px 0; color: #415062; border-bottom: 1px solid #f0f3f6; font-variant-numeric: tabular-nums; }
.sum-row strong { font-weight: 750; color: var(--ink); }
.go-next {
  width: auto;
  flex: none;
  margin: 0;
  background: #14202e;
  color: #f7f1e4;
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .02em;
}
.go-next:after { content: " →"; }
.steps { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.steps button { border: 0; background: #fff; color: #5c6b7c; border-radius: 12px; padding: 10px 8px; font-weight: 750; }
.steps button.is-on { background: var(--accent); color: #fff; }
body[data-step="product"] .tune,
body[data-step="product"] .amt { display: none !important; }
body[data-step="product"] .unit { display: inline !important; }
body[data-step="product"] .line,
body[data-step="product"] .line:not(.is-off) { padding: 2px 10px; }
body[data-step="rate"] .unit { display: inline !important; }
body[data-step="rate"] .line-copy em { display: none; }
body[data-step="rate"] .line:not(.is-off) { margin: 6px 0; padding: 6px 8px 8px; border-radius: 12px; }
body[data-step="rate"] .pick { padding: 0 0 4px; }
body[data-step="rate"] .nums { padding-top: 6px; gap: 6px; }
body[data-step="rate"] .nums label { font-size: 10px; gap: 2px; }
body[data-step="rate"] .nums input { min-height: 32px; padding: 4px 6px; }
body[data-step="rate"] .stepper button { width: 28px; height: 32px; font-size: 16px; }
body[data-step="rate"] .stepper input { min-height: 32px; padding: 2px 0; }
.preview { overflow: auto; padding: 24px 16px 48px; background: radial-gradient(900px 480px at 10% 0%, #3a2a22, #1a1614 55%); }
.device { display: none; }
.paper {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  background: #f7f1e6;
  color: #2a1518;
  padding: 0;
}
.tabbar { display: none; }
.toast {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  background: #0b1b3a; color: #fff; border-radius: 999px; padding: 12px 18px;
  opacity: 0; transition: .24s; z-index: 9; font-size: 13px; font-weight: 600;
  letter-spacing: .01em; font-family: Outfit, "Segoe UI", sans-serif;
  box-shadow: 0 14px 32px rgba(11, 27, 58, .32);
  border: 1px solid rgba(255,255,255,.08);
}
.toast.on { opacity: 1; }
.see-pdf { display: none; }
.pdf-down {
  position: relative;
  display: block;
  flex: none;
  margin: 22px auto 28px;
  padding: 13px 28px;
  overflow: hidden;
  background: transparent;
  color: #f7f1e4;
  border: 1.5px solid rgba(228, 194, 122, .9);
  border-radius: 999px;
  font: 750 13px/1 "Segoe UI", system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  animation: pdf-breathe 2.4s ease-in-out infinite;
}
.pdf-down:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: translateX(-160%);
  animation: pdf-shine 2.4s ease-in-out infinite;
}
.pdf-down:active { transform: scale(.97); }
.pdf-down:disabled { animation: none; opacity: .72; cursor: wait; }
@keyframes pdf-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(228, 194, 122, .2); }
  50% { box-shadow: 0 0 18px 3px rgba(228, 194, 122, .55); }
}
@keyframes pdf-shine {
  0%, 20% { transform: translateX(-160%); }
  70%, 100% { transform: translateX(380%); }
}
@media (min-width: 901px) {
  .sum-break { display: block; }
  .app { margin-right: 372px; }
  .preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 16px 14px 24px;
  }
  .device {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 60;
    top: 12px;
    right: 12px;
    width: 348px;
    height: calc(100vh - 24px);
    background: #070b10;
    border: 10px solid #1a2330;
    border-radius: 42px;
    padding: 34px 8px 16px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, .45), inset 0 0 0 2px #2c3848;
  }
  .device:before {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    width: 92px;
    height: 10px;
    margin-left: -46px;
    border-radius: 999px;
    background: #2a3544;
  }
  .device-tag {
    position: absolute;
    top: 9px;
    left: 0;
    right: 0;
    text-align: center;
    color: #e4c27a;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .18em;
    text-transform: uppercase;
  }
  .device iframe {
    flex: 1;
    width: 100%;
    min-height: 0;
    border: 0;
    border-radius: 22px;
    background: #101820;
  }
  .paper { margin: 0; }
}
@media (max-width: 900px) {
  body { height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
  .q-webhead { display: none !important; }
  html, body { width: 100%; max-width: 100%; }
  .q-pop {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 16px;
  }
  .q-pop .q-login {
    width: 100%;
    max-height: calc(100svh - 32px);
    overflow: auto;
  }
  .top { flex: none; height: calc(56px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .field input, .field textarea, .nums input, .search input, .name-in, .blurb-in { font-size: 16px; min-height: 44px; }
  .top-actions .ghost { display: none; }
  .more { display: inline-flex; }
  .sheet { top: calc(56px + env(safe-area-inset-top)); }
  .app { flex: 1; min-height: 0; display: block; height: auto; overflow: hidden; }
  .side, .form, .preview { display: none; height: 100%; overflow: auto; }
  body[data-tab="docs"] .side,
  body[data-tab="client"] .form,
  body[data-tab="product"] .form,
  body[data-tab="rate"] .form,
  body[data-tab="preview"] .preview { display: flex; }
  body[data-tab="client"] .form,
  body[data-tab="product"] .form,
  body[data-tab="rate"] .form { overflow: hidden; }
  body[data-tab="docs"] .side { display: block; }
  .steps { display: none; }
  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: relative;
    flex: none;
    z-index: 5;
    background: #101820;
    border-top: 1px solid rgba(228, 194, 122, .45);
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .tab { background: transparent; color: #8b97a6; border: 0; padding: 10px 2px 8px; }
  .tab b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .01em; }
  .tab small { display: none; }
  .tab.is-on { color: #e4c27a; box-shadow: inset 0 -3px 0 #e4c27a; }
  .tab.is-on b:after { content: none; }
  .field input, .field textarea, .nums input, .search input, .name-in, .blurb-in { font-size: 16px; min-height: 44px; }
  .name-in, .blurb-in { min-height: 0; }
  .stepper input { min-height: 40px; font-size: 16px; }
  .pill { min-height: 40px; }
  .see-pdf { display: block; }
  .toast { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .preview { display: none; padding: 16px 12px 24px; box-sizing: border-box; }
  body[data-tab="preview"] .preview {
    display: block;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0;
    box-sizing: border-box;
  }
  body[data-tab="preview"] #pdfStage {
    padding: 18px 14px 12px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: visible !important;
  }
  body[data-tab="preview"] #paperScale {
    overflow: visible;
    max-width: 100%;
    border-radius: 0;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
    background: transparent;
  }
  .form-scroll { padding-bottom: 12px; }
  body[data-step="client"] .form,
  body[data-step="client"] .form-scroll { overflow: hidden; }
  body[data-step="client"] .form-scroll {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 8px 10px 6px;
    gap: 8px;
  }
  body[data-step="client"] .card { flex: none; padding: 12px; margin: 0 0 10px; border-radius: 16px; }
  body[data-step="client"] .client-card {
    flex: none;
    min-height: 0;
    display: block;
    overflow: visible;
  }
  body[data-step="client"] .card-h { margin-bottom: 8px; }
  body[data-step="client"] .story,
  body[data-step="client"] .hint { display: none; }
  body[data-step="client"] .grid { gap: 10px 10px; }
  body[data-step="client"] .field { gap: 4px; font-size: 11px; }
  body[data-step="client"] .field input { padding: 10px 12px; min-height: 42px; border-radius: 12px; }
  .form-total { padding: 8px 12px 10px; }
  .sum-toggle b { font-size: 18px; }
  .go-next { min-height: 42px; padding: 0 16px; font-size: 14px; }
  body[data-step="client"] .addr {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    min-height: 0;
  }
  body[data-step="client"] .addr span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
  }
  body[data-step="client"] .addr textarea {
    display: block;
    width: 100%;
    min-height: 84px;
    height: 84px;
    padding: 10px 12px;
    border-radius: 12px;
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.4;
  }
  body[data-step="client"] .type-row { gap: 6px; }
  body[data-step="client"] .seg { margin-top: 6px; padding: 3px; }
  body[data-step="client"] .seg button { padding: 7px 4px; font-size: 12px; }
  body[data-step="client"] .pill { min-height: 32px; padding: 5px 12px; }
  body[data-step="client"] .adv { display: none; }
  .go-next { background: var(--accent); color: #fff; }
}
@media print {
  html, body {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: #fff !important;
  }
  header.top, .side, .form, .toast, .tabbar, .sheet, .device, .q-gate, .q-home, .q-webhead, .q-deskbar, .pdf-down, .pdf-save, .pdf-actions, .page-bar, .pages { display: none !important; }
  .app { display: block !important; height: auto !important; margin: 0 !important; overflow: visible !important; }
  .preview, .paper-scale { display: block !important; height: auto !important; width: auto !important; max-height: none !important; background: #fff !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; }
  .paper { transform: none !important; margin: 0 !important; width: 210mm !important; height: auto !important; min-height: 0 !important; }
  .paper, .paper * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}
@page { size: A4; margin: 0; }

.q-home[hidden] { display: none !important; }
.q-home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f3f6fb;
  color: #122033;
  font-family: Outfit, "Segoe UI", sans-serif;
}
body.is-home {
  position: fixed !important;
  top: var(--app-top, 8px) !important;
  left: var(--app-left, 8px) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--app-w, calc(100% - 16px)) !important;
  max-width: none !important;
  height: var(--app-h, calc(100svh - 16px)) !important;
  max-height: none !important;
  min-height: 0;
  margin: 0;
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: manipulation;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  background: #0b1b3a;
  box-sizing: border-box;
  border-radius: 18px;
}
body.is-home .q-webhead,
body.is-home header.top,
body.is-home .app,
body.is-home .tabbar,
body.is-home .sheet { display: none !important; }
body.is-home .q-home {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  overflow-x: hidden;
  box-sizing: border-box;
  box-shadow: none;
  background:
    radial-gradient(120% 70% at 100% -20%, rgba(37, 99, 235, .16), transparent 50%),
    #f4f7fb;
}
.qh-bar {
  position: relative;
  overflow: hidden;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  min-height: 0;
  background: linear-gradient(135deg, #0b1b3a 0%, #163a86 48%, #1d4ed8 100%);
  color: #fff;
}
.qh-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.16) 48%, transparent 72%);
  transform: translateX(-120%);
  animation: qShine 5.5s ease-in-out infinite;
  pointer-events: none;
}
.qh-bar > * { position: relative; z-index: 1; }
.qh-ava {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #fff, #e8eefc);
  color: #1e3a8a;
  font-weight: 800;
  flex: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,.28), 0 8px 16px rgba(2, 8, 23, .18);
}
.qh-id { min-width: 0; }
.qh-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.qh-id strong { display: block; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qh-pro {
  flex: none;
  margin: 0;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fde68a, #d4a017);
  color: #3b2a00;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.qh-id span { display: block; margin-top: 2px; font-size: 12px; opacity: .82; letter-spacing: .02em; }
.qh-bell {
  margin-left: auto;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  color: #fff;
}
.qh-bell svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qh-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px 14px 18px;
}
body.is-home .q-home { overflow: hidden; }
body.is-home .qh-bar {
  flex: none;
  min-height: 0;
  padding: 12px;
}
body.is-home .qh-bell { margin-right: 0; flex: none; }
body.is-home .qh-scroll {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  overflow-x: hidden;
  overscroll-behavior: none;
  padding: 12px;
  min-width: 0;
  box-sizing: border-box;
}
body.is-home .qh-month { margin: 0; flex: none; padding: 6px 12px; max-width: 100%; }
body.is-home .qh-stats { flex: none; gap: 8px; min-width: 0; }
body.is-home .qh-stat { padding: 8px 10px 7px; border-radius: 16px; min-width: 0; }
body.is-home .qh-stat b { margin-top: 2px; font-size: 18px; }
body.is-home .qh-stat small { display: none; }
body.is-home .qh-card { margin-top: 0; padding: 8px 12px 10px; border-radius: 18px; min-width: 0; max-width: 100%; overflow: visible; box-sizing: border-box; }
body.is-home .is-trend {
  flex: none;
  min-height: 0;
  max-width: 100%;
}
body.is-home .qh-card-h { margin-bottom: 2px; }
body.is-home .qh-chart { height: auto; min-height: 0; max-width: 100%; overflow: visible; }
body.is-home .qh-chart svg { height: 64px; width: 100%; max-width: 100%; display: block; }
html.is-android body.is-home .qh-chart svg { height: 168px; }
body.is-home .is-actions { flex: none; padding-bottom: 14px; }
body.is-home .qh-nav {
  flex: none;
  overflow: visible;
  padding: 12px;
  z-index: 6;
}
body.is-home .qh-acts { margin-top: 6px; }
body.is-home .qh-acts button { min-width: 72px; width: 72px; overflow: visible; }
body.is-home .qh-ico { width: 42px; height: 42px; border-radius: 14px; margin-bottom: 4px; }
body.is-home .qh-ico svg { width: 20px; height: 20px; }
@media (display-mode: standalone) {
  .qh-bar,
  body.is-home .qh-bar,
  body.is-work .qh-bar,
  .qp-bar,
  .q-gate-bar { padding-top: max(12px, env(safe-area-inset-top, 0px)); }
  .qh-nav,
  body.is-home .qh-nav { padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
}
.qh-month {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  color: #1e3a8a;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .02em;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
  border: 1px solid #e8eef6;
  cursor: pointer;
}
.qh-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qh-stat {
  padding: 12px 12px 10px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e8eef6;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}
.qh-stat span { display: block; font-size: 11px; font-weight: 700; color: #64748b; letter-spacing: .02em; text-transform: uppercase; }
.qh-stat b { display: block; margin-top: 6px; font-size: 20px; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; white-space: normal; }
.qh-stat small { display: block; margin-top: 4px; font-size: 11px; color: #94a3b8; }
.qh-stat.is-sales b { color: #1d4ed8; }
.qh-stat.is-in b { color: #15803d; }
.qh-stat.is-out b { color: #dc2626; }
.qh-stat.is-net b { color: #6d28d9; }
.qh-stat.is-sales { background: linear-gradient(180deg, #f7faff, #eef4ff); }
.qh-stat.is-in { background: linear-gradient(180deg, #f7fdf9, #eefbf3); }
.qh-stat.is-out { background: linear-gradient(180deg, #fffafa, #fff1f1); }
.qh-stat.is-net { background: linear-gradient(180deg, #fbf8ff, #f4eefe); }
.qh-card {
  margin-top: 14px;
  padding: 14px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e8eef6;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}
.qh-card.is-trend {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%);
}
.qh-card h2, .qh-card-h h2 { margin: 0; font-size: 15px; letter-spacing: -.02em; color: #0f172a; }
.qh-card-sub { display: block; margin-top: 2px; font-size: 11px; color: #94a3b8; font-weight: 650; }
.qh-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; min-width: 0; }
.qh-card-h > div { min-width: 0; }
.qh-legend { color: #64748b; font-size: 11px; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.qh-legend i { display: inline-block; width: 8px; height: 8px; margin: 0 5px 0 0; border-radius: 99px; }
.qh-legend i.is-sales { background: linear-gradient(180deg, #7dd3fc, #2563eb); }
.qh-legend i.is-profit { background: #16a34a; }
.qh-legend i.is-exp { background: #fb7185; }
.qh-range {
  width: 34px;
  height: 34px;
  flex: none;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: #eff6ff;
  color: #1d4ed8;
  display: grid;
  place-items: center;
  flex: none;
}
.qh-range svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.qh-card.is-trend { cursor: pointer; }
.qh-chart { height: auto; }
.qh-chart svg { width: 100%; height: 72px; display: block; }
.st-labs { display: grid; margin-top: 2px; }
.st-labs span { text-align: center; font-size: 10px; font-weight: 700; color: #94a3b8; line-height: 1.2; }
.st-labs span.is-now { color: #1e3a8a; }
.qh-acts {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 2px 2px 10px;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
.qh-acts::-webkit-scrollbar { display: none; }
.qh-acts button {
  flex: 0 0 auto;
  width: 76px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  background: transparent;
  color: #122033;
  font: 700 11px/1.2 Outfit, "Segoe UI", sans-serif;
  padding: 0;
}
.qh-ico {
  width: 52px;
  height: 52px;
  margin: 0 auto 6px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
}
.qh-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qh-ico.is-quote { background: linear-gradient(180deg, #60a5fa, #2563eb); box-shadow: 0 8px 14px rgba(37, 99, 235, .28); }
.qh-ico.is-bill { background: linear-gradient(180deg, #4ade80, #16a34a); box-shadow: 0 8px 14px rgba(22, 163, 74, .24); }
.qh-ico.is-exp { background: linear-gradient(180deg, #fb7185, #e11d48); box-shadow: 0 8px 14px rgba(225, 29, 72, .22); }
.qh-ico.is-cust { background: linear-gradient(180deg, #c4b5fd, #7c3aed); box-shadow: 0 8px 14px rgba(124, 58, 237, .24); }
.qh-ico.is-biz { background: linear-gradient(180deg, #38bdf8, #0284c7); box-shadow: 0 8px 14px rgba(2, 132, 199, .24); }
.qh-nav {
  position: relative;
  flex: none;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 72px 1fr 1fr;
  align-items: end;
  padding: 16px;
  background: #fff;
  border-top: 1px solid #e7edf5;
}
.qh-demo-tag {
  display: none;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(244, 226, 188, .95);
  color: #1c1408;
  font: 800 8px/1 Outfit, "Segoe UI", sans-serif;
  letter-spacing: .08em;
  vertical-align: middle;
}
.qh-demo-tag[hidden] { display: none !important; }
.qh-demo-auth {
  display: none;
  flex: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  margin-right: 2px;
  position: relative;
  z-index: 2;
}
.qh-demo-auth[hidden] { display: none !important; }
.qh-demo-auth button {
  height: 26px;
  padding: 0 7px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: 750 10px/1 Outfit, "Segoe UI", sans-serif;
  white-space: nowrap;
}
.qh-demo-auth button.is-gold {
  border: 0;
  background: linear-gradient(180deg, #f4e2bc, #c9963a);
  color: #1c1408;
}
body.is-demo .q-home { position: relative; }
body.is-demo.is-home:not(.is-work):not(.is-people):not(.is-spend):not(.is-report) .qh-demo-auth:not([hidden]) {
  display: inline-flex;
}
body.is-demo.is-home:not(.is-work):not(.is-people):not(.is-spend):not(.is-report) .qh-demo-tag:not([hidden]) {
  display: inline-block;
}
body.is-demo.is-work .qh-demo-tag,
body.is-demo.is-people .qh-demo-tag,
body.is-demo.is-spend .qh-demo-tag,
body.is-demo.is-report .qh-demo-tag,
body.is-demo.is-work .qh-demo-auth,
body.is-demo.is-people .qh-demo-auth,
body.is-demo.is-spend .qh-demo-auth,
body.is-demo.is-report .qh-demo-auth {
  display: none !important;
}
.qh-nav button {
  border: 0;
  background: transparent;
  color: #94a3b8;
  font: 700 10px/1.1 Outfit, "Segoe UI", sans-serif;
}
.qh-nav button.is-on { color: #1d4ed8; }
.qh-nav svg { width: 22px; height: 22px; display: block; margin: 0 auto 3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qh-plus {
  width: 56px;
  height: 56px;
  margin: -40px auto 8px;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #3b82f6, #1e3a8a) !important;
  color: #fff !important;
  font-size: 32px !important;
  line-height: 1 !important;
  box-shadow: 0 12px 22px rgba(30, 58, 138, .38);
}
.qh-add {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  transform: translateX(-50%);
  z-index: 8;
  width: min(220px, calc(100% - 36px));
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 8px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .18);
}
.qh-add[hidden] { display: none !important; }
.qh-add button {
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: #f4f7fb;
  color: #122033;
  font: 750 14px/1 Outfit, "Segoe UI", sans-serif;
}
.qh-soon {
  position: fixed;
  inset: 0;
  width: auto;
  max-width: none;
  height: auto;
  z-index: 30;
  display: grid;
  place-items: end center;
  padding: 16px;
  background: rgba(15, 23, 42, .35);
}
.qh-soon[hidden] { display: none !important; }
.qh-soon-card {
  width: min(400px, 100%);
  margin-bottom: 84px;
  padding: 18px;
  border-radius: 20px;
  background: #fff;
}
.qh-soon-card h2 { margin: 0 0 6px; }
.qh-soon-card p { margin: 0 0 14px; color: #64748b; line-height: 1.45; }
.qh-policy-go { display: block; margin: 0 0 10px; padding: 12px 14px; border-radius: 14px; background: #fff6ee; color: #c2410c; font-weight: 750; text-decoration: none; text-align: center; }
.qh-mail { margin: 0 0 12px; font-size: 13px; }
#qhMoreBody[hidden], #qhSoonText[hidden] { display: none !important; }
.qh-soon-card button {
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 14px;
  background: #2563eb;
  color: #fff;
  font-weight: 750;
}
#qhSignOut {
  margin-bottom: 8px;
  background: #fff;
  color: #64748b;
  border: 1px solid #e7edf5;
}
#qhSignOut[hidden] { display: none !important; }
.qh-people,
#qhPeople,
#qhSpend,
#qhReport { display: none; }
.qh-people[hidden],
#qhPeople[hidden],
#qhSpend[hidden],
#qhReport[hidden] { display: none !important; }
body.is-home.is-people .qh-bar,
body.is-home.is-people .qh-scroll { display: none !important; }
body.is-home.is-people #qhPeople,
body.is-home.is-spend #qhSpend {
  display: flex !important;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  background: #f3f6fb;
  overflow: hidden;
}
body.is-home.is-people .qp-bar {
  flex: none;
  padding-top: max(14px, env(safe-area-inset-top, 0px));
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
}
body.is-home.is-people .qp-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 12px 14px calc(28px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
body.is-home.is-spend .qh-bar,
body.is-home.is-spend .qh-scroll,
body.is-home.is-spend #qhPeople { display: none !important; }
body.is-home.is-report .qh-bar,
body.is-home.is-report .qh-scroll,
body.is-home.is-report #qhPeople,
body.is-home.is-report #qhSpend { display: none !important; }
body.is-home.is-report #qhReport {
  display: flex !important;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: #f3f6fb;
}
body.is-home.is-people #qhReport,
body.is-home.is-spend #qhReport { display: none !important; }
.qr-link, .qr-export {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin: 0 0 8px;
  padding: 10px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  text-align: left;
  color: #122033;
  font: 750 14px/1.2 Outfit, "Segoe UI", sans-serif;
}
.qr-export { grid-template-columns: 40px 1fr; color: #1d4ed8; }
.qr-link small, .qr-note { display: block; margin-top: 3px; color: #64748b; font-size: 12px; font-weight: 650; }
.qr-link em { color: #94a3b8; font-style: normal; font-size: 18px; }
.qr-link .qx-ava, .qr-export .qx-ava { width: 40px; height: 40px; border-radius: 12px; font-size: 15px; }
.qr-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin: 0 0 10px; }
.qr-stats article { padding: 10px 8px; border-radius: 14px; background: #fff; }
.qr-stats span { display: block; color: #64748b; font-size: 11px; font-weight: 700; }
.qr-stats b { display: block; margin-top: 4px; font-size: 13px; }
.qr-stats .is-sale b { color: #2563eb; }
.qr-stats .is-exp b { color: #dc2626; }
.qr-stats .is-ok b { color: #16a34a; }
.qr-chart { display: flex; align-items: flex-end; gap: 6px; height: 128px; padding: 8px; border-radius: 16px; background: #fff; }
.qr-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.qr-pair { display: flex; align-items: flex-end; gap: 2px; height: 96px; }
.qr-pair i { width: 7px; border-radius: 4px 4px 0 0; display: block; }
.qr-pair i.is-s { background: #3b82f6; }
.qr-pair i.is-e { background: #f87171; }
.qr-col small { margin-top: 4px; color: #64748b; font-size: 10px; font-weight: 700; }
.qr-key { display: flex; gap: 12px; margin: 8px 0 0; color: #64748b; font-size: 12px; font-weight: 700; }
.qr-key i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 2px; }
.qr-key .is-s { background: #3b82f6; }
.qr-key .is-e { background: #f87171; }
.qr-board { display: flex; flex-direction: column; }
.qr-select { display: block; margin: 0 0 8px; }
.qr-select select {
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 12px center / 12px no-repeat;
  padding: 0 32px 0 14px;
  color: #122033;
  font: 750 14px/1 Outfit, "Segoe UI", sans-serif;
  appearance: none;
}
.qr-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; }
.qr-picks .qr-select { margin: 0; }
.qr-picks .is-on select { background-color: #e8f1ff; color: #1d4ed8; }
.qr-stats.is-board { gap: 8px; margin: 0 0 8px; }
.qr-stats.is-board article { padding: 12px 8px 10px; border-radius: 16px; box-shadow: 0 6px 16px rgba(15, 23, 42, .04); }
.qr-stats.is-board .is-sale { background: #eef5ff; }
.qr-stats.is-board .is-exp { background: #fff1f2; }
.qr-stats.is-board .is-ok { background: #ecfdf3; }
.qr-stats.is-board b { font-size: 15px; letter-spacing: -.03em; }
.qr-delta { display: block; margin-top: 4px; color: #16a34a; font-size: 10px; font-weight: 750; }
.qr-delta.is-down { color: #dc2626; }
.qr-margin { display: flex; justify-content: center; margin: 2px 0 12px; }
.qr-margin span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #16a34a;
  font-size: 13px;
  font-weight: 750;
}
.qr-margin span::before {
  content: "";
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 12.5 6 8l2.2 2.2L14 3.5' fill='none' stroke='%2316a34a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.qp-card.qr-plot h3 { margin: 0 0 4px; font-size: 16px; letter-spacing: -.02em; text-transform: none; color: #122033; }
.qr-chart.is-tall { height: 196px; gap: 1px; padding: 4px 0 0; background: transparent; }
.qr-chart.is-tall .qr-pair { height: 148px; gap: 1px; }
.qr-chart.is-tall .qr-pair i { width: 6px; border-radius: 4px 4px 0 0; }
.qr-chart.is-tall .qr-col small { font-size: 8px; letter-spacing: -.03em; }
.qr-chart.is-tall .qr-pair i.is-s { background: #3b82f6; }
.qr-chart.is-tall .qr-pair i.is-e { background: #fb7185; }
.qr-key.is-center { justify-content: center; margin-top: 4px; }
.qr-donut { width: 148px; height: 148px; margin: 8px auto; border-radius: 50%; display: grid; place-items: center; }
.qr-donut span { width: 86px; height: 86px; border-radius: 50%; background: #fff; display: grid; place-items: center; text-align: center; font-size: 12px; font-weight: 800; }
.qr-split { height: 8px; border-radius: 999px; background: #e8eef8; overflow: hidden; display: flex; }
.qr-split i { display: block; height: 100%; }
.qx-bar {
  margin: 0 0 8px;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
}
.qx-periods { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.qx-periods button[data-speriod] {
  flex: none;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #f3f6fb;
  color: #475569;
  font: 750 12px/1 Outfit, "Segoe UI", sans-serif;
}
.qx-periods button.is-on { background: #2563eb; color: #fff; }
.qx-periods select {
  flex: 1;
  min-width: 0;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: #f3f6fb;
  padding: 0 8px;
  color: #122033;
  font: 700 12px/1 Outfit, "Segoe UI", sans-serif;
}
.qx-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 6px; }
.qx-dates label { display: grid; gap: 2px; min-width: 0; color: #64748b; font: 700 10px/1 Outfit, "Segoe UI", sans-serif; }
.qx-dates input {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: #f3f6fb;
  padding: 0 6px;
  color: #122033;
  font: 700 12px/1 Outfit, "Segoe UI", sans-serif;
}
.qx-filters { display: flex; align-items: center; gap: 6px; margin: 0; }
.qx-filters select {
  flex: 1;
  min-width: 0;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: #f3f6fb;
  padding: 0 8px;
  color: #122033;
  font: 700 12px/1 Outfit, "Segoe UI", sans-serif;
}
.qx-total {
  display: block;
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff;
}
.qx-total-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.qx-total span { color: #64748b; font-size: 12px; font-weight: 700; }
.qx-total b { color: #122033; font-size: 18px; }
.qx-total small { display: block; margin-top: 2px; color: #94a3b8; font-size: 11px; font-weight: 650; }
.qx-total button {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  border: 0;
  border-radius: 12px;
  background: #2563eb;
  color: #fff;
  font: 750 14px/1 Outfit, "Segoe UI", sans-serif;
}
.qx-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin: 0 0 8px;
  padding: 10px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  text-align: left;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .04);
}
.qx-ava {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  font: 800 16px/1 Outfit, "Segoe UI", sans-serif;
}
.qx-row b { display: block; color: #122033; font-size: 15px; }
.qx-row small { display: block; margin-top: 2px; color: #64748b; font-size: 12px; font-weight: 650; }
.qx-amt { color: #122033; font-size: 14px; font-weight: 800; white-space: nowrap; }
.qx-bill { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.qx-shot {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #e8eef8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 28px no-repeat;
}
.qx-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qx-shot img[hidden] { display: none !important; }
.qx-bill #qxPick {
  min-width: 92px;
  height: 64px;
  border: 0;
  border-radius: 14px;
  background: #eef4ff;
  color: #2563eb;
  font: 750 16px/1 Outfit, "Segoe UI", sans-serif;
}
body.is-home.is-spend.is-xform .qh-nav { display: none !important; }
body.is-home.is-spend.is-xform #qxBody { padding-bottom: 8px; }
body.is-home.is-people.is-xform .qh-nav { display: none !important; }
body.is-home.is-people.is-xform #qhPeople {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
body.is-home.is-people.is-xform .qp-body {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  overscroll-behavior: contain;
}
body.is-home.is-people.is-xform .qp-bar {
  flex: none;
  position: relative;
  z-index: 4;
  padding-top: max(16px, env(safe-area-inset-top, 0px));
}
.qp-billedit .qp-field input,
.qp-billedit .qp-field textarea,
.qp-billedit .qp-bill-nums .qp-field input {
  font-size: 16px !important;
}
.qp-card.qx-form { margin-top: 0; padding: 12px 12px 8px; }
.qp-card.qx-form h3 {
  margin: 0 0 4px;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: #122033;
}
.qp-card.qx-form .qp-field { margin-top: 6px; }
.qp-card.qx-form .qp-field input,
.qp-card.qx-form .qp-field select { height: 38px; }
.qp-card.qx-form .qp-field textarea { min-height: 48px; padding: 8px 12px; }
#qxSave {
  flex: none;
  height: 48px;
  margin: 0 12px 12px;
  border: 0;
  border-radius: 14px;
  background: #2563eb;
  color: #fff;
  font: 750 16px/1 Outfit, "Segoe UI", sans-serif;
}
#qxSave[hidden] { display: none !important; }
.qp-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 16px;
  min-height: 0;
  background: linear-gradient(180deg, #2f6bff 0%, #1d4ed8 100%);
  color: #fff;
}
.qp-bar strong { flex: 1; text-align: center; font-size: 18px; letter-spacing: -.02em; }
.qp-bar button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font: 700 28px/1 Outfit, "Segoe UI", sans-serif;
}
.qp-body { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 16px; touch-action: pan-y; }
#qpAdd[hidden] { display: none !important; }
.qp-billedit {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 0 16px;
  margin: 0;
}
.qp-billedit > .qp-card {
  margin-top: 0;
  margin-bottom: 8px;
  padding: 10px 10px 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.qp-billedit > .qp-card h3 {
  margin: 0 0 2px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1d4ed8;
}
.qp-billedit .qp-field {
  display: grid;
  gap: 2px;
  margin-top: 6px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #64748b;
}
.qp-billedit .qp-field input,
.qp-billedit .qp-field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: 36px;
  border-radius: 10px;
  padding: 0 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  background: #f8fafc;
  border-color: #e2e8f0;
}
.qp-billedit .qp-field textarea {
  min-height: 40px;
  padding: 8px 10px;
  resize: vertical;
}
.qp-billedit .qp-save,
.qp-billedit .qp-go {
  width: 100%;
  box-sizing: border-box;
}
.qp-bill-line {
  margin: 0 0 6px;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e8eef6;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .04);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.qp-bill-line:last-child { margin-bottom: 0; }
.qp-bill-main {
  display: grid;
  gap: 4px;
}
.qp-bill-line .qp-field { margin-top: 0; }
.qp-bill-line .qp-field span {
  display: block;
  margin-bottom: 2px;
  font: 700 9px/1 Outfit, "Segoe UI", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.qp-bill-line .qp-field input {
  height: 34px !important;
  border-radius: 8px;
  padding: 0 9px;
  font-weight: 650;
  background: #f8fafc;
}
.qp-bill-nums {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #eef2f7;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.qp-bill-nums .qp-field { margin-top: 0; min-width: 0; }
.qp-bill-nums .qp-field input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 6px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.qp-billedit .qp-save {
  height: 44px;
  margin-top: 4px;
  border-radius: 12px;
  font-size: 15px;
}
.qp-billedit .qp-go {
  margin-top: 6px;
  height: 40px;
}
.qp-search {
  display: block;
  margin: 0;
}
.qp-search input {
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  padding: 0 14px;
  font: 600 15px/1 Outfit, "Segoe UI", sans-serif;
}
.qp-filterbar { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.qp-filters { display: flex; gap: 8px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; }
.qp-edit {
  flex: none;
  height: 32px;
  border: 0;
  background: transparent;
  color: #1d4ed8;
  padding: 0 2px;
  font: 750 13px/1 Outfit, "Segoe UI", sans-serif;
}
.qp-filters::-webkit-scrollbar { display: none; }
.qp-filters button {
  flex: none;
  border: 0;
  border-radius: 999px;
  background: #e8eef8;
  color: #475569;
  padding: 8px 12px;
  font: 700 12px/1 Outfit, "Segoe UI", sans-serif;
}
.qp-filters button.is-on { background: #2563eb; color: #fff; }
.qp-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin: 0 0 8px;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .04);
}
.qp-row.is-menu { z-index: 5; }
.qp-open {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 2px;
}
.qp-ava {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font: 800 14px/1 Outfit, "Segoe UI", sans-serif;
}
.qp-row b { display: block; font-size: 15px; color: #122033; }
.qp-row small, .qp-meta { display: block; margin-top: 2px; color: #64748b; font-size: 12px; font-weight: 650; }
.qp-biz-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 0 0 12px;
}
.qp-biz-kpi {
  padding: 10px 10px 8px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e8eef6;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .04);
}
.qp-biz-kpi span { display: block; font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .03em; }
.qp-biz-kpi b { display: block; margin-top: 4px; font-size: 15px; font-weight: 800; letter-spacing: -.03em; color: #0f172a; font-variant-numeric: tabular-nums; }
.qp-biz-kpi.is-sales b { color: #1d4ed8; }
.qp-open.is-biz {
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 10px;
}
.qp-biz-amt {
  text-align: right;
  min-width: 0;
}
.qp-biz-amt strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.qp-biz-amt em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 11px;
  font-weight: 650;
  color: #94a3b8;
}
.qp-bill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .04);
  text-align: left;
  color: inherit;
}
.qp-bill-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin: 0 0 8px;
}
.qp-bill-edit {
  flex: none;
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  background: #eef4ff;
  color: #1d4ed8;
  font: 700 12px/1 Outfit, "Segoe UI", sans-serif;
}
.qp-bill-row b { display: block; font-size: 14px; color: #122033; }
.qp-bill-row small { display: block; margin-top: 3px; color: #64748b; font-size: 12px; font-weight: 650; }
.qp-bill-row strong {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.qp-prod {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e8eef6;
}
.qp-prod-h {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.qp-prod-h b { font-size: 13px; color: #0f172a; }
.qp-prod-h strong { font-size: 13px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qp-prod small { display: block; margin-top: 4px; color: #64748b; font-size: 11px; font-weight: 650; line-height: 1.35; }
.qp-prod .qp-line { margin-top: 6px; padding-top: 0; border: 0; }
.qp-wa {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #ecfdf3;
  color: #16a34a;
}
.qp-wa svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.qp-side { display: flex; align-items: center; gap: 0; }
.qp-more {
  width: 32px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #64748b;
  font: 800 20px/1 Outfit, "Segoe UI", sans-serif;
}
.qp-add {
  width: 100%;
  height: 42px;
  margin: 0 0 10px;
  border: 0;
  border-radius: 12px;
  background: #2563eb;
  color: #fff;
  font: 750 14px/1 Outfit, "Segoe UI", sans-serif;
}
.qp-menu {
  position: absolute;
  right: 6px;
  top: 40px;
  z-index: 2;
  width: 148px;
  display: flex;
  flex-direction: column;
  padding: 4px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
}
.qp-menu button {
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #122033;
  text-align: left;
  padding: 0 10px;
  font: 650 13px/1 Outfit, "Segoe UI", sans-serif;
}
.qp-menu button.is-del { background: transparent; color: #dc2626; }
.qp-sector { padding-bottom: 8px; border-bottom: 1px solid #eef2f7; }
.qp-sector-f { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; color: #64748b; font-size: 12px; }
.qp-sector-f button { border: 0; background: transparent; color: #dc2626; font: 700 12px/1 Outfit, "Segoe UI", sans-serif; padding: 0; }
.qp-go.is-quiet { background: #eef4ff; color: #1d4ed8; }
.qp-field textarea {
  min-height: 72px;
  border: 1px solid #e7edf5;
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  color: #122033;
  font: 650 15px/1.4 Outfit, "Segoe UI", sans-serif;
  resize: vertical;
}
.qp-card {
  margin-top: 10px;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}
.qp-card h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #1d4ed8; }
.qp-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid #eef2f7; font-size: 14px; }
.qp-line span { color: #64748b; }
.qp-sample {
  display: inline-block;
  margin-left: 6px;
  font-style: normal;
  padding: 2px 6px;
  border-radius: 999px;
  background: #eef4ff;
  color: #1d4ed8;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.qp-go, .qp-save {
  width: 100%;
  height: 46px;
  margin-top: 12px;
  border: 0;
  border-radius: 14px;
  background: #2563eb;
  color: #fff;
  font: 750 15px/1 Outfit, "Segoe UI", sans-serif;
}
.qp-hero { display: flex; gap: 12px; align-items: center; }
.qp-hero .qp-ava { width: 56px; height: 56px; font-size: 16px; }
.qp-field { display: grid; gap: 4px; margin-top: 10px; color: #64748b; font: 700 12px/1 Outfit, "Segoe UI", sans-serif; }
.qp-field input, .qp-field select {
  height: 44px;
  border: 1px solid #e7edf5;
  border-radius: 12px;
  background: #fff;
  padding: 0 12px;
  color: #122033;
  font: 650 15px/1 Outfit, "Segoe UI", sans-serif;
}
@media (max-width: 900px) {
  body.is-home,
  body.is-work,
  body.is-welcome {
    top: var(--app-top, 0px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--app-h, 100dvh) !important;
    min-height: var(--app-h, 100dvh) !important;
    max-height: var(--app-h, 100dvh) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #f4f7fb !important;
    overflow: hidden !important;
  }
  body.is-welcome {
    background: #07101f !important;
  }
  /* Invoice edit: page size hard-locked — keyboard must not resize shell */
  body.is-home.is-people.is-xform {
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--xform-w, 100%) !important;
    height: var(--xform-h, 100dvh) !important;
    min-height: var(--xform-h, 100dvh) !important;
    max-height: var(--xform-h, 100dvh) !important;
    max-width: 100% !important;
    overflow: hidden !important;
    transform: none !important;
  }
  body.is-home.is-people.is-xform .q-home {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    transform: none !important;
  }
  body.is-home.is-people.is-xform #qhPeople {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }
  body.is-home .q-home {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }
  body.is-home .qh-bar {
    padding: 14px 14px 14px;
    border-radius: 0;
  }
  body.is-home .qh-id strong {
    overflow: visible;
    text-overflow: unset;
  }
  body.is-home .qh-nav {
    padding: 8px 4px 10px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 60px minmax(0, 1fr) minmax(0, 1fr);
  }
  body.is-home .qh-nav button {
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
    font-size: 10px;
    padding: 0;
  }
}
@media (min-width: 901px) {
  html:not(.in-phone) body.is-home {
    align-items: center;
    background: #dfe7f2;
  }
  html:not(.in-phone) body.is-home .q-home {
    width: min(430px, 100%);
    height: 100%;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .12);
  }
  html:not(.in-phone) body.is-work {
    width: min(430px, 100%);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .12);
  }
}
.qh-work { display: none; }
body.is-work {
  --accent: #2563eb;
  --ink: #122033;
  --muted: #64748b;
  --line: #e7edf5;
  --app: #f3f6fb;
  --card: #fff;
  position: fixed !important;
  top: var(--app-top, 8px) !important;
  left: var(--app-left, 8px) !important;
  right: auto !important;
  bottom: auto !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: var(--app-w, calc(100% - 16px)) !important;
  max-width: none !important;
  height: var(--app-h, calc(100svh - 16px)) !important;
  max-height: none !important;
  min-height: 0;
  margin: 0;
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: manipulation;
  background: #0b1b3a;
  color: #122033;
  font-family: Outfit, "Segoe UI", sans-serif;
  box-shadow: none;
  border-radius: 18px;
}
html:has(body.is-work),
html:has(body.is-home),
html:has(body.is-welcome) {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #f4f7fb;
}
@supports (height: 100dvh) {
  html:has(body.is-work),
  html:has(body.is-home),
  html:has(body.is-welcome) {
    height: 100dvh;
  }
}
body.is-work .q-webhead,
body.is-work header.top,
body.is-work .tabbar,
body.is-work .device,
body.is-work .sheet,
body.is-work .qh-scroll,
body.is-work .steps { display: none !important; }
body.is-work .q-home { display: contents; }
body.is-work .qh-bar {
  grid-row: 1;
  padding: 16px;
  min-height: 0;
}
body.is-work .qh-work {
  grid-row: 2;
  display: block;
  padding: 8px 12px 0;
  background: #f3f6fb;
}
body.is-work .qh-work-h { display: none; }
body.is-work .app {
  grid-row: 3;
  display: block !important;
  min-height: 0;
  height: auto;
  margin: 0 !important;
  overflow: hidden;
  background: #f3f6fb;
}
body.is-work .qh-nav { grid-row: 4; }
body.is-work .qh-nav .qh-plus,
body.is-work .qh-nav #qhAdd,
body.is-work .qh-nav [data-home="customers"],
body.is-work .qh-nav [data-home="reports"],
body.is-work .qh-nav [data-home="more"] { display: none !important; }
body.is-work .qh-nav {
  grid-template-columns: 1fr;
  justify-items: stretch;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
}
body.is-work .qh-nav [data-home="home"] {
  width: 100%;
  max-width: none;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-radius: 14px;
  background: #eef4ff;
  color: #1d4ed8;
  font-size: 14px;
  font-weight: 750;
}
body.is-work .qh-nav [data-home="home"] svg { width: 18px; height: 18px; margin: 0; }
body.is-work .side,
body.is-work .form,
body.is-work .preview { display: none; height: 100%; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #f3f6fb; touch-action: pan-y; }
body.is-work[data-tab="docs"] .side { display: block; }
body.is-work[data-tab="client"] .form,
body.is-work[data-tab="product"] .form,
body.is-work[data-tab="rate"] .form { display: flex; overflow: hidden; }
body.is-work[data-tab="preview"] .preview {
  display: flex;
  flex-direction: column;
  background: #dbe4f0;
  padding: 0;
  min-height: 0;
  height: 100%;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y !important;
}
body.is-work[data-tab="preview"] .pdf-actions {
  flex: none;
  position: relative;
  z-index: 6;
}
body.is-work[data-tab="preview"] .qh-nav { display: none !important; }
body.is-work[data-tab="preview"] { grid-template-rows: auto auto minmax(0, 1fr); }
body.is-work[data-tab="preview"] .app {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
body.is-work[data-tab="docs"] .qh-nav { display: grid; }
.qh-work-h h2 { margin: 0; font-size: 20px; letter-spacing: -.03em; color: #122033; }
.qh-work-h p { margin: 4px 0 10px; color: #64748b; font-size: 13px; line-height: 1.45; }
.qh-steps { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.qh-steps::-webkit-scrollbar { display: none; }
.qh-steps button {
  flex: none;
  border: 0;
  background: #fff;
  color: #64748b;
  border-radius: 999px;
  padding: 8px 12px;
  font: 700 12px/1 Outfit, "Segoe UI", sans-serif;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .05);
}
.qh-steps button.is-on { background: #2563eb; color: #fff; }
body.is-work .side { padding: 4px 14px 18px; color: #122033; }
body.is-work .side-lead, body.is-work .side-note { display: none; }
body.is-work .q-who { display: none !important; }
body.is-work .doc {
  grid-template-columns: minmax(0, 1fr) 44px;
  background: #fff;
  color: #122033;
  border: 1px solid #e8eef6;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}
body.is-work .doc small { color: #64748b; }
body.is-work .doc-amt { color: #1d4ed8; font-size: 13px; }
body.is-work .doc-go { background: #eef4ff; color: #1d4ed8; }
body.is-work .doc.is-on {
  background: #eef4ff;
  border-color: #bfdbfe;
  box-shadow: inset 3px 0 0 #2563eb, 0 8px 20px rgba(29, 78, 216, .08);
}
body.is-work .doc.is-on .doc-go {
  background: #dbeafe;
  color: #1e3a8a;
}
body.is-work .card { border: 0; border-radius: 20px; box-shadow: 0 8px 20px rgba(15, 23, 42, .05); }
body.is-work .card-h > span,
body.is-work .shelf { color: #1d4ed8; letter-spacing: .08em; }
body.is-work .field input,
body.is-work .field textarea,
body.is-work .nums input,
body.is-work .search input {
  background: #f8fafc;
  border: 1px solid #e7edf5;
  border-radius: 12px;
}
body.is-work .pill.is-on,
body.is-work .go-next { background: #2563eb; color: #fff; }
body.is-work .seg { background: #eef4ff; }
body.is-work .seg button.is-on { color: #1d4ed8; }
body.is-work .line { background: #fff; }
body.is-work .form-scroll {
  padding: 8px 14px 16px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
body.is-work .chips { touch-action: pan-x; -webkit-overflow-scrolling: touch; }
body.is-work .qh-steps { touch-action: pan-x; -webkit-overflow-scrolling: touch; }
body.is-work[data-step="client"] .form,
body.is-work[data-step="client"] .form-scroll { overflow: auto !important; }
body.is-work[data-step="client"] .adv { display: flex; }
body.is-work[data-step="client"] .story { display: block; }
body.is-work[data-tab="client"] .qh-nav,
body.is-work[data-tab="product"] .qh-nav,
body.is-work[data-tab="rate"] .qh-nav { display: none !important; }
body.is-work[data-tab="client"],
body.is-work[data-tab="product"],
body.is-work[data-tab="rate"] { grid-template-rows: auto auto minmax(0, 1fr); }
body.is-work .form-total {
  margin: 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-radius: 0;
  border-top: 1px solid #e7edf5;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, .04);
  background: #fff;
}
body.is-work .dock-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
body.is-work .dock-home {
  flex: none;
  height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: #eef4ff;
  color: #1d4ed8;
  font: 700 13px/1 Outfit, "Segoe UI", sans-serif;
}
body.is-work .sum-break { display: none !important; }
body.is-work .sum-toggle { min-width: 0; overflow: hidden; }
body.is-work .sum-toggle small {
  font-size: 10px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.is-work .sum-toggle b { font-size: 17px; color: #122033; }
body.is-work .go-next { min-height: 42px; padding: 0 14px; border-radius: 12px; white-space: nowrap; }
body.is-work .line-bar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin: 0;
}
body.is-work .line-bar .seg.mini { margin: 0; }
body.is-work .product-tools {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}
body.is-work .product-tools .search { margin: 0; }
body.is-work .search { margin-top: 0; }
body.is-work .card { margin-bottom: 10px; padding: 12px; }
body.is-work .card-h { margin-bottom: 8px; }
body.is-work .type-card .chips { flex-wrap: wrap; overflow: visible; gap: 6px; }
body.is-work .grid { gap: 10px; }
body.is-work .field { gap: 4px; }
body.is-work .field input,
body.is-work .field textarea { padding: 10px 11px; }
body.is-work[data-tab="client"] .form-scroll {
  padding-bottom: 24px;
}
body.is-work[data-tab="client"] .client-card {
  display: block !important;
  flex: none !important;
  overflow: visible !important;
}
body.is-work[data-tab="client"] .addr {
  grid-column: 1 / -1;
  margin-top: 0;
}
body.is-work[data-tab="client"] .addr span {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}
body.is-work[data-tab="client"] .addr textarea {
  min-height: 88px;
  height: 88px;
  resize: vertical;
  line-height: 1.4;
}
body.is-work .cat-edit {
  border: 0;
  border-radius: 999px;
  background: #eef4ff;
  color: #1d4ed8;
  padding: 7px 12px;
  font: 700 13px/1 Outfit, "Segoe UI", sans-serif;
}
body.is-work .opt-note {
  margin: 8px 2px 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.is-work .opt-row {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #e7edf5;
  border-radius: 16px;
  background: #fff;
}
body.is-work .opt-row.is-on {
  border-color: #bfdbfe;
  box-shadow: inset 3px 0 0 #2563eb;
}
body.is-work .opt-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
body.is-work .opt-use {
  border: 0;
  background: transparent;
  padding: 0;
  color: #64748b;
  font: 700 12px/1 Outfit, "Segoe UI", sans-serif;
  letter-spacing: .04em;
}
body.is-work .opt-row.is-on .opt-use { color: #1d4ed8; }
body.is-work .opt-remove,
body.is-work .line-remove {
  border: 0;
  background: transparent;
  padding: 0;
  color: #9a3b32;
  font: 700 12px/1 Outfit, "Segoe UI", sans-serif;
}
body.is-work .cat-card .field { margin-top: 8px; }
body.is-work .cat-card .field textarea { min-height: 64px; }
body.is-work .cat-add,
body.is-work .add {
  border: 0;
  background: #eef4ff;
  color: #1d4ed8;
  font-family: Outfit, "Segoe UI", sans-serif;
}
body.is-work[data-step="rate"] .line-copy em { display: block; color: #64748b; }
body.is-work .opt-name { color: #122033; font: 700 15px/1.3 Outfit, "Segoe UI", sans-serif; }
body.is-work .opt-top .switch { margin: 0; }
body.is-work .opt-row .nums { margin-top: 8px; padding-top: 0; border-top: 0; }
body.is-work .opt-row .field textarea { min-height: 64px; }
body.is-work .pdf-actions {
  display: grid;
  grid-template-columns: 1fr;
  flex: none;
  z-index: 4;
  width: 100%;
  background: #fff;
  border-top: 1px solid #e7edf5;
}
body.is-work .pdf-actions.has-save {
  grid-template-columns: 1fr 1fr;
}
body.is-work .pdf-save {
  display: block;
  margin: 0;
  height: 52px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #22c55e, #15803d);
  color: #fff;
  font: 800 13px/1 Outfit, "Segoe UI", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
body.is-work .pdf-save[hidden] { display: none !important; }
body.is-work .pdf-save:active { filter: brightness(.96); }
body.is-work .pdf-actions .pdf-down,
body.is-work .pdf-actions .pdf-save {
  border-radius: 0 !important;
  height: 52px !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
body.is-work .pdf-down {
  position: relative;
  flex: none;
  z-index: 4;
  color: #fff;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  box-shadow: none;
  animation: none;
  margin: 0;
  width: 100%;
  max-width: none;
  height: 52px;
  letter-spacing: .08em;
  font-size: 13px;
  font-weight: 800;
}
body.is-work .pdf-down:after { display: none; }
body.is-work .pdf-stage {
  flex: none;
  min-height: 0;
  height: auto;
  overflow: visible !important;
  padding: 18px 16px 12px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
body.is-work .paper-scale {
  flex: none;
  margin: 0 auto;
  overflow: visible !important;
  max-width: 100%;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
body.is-work .paper {
  margin: 0;
  box-shadow: none;
}
body.is-work .paper .cover,
body.is-work .paper .inner {
  box-shadow: none;
  margin-bottom: 12px;
}
body.is-work[data-tab="preview"] .preview {
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
  min-height: 0;
  height: 100%;
}
body.is-work[data-tab="preview"] .pdf-stage {
  flex: none !important;
  height: auto !important;
  min-height: 0;
  overflow: visible !important;
}
body.is-work[data-tab="preview"] .pdf-stage,
body.is-work[data-tab="preview"] .paper-scale,
body.is-work[data-tab="preview"] .paper,
body.is-work[data-tab="preview"] .paper * {
  touch-action: pan-y !important;
}
body.is-work[data-tab="preview"] .page-bar:not([hidden]) {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  flex: none;
  margin: 0;
  padding: 10px 12px;
  border-radius: 0;
  background: #fff;
  color: #1d4ed8;
  font: 800 10px/1.2 Outfit, "Segoe UI", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
  border-bottom: 1px solid #e8eef6;
}
body.is-work[data-tab="preview"] .page-bar > span {
  min-width: 0;
  text-align: center;
  color: #64748b;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.is-work[data-tab="preview"] .page-bar .dock-home {
  height: 34px;
  padding: 0 10px;
  font-size: 12px;
}
body.is-work[data-tab="preview"] .page-bar .cat-edit {
  border: 0;
  border-radius: 999px;
  background: #eef4ff;
  color: #1d4ed8;
  padding: 7px 12px;
  font: 700 12px/1 Outfit, "Segoe UI", sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.page-bar[hidden], .pages[hidden] { display: none !important; }
body.is-work.pages-on .paper-scale,
body.is-work.pages-on .pdf-actions,
body.is-work.pages-on .pdf-down,
body.is-work.pages-on .pdf-save,
body.is-work.pages-on .page-bar { display: none !important; }
body.is-work.pages-on .pages:not([hidden]) {
  display: block;
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 14px 24px;
}
.page-lead { margin: 0 0 12px; color: #64748b; font-size: 13px; line-height: 1.45; }
.page-slots, .page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.page-slot, .img-box {
  border: 1px solid #e7edf5;
  background: #fff;
  border-radius: 16px;
  padding: 8px;
  text-align: left;
  color: #122033;
}
.page-slot.is-on, .img-box.is-used { border-color: #2563eb; box-shadow: inset 0 0 0 1px #2563eb; }
.page-thumb, .img-pic {
  display: block;
  height: 108px;
  border-radius: 12px;
  background: #e8eef6 center/cover no-repeat;
}
.img-pic.is-empty {
  display: grid;
  place-items: center;
  border: 1px dashed #cbd5e1;
  color: #64748b;
  font: 700 11px/1.3 Outfit, "Segoe UI", sans-serif;
  text-align: center;
  padding: 8px;
}
.page-slot b, .img-box b { display: block; margin-top: 8px; font-size: 13px; }
.page-slot small, .page-slot em, .img-box small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-style: normal;
  font-size: 11px;
  font-weight: 650;
}
.page-picks { display: flex; gap: 8px; margin: 10px 0 14px; }
.page-picks .pill { flex: 1; }
.img-actions { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 8px; }
.img-actions button {
  border: 0;
  background: transparent;
  padding: 0;
  color: #1d4ed8;
  font: 700 12px/1 Outfit, "Segoe UI", sans-serif;
}
.img-actions .is-danger { color: #9a3b32; }
.paper .cover.is-photo, .paper .inner.is-photo { background: #111; }
.paper .cover.is-photo img, .paper .inner.is-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.is-work .toast { bottom: 92px; background: #122033; }
@media print {
  body.is-work { display: block !important; width: auto !important; height: auto !important; box-shadow: none !important; }
  body.is-work .q-home,
  body.is-work .qh-work { display: none !important; }
  body.is-work .app { display: block !important; }
}

@keyframes qShine {
  0%, 58% { transform: translateX(-120%); }
  78%, 100% { transform: translateX(120%); }
}
@keyframes qRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes qGrow {
  from { transform: scaleY(0); opacity: .35; }
  to { transform: none; opacity: 1; }
}
@keyframes qDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes qDot {
  to { opacity: 1; transform: none; }
}
.qh-stat { animation: qRise .45s cubic-bezier(.2,.8,.2,1) both; }
.qh-stat:nth-child(1) { animation-delay: .04s; }
.qh-stat:nth-child(2) { animation-delay: .1s; }
.qh-stat:nth-child(3) { animation-delay: .16s; }
.qh-stat:nth-child(4) { animation-delay: .22s; }
.qh-card.is-trend { animation: qRise .5s .18s cubic-bezier(.2,.8,.2,1) both; }
.qh-card.is-actions { animation: qRise .5s .26s cubic-bezier(.2,.8,.2,1) both; }
.qh-grow {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: qGrow .7s cubic-bezier(.2,.8,.2,1) both;
}
.qh-line {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: qDraw 1.1s .18s ease forwards;
}
.qh-area { opacity: 0; animation: qRise .55s .4s ease forwards; }
.qh-dot {
  fill: #fff;
  stroke: #16a34a;
  stroke-width: 2.1;
  opacity: 0;
  transform: scale(.35);
  transform-box: fill-box;
  animation: qDot .32s ease forwards;
}
.st-pulse {
  animation: qDot .32s ease forwards, stPulse 1.5s .5s ease-in-out infinite;
}
@keyframes stPulse {
  50% { transform: scale(1.35); }
}
.st-track { fill: #eef3fb; }
.st-exp { fill: #fb7185; opacity: .85; }
.st-grid { stroke: #e8eef6; stroke-width: 1; stroke-dasharray: 3 4; }
.st-lab { font-size: 9px; font-weight: 700; fill: #94a3b8; }
.st-lab.is-now { fill: #1e3a8a; }
.st-val { font-size: 9px; font-weight: 800; fill: #1d4ed8; }
.st-mask {
  position: absolute;
  inset: 0;
  z-index: 28;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 10px 0;
  background: rgba(15, 23, 42, .38);
}
.st-mask[hidden] { display: none; }
.st-pick {
  width: min(100%, 400px);
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 0 0 22px 22px;
  background: linear-gradient(180deg, #fff, #f7faff);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .22);
  animation: stDrop .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes stDrop {
  from { opacity: 0; transform: translateY(-22px); }
  to { opacity: 1; transform: none; }
}
.st-pick-h { display: flex; align-items: center; justify-content: space-between; }
.st-pick-h strong { font-size: 15px; letter-spacing: -.02em; }
.st-pick-h button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  font: 700 18px/1 Outfit, "Segoe UI", sans-serif;
}
.st-dates { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.st-dates label { display: grid; gap: 3px; color: #64748b; font: 750 10px/1 Outfit, "Segoe UI", sans-serif; }
.st-dates input,
.st-dates select {
  height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0 8px;
  background: #fff;
  font: 700 11px/1 Outfit, "Segoe UI", sans-serif;
  color: #0f172a;
}
.st-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.st-presets button {
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font: 750 11px/1 Outfit, "Segoe UI", sans-serif;
  color: #334155;
}
.st-kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.st-kpis span {
  padding: 7px 8px;
  border-radius: 12px;
  background: #eff6ff;
}
.st-kpis em { display: block; font-style: normal; font-size: 10px; color: #64748b; font-weight: 700; }
.st-kpis b { display: block; margin-top: 2px; font-size: 13px; color: #1d4ed8; }
.st-kpis .is-e { background: #fff1f2; }
.st-kpis .is-e b { color: #e11d48; }
.st-kpis .is-p { background: #f0fdf4; }
.st-kpis .is-p b { color: #16a34a; }
.st-legend { color: #64748b; font-size: 10px; font-weight: 700; display: flex; gap: 10px; align-items: center; }
.st-legend i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 99px; }
.st-legend i.is-sales { background: #2563eb; }
.st-legend i.is-exp { background: #fb7185; }
.st-legend i.is-profit { background: #16a34a; }
.st-chart { height: auto; }
.st-chart svg { width: 100%; height: 96px; display: block; }
.st-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.qh-ico { transition: transform .18s ease, box-shadow .18s ease; }
.qh-acts button:hover .qh-ico { transform: translateY(-2px); }
.qh-acts button:active .qh-ico { transform: scale(.94); }
.qh-bell { transition: transform .2s ease, background .2s ease; }
.qh-bell:active { transform: rotate(-14deg) scale(.96); }
.qh-nav button { transition: color .18s ease; }
.qh-soon-card { animation: qPop .38s cubic-bezier(.2,.8,.2,1) both; box-shadow: 0 22px 48px rgba(15, 23, 42, .18); }
.qh-steps button { transition: background .2s ease, color .2s ease, transform .16s ease; }
.qh-steps button:active { transform: scale(.97); }
.doc { transition: transform .16s ease, box-shadow .16s ease; }
body.is-work .doc:active { transform: scale(.99); }
@media (prefers-reduced-motion: reduce) {
  .qh-bar::after, .qh-stat, .qh-card.is-trend, .qh-card.is-actions,
  .qh-grow, .qh-line, .qh-area, .qh-dot, .qh-soon-card, .q-login,
  .pl-stats article, .pl-card, .pl-bar, .pl-line, .pl-dot, .pl-ring .is-val,
  .st-pick, .st-pulse, .sec-pick, .sec-row { animation: none !important; }
}
.sec-mask {
  position: fixed;
  inset: 0;
  z-index: 42;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(4px);
}
.sec-mask[hidden] { display: none; }
.sec-pick {
  width: min(100%, 420px);
  max-height: min(78vh, 640px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 14px 14px 16px;
  border-radius: 22px 22px 20px 20px;
  background: linear-gradient(180deg, #fff 0%, #f7faff 100%);
  box-shadow: 0 24px 56px rgba(15, 23, 42, .24);
  animation: secDrop .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes secDrop {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
.sec-pick-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sec-pick-h strong { font-size: 16px; letter-spacing: -.03em; color: #0f172a; }
.sec-pick-h button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: #0f172a;
  font: 700 20px/1 Outfit, "Segoe UI", sans-serif;
}
.sec-pick-lead { margin: 0; color: #64748b; font-size: 12px; line-height: 1.45; }
.sec-list {
  display: grid;
  gap: 8px;
  overflow: auto;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}
.sec-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 24px;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: 1px solid #e8eef6;
  border-radius: 16px;
  background: #fff;
  text-align: left;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .04);
  transition: border-color .18s ease, box-shadow .18s ease, transform .16s ease;
}
.sec-row:active { transform: scale(.99); }
.sec-row.is-on {
  border-color: #93c5fd;
  background: linear-gradient(180deg, #eff6ff, #fff);
  box-shadow: inset 3px 0 0 #2563eb, 0 8px 20px rgba(29, 78, 216, .08);
}
.sec-row-ico {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eef4ff;
  font-size: 22px;
}
.sec-row-main { min-width: 0; display: grid; gap: 2px; }
.sec-row-main b { font-size: 14px; color: #0f172a; letter-spacing: -.02em; }
.sec-row-main small { color: #64748b; font-size: 11px; }
.sec-row-types { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sec-row-types span {
  padding: 3px 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font: 700 9px/1 Outfit, "Segoe UI", sans-serif;
  letter-spacing: .02em;
}
.sec-row-amt { color: #1d4ed8; font: 800 12px/1 Outfit, "Segoe UI", sans-serif; white-space: nowrap; }
.sec-row-check { color: #2563eb; font: 800 14px/1 Outfit, "Segoe UI", sans-serif; }
.sec-pane { display: grid; gap: 12px; padding: 8px 2px 16px; }
.sec-pane-k {
  margin: 0;
  color: #64748b;
  font: 750 11px/1 Outfit, "Segoe UI", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sec-hero {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e8eef6;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}
.sec-hero.is-on {
  background: linear-gradient(135deg, #eff6ff, #fff);
  border-color: #bfdbfe;
  box-shadow: inset 3px 0 0 #2563eb, 0 10px 24px rgba(29, 78, 216, .08);
}
.sec-ico {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #eef4ff;
  font-size: 24px;
}
.sec-meta { min-width: 0; display: grid; gap: 2px; }
.sec-meta b { font-size: 15px; color: #0f172a; letter-spacing: -.02em; }
.sec-meta small { color: #64748b; font-size: 12px; }
.sec-amt { color: #1d4ed8; font: 800 13px/1 Outfit, "Segoe UI", sans-serif; }
.sec-type {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
}
.sec-type strong { color: #0f172a; font-weight: 700; }
.sec-open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 46px;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  background: #fff;
  color: #1d4ed8;
  font: 800 13px/1 Outfit, "Segoe UI", sans-serif;
  letter-spacing: .02em;
  box-shadow: 0 6px 16px rgba(37, 99, 235, .08);
}
.sec-open svg { width: 16px; height: 16px; opacity: .85; }
.sec-continue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 14px;
  background: #0f172a;
  color: #fff;
  font: 800 13px/1 Outfit, "Segoe UI", sans-serif;
}
.sec-continue svg { width: 16px; height: 16px; }
.sec-bar { padding: 8px 14px 0; flex: none; }
.sec-bar-slot:not([hidden]) { flex: none; padding: 0 10px 8px; background: #fff; border-bottom: 1px solid #e8eef6; }
.sec-bar-slot .sec-bar { padding: 8px 4px 0; }
.sec-chip {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 18px;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  text-align: left;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
}
.sec-chip-ico {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eef4ff;
  font-size: 20px;
}
.sec-chip-copy { min-width: 0; display: grid; gap: 1px; }
.sec-chip-copy em {
  color: #64748b;
  font: 750 9px/1 Outfit, "Segoe UI", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-style: normal;
}
.sec-chip-copy b { font-size: 13px; color: #0f172a; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-chip-copy small { color: #64748b; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-chip-amt { color: #1d4ed8; font: 800 12px/1 Outfit, "Segoe UI", sans-serif; }
.sec-chip-go { width: 18px; height: 18px; color: #94a3b8; }
body.is-work[data-tab="client"] .form,
body.is-work[data-tab="product"] .form,
body.is-work[data-tab="rate"] .form { display: flex; flex-direction: column; overflow: hidden; }
.co-pane {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e8eef6;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}
.co-pane-k {
  margin: 0;
  color: #64748b;
  font: 750 11px/1 Outfit, "Segoe UI", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.co-sum { display: grid; gap: 4px; }
.co-sum b { font-size: 14px; color: #0f172a; letter-spacing: -.02em; }
.co-sum small { color: #1d4ed8; font: 700 11px/1.4 Outfit, "Segoe UI", sans-serif; }
.co-sum span { color: #64748b; font-size: 12px; line-height: 1.4; }
.co-empty { margin: 0; color: #64748b; font-size: 12px; line-height: 1.45; }
.co-open {
  width: 100%;
  min-height: 42px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #f8fbff;
  color: #1d4ed8;
  font: 800 12px/1 Outfit, "Segoe UI", sans-serif;
}
.co-mask {
  position: fixed;
  inset: 0;
  z-index: 43;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(4px);
}
.co-mask[hidden] { display: none; }
.co-pick {
  width: min(100%, 420px);
  max-height: min(86vh, 680px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 14px 14px 16px;
  border-radius: 22px 22px 20px 20px;
  background: linear-gradient(180deg, #fff, #f7faff);
  box-shadow: 0 24px 56px rgba(15, 23, 42, .24);
  animation: secDrop .3s cubic-bezier(.2,.8,.2,1);
}
.co-pick-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.co-pick-h strong { font-size: 16px; letter-spacing: -.03em; color: #0f172a; }
.co-pick-h button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: #0f172a;
  font: 700 20px/1 Outfit, "Segoe UI", sans-serif;
}
.co-pick-lead { margin: 0; color: #64748b; font-size: 12px; line-height: 1.45; }
.co-form {
  display: grid;
  gap: 8px;
  overflow: auto;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}
.co-form label {
  display: grid;
  gap: 4px;
  color: #64748b;
  font: 750 10px/1 Outfit, "Segoe UI", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.co-form input,
.co-form textarea {
  min-height: 40px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  font: 600 13px/1.35 Outfit, "Segoe UI", sans-serif;
  color: #0f172a;
  letter-spacing: 0;
  text-transform: none;
}
.co-form textarea { min-height: 64px; resize: vertical; }
.co-save {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font: 800 13px/1 Outfit, "Segoe UI", sans-serif;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .28);
}
.cr-page { display: grid; gap: 10px; }
.cr-top { position: relative; display: grid; grid-template-columns: 1fr 36px; gap: 8px; align-items: center; }
.pl-mask {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: end center;
  padding: 16px 16px 28px;
  background: rgba(15, 23, 42, .4);
}
.pl-mask[hidden] { display: none; }
.pl-pick {
  display: grid;
  gap: 8px;
  width: min(100%, 400px);
  padding: 14px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 48px rgba(15, 23, 42, .22);
}
.pl-pick-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pl-pick-h strong { font-size: 16px; letter-spacing: -.02em; }
.pl-pick-h button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: #0f172a;
  font: 700 20px/1 Outfit, "Segoe UI", sans-serif;
}
.pl-pick label { display: grid; gap: 4px; color: #64748b; font: 750 11px/1 Outfit, "Segoe UI", sans-serif; }
.pl-pick input[type="date"] {
  height: 40px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0 10px;
  font: 650 14px/1 Outfit, "Segoe UI", sans-serif;
  color: #0f172a;
  background: #f8fafc;
}
.pl-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-presets button {
  height: 30px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  padding: 0 10px;
  font: 700 11px/1 Outfit, "Segoe UI", sans-serif;
}
.pl-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pl-cut, .pl-apply {
  height: 40px;
  border: 0;
  border-radius: 12px;
  font: 750 14px/1 Outfit, "Segoe UI", sans-serif;
}
.pl-cut { background: #f1f5f9; color: #0f172a; }
.pl-apply { background: #1d4ed8; color: #fff; }
.qr-page { display: grid; gap: 10px; }
.cr-range {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #1d4ed8;
  font: 750 13px/1 Outfit, "Segoe UI", sans-serif;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
  cursor: pointer;
}
.cr-range svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cr-more {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #1e3a8a;
  font: 800 18px/1 Outfit, "Segoe UI", sans-serif;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
}
.cr-pop {
  position: absolute;
  top: 44px;
  right: 0;
  z-index: 8;
  width: min(92vw, 320px);
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  color: #1e3a8a;
  font: 600 12px/1.55 Outfit, "Segoe UI", sans-serif;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .16);
}
.cr-pop p { margin: 0; }
.cr-pop[hidden] { display: none; }
.cr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cr-stats article {
  position: relative;
  padding: 12px 12px 10px 48px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}
.cr-stats span { display: block; color: #64748b; font-size: 11px; font-weight: 700; }
.cr-stats b { display: block; margin-top: 4px; font-size: 16px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cr-stats i {
  position: absolute;
  left: 10px;
  top: 12px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
}
.cr-stats .is-clients i { background: #dbeafe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3'/%3E%3Cpath d='M6 18c.6-2.4 2.8-4 6-4s5.4 1.6 6 4'/%3E%3C/svg%3E") center / 18px no-repeat; }
.cr-stats .is-sales i { background: #ffedd5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='9' cy='19' r='1.4'/%3E%3Ccircle cx='17' cy='19' r='1.4'/%3E%3Cpath d='M4 5h2l2.2 10h9.3l1.8-7H8'/%3E%3C/svg%3E") center / 18px no-repeat; }
.cr-stats .is-in i { background: #dcfce7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='m8.5 12.5 2.2 2.2 4.8-5'/%3E%3C/svg%3E") center / 18px no-repeat; }
.cr-stats .is-due i { background: #ffedd5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v5l3 2'/%3E%3C/svg%3E") center / 18px no-repeat; }
.cr-stats .is-clients b { color: #1d4ed8; }
.cr-stats .is-sales b { color: #ea580c; }
.cr-stats .is-in b { color: #16a34a; }
.cr-stats .is-due b { color: #ea580c; }
.cr-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}
.cr-search svg { width: 18px; height: 18px; fill: none; stroke: #94a3b8; stroke-width: 1.8; flex: none; }
.cr-search input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; font: 600 14px/1 Outfit, "Segoe UI", sans-serif; }
.cr-table { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 8px 20px rgba(15, 23, 42, .05); }
.cr-head, .cr-row {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) 0.72fr 0.8fr 0.88fr;
  width: 100%;
  align-items: center;
  box-sizing: border-box;
}
.cr-head {
  padding: 10px 8px 8px;
  color: #64748b;
  font: 650 10px/1.2 Outfit, "Segoe UI", sans-serif;
  background: #fff;
  border-bottom: 1px solid #eef2f7;
}
.cr-head span, .cr-row > span {
  min-width: 0;
  padding: 0 4px;
  overflow: visible;
  overflow-wrap: anywhere;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cr-head span:first-child, .cr-row > span:first-child { text-align: left; padding-left: 10px; }
.cr-head span:last-child, .cr-row > span:last-child { padding-right: 10px; }
.cr-head .is-in { color: #16a34a; }
.cr-head .is-due { color: #2563eb; }
.cr-row {
  min-height: 58px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid #eef2f7;
  background: #fff;
  color: #0f172a;
  font: 700 11px/1.25 Outfit, "Segoe UI", sans-serif;
}
.cr-row:last-of-type { border-bottom: 0; }
.cr-row:active { background: #f8fafc; }
.cr-who { display: flex; align-items: center; gap: 8px; }
.cr-who em {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}
.cr-who b {
  min-width: 0;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: -.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}
.cr-row .is-in { color: #16a34a; }
.cr-row .is-due { color: #2563eb; }
.cr-row .is-due.is-zero { color: #16a34a; }
.cr-empty { margin: 0; padding: 18px 12px; text-align: center; color: #64748b; font-size: 13px; }
.cr-row[hidden] { display: none; }
body.is-home.is-report .qp-bar { background: linear-gradient(135deg, #1d4ed8, #2563eb); }
.er-page { display: grid; gap: 10px; }
.er-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.er-stats article {
  position: relative;
  padding: 12px 12px 10px 48px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}
.er-stats span { display: block; color: #64748b; font-size: 11px; font-weight: 700; }
.er-stats b { display: block; margin-top: 4px; font-size: 18px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.er-stats i { position: absolute; left: 10px; top: 12px; width: 30px; height: 30px; border-radius: 10px; }
.er-stats .is-out i { background: #fee2e2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E") center / 18px no-repeat; }
.er-stats .is-tx i { background: #dbeafe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='2'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E") center / 18px no-repeat; }
.er-stats .is-out b { color: #dc2626; }
.er-stats .is-tx b { color: #2563eb; }
.er-donut-card, .er-list {
  padding: 12px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}
.er-donut-card h3, .er-list h3 { margin: 0 0 10px; font-size: 15px; letter-spacing: -.02em; }
.er-donut-wrap { display: grid; grid-template-columns: 132px 1fr; gap: 12px; align-items: center; }
.er-donut {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .04);
}
.er-donut span {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-content: center;
  text-align: center;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
}
.er-donut b { display: block; color: #0f172a; font-size: 12px; letter-spacing: -.03em; }
.er-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.er-legend li { display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: center; color: #334155; font-size: 11px; font-weight: 650; }
.er-legend i { width: 8px; height: 8px; border-radius: 50%; }
.er-legend b { color: #0f172a; font-variant-numeric: tabular-nums; }
.er-head, .er-row {
  display: grid;
  grid-template-columns: .9fr 1.1fr .8fr;
  gap: 6px;
  align-items: center;
  padding: 8px 2px;
  font-size: 12px;
}
.er-head { color: #64748b; font-size: 10px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; border-bottom: 1px solid #eef2f7; }
.er-row { border-top: 1px solid #f1f5f9; color: #0f172a; font-weight: 650; font-variant-numeric: tabular-nums; }
.er-row strong { text-align: right; font-weight: 800; }
.er-head span:last-child, .er-row strong { text-align: right; }
.pl-page { display: grid; gap: 10px; width: 100%; max-width: 100%; overflow-x: hidden; box-sizing: border-box; }
.pl-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pl-stats article {
  position: relative;
  min-width: 0;
  padding: 12px 10px 10px 44px;
  border-radius: 14px;
  border: 1px solid #eef2f7;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
  animation: qRise .45s cubic-bezier(.2, .8, .2, 1) both;
}
.pl-stats article:nth-child(1) { animation-delay: .04s; }
.pl-stats article:nth-child(2) { animation-delay: .1s; }
.pl-stats article:nth-child(3) { animation-delay: .16s; }
.pl-stats article:nth-child(4) { animation-delay: .22s; }
.pl-stats span { display: block; color: #64748b; font-size: 10px; font-weight: 700; letter-spacing: .02em; white-space: normal; overflow: visible; }
.pl-stats b { display: block; margin-top: 5px; font-size: 15px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.pl-stats i {
  position: absolute;
  left: 8px;
  top: 11px;
  width: 28px;
  height: 28px;
  border-radius: 9px;
}
.pl-stats .is-rev i { background: #dbeafe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 16c3-6 5-8 8-8s5 2 8 8'/%3E%3Cpath d='M12 8V4M9 7l3-3 3 3'/%3E%3C/svg%3E") center / 18px no-repeat; }
.pl-stats .is-exp i { background: #fee2e2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E") center / 18px no-repeat; }
.pl-stats .is-gross i { background: #ede9fe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 4v16M8 8c2-2 6-2 8 0M8 16c2 2 6 2 8 0'/%3E%3C/svg%3E") center / 18px no-repeat; }
.pl-stats .is-net i { background: #dcfce7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 16c4-8 10-8 14 0'/%3E%3Cpath d='m16 10 3-3 3 3'/%3E%3C/svg%3E") center / 18px no-repeat; }
.pl-stats .is-rev b { color: #2563eb; }
.pl-stats .is-exp b { color: #dc2626; }
.pl-stats .is-gross b { color: #7c3aed; }
.pl-stats .is-net b { color: #16a34a; }
.pl-card {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid #eef2f7;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
  animation: qRise .5s .2s cubic-bezier(.2, .8, .2, 1) both;
}
.pl-trend { animation-delay: .28s; }
.pl-sum { animation-delay: .36s; }
.pl-sum-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.pl-card h3 { margin: 0 0 8px; font-size: 14px; letter-spacing: -.02em; }
.pl-legend { display: flex; gap: 12px; margin: 0 0 8px; font: 700 10px/1 Outfit, "Segoe UI", sans-serif; }
.pl-legend span { display: flex; align-items: center; gap: 5px; color: #64748b; white-space: nowrap; }
.pl-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 99px; }
.pl-legend .is-rev::before { background: #3b82f6; }
.pl-legend .is-exp::before { background: #ef4444; }
.pl-legend .is-net::before { width: 12px; height: 3px; border-radius: 2px; background: #22c55e; }
.pl-chart-wrap { overflow: hidden; width: 100%; }
.pl-chart { width: 100%; max-width: 100%; height: auto; display: block; }
.pl-grid line { stroke: #e8eef6; stroke-width: 1; }
.pl-grid text { fill: #94a3b8; font: 700 8px Outfit, "Segoe UI", sans-serif; }
.pl-g text { fill: #64748b; font: 750 9px Outfit, "Segoe UI", sans-serif; }
.pl-bar {
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: scaleY(0);
  animation: qGrow .55s cubic-bezier(.2, .8, .2, 1) forwards;
}
.pl-g .pl-bar { animation-delay: inherit; }
.pl-bar.is-rev { fill: #3b82f6; }
.pl-bar.is-exp { fill: #ef4444; }
.pl-line {
  fill: none;
  stroke: #22c55e;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: qDraw 1.15s .4s ease forwards;
}
.pl-dot {
  fill: #22c55e;
  stroke: #fff;
  stroke-width: 1.6;
  opacity: 0;
  transform: scale(.4);
  transform-box: fill-box;
  animation: qDot .32s ease forwards;
}
.pl-ring {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
}
.pl-ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.pl-ring circle { fill: none; stroke-width: 3.2; }
.pl-ring .is-track { stroke: #e2e8f0; }
.pl-ring .is-val {
  stroke: #16a34a;
  stroke-linecap: round;
  stroke-dasharray: 97.4;
  stroke-dashoffset: 97.4;
  animation: plRing 1.1s .35s ease forwards;
}
.pl-ring strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 800 11px/1 Outfit, "Segoe UI", sans-serif;
  color: #16a34a;
}
.pl-ring small { font-size: 7px; font-weight: 750; color: #64748b; }
@keyframes plRing { to { stroke-dashoffset: var(--pl-off, 40); } }
.pl-line-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 0;
  border-bottom: 1px solid #f1f5f9;
  color: #64748b;
  font: 650 13px/1 Outfit, "Segoe UI", sans-serif;
}
.pl-line-row span { min-width: 0; }
.pl-line-row b { color: #0f172a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-line-row .is-gross { color: #7c3aed; }
.pl-line-row .is-in { color: #16a34a; }
.pl-line-row .is-exp { color: #dc2626; }
.pl-line-row.is-net {
  border: 0;
  margin-top: 4px;
  padding: 10px 10px;
  border-radius: 12px;
  background: #ecfdf5;
  color: #166534;
  font-weight: 800;
}
.pl-line-row.is-net b { color: #16a34a; font-size: 15px; }
.gs-page { display: grid; gap: 10px; width: 100%; max-width: 100%; overflow-x: hidden; }
.gs-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gs-stats article {
  position: relative;
  min-width: 0;
  padding: 12px 10px 10px 44px;
  border-radius: 14px;
  border: 1px solid #eef2f7;
  background: #fff;
  overflow: hidden;
  animation: qRise .45s cubic-bezier(.2, .8, .2, 1) both;
}
.gs-stats article:nth-child(1) { animation-delay: .04s; }
.gs-stats article:nth-child(2) { animation-delay: .1s; }
.gs-stats article:nth-child(3) { animation-delay: .16s; }
.gs-stats article:nth-child(4) { animation-delay: .22s; }
.gs-stats span { display: block; color: #64748b; font-size: 10px; font-weight: 700; white-space: normal; overflow: visible; }
.gs-stats b { display: block; margin-top: 5px; font-size: 16px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.gs-stats i { position: absolute; left: 8px; top: 11px; width: 28px; height: 28px; border-radius: 9px; }
.gs-stats .is-tax i { background: #dbeafe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v8M9 11h6'/%3E%3C/svg%3E") center / 18px no-repeat; }
.gs-stats .is-gst i { background: #ffedd5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h16v10H4z'/%3E%3Cpath d='M8 7V5h8v2'/%3E%3C/svg%3E") center / 18px no-repeat; }
.gs-stats .is-cgst i { background: #dcfce7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E") center / 18px no-repeat; }
.gs-stats .is-sgst i { background: #ffedd5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E") center / 18px no-repeat; }
.gs-stats .is-tax b { color: #2563eb; }
.gs-stats .is-gst b { color: #ea580c; }
.gs-stats .is-cgst b { color: #16a34a; }
.gs-stats .is-sgst b { color: #ea580c; }
.gs-card {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid #eef2f7;
  background: #fff;
  overflow: hidden;
  animation: qRise .5s .24s cubic-bezier(.2, .8, .2, 1) both;
}
.gs-card h3 { margin: 0 0 10px; font-size: 15px; letter-spacing: -.02em; }
.gs-table { width: 100%; }
.gs-head, .gs-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.gs-head { padding-bottom: 8px; border-bottom: 1px solid #eef2f7; color: #64748b; font: 750 11px/1 Outfit, "Segoe UI", sans-serif; }
.gs-row { padding: 10px 0; border-bottom: 1px solid #f1f5f9; color: #475569; font: 650 13px/1 Outfit, "Segoe UI", sans-serif; }
.gs-row b { color: #0f172a; font-variant-numeric: tabular-nums; }
.gs-row.is-total { font-weight: 800; color: #0f172a; }
.gs-row.is-inv { border: 0; margin-top: 2px; padding: 10px 10px; border-radius: 12px; background: #eff6ff; color: #1d4ed8; font-weight: 800; }
.gs-row.is-inv b { color: #1d4ed8; }
.pl-legend .is-cgst::before { background: #3b82f6; }
.pl-legend .is-sgst::before { background: #fb923c; }
.gs-bar {
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: scaleY(0);
  animation: qGrow .55s cubic-bezier(.2, .8, .2, 1) forwards;
}
.pl-g .gs-bar { animation-delay: inherit; }
.gs-bar.is-cgst { fill: #3b82f6; }
.gs-bar.is-sgst { fill: #fb923c; }

/* —— Premium Sales / Expense reports only —— */
@keyframes qrRise {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes srShimmer {
  0% { transform: translateX(-40%) rotate(12deg); opacity: 0; }
  40% { opacity: .35; }
  100% { transform: translateX(120%) rotate(12deg); opacity: 0; }
}
@keyframes srOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8px, -6px) scale(1.08); }
}
@keyframes erSpinIn {
  from { transform: rotate(-18deg) scale(.88); opacity: 0; }
  to { transform: rotate(0) scale(1); opacity: 1; }
}
@keyframes qrBarUp {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes qrGrowX {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.qr-link.is-prem {
  position: relative;
  overflow: hidden;
  grid-template-columns: 48px minmax(0, 1fr) 28px;
  gap: 12px;
  margin: 0 0 12px;
  padding: 14px 14px 14px 12px;
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(37, 99, 235, .22), rgba(14, 165, 233, .08), rgba(255,255,255,.6)) border-box;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
  animation: qrRise .45s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--qr-i, 0) * .06s);
}
.qr-link.is-prem::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 20px 0 0 20px;
  background: linear-gradient(180deg, #60a5fa, #1d4ed8);
}
.qr-link.is-prem.is-expense {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(239, 68, 68, .22), rgba(251, 146, 60, .1), rgba(255,255,255,.6)) border-box;
}
.qr-link.is-prem.is-expense::before {
  background: linear-gradient(180deg, #fb7185, #e11d48);
}
.qr-link.is-prem.is-pnl {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(5, 150, 105, .22), rgba(16, 185, 129, .1), rgba(255,255,255,.6)) border-box;
}
.qr-link.is-prem.is-pnl::before {
  background: linear-gradient(180deg, #34d399, #047857);
}
.qr-link.is-prem:active {
  transform: scale(.985);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
}
.qr-ico {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  position: relative;
}
.qr-ico svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.qr-ico.is-sales {
  background: linear-gradient(145deg, #3b82f6, #1e40af);
  box-shadow: 0 10px 18px rgba(37, 99, 235, .32);
}
.qr-ico.is-expense {
  background: linear-gradient(145deg, #fb7185, #be123c);
  box-shadow: 0 10px 18px rgba(225, 29, 72, .28);
}
.qr-ico.is-pnl {
  background: linear-gradient(145deg, #34d399, #047857);
  box-shadow: 0 10px 18px rgba(4, 120, 87, .28);
}
.qr-copy b {
  display: block;
  font-size: 15px;
  letter-spacing: -.02em;
  color: #0f172a;
}
.qr-copy small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}
.qr-go {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f1f5f9;
  color: #64748b;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.qr-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.qr-link.is-prem:active .qr-go {
  background: #dbeafe;
  color: #1d4ed8;
  transform: translateX(2px);
}
.qr-link.is-prem.is-expense:active .qr-go {
  background: #ffe4e6;
  color: #e11d48;
}
.qr-link.is-prem.is-pnl:active .qr-go {
  background: #d1fae5;
  color: #047857;
}

/* Sales page graphics (no banner image) */
.sr-mix {
  display: flex;
  height: 10px;
  margin: 2px 0 6px;
  border-radius: 999px;
  overflow: hidden;
  background: #e8eef6;
  animation: qrRise .4s .12s both;
}
.sr-mix .is-s {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #60a5fa, #1d4ed8);
  animation: qrGrowX .6s .15s both;
  transform-origin: left center;
}
.sr-mix .is-e {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #fb7185, #e11d48);
  animation: qrGrowX .6s .22s both;
  transform-origin: left center;
}
.sr-mix-lab {
  display: flex;
  justify-content: space-between;
  margin: 0 0 10px;
  color: #64748b;
  font: 700 11px/1 Outfit, "Segoe UI", sans-serif;
  animation: qrRise .4s .16s both;
}
.sr-margin {
  --sr-m: 0;
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: conic-gradient(#16a34a calc(var(--sr-m) * 1%), #e2e8f0 0);
  display: grid;
  place-items: center;
  animation: erSpinIn .55s both;
  box-shadow: 0 10px 22px rgba(22, 163, 74, .12);
}
.sr-margin i {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #f3f6fb;
}
.sr-margin span {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #64748b;
  font: 700 10px/1.2 Outfit, "Segoe UI", sans-serif;
}
.sr-margin b {
  display: block;
  color: #15803d;
  font-size: 18px;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.sr-plot-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}
.sr-plot-h h3 { margin: 0; }
.sr-plot-ico {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #3b82f6, #1e40af);
  box-shadow: 0 8px 16px rgba(37, 99, 235, .25);
}
.sr-plot-ico svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qr-board.is-prem .qr-stats.is-board article {
  animation: qrRise .45s cubic-bezier(.2, .8, .2, 1) both;
  border: 1px solid rgba(15, 23, 42, .04);
}
.qr-board.is-prem .qr-stats.is-board .is-sale { animation-delay: .05s; background: linear-gradient(180deg, #f8fbff, #e8f1ff); }
.qr-board.is-prem .qr-stats.is-board .is-exp { animation-delay: .1s; background: linear-gradient(180deg, #fff8f8, #ffe8ea); }
.qr-board.is-prem .qr-stats.is-board .is-ok { animation-delay: .15s; background: linear-gradient(180deg, #f5fff8, #e6f9ee); }
.qr-board.is-prem .qr-plot {
  border: 1px solid #e8eef6;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
  animation: qrRise .5s .18s cubic-bezier(.2, .8, .2, 1) both;
}
.qr-board.is-prem .qr-pair i {
  transform-origin: bottom center;
  animation: qrBarUp .55s cubic-bezier(.2, .8, .2, 1) both;
}
.qr-board.is-prem .qr-col:nth-child(1) .qr-pair i { animation-delay: .05s; }
.qr-board.is-prem .qr-col:nth-child(2) .qr-pair i { animation-delay: .09s; }
.qr-board.is-prem .qr-col:nth-child(3) .qr-pair i { animation-delay: .13s; }
.qr-board.is-prem .qr-col:nth-child(4) .qr-pair i { animation-delay: .17s; }
.qr-board.is-prem .qr-col:nth-child(5) .qr-pair i { animation-delay: .21s; }
.qr-board.is-prem .qr-col:nth-child(6) .qr-pair i { animation-delay: .25s; }
.qr-board.is-prem .qr-col:nth-child(7) .qr-pair i { animation-delay: .29s; }
.qr-board.is-prem .qr-col:nth-child(8) .qr-pair i { animation-delay: .33s; }
.qr-board.is-prem .qr-col:nth-child(9) .qr-pair i { animation-delay: .37s; }
.qr-board.is-prem .qr-col:nth-child(10) .qr-pair i { animation-delay: .41s; }
.qr-board.is-prem .qr-col:nth-child(11) .qr-pair i { animation-delay: .45s; }
.qr-board.is-prem .qr-col:nth-child(12) .qr-pair i { animation-delay: .49s; }

/* Expense page graphics (no banner image) */
.er-sec-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.er-sec-h h3 { margin: 0; }
.er-sec-ico {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.er-sec-ico svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.er-sec-ico.is-pie {
  background: linear-gradient(145deg, #fb7185, #be123c);
  box-shadow: 0 8px 16px rgba(190, 18, 60, .22);
}
.er-sec-ico.is-list {
  background: linear-gradient(145deg, #38bdf8, #0284c7);
  box-shadow: 0 8px 16px rgba(2, 132, 199, .22);
}
.er-bars { display: grid; gap: 8px; margin-top: 14px; }
.er-bar { animation: qrRise .4s both; animation-delay: calc(.2s + var(--er-i, 0) * .05s); }
.er-bar-h {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  color: #475569;
  font: 700 11px/1 Outfit, "Segoe UI", sans-serif;
}
.er-bar-h b { color: #0f172a; font-variant-numeric: tabular-nums; }
.er-bar-track {
  height: 8px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
}
.er-bar-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  transform-origin: left center;
  animation: qrGrowX .55s both;
  animation-delay: calc(.25s + var(--er-i, 0) * .05s);
}
.er-page.is-prem .er-stats article {
  animation: qrRise .45s cubic-bezier(.2, .8, .2, 1) both;
  border: 1px solid rgba(15, 23, 42, .04);
}
.er-page.is-prem .er-stats .is-out { animation-delay: .06s; background: linear-gradient(180deg, #fff, #fff5f5); }
.er-page.is-prem .er-stats .is-tx { animation-delay: .12s; background: linear-gradient(180deg, #fff, #f5f9ff); }
.er-page.is-prem .er-donut-card,
.er-page.is-prem .er-list {
  border: 1px solid #eef2f7;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
  animation: qrRise .5s .16s cubic-bezier(.2, .8, .2, 1) both;
}
.er-page.is-prem .er-donut {
  animation: erSpinIn .65s cubic-bezier(.2, .8, .2, 1) both;
  box-shadow: 0 10px 24px rgba(190, 18, 60, .12), inset 0 0 0 1px rgba(15, 23, 42, .04);
}
.er-page.is-prem .er-row {
  position: relative;
  animation: qrRise .35s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(.2s + var(--er-i, 0) * .03s);
  border-radius: 12px;
  padding: 10px 8px 10px 14px;
  border-top: 0;
  margin-top: 4px;
  background: #f8fafc;
}
.er-page.is-prem .er-row::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 99px;
  background: var(--er-tone, #94a3b8);
}
.er-page.is-prem .er-row strong { color: #be123c; }
@media (prefers-reduced-motion: reduce) {
  .qr-link.is-prem,
  .sr-mix, .sr-mix .is-s, .sr-mix .is-e, .sr-mix-lab, .sr-margin,
  .qr-board.is-prem .qr-stats.is-board article,
  .qr-board.is-prem .qr-plot,
  .qr-board.is-prem .qr-pair i,
  .er-page.is-prem .er-stats article,
  .er-page.is-prem .er-donut-card,
  .er-page.is-prem .er-list,
  .er-page.is-prem .er-donut,
  .er-page.is-prem .er-row,
  .er-bar, .er-bar-track i {
    animation: none !important;
  }
}
/* Guest welcome — login story animation (replaces public sector desk) */
body.is-welcome {
  position: fixed !important;
  top: var(--app-top, 8px) !important;
  left: var(--app-left, 8px) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--app-w, calc(100% - 16px)) !important;
  height: var(--app-h, calc(100svh - 16px)) !important;
  margin: 0;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column;
  background: #07101f;
  box-sizing: border-box;
  border-radius: 18px;
}
body.is-welcome .q-webhead,
body.is-welcome .q-deskbar,
body.is-welcome header.top,
body.is-welcome .app,
body.is-welcome .tabbar,
body.is-welcome .sheet,
body.is-welcome .q-home { display: none !important; }
body.is-welcome .q-pop { z-index: 80; }
.q-welcome {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: #e8eef8;
  font-family: Outfit, "Segoe UI", sans-serif;
  background:
    radial-gradient(120% 70% at 100% -10%, rgba(228, 194, 122, .16), transparent 50%),
    radial-gradient(90% 60% at -10% 110%, rgba(37, 99, 235, .2), transparent 48%),
    linear-gradient(180deg, #0b1b3a 0%, #07101f 100%);
}
.q-welcome[hidden] { display: none !important; }
.qw-stage {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  overflow: hidden;
}
.qw-cap {
  display: grid;
  gap: 4px;
  flex: none;
}
.qw-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.qw-brand img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fff;
  padding: 3px;
  box-sizing: border-box;
}
.qw-brand strong {
  font-size: 13px;
  letter-spacing: -.02em;
  color: #f7f3ec;
}
.qw-kicker {
  margin: 2px 0 0;
  color: #e4c27a;
  font: 750 10px/1 Outfit, "Segoe UI", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.qw-title {
  margin: 0;
  min-height: 1.15em;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(22px, 6.2vw, 30px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: #f7f3ec;
}
.qw-title.is-typing::after,
.qw-lead.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: .85em;
  margin-left: 2px;
  vertical-align: -1px;
  background: #e4c27a;
  animation: qwCaret .7s step-end infinite;
}
@keyframes qwCaret {
  50% { opacity: 0; }
}
.qw-lead {
  margin: 0;
  min-height: 2.7em;
  color: #b7c3d1;
  font-size: 12.5px;
  line-height: 1.4;
}
.qw-progress {
  height: 3px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.qw-progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #e4c27a, #f4e2bc);
}
.qw-phone {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  border-radius: 22px;
  padding: 8px 6px 6px;
  background: linear-gradient(160deg, #1a2434, #0d1420);
  border: 1px solid rgba(228, 194, 122, .35);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
}
.qw-phone.is-swap {
  animation: qwPhoneNudge .4s cubic-bezier(.2, .8, .2, 1);
}
@keyframes qwPhoneNudge {
  0% { transform: scale(.992); }
  100% { transform: none; }
}
.qw-notch {
  width: 72px;
  height: 6px;
  margin: 0 auto 6px;
  border-radius: 999px;
  background: #05080f;
}
.qw-screen {
  position: relative;
  height: calc(100% - 12px);
  border-radius: 16px;
  overflow: hidden;
  background: #101820;
}
.qw-hand {
  position: absolute;
  z-index: 6;
  left: var(--hx, 58%);
  top: var(--hy, 42%);
  width: 72px;
  height: 72px;
  margin: -8px 0 0 -18px;
  pointer-events: none;
  transition: left .55s cubic-bezier(.2, .85, .2, 1), top .55s cubic-bezier(.2, .85, .2, 1);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45));
  animation: qwHandBob 1.1s ease-in-out infinite;
}
.qw-hand svg { width: 100%; height: 100%; display: block; }
.qw-hand-shadow { fill: rgba(0, 0, 0, .28); transform: translate(2px, 3px); }
.qw-hand-body { fill: #f3d7b0; stroke: #c9963a; stroke-width: 1.2; }
.qw-hand-tap {
  fill: rgba(228, 194, 122, .35);
  stroke: #e4c27a;
  stroke-width: 1.5;
  transform-origin: 34px 14px;
  animation: qwTapRing 1.1s ease-out infinite;
}
@keyframes qwHandBob {
  0%, 100% { transform: translate(0, 0) rotate(-12deg); }
  50% { transform: translate(0, 6px) rotate(-8deg); }
}
@keyframes qwTapRing {
  0% { opacity: .9; transform: scale(.55); }
  70% { opacity: 0; transform: scale(1.55); }
  100% { opacity: 0; transform: scale(1.55); }
}
.qw-slide {
  position: absolute;
  inset: 0;
  padding: 14px 12px;
  display: grid;
  align-content: start;
  gap: 10px;
  opacity: 0;
  transform: translateX(28px) scale(.985);
  transition: opacity .38s ease, transform .42s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
  overflow: hidden;
}
.qw-slide.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.qw-film {
  display: grid;
  gap: 10px;
  height: 100%;
  align-content: start;
  min-height: 0;
}
.qw-badge {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(228, 194, 122, .14);
  color: #e4c27a;
  font: 750 10px/1 Outfit, "Segoe UI", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  animation: qwFadeUp .4s ease both;
}
@keyframes qwFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.qw-card {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(228, 194, 122, .14), transparent 55%),
    linear-gradient(180deg, #1c2836 0%, #141c27 100%);
  border: 1px solid rgba(228, 194, 122, .42);
  border-radius: 18px;
  padding: 16px 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .28);
  animation: qwFadeUp .45s ease .05s both;
}
.qw-card h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #f7f3ec;
}
.qw-soft {
  margin: 0 0 4px;
  color: #e4c27a;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.qw-hint {
  margin: 12px 0 0;
  color: #93a4b8;
  font-size: 12px;
}
.qw-twin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.qw-twin span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 12px;
  background: rgba(8, 12, 18, .55);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #c5d0dc;
  font: 800 14px/1 Outfit, "Segoe UI", sans-serif;
}
.qw-twin .is-tap {
  background: linear-gradient(180deg, #f4e2bc, #c9963a);
  color: #1c1408;
  border: 0;
  box-shadow: 0 10px 20px rgba(201, 150, 58, .28);
  animation: qwPulse 1s ease infinite;
}
.qw-field {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
}
.qw-field small {
  color: #93a4b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.qw-field span {
  display: block;
  height: 44px;
  border-radius: 12px;
  background: #0f1724;
  border: 1px solid rgba(255, 255, 255, .1);
  color: #e8eef8;
  font-size: 15px;
  line-height: 44px;
  padding: 0 12px;
  overflow: hidden;
  white-space: nowrap;
}
.qw-field .is-type {
  width: 0;
  animation: qwType 1.15s steps(14, end) forwards;
}
.qw-field .is-type.is-delay {
  animation-delay: .4s;
  animation-fill-mode: both;
}
@keyframes qwType {
  from { width: 0; }
  to { width: 100%; }
}
.qw-cta-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(180deg, #25d366, #128c7e);
  color: #fff;
  font: 800 14px/1 Outfit, "Segoe UI", sans-serif;
  box-shadow: 0 10px 20px rgba(18, 140, 126, .28);
}
.qw-cta-mini.is-gold {
  background: linear-gradient(180deg, #f4e2bc, #c9963a);
  color: #1c1408;
  box-shadow: 0 10px 20px rgba(201, 150, 58, .28);
}
.qw-cta-mini.is-pulse {
  animation: qwPulse 1s ease infinite;
}
.qw-jump {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: #93a4b8;
  font-size: 12px;
}
.qw-jump i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
  animation: qwPing 1.2s ease infinite;
}
@keyframes qwPing {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
  70% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.qw-wa {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: #0b3d2e;
  border: 1px solid rgba(37, 211, 102, .28);
  animation: qwFadeUp .45s ease both;
}
.qw-wa-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.qw-wa-head b { color: #d7ffe8; font-size: 14px; }
.qw-wa-head small { color: #6ee7b7; font-size: 11px; }
.qw-bubble {
  margin: 0;
  padding: 12px;
  border-radius: 14px 14px 4px 14px;
  background: #14532d;
  color: #dcfce7;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-line;
  animation: qwBubble .45s ease both;
}
@keyframes qwBubble {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to { opacity: 1; transform: none; }
}
.qw-otp {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.qw-otp i {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: 10px;
  background: #0f1724;
  border: 1px solid rgba(228, 194, 122, .32);
  color: #e4c27a;
  font: 800 16px/1 Outfit, "Segoe UI", sans-serif;
  font-style: normal;
  opacity: 0;
  animation: qwDigit .28s ease forwards;
}
.qw-otp i:nth-child(1) { animation-delay: .08s; }
.qw-otp i:nth-child(2) { animation-delay: .18s; }
.qw-otp i:nth-child(3) { animation-delay: .28s; }
.qw-otp i:nth-child(4) { animation-delay: .38s; }
.qw-otp i:nth-child(5) { animation-delay: .48s; }
.qw-otp i:nth-child(6) { animation-delay: .58s; }
@keyframes qwDigit {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.qw-sectors {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}
.qw-sectors article {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px 10px;
  border-radius: 14px;
  background: #182230;
  border: 1px solid rgba(255, 255, 255, .06);
  animation: qwFadeUp .4s ease both;
}
.qw-sectors article:nth-child(1) { animation-delay: .05s; }
.qw-sectors article:nth-child(2) { animation-delay: .12s; }
.qw-sectors article:nth-child(3) { animation-delay: .19s; }
.qw-sectors article:nth-child(4) { animation-delay: .26s; }
.qw-sectors article.is-glow {
  border-color: rgba(228, 194, 122, .55);
  box-shadow: 0 0 0 1px rgba(228, 194, 122, .18), 0 10px 22px rgba(0, 0, 0, .28);
}
.qw-sectors em {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #fff;
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
}
.qw-sectors b {
  display: block;
  color: #f7f3ec;
  font-size: 13px;
  line-height: 1.2;
}
.qw-sectors small {
  display: block;
  color: #93a4b8;
  font-size: 11px;
  margin-top: 2px;
}
.qw-sectors strong {
  color: #e4c27a;
  font-size: 12px;
  white-space: nowrap;
}
.qw-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  margin-top: auto;
  padding: 8px 4px 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
}
.qw-nav span {
  text-align: center;
  color: #8b97a6;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  padding-bottom: 5px;
}
.qw-nav .is-on {
  color: #e4c27a;
  box-shadow: inset 0 -2px 0 #e4c27a;
}
@keyframes qwPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.16); }
}
.qw-foot {
  display: grid;
  gap: 8px;
  flex: none;
}
.qw-steps {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 2px 0;
}
.qw-steps button {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  padding: 0;
}
.qw-steps button.is-on {
  width: 18px;
  border-radius: 999px;
  background: #e4c27a;
}
.qw-cta {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 8px;
}
.qw-btn {
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  color: #f7f3ec;
  font: 800 13px/1 Outfit, "Segoe UI", sans-serif;
}
.qw-btn.is-gold {
  border: 0;
  background: linear-gradient(180deg, #f4e2bc, #c9963a);
  color: #1c1408;
  box-shadow: 0 10px 22px rgba(201, 150, 58, .28);
}
.qw-note {
  margin: 0;
  text-align: center;
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
}
@media (prefers-reduced-motion: reduce) {
  .qw-slide, .qw-progress i, .qw-field .is-type, .qw-otp i,
  .qw-cta-mini.is-pulse, .qw-twin .is-tap, .qw-bubble, .qw-jump i,
  .qw-phone.is-swap, .qw-hand, .qw-hand-tap, .qw-title.is-typing::after, .qw-lead.is-typing::after,
  .qw-sectors article, .qw-badge, .qw-card {
    transition: none !important;
    animation: none !important;
  }
  .qw-field .is-type, .qw-otp i { opacity: 1; width: 100%; }
}