/* Millatbooks — sign in */
body.login {
  min-height: 100dvh; margin: 0; color: var(--on-deep); overflow-x: hidden;
  background: radial-gradient(80% 60% at 80% 0%, rgb(var(--mint-rgb) / 0.16), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgb(var(--mint-soft-rgb) / 0.07), transparent 60%), linear-gradient(160deg, var(--deep-0), var(--deep-1) 50%, var(--deep-2));
}
.molecules { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.ledger-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 35px, rgb(var(--mint-soft-rgb) / 0.045) 35px 36px); mask: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 85%); animation: ledgerIn 1.6s var(--ease) both; }
@keyframes ledgerIn { from { opacity: 0; transform: translateY(14px); } }
.glow { position: fixed; z-index: 0; width: 560px; height: 560px; left: 0; top: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgb(var(--mint-rgb) / 0.16), transparent); transform: translate(var(--gx, 50vw), var(--gy, 40vh)) translate(-50%, -50%); transition: transform 1s var(--ease); }
.stage { position: relative; z-index: 1; min-height: 100dvh; display: grid; place-items: center; align-content: center; gap: 22px; padding: 28px 16px calc(28px + env(safe-area-inset-bottom)); }

.card {
  position: relative; width: min(430px, 100%); padding: 34px 30px 28px; border-radius: 30px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, rgb(var(--card-a-rgb) / 0.95), rgb(var(--card-b-rgb) / 0.97));
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: cardIn 0.6s var(--ease) both 0.05s;
  transition: transform 0.6s var(--ease), opacity 0.4s;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } }
.card-shine { position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, rgb(var(--mint-rgb) / 0.55) 80%, transparent 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; opacity: 0.8; } /* static: spinning it repainted the card every frame */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spinShine { to { --ang: 360deg; } }
.card.shake { animation: shake 0.45s ease-out; }
@keyframes shake { 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.card.leaving { transform: scale(1.04) translateY(-6px); opacity: 0; transition-duration: 0.5s; }

.brand { display: grid; justify-items: center; text-align: center; gap: 6px; margin-bottom: 26px; }
.mark { width: 64px; height: 64px; margin-bottom: 10px; filter: drop-shadow(0 14px 26px rgb(var(--mint-rgb) / 0.25)); }
.mark .lm-bg { fill: var(--deep-3); }
.mark .lm-hex { fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 76; animation: draw 1.4s var(--ease) both 0.4s; }
.mark .lm-l { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 24; animation: draw 0.9s var(--ease) both; }
.mark .l1 { animation-delay: 0.7s; }
.mark .l2 { animation-delay: 0.82s; }
.mark .l3 { animation-delay: 0.94s; }
.mark .lm-dot { fill: var(--mint); transform-origin: 25px 24px; animation: pop 0.7s var(--spring) both 1.1s; }
@keyframes draw { from { stroke-dashoffset: 76; } }
@keyframes pop { from { transform: scale(0); } }
.title { font-family: var(--display); font-weight: 600; font-size: clamp(32px, 7vw, 40px); line-height: 1.02; letter-spacing: -0.02em; color: #fff; }
.title .w { display: inline-block; animation: wordUp 0.9s var(--ease) both; }
.title .w:nth-child(2) { animation-delay: 0.12s; color: var(--mint); }
@keyframes wordUp { from { opacity: 0; transform: translateY(60%); } }
.sub { color: rgb(var(--on-deep-rgb) / 0.62); font-size: 14px; animation: fade 0.8s both 0.4s; }
@keyframes fade { from { opacity: 0; } }

.notice { margin: -8px 0 18px; padding: 11px 14px; border-radius: 14px; background: rgba(245, 165, 36, 0.12); color: #FBCB6A; font-size: 13.5px; box-shadow: inset 0 0 0 1px rgba(245, 165, 36, 0.25); }
.form { display: grid; gap: 14px; animation: fade 0.8s both 0.5s; }
.field { display: grid; gap: 7px; }
.label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: rgb(var(--on-deep-rgb) / 0.75); }
.box { position: relative; display: flex; align-items: center; border-radius: 16px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); transition: box-shadow 0.25s, background-color 0.25s; }
.box:focus-within { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 2px var(--mint), 0 0 0 5px rgb(var(--mint-rgb) / 0.14); }
.box .lead { margin-left: 16px; color: rgb(var(--on-deep-rgb) / 0.5); width: 19px; height: 19px; flex: none; transition: color 0.25s, transform 0.4s var(--spring); }
.box:focus-within .lead { color: var(--mint); transform: rotate(-8deg) scale(1.08); }
.box input { flex: 1; min-width: 0; height: 54px; padding: 0 16px 0 12px; border: 0; outline: 0; background: transparent; color: #fff; font-size: 16px; font-weight: 500; letter-spacing: 0.02em; }
.box input::placeholder { color: rgb(var(--on-deep-rgb) / 0.35); letter-spacing: 0; }
.box input:first-child { padding-left: 16px; }
.mono-in { font-family: var(--mono); letter-spacing: 0.18em !important; text-transform: uppercase; }
.peek { width: 46px; height: 46px; margin-right: 4px; border-radius: 12px; display: grid; place-items: center; color: rgb(var(--on-deep-rgb) / 0.55); transition: color 0.2s, background-color 0.2s; }
.peek:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.peek .x { stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset 0.3s var(--ease); }
.peek.on .x { stroke-dashoffset: 0; }
.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.remember { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgb(var(--on-deep-rgb) / 0.75); cursor: pointer; user-select: none; }
.remember input { position: absolute; opacity: 0; pointer-events: none; }
.tog { position: relative; width: 38px; height: 22px; border-radius: 22px; background: rgba(255, 255, 255, 0.12); transition: background-color 0.3s; flex: none; }
.tog::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.4s var(--spring); }
.remember input:checked + .tog { background: var(--mint); }
.remember input:checked + .tog::after { transform: translateX(16px); }
.remember input:focus-visible + .tog { outline: 2px solid var(--mint); outline-offset: 2px; }

.err { min-height: 0; color: #FF8F88; font-size: 13.5px; font-weight: 700; }
.err:empty { display: none; }
.go {
  position: relative; height: 56px; border-radius: 18px; overflow: hidden; isolation: isolate; font-weight: 800; font-size: 16px; color: var(--mint-ink);
  background: var(--mint); box-shadow: 0 18px 40px -16px rgb(var(--mint-rgb) / 0.8); transition: transform 0.4s var(--spring), box-shadow 0.3s, background-color 0.3s;
}
.go::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.9s var(--ease); }
.go:hover::after { transform: translateX(120%); }
.go:active { transform: scale(0.97); }
.go:disabled { cursor: wait; }
.go .lbl { transition: opacity 0.2s, transform 0.3s var(--ease); display: inline-block; }
.go .spin { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2.5px solid rgba(0, 0, 0, 0.2); border-top-color: var(--mint-ink); opacity: 0; animation: spin 0.8s linear infinite; }
.go .ok { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; fill: none; stroke: var(--mint-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; }
.go.busy .lbl { opacity: 0; transform: translateY(-8px); }
.go.busy .spin { opacity: 1; }
.go.done .lbl, .go.done .spin { opacity: 0; }
.go.done .ok { animation: tick 0.5s var(--ease) forwards; }
.go.locked { background: rgba(255, 255, 255, 0.1); color: rgb(var(--on-deep-rgb) / 0.75); box-shadow: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes tick { to { stroke-dashoffset: 0; } }
.hint { font-size: 12.5px; color: rgb(var(--on-deep-rgb) / 0.5); text-align: center; line-height: 1.5; }

.setup-intro { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgb(var(--mint-rgb) / 0.08); box-shadow: inset 0 0 0 1px rgb(var(--mint-rgb) / 0.2); font-size: 13px; color: rgb(var(--on-deep-rgb) / 0.72); }
.setup-intro b { color: #fff; font-size: 14px; }
.setup-intro code { font-family: var(--mono); font-size: 12px; color: var(--mint); }
.meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 2px; }
.meter i { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); transition: background-color 0.3s; }
.meter[data-s='1'] i:nth-child(-n+1) { background: #FF6B63; }
.meter[data-s='2'] i:nth-child(-n+2) { background: #FBBF24; }
.meter[data-s='3'] i:nth-child(-n+3) { background: #A3E635; }
.meter[data-s='4'] i { background: var(--mint); }
.meter-txt { font-size: 12px; color: rgb(var(--on-deep-rgb) / 0.55); min-height: 16px; }
.offline { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 107, 99, 0.12); color: #FFB1AC; font-size: 13.5px; }

.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; font-size: 13px; color: rgb(var(--on-deep-rgb) / 0.45); animation: fade 1s both 0.8s; }
.foot a { color: rgb(var(--on-deep-rgb) / 0.75); text-decoration: underline; text-underline-offset: 3px; }
.foot a:hover { color: var(--mint); }
/* the company's sign-in page: a private demo with sample data */
.try-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 99px; font-size: 13px; font-weight: 700; color: rgb(var(--on-deep-rgb) / 0.85); background: rgb(var(--on-deep-rgb) / 0.06); box-shadow: inset 0 0 0 1px rgb(var(--on-deep-rgb) / 0.14); transition: background-color 0.2s, box-shadow 0.2s, color 0.2s; }
.try-btn .i { width: 15px; height: 15px; fill: none; stroke: var(--mint); stroke-width: 1.8; stroke-linejoin: round; }
.try-btn:hover { color: var(--mint); background: rgb(var(--mint-rgb) / 0.1); box-shadow: inset 0 0 0 1px rgb(var(--mint-rgb) / 0.45); }
.try-btn:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.try-btn.busy { opacity: 0.7; pointer-events: none; }

/* success wipe: ledger rows sweep across, then the app opens */
.wipe { position: fixed; inset: 0; z-index: 50; display: grid; pointer-events: none; }
.wipe i { background: var(--deep-2); transform: scaleX(0); transform-origin: left; }
.wipe.go-on i { animation: wipe 0.55s var(--ease-io) forwards; }
.wipe.go-on i:nth-child(2) { animation-delay: 0.05s; background: var(--deep-3); }
.wipe.go-on i:nth-child(3) { animation-delay: 0.1s; }
.wipe.go-on i:nth-child(4) { animation-delay: 0.15s; background: var(--deep-3); }
.wipe.go-on i:nth-child(5) { animation-delay: 0.2s; }
.wipe.go-on i:nth-child(6) { animation-delay: 0.25s; background: var(--bg); }
@keyframes wipe { to { transform: scaleX(1); } }

@media (max-width: 480px) {
  .card { padding: 28px 20px 22px; border-radius: 26px; }
  .mark { width: 56px; height: 56px; }
}
.join-staff { display: flex; justify-content: center; gap: 6px; margin-top: 4px; padding: 12px; border-radius: 14px; font-size: 14px; color: rgb(var(--on-deep-rgb) / 0.7); text-decoration: none; box-shadow: inset 0 0 0 1px rgb(var(--on-deep-rgb) / 0.14); transition: background-color 0.2s, box-shadow 0.2s; }
.join-staff b { color: var(--mint); }
.join-staff:hover { background: rgb(var(--mint-rgb) / 0.08); box-shadow: inset 0 0 0 1px rgb(var(--mint-rgb) / 0.35); }
.join-staff:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.join-staff[hidden] { display: none; }
/* online: recovery key */
.link-in { color: var(--mint); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.link-back { justify-self: center; padding: 6px 10px; border-radius: 10px; color: rgb(var(--on-deep-rgb) / 0.7); font-size: 13.5px; font-weight: 600; }
.link-back:hover { color: var(--mint); }
.link-back.ready { color: var(--mint); }
.keybox { display: block; padding: 14px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgb(var(--mint-rgb) / 0.35); font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-align: center; color: #fff; overflow-wrap: anywhere; user-select: all; }
.foot a + a::before { content: none; }
.role { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-top: -6px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.role[hidden] { display: none; }
.role button { height: 38px; border-radius: 12px; font-size: 13.5px; font-weight: 700; color: rgb(var(--on-deep-rgb) / 0.7); transition: background-color 0.25s, color 0.25s; }
.role button.on { background: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: inset 0 0 0 1px rgb(var(--mint-rgb) / 0.35); }
.role button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
/* online: owner / staff sign in */
.title .w + .w { margin-left: 0; }
.who-says { display: grid; gap: 2px; margin: -6px 0 2px; text-align: center; }
.who-says[hidden] { display: none; }
.who-says b { font-size: 15px; color: #fff; }
.who-says span { font-size: 13px; color: rgb(var(--on-deep-rgb) / 0.6); }
.or-staff { display: grid; gap: 12px; margin-top: 6px; }
.or-staff[hidden] { display: none; }
.or-line { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 600; color: rgb(var(--on-deep-rgb) / 0.5); }
.or-line i { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); }
.staff-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border-radius: 16px; font-size: 15px; font-weight: 800; color: #fff; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); transition: background-color 0.2s, box-shadow 0.2s, transform 0.4s var(--spring); }
.staff-btn:hover { background: rgb(var(--mint-rgb) / 0.1); box-shadow: inset 0 0 0 1px rgb(var(--mint-rgb) / 0.45); }
.staff-btn:active { transform: scale(0.98); }
.staff-btn:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.staff-btn .i { color: var(--mint); }
/* a staff member who typed their password into the owner's form: their own sign-in lights up */
.staff-btn.nudge { background: rgb(var(--mint-rgb) / 0.12); box-shadow: inset 0 0 0 1px rgb(var(--mint-rgb) / 0.6); animation: nudge 0.9s var(--spring) 0.25s 2; }
@keyframes nudge { 40% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .staff-btn.nudge { animation: none; } }