body { background: #111428; }

.guide-shell {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 28px 16px;
  background:
    linear-gradient(rgba(10,13,31,.62), rgba(10,13,31,.78)),
    url("../assets/background.jpg") center / cover fixed no-repeat;
}

.guide-card {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 38px 44px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 26px;
  color: #202331;
  background: rgba(255,255,255,.97);
  box-shadow: 0 24px 80px rgba(5,8,30,.38);
}

.guide-home { color: #b85b18; text-decoration: none; font-size: 13px; font-weight: 750; }

.guide-header { display: flex; align-items: center; gap: 18px; margin-top: 26px; }
.guide-header img { width: 86px; height: 86px; border-radius: 21px; box-shadow: 0 10px 26px rgba(0,153,234,.16); }
.guide-header p { margin: 0 0 5px; color: #f07b25; font-size: 10px; font-weight: 850; letter-spacing: .15em; }
.guide-header h1 { margin: 0; font-size: clamp(25px, 5vw, 34px); line-height: 1.25; }

.guide-intro { margin: 24px 0 0; color: #5c606d; font-size: 15px; line-height: 1.8; }

.guide-index { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 22px 0 8px; }
.guide-index a { padding: 10px 6px; border-radius: 10px; color: #b85a17; text-align: center; text-decoration: none; font-size: 13px; font-weight: 750; background: #fff1e5; }

.guide-card section { position: relative; margin-top: 26px; padding: 24px 0 0; border-top: 1px solid #e8e9ed; scroll-margin-top: 18px; }
.step-number { position: absolute; right: 0; top: 18px; color: #ffdbc1; font-size: 28px; font-weight: 900; }
.guide-card h2 { margin: 0 0 12px; font-size: 20px; }
.guide-card ol { margin: 0; padding-left: 22px; color: #5c606d; font-size: 14px; line-height: 1.85; }
.guide-card section > p { margin: 0; color: #5c606d; font-size: 14px; line-height: 1.85; }

.ios-methods { display: grid; gap: 10px; margin-top: 14px; }
.ios-methods article { padding: 14px 15px; border: 1px solid #ececf0; border-radius: 12px; background: #fafafd; }
.ios-methods h3 { margin: 0 0 5px; font-size: 14px; }
.ios-methods p { margin: 0; color: #616572; font-size: 13px; line-height: 1.7; }
.ios-checklist { margin-top: 16px !important; }
.profile-steps { margin-top: 10px; border: 0; }
.profile-steps summary { padding: 10px 12px; border-radius: 9px; color: #a75116; background: #fff0e3; }
.profile-steps ol { margin: 10px 0 0; padding-left: 22px; font-size: 12px; }
.profile-steps .stop-warning { margin-top: 10px; padding: 10px 11px; border-left: 3px solid #e05736; color: #82321f; background: #fff2ee; }

details { border-bottom: 1px solid #ededf0; }
summary { padding: 14px 24px 14px 0; cursor: pointer; font-size: 14px; font-weight: 750; }
details p { margin: 0 0 15px; color: #646875; font-size: 13px; line-height: 1.7; }

.guide-warning { margin-top: 28px; padding: 17px; border: 1px solid #ffd2af; border-radius: 14px; background: #fff7f1; }
.guide-warning strong { color: #ba5916; }
.guide-warning p { margin: 5px 0 0; color: #626673; font-size: 13px; line-height: 1.7; }

.guide-actions { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; margin-top: 24px; }
.guide-actions a { display: grid; place-items: center; min-height: 52px; padding: 10px; border: 1px solid #ffc99f; border-radius: 12px; color: #b55a19; text-align: center; text-decoration: none; font-weight: 750; background: #fff6ef; }
.guide-actions .guide-primary { border: 0; color: white; background: linear-gradient(135deg, #ff9f45, #ff8125); }

@media (max-width: 560px) {
  .guide-shell { padding: 12px; background-attachment: scroll; }
  .guide-card { padding: 26px 20px; border-radius: 21px; }
  .guide-header { align-items: flex-start; gap: 13px; margin-top: 20px; }
  .guide-header img { width: 68px; height: 68px; border-radius: 17px; }
  .guide-header h1 { font-size: 24px; }
  .guide-intro { margin-top: 18px; font-size: 14px; }
  .guide-index { grid-template-columns: 1fr 1fr; }
  .guide-actions { grid-template-columns: 1fr; }
}