/* NO1REMOTE as.no1pos.com flower/pastel UI v0.8.16 */
body {
  --flower-navy: #163653;
  --flower-ink: #243e55;
  --flower-muted: #5c7082;
  --flower-green: #087653;
  --flower-green-light: #0a8258;
  --flower-sky: #176789;
  --flower-line: #d5e6df;
  --flower-card: rgba(255, 255, 255, .94);
  color: var(--flower-ink);
  background-color: #f5fbf8;
  background-image:
    radial-gradient(ellipse at 5% 91%, rgba(255, 135, 178, .22) 0 18px, transparent 19px),
    radial-gradient(ellipse at 10% 86%, rgba(255, 206, 105, .25) 0 22px, transparent 23px),
    radial-gradient(ellipse at 16% 94%, rgba(161, 218, 192, .28) 0 28px, transparent 29px),
    radial-gradient(ellipse at 94% 87%, rgba(255, 149, 184, .22) 0 19px, transparent 20px),
    radial-gradient(ellipse at 88% 93%, rgba(188, 174, 255, .22) 0 23px, transparent 24px),
    radial-gradient(ellipse at 80% 88%, rgba(149, 215, 240, .25) 0 27px, transparent 28px),
    radial-gradient(circle at 12% 9%, rgba(255, 207, 225, .46) 0, transparent 24%),
    radial-gradient(circle at 88% 8%, rgba(190, 226, 255, .52) 0, transparent 27%),
    linear-gradient(145deg, #fffdf8 0%, #f4fcf8 45%, #f2f8ff 100%);
  background-attachment: fixed;
}

.site-header {
  border-bottom-color: rgba(103, 151, 132, .23);
  background: rgba(255, 255, 255, .91);
  box-shadow: 0 10px 34px rgba(42, 91, 72, .10);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

.brand-mark {
  color: #fff;
  background: linear-gradient(145deg, #25ca8d, #087653);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .31),
    0 5px 0 #075f43,
    0 13px 25px rgba(8, 118, 83, .23);
}

.brand-text strong,
.intro h1,
.install-copy strong {
  color: var(--flower-navy);
}

.brand-text small {
  color: #687f90;
}

.intro h1 strong {
  color: var(--flower-green);
  text-shadow: 0 2px 0 rgba(255, 255, 255, .88);
}

.intro p,
.install-copy p,
.code-message {
  color: var(--flower-muted);
}

.security-pill {
  color: #075f43;
  border-color: #9cdbc2;
  background: linear-gradient(180deg, #f5fffa, #dcf8ec);
  box-shadow:
    inset 0 1px 0 #fff,
    0 5px 12px rgba(8, 118, 83, .11);
}

.security-pill i {
  background: #0a9767;
  box-shadow: 0 0 0 5px rgba(10, 151, 103, .14);
}

.connect-card {
  position: relative;
  overflow: hidden;
  border-color: #d3e6de;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 194, 216, .24), transparent 28%),
    radial-gradient(circle at 0 100%, rgba(178, 223, 255, .22), transparent 27%),
    var(--flower-card);
  box-shadow:
    inset 0 1px 0 #fff,
    0 8px 0 rgba(180, 211, 199, .46),
    0 28px 66px rgba(45, 87, 70, .15);
}

.card-label {
  color: #405f6e;
}

.code-slots span {
  color: var(--flower-navy);
  border-color: #cbded6;
  background: linear-gradient(180deg, #fff, #f7fbf9);
  box-shadow:
    inset 0 2px 3px rgba(37, 77, 61, .05),
    0 3px 0 #d3e2dc;
}

.code-slots span.filled {
  border-color: #6fc7a5;
  background: linear-gradient(180deg, #f4fff9, #e2f8ee);
}

.code-slots span.active {
  border-color: #0b8a60;
  box-shadow:
    0 0 0 4px rgba(11, 138, 96, .15),
    0 3px 0 #acd8c7;
}

.keypad button {
  color: #174b38;
  border: 1px solid #c8dbd3;
  border-bottom: 4px solid #a9c8bc;
  background: linear-gradient(180deg, #fff, #f2faf6);
  box-shadow:
    inset 0 2px 0 #fff,
    0 6px 12px rgba(33, 79, 61, .11);
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.keypad button:hover {
  color: #075f43;
  border-color: #72bea0;
  border-bottom-color: #549f82;
  background: linear-gradient(180deg, #f8fffb, #e4f7ee);
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 0 #fff,
    0 8px 15px rgba(33, 79, 61, .14);
}

.keypad button:active {
  transform: translateY(3px);
  border-bottom-width: 1px;
  box-shadow: inset 0 2px 5px rgba(20, 76, 54, .11);
}

.keypad .key-function {
  color: #445d6d;
}

.keypad .key-back {
  color: #145f7d;
}

.connect-button {
  border: 1px solid #086845;
  border-bottom: 5px solid #05583b;
  color: #fff;
  background: linear-gradient(135deg, #0a8258, #08704c);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .24),
    0 10px 22px rgba(8, 113, 77, .26);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.connect-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .26),
    0 13px 25px rgba(8, 113, 77, .29);
}

.connect-button:active {
  transform: translateY(3px);
  border-bottom-width: 2px;
  box-shadow: inset 0 3px 6px rgba(0, 45, 29, .18);
}

.connect-button:disabled {
  transform: none;
  border-bottom-width: 1px;
  box-shadow: none;
}

.connect-icon {
  background: rgba(255, 255, 255, .23);
}

.launch-status {
  color: #075f43;
  border-color: #a9dbc7;
  background: #effbf6;
  box-shadow: inset 0 1px 0 #fff;
}

.install-help {
  border-color: var(--flower-line);
  background: rgba(255, 255, 255, .92);
  box-shadow:
    inset 0 1px 0 #fff,
    0 5px 0 rgba(200, 222, 213, .40),
    0 16px 30px rgba(52, 91, 75, .09);
}

.header-link,
.install-button,
.retry-button {
  border-bottom-width: 4px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .38),
    0 7px 15px rgba(39, 75, 61, .13);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.header-link-customer {
  color: #173a5c;
  border-color: #bfd8ea;
  border-bottom-color: #90bad6;
  background: linear-gradient(180deg, #f9fdff, #eaf6ff);
}

.header-link-customer .header-link-icon {
  color: #145f82;
  background: #dfedf7;
}

.header-link-auto {
  color: #075a40;
  border-color: #9ed9c1;
  border-bottom-color: #68b896;
  background: linear-gradient(180deg, #f5fff9, #e2f8ee);
}

.header-link-android {
  color: #0a5574;
  border-color: #add8e8;
  border-bottom-color: #75b9d2;
  background: linear-gradient(180deg, #f7fdff, #e5f7fc);
}

.header-link small {
  color: #587184;
}

.header-link-auto small {
  color: #356b57;
}

.header-link-android small {
  color: #3f6c80;
}

.install-button {
  border: 1px solid transparent;
  color: #fff;
}

.install-customer {
  border-color: #173f64;
  border-bottom-color: #0e2f4e;
  background: linear-gradient(135deg, #25577f, #173f64);
}

.install-auto {
  border-color: #087653;
  border-bottom-color: #05583b;
  background: linear-gradient(135deg, #0a8258, #08704c);
}

.install-android {
  border-color: #176f94;
  border-bottom-color: #084c69;
  background: linear-gradient(135deg, #176f94, #0d5f82);
}

.install-button strong,
.install-button small {
  color: #fff;
}

.retry-button {
  color: #374f63;
  border-color: #ccdbe5;
  border-bottom-color: #aebfcb;
  background: linear-gradient(180deg, #fff, #f1f6f9);
}

.header-link:hover,
.install-button:hover,
.retry-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.035);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .42),
    0 10px 18px rgba(39, 75, 61, .16);
}

.header-link:active,
.install-button:active,
.retry-button:active {
  transform: translateY(3px);
  border-bottom-width: 1px;
  box-shadow: inset 0 2px 5px rgba(20, 54, 42, .12);
}

.auto-connect-guide {
  border-color: #a9dbc7;
  background: linear-gradient(135deg, rgba(239, 251, 246, .96), rgba(250, 255, 253, .96));
  box-shadow:
    inset 0 1px 0 #fff,
    0 5px 0 rgba(184, 218, 204, .37),
    0 14px 28px rgba(52, 91, 75, .07);
}

.auto-connect-badge {
  color: #fff;
  background: linear-gradient(180deg, #0a8258, #08704c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
}

.auto-connect-guide strong {
  color: #075f43;
}

.auto-connect-guide p {
  color: #4f7666;
}

.safe-guide > div {
  border-color: var(--flower-line);
  background: rgba(255, 255, 255, .88);
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 rgba(200, 222, 213, .34),
    0 12px 23px rgba(52, 91, 75, .07);
}

.safe-guide span {
  color: #075f43;
  background: linear-gradient(180deg, #e9fbf3, #d5f4e7);
}

.safe-guide strong {
  color: #2c4a5e;
}

.safe-guide small {
  color: #667c8d;
}

.site-footer {
  color: #536b7c;
  background: rgba(255, 255, 255, .62);
  border-top: 1px solid rgba(103, 151, 132, .17);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.brand:focus-visible,
.header-link:focus-visible,
.support-phone:focus-visible,
.keypad button:focus-visible,
.connect-button:focus-visible,
.install-button:focus-visible,
.retry-button:focus-visible {
  outline: 3px solid #075f43;
  outline-offset: 3px;
}

@media (max-width: 860px) {
  .header-downloads {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .connect-card {
    padding: 22px;
  }
}

@media (max-width: 620px) {
  body {
    background-attachment: scroll;
  }

  .portal-main {
    width: min(100% - 20px, 820px);
  }

  .header-link {
    min-height: 62px;
    flex-direction: column;
    gap: 3px;
    padding: 7px 4px;
    text-align: center;
  }

  .header-link small {
    display: none;
  }

  .connect-card {
    padding: 18px 14px;
    border-radius: 20px;
  }

  .code-slots {
    gap: 5px;
  }
}

@media (max-width: 380px) {
  .header-link strong {
    font-size: 11px;
  }

  .connect-card {
    padding-right: 10px;
    padding-left: 10px;
  }

  .code-slots span {
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-link,
  .keypad button,
  .connect-button,
  .install-button,
  .retry-button {
    transition: none;
  }
}