/* Qwix local login gate. It uses the same Style Lab tokens as the panel. */
html, body { min-height: 100%; }
body.qwix-auth-pending {
  overflow: hidden !important;
  background: var(--qwix-bg, #1e1b18) !important;
}
body.qwix-auth-pending > .app-shell,
body.qwix-auth-pending > #v120App {
  visibility: hidden !important;
  pointer-events: none !important;
}

.qwix-auth-gate {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 18px;
  overflow: auto;
  color: var(--qwix-ink, #f5f1ec);
  background: var(--qwix-bg, #1e1b18);
  font-family: Inter, Arial, sans-serif;
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease, visibility 180ms ease;
}
.qwix-auth-gate[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.qwix-auth-card {
  width: min(338px, calc(100vw - 28px));
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid var(--qwix-border-subtle, rgba(255,255,255,.055));
  border-radius: 18px;
  color: var(--qwix-ink, #f5f1ec);
  background: var(--qwix-surface, #2c2823);
  box-shadow: var(--v138-hard-shadow, inset 0 1px 0 rgba(255,255,255,.03));
  margin: auto;
}

.qwix-auth-brand {
  display: flex;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
  text-align: center;
}
.qwix-auth-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  background: var(--qwix-accent, #d97757);
  -webkit-mask: url('../assets/logo-q-mask.png') center / 136% no-repeat;
  mask: url('../assets/logo-q-mask.png') center / 136% no-repeat;
}
.qwix-auth-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.qwix-auth-brand h1 {
  margin: 0;
  color: var(--qwix-ink, #f5f1ec);
  font-size: 19px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.025em;
  text-align: center;
}
.qwix-auth-title-wrap p {
  margin: 0;
  color: var(--qwix-ink-tertiary, rgba(245,241,236,.50));
  font-size: 10px;
  line-height: 1.35;
  font-weight: 600;
  text-align: center;
}

.qwix-auth-form {
  display: grid;
  gap: 12px;
}
.qwix-auth-form[hidden],
.qwix-device-limit[hidden] {
  display: none !important;
}
.qwix-auth-field {
  display: grid;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  gap: 6px;
}
.qwix-auth-field > span {
  color: var(--qwix-ink-secondary, rgba(245,241,236,.70));
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
}
.qwix-auth-field input {
  width: 100%;
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--qwix-border-subtle, rgba(255,255,255,.055));
  border-radius: 12px;
  outline: none;
  color: var(--qwix-ink, #f5f1ec);
  background: var(--qwix-bg-secondary, #262320);
  box-shadow: var(--v138-hard-shadow-small, inset 0 1px 0 rgba(255,255,255,.03));
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  transition: border-color 130ms ease, background 130ms ease, box-shadow 130ms ease;
}
.qwix-auth-field input:hover {
  background: var(--qwix-surface-hover, #34302a);
}
.qwix-auth-field input:focus {
  border-color: var(--qwix-accent, #d97757);
  background: var(--qwix-surface-raised, #332e27);
  box-shadow: 0 0 0 2px var(--qwix-accent-soft-bg, rgba(217,119,87,.12));
}
.qwix-auth-field input::placeholder {
  color: var(--qwix-ink-disabled, rgba(245,241,236,.32));
}

.qwix-auth-message {
  min-height: 0;
  color: var(--qwix-ink-tertiary, rgba(245,241,236,.50));
  font-size: 10px;
  line-height: 1.35;
}
.qwix-auth-message:empty { display: none; }
.qwix-auth-message.is-error { color: #f08a8a; }
.qwix-auth-message.is-success { color: #79d49e; }
.qwix-auth-submit {
  width: 100%;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
  border: 0;
  border-radius: 12px;
  color: var(--qwix-accent-ink, #1a1310);
  background: var(--qwix-accent, #d97757);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 5px 12px -9px var(--v138-primary-glow, rgba(217,119,87,.42));
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
  transition: background 130ms ease, transform 100ms ease, box-shadow 130ms ease;
}
.qwix-auth-submit:hover {
  background: var(--qwix-accent-hover, #e2835f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 7px 16px -10px var(--v138-primary-glow, rgba(217,119,87,.48));
}
.qwix-auth-submit:active {
  background: var(--qwix-accent-pressed, #c6673f);
  transform: translateY(1px);
}
.qwix-auth-submit:disabled {
  opacity: .55;
  cursor: default;
  transform: none;
}

.qwix-auth-server-line {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  color: var(--qwix-ink-disabled, rgba(245,241,236,.32));
  font-size: 9px;
  line-height: 1.2;
}
.qwix-auth-server-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--qwix-ink-disabled, #77736f);
}
.qwix-auth-server-dot.is-online {
  background: #69cd8d;
  box-shadow: 0 0 7px rgba(105,205,141,.38);
}
.qwix-auth-server-dot.is-offline {
  background: #e67878;
  box-shadow: 0 0 7px rgba(230,120,120,.30);
}

.qwix-device-limit {
  display: grid;
  gap: 10px;
}
.qwix-device-limit-title {
  color: var(--qwix-ink, #f5f1ec);
  font-size: 13px;
  font-weight: 800;
}
.qwix-device-limit p {
  margin: 0;
  color: var(--qwix-ink-tertiary, rgba(245,241,236,.50));
  font-size: 10px;
  line-height: 1.45;
}
.qwix-device-list {
  display: grid;
  gap: 8px;
}
.qwix-device-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 46px;
  box-sizing: border-box;
  padding: 8px 8px 8px 10px;
  border: 1px solid var(--qwix-border-subtle, rgba(255,255,255,.055));
  border-radius: 12px;
  background: var(--qwix-bg-secondary, #262320);
}
.qwix-device-copy { min-width: 0; }
.qwix-device-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--qwix-ink, #f5f1ec);
  font-size: 10px;
  font-weight: 750;
}
.qwix-device-meta {
  margin-top: 3px;
  color: var(--qwix-ink-disabled, rgba(245,241,236,.32));
  font-size: 8px;
}
.qwix-device-remove,
.qwix-auth-link-btn {
  border: 1px solid var(--qwix-border-subtle, rgba(255,255,255,.055));
  border-radius: 10px;
  color: var(--qwix-ink-secondary, rgba(245,241,236,.70));
  background: var(--qwix-surface, #2c2823);
  font: inherit;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}
.qwix-device-remove {
  min-width: 58px;
  height: 28px;
  padding: 0 8px;
}
.qwix-device-remove:hover {
  color: #f1a0a0;
  border-color: rgba(240,138,138,.22);
}
.qwix-device-remove:disabled { opacity: .45; cursor: default; }
.qwix-auth-link-btn { height: 34px; }

/* The former Account navigation slot is now an intentionally empty page. */
.qwix-grid-nav-btn .v120-nav-icon { width: 19px; height: 19px; }
#page-grid.qwix-grid-page {
  min-width: 0;
  min-height: 0;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--qwix-bg, #1e1b18) !important;
}


/* Initial login reveal. The card itself never scales: CEP/Chromium can
   re-rasterize a scaled layer when the animation ends, which looks like a
   second "real" card replacing the animated one. The bounce is therefore
   made only with vertical movement, and the final composited transform is
   identical to the permanent resting state. */
@keyframes qwix-auth-card-in {
  0% { opacity: 0; transform: translate3d(0, 20px, 0); animation-timing-function: cubic-bezier(.18,.72,.22,1); }
  54% { opacity: 1; transform: translate3d(0, -4px, 0); animation-timing-function: cubic-bezier(.22,.66,.24,1); }
  72% { transform: translate3d(0, 1.5px, 0); animation-timing-function: cubic-bezier(.22,.72,.24,1); }
  86% { transform: translate3d(0, -.45px, 0); animation-timing-function: cubic-bezier(.22,.76,.24,1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes qwix-auth-item-in {
  0% { opacity: 0; transform: translate3d(0, 10px, 0); }
  68% { opacity: 1; transform: translate3d(0, -2px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
body.qwix-auth-pending .qwix-auth-card {
  animation: qwix-auth-card-in 1.02s linear both;
}
body.qwix-auth-pending .qwix-auth-brand,
body.qwix-auth-pending .qwix-auth-field,
body.qwix-auth-pending .qwix-auth-submit {
  animation: qwix-auth-item-in .52s cubic-bezier(.2,.82,.24,1) both;
}
body.qwix-auth-pending .qwix-auth-brand { animation-delay: .10s; }
body.qwix-auth-pending .qwix-auth-field:nth-of-type(1) { animation-delay: .17s; }
body.qwix-auth-pending .qwix-auth-field:nth-of-type(2) { animation-delay: .23s; }
body.qwix-auth-pending .qwix-auth-submit { animation-delay: .30s; }
@media (prefers-reduced-motion: reduce) {
  body.qwix-auth-pending .qwix-auth-card,
  body.qwix-auth-pending .qwix-auth-brand,
  body.qwix-auth-pending .qwix-auth-field,
  body.qwix-auth-pending .qwix-auth-submit {
    animation: none !important;
  }
}

@media (max-width: 430px) {
  .qwix-auth-gate { padding: 12px; place-items: center; }
  .qwix-auth-card { margin: auto; padding: 16px; border-radius: 16px; }
  .qwix-auth-brand { margin-bottom: 16px; }
}


/* Login gate cleanup and stable centering. */
.qwix-auth-server-line { display: none !important; }


/* Simple startup gate. It covers the login/main hand-off until both the saved
   session check and the first main-page build have settled. */
.qwix-boot-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  min-width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 18px;
  background: #0b0910 !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .34s cubic-bezier(.22,.72,.24,1), visibility 0s linear .34s;
}
.qwix-boot-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.qwix-boot-loader[hidden] { display: none !important; }
.qwix-boot-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-width: 150px;
  color: var(--aptk-text, #f3f3f3);
  text-align: center;
  animation: qwix-boot-content-in .52s cubic-bezier(.2,.82,.24,1) both;
}
.qwix-boot-logo {
  display: block;
  width: 42px;
  height: 42px;
  background: var(--qwix-accent, #ff8a49);
  -webkit-mask: url('../assets/logo-q-mask.png') center / contain no-repeat;
  mask: url('../assets/logo-q-mask.png') center / contain no-repeat;
  filter: drop-shadow(0 5px 15px rgba(0,0,0,.18));
}
.qwix-boot-loader strong {
  font: 760 10px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: .01em;
}
.qwix-boot-line {
  position: relative;
  display: block;
  width: 108px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
}
.qwix-boot-line i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: var(--qwix-accent, #ff8a49);
  animation: qwix-boot-line 1.05s cubic-bezier(.55,0,.35,1) infinite;
}
body.qwix-booting > .app-shell,
body.qwix-booting > #v120App,
body.qwix-booting > .qwix-auth-gate {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.qwix-booting .qwix-auth-card,
body.qwix-booting .qwix-auth-brand,
body.qwix-booting .qwix-auth-field,
body.qwix-booting .qwix-auth-submit {
  animation: none !important;
}
@keyframes qwix-boot-content-in {
  0% { opacity: 0; transform: translateY(7px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes qwix-boot-line {
  0% { transform: translateX(-115%); }
  55% { transform: translateX(95%); }
  100% { transform: translateX(255%); }
}
@media (prefers-reduced-motion: reduce) {
  .qwix-boot-loader-inner,
  .qwix-boot-line i { animation: none !important; }
  .qwix-boot-line i { width: 100%; }
}


/* Successful sign-in: reverse the login entrance, bottom controls first. */
@keyframes qwix-auth-card-out {
  0% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  24% { opacity: 1; transform: translate3d(0,-3px,0) scale(1.012); }
  100% { opacity: 0; transform: translate3d(0,18px,0) scale(.965); }
}
@keyframes qwix-auth-item-out {
  0% { opacity: 1; transform: translate3d(0,0,0); }
  100% { opacity: 0; transform: translate3d(0,10px,0); }
}
body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-card {
  pointer-events: none !important;
  animation: qwix-auth-card-out .66s cubic-bezier(.55,.02,.82,.32) both !important;
}
body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-brand,
body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-field,
body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-message,
body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-submit {
  animation: qwix-auth-item-out .34s cubic-bezier(.55,.02,.82,.32) both !important;
}
body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-submit { animation-delay: 0s !important; }
body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-message { animation-delay: .035s !important; }
body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-field:nth-of-type(2) { animation-delay: .07s !important; }
body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-field:nth-of-type(1) { animation-delay: .12s !important; }
body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-brand { animation-delay: .18s !important; }
@media (prefers-reduced-motion: reduce) {
  body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-card,
  body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-brand,
  body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-field,
  body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-message,
  body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-submit {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
  }
}

/* Successful-login OUT motion. Fade starts immediately and dissolves
   smoothly through the whole exit instead of staying fully opaque first. */
@keyframes qwix-auth-card-out {
  0%   { opacity:1; transform:translate3d(0,0,0) scale(1); }
  24%  { opacity:.86; transform:translate3d(0,-3px,0) scale(1.012); }
  58%  { opacity:.42; transform:translate3d(0,8px,0) scale(.985); }
  100% { opacity:0; transform:translate3d(0,18px,0) scale(.965); }
}
body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-card {
  animation-duration:.72s !important;
}


/* Seamless successful-login handoff. The first page animates underneath the
   dissolving login gate, so there is no idle frame between both motions. */
body.qwix-auth-pending.qwix-auth-handoff > .app-shell,
body.qwix-auth-pending.qwix-auth-handoff > #v120App {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-gate {
  transition: opacity .42s cubic-bezier(.4,0,.2,1), visibility 0s linear .42s !important;
}

/* Stage 3 licensing states. These extend the existing gate without replacing
   the Qwix document or changing the main-page layout. */
.qwix-auth-status {
  display: grid;
  gap: 10px;
  text-align: left;
}
.qwix-auth-status[hidden] {
  display: none !important;
}
.qwix-auth-status p {
  margin: 0;
  color: var(--qwix-ink-tertiary, rgba(245,241,236,.50));
  font-size: 10px;
  line-height: 1.45;
}
.qwix-auth-status-actions {
  display: grid;
  gap: 8px;
}
.qwix-auth-status-actions .qwix-auth-submit,
.qwix-auth-status-actions .qwix-auth-link-btn {
  width: 100%;
}
.qwix-auth-gate[data-state="blocked"] .qwix-auth-card,
.qwix-auth-gate[data-state="fatal-client-error"] .qwix-auth-card {
  border-color: rgba(240, 138, 138, .22);
}

/* 2026-07-18: Login gate uses the same calm page-style reveal as the panel.
   The card itself only fades, so no transform layer is swapped when the
   entrance animation finishes. Children glide into their final positions. */
@keyframes qwix-auth-page-card-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes qwix-auth-page-item-in {
  0% { opacity: 0; transform: translate3d(0, 16px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes qwix-auth-page-card-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes qwix-auth-page-item-out {
  0% { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(0, 16px, 0); }
}

body.qwix-auth-pending:not(.qwix-auth-leaving) .qwix-auth-card {
  animation: qwix-auth-page-card-in .62s cubic-bezier(.18,.72,.22,1) both !important;
}
body.qwix-auth-pending:not(.qwix-auth-leaving) .qwix-auth-brand,
body.qwix-auth-pending:not(.qwix-auth-leaving) .qwix-auth-field,
body.qwix-auth-pending:not(.qwix-auth-leaving) .qwix-auth-message,
body.qwix-auth-pending:not(.qwix-auth-leaving) .qwix-auth-submit {
  animation: qwix-auth-page-item-in .56s cubic-bezier(.18,.76,.22,1) both !important;
}
body.qwix-auth-pending:not(.qwix-auth-leaving) .qwix-auth-brand { animation-delay: .04s !important; }
body.qwix-auth-pending:not(.qwix-auth-leaving) .qwix-auth-field:nth-of-type(1) { animation-delay: .10s !important; }
body.qwix-auth-pending:not(.qwix-auth-leaving) .qwix-auth-field:nth-of-type(2) { animation-delay: .16s !important; }
body.qwix-auth-pending:not(.qwix-auth-leaving) .qwix-auth-message { animation-delay: .20s !important; }
body.qwix-auth-pending:not(.qwix-auth-leaving) .qwix-auth-submit { animation-delay: .24s !important; }

body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-card {
  animation: qwix-auth-page-card-out .62s cubic-bezier(.4,0,.26,1) both !important;
}
body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-brand,
body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-field,
body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-message,
body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-submit {
  animation: qwix-auth-page-item-out .46s cubic-bezier(.4,0,.26,1) both !important;
}
body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-submit { animation-delay: 0s !important; }
body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-message { animation-delay: .035s !important; }
body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-field:nth-of-type(2) { animation-delay: .07s !important; }
body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-field:nth-of-type(1) { animation-delay: .105s !important; }
body.qwix-auth-pending.qwix-auth-leaving .qwix-auth-brand { animation-delay: .14s !important; }

/* Short, soft feedback for rejected credentials. This is the only animation
   that moves the card itself, and the last keyframe exactly matches rest. */
@keyframes qwix-auth-error-shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  18% { transform: translate3d(-5px, 0, 0); }
  36% { transform: translate3d(4px, 0, 0); }
  54% { transform: translate3d(-2.5px, 0, 0); }
  72% { transform: translate3d(1.5px, 0, 0); }
  88% { transform: translate3d(-.5px, 0, 0); }
}
.qwix-auth-card.qwix-auth-error-shake {
  animation: qwix-auth-error-shake .38s cubic-bezier(.36,.07,.19,.97) both !important;
}

@media (prefers-reduced-motion: reduce) {
  .qwix-auth-card.qwix-auth-error-shake { animation: none !important; }
}

/* 2026-07-18: robust auth error feedback and post-login visibility lock. */
body.qwix-auth-pending:not(.qwix-auth-leaving) .qwix-auth-card.qwix-auth-error-shake {
  animation: qwix-auth-error-shake .43s cubic-bezier(.36,.07,.19,.97) both !important;
}
body.qwix-auth-complete > .qwix-auth-gate,
body.qwix-auth-complete #qwixAuthGate {
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Stage 5F: compact offline-mode indicator in the topbar. Fixed size so it never
   shifts surrounding layout when it toggles, and it never overlaps qwixOfflineBadge
   with the host-status pill (it sits before it in source order). */
.qwix-offline-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #9a99a6);
  padding: 5px 10px;
  border: 1px solid var(--line, rgba(255,255,255,.08));
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  white-space: nowrap;
  flex: 0 0 auto;
}
.qwix-offline-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f5a524;
  flex: 0 0 auto;
}