:root{
  --cs-wine:#4A0E17;
  --cs-dark:#140507;
  --cs-gold:#D4AF37;
  --cs-gold-light:#F0D878;
  --cs-text:#FFFFFF;
  --cs-soft:#F0E6D2;
  --cs-muted:#A99398;
}

html.cs-modal-open,
body.cs-modal-open{
  overflow:hidden !important;
}

.cs-install-banner,
.cs-install-welcome,
.cs-install-guide-overlay{
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;
}

.cs-install-banner{
  display:none;
}

@media(max-width:900px){

  .cs-install-banner{
    width:100%;
    min-height:82px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:
      10px
      max(10px,env(safe-area-inset-right))
      10px
      max(10px,env(safe-area-inset-left));
    background:
      radial-gradient(
        circle at 70% 50%,
        rgba(212,175,55,.10),
        transparent 28%
      ),
      linear-gradient(
        100deg,
        #23080d,
        #4A0E17 55%,
        #25080e
      );
    border-bottom:1px solid rgba(212,175,55,.30);
    box-shadow:0 6px 20px rgba(0,0,0,.30);
    position:relative;
    z-index:100;
  }

  .cs-install-icon{
    width:52px;
    height:52px;
    flex:0 0 52px;
    overflow:hidden;
    border-radius:12px;
    border:1px solid rgba(212,175,55,.55);
    background:#35090f;
  }

  .cs-install-icon img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
  }

  .cs-install-text{
    flex:1;
    min-width:0;
  }

  .cs-install-title{
    color:#fff;
    font-size:14px;
    line-height:1.3;
    font-weight:800;
  }

  .cs-install-sub{
    margin-top:4px;
    color:#cdbfc1;
    font-size:11px;
  }

  .cs-install-phone{
    flex:0 0 34px;
    text-align:center;
    font-size:28px;
  }

  .cs-install-add{
    height:44px;
    min-width:68px;
    padding:0 13px;
    border:1px solid #E4C75C;
    border-radius:10px;
    background:
      linear-gradient(
        180deg,
        #E4C85E,
        #B88922
      );
    box-shadow:
      inset 0 1px rgba(255,255,255,.25),
      0 4px 12px rgba(0,0,0,.24);
    color:#2A090E;
    font-size:16px;
    font-weight:900;
  }

  .cs-install-x{
    width:25px;
    padding:0;
    border:0;
    background:transparent;
    color:#bda8ad;
    font-size:27px;
  }
}

.cs-install-welcome{
  position:fixed;
  inset:0;
  z-index:999998;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(8,2,4,.48);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.cs-welcome-sheet{
  position:relative;
  width:min(100%,560px);
  padding:
    12px
    20px
    calc(22px + env(safe-area-inset-bottom));
  border-radius:26px 26px 0 0;
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(212,175,55,.10),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #4A0E17 0%,
      #25080E 45%,
      #140507 100%
    );
  border-top:1px solid rgba(212,175,55,.55);
  box-shadow:0 -20px 65px rgba(0,0,0,.55);
}

.cs-welcome-handle{
  width:44px;
  height:5px;
  margin:0 auto 16px;
  border-radius:99px;
  background:rgba(240,230,210,.25);
}

.cs-welcome-close{
  position:absolute;
  top:18px;
  right:16px;
  width:36px;
  height:36px;
  padding:0;
  border:0;
  background:transparent;
  color:#c8b8bb;
  font-size:31px;
  line-height:1;
}

.cs-welcome-content{
  display:flex;
  align-items:center;
  gap:14px;
  padding-right:38px;
}

.cs-welcome-icon{
  width:66px;
  height:66px;
  flex:0 0 66px;
  overflow:hidden;
  border-radius:15px;
  border:1px solid rgba(212,175,55,.70);
  background:#35090F;
  box-shadow:0 5px 15px rgba(0,0,0,.28);
}

.cs-welcome-icon img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.cs-welcome-copy{
  flex:1;
  min-width:0;
}

.cs-welcome-copy strong{
  display:block;
  color:#fff;
  font-size:18px;
  line-height:1.4;
  font-weight:850;
}

.cs-welcome-copy span{
  display:block;
  margin-top:6px;
  color:#cbbcc0;
  font-size:13px;
}

.cs-welcome-add{
  display:block;
  width:150px;
  height:54px;
  margin:24px 0 2px auto;
  border:1px solid #E4C75C;
  border-radius:13px;
  background:
    linear-gradient(
      180deg,
      #E3C65A 0%,
      #C3972C 100%
    );
  box-shadow:
    inset 0 1px rgba(255,255,255,.28),
    0 7px 18px rgba(0,0,0,.30);
  color:#2B090F;
  font-size:21px;
  font-weight:900;
}

.cs-install-guide-overlay{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:flex-end;
  justify-content:center;
  background:rgba(8,2,4,.58);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.cs-install-guide-overlay.open{
  display:flex;
}

.cs-guide-card{
  position:relative;
  width:min(100%,560px);
  max-height:88vh;
  overflow:auto;
  padding:
    12px
    18px
    calc(24px + env(safe-area-inset-bottom));
  border-radius:26px 26px 0 0;
  background:
    linear-gradient(
      180deg,
      #4A0E17 0%,
      #22070C 48%,
      #140507 100%
    );
  border-top:1px solid rgba(212,175,55,.55);
  box-shadow:0 -22px 70px rgba(0,0,0,.6);
  color:#fff;
}

.cs-guide-handle{
  width:44px;
  height:5px;
  margin:0 auto 17px;
  border-radius:99px;
  background:rgba(240,230,210,.24);
}

.cs-guide-close{
  position:absolute;
  top:18px;
  right:16px;
  width:36px;
  height:36px;
  border:0;
  background:transparent;
  color:#c7b6ba;
  font-size:29px;
}

.cs-guide-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 42px 20px 0;
}

.cs-guide-logo{
  width:52px;
  height:52px;
  flex:0 0 52px;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(212,175,55,.60);
  background:#35090f;
}

.cs-guide-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.cs-guide-head h2{
  margin:0;
  color:#fff;
  font-size:20px;
}

.cs-guide-domain{
  margin-top:3px;
  color:#a99398;
  font-size:12px;
}

.cs-guide-step{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:11px;
  margin:9px 0;
  padding:13px;
  border-radius:13px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(212,175,55,.15);
}

.cs-guide-number{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#D4AF37;
  color:#2B090F;
  font-size:14px;
  font-weight:900;
}

.cs-guide-step strong{
  display:block;
  color:#fff;
  font-size:14px;
  line-height:1.45;
}

.cs-guide-step p{
  margin:4px 0 0;
  color:#a99398;
  font-size:12px;
  line-height:1.45;
}

.cs-guide-note{
  margin-top:14px;
  padding:11px;
  border-radius:11px;
  text-align:center;
  color:#E7D59B;
  background:rgba(212,175,55,.07);
  border:1px solid rgba(212,175,55,.18);
  font-size:12px;
}

@media(max-width:370px){

  .cs-install-phone{
    display:none;
  }

  .cs-install-title{
    font-size:13px;
  }

  .cs-install-add{
    min-width:62px;
    padding:0 10px;
  }

  .cs-welcome-copy strong{
    font-size:16px;
  }

  .cs-welcome-icon{
    width:58px;
    height:58px;
    flex-basis:58px;
  }

  .cs-welcome-add{
    width:130px;
    height:50px;
    font-size:19px;
  }
}

@media(display-mode:standalone){

  .cs-install-banner,
  .cs-install-welcome,
  .cs-install-guide-overlay{
    display:none !important;
  }
}