#link-dialog {
  width: min(980px, calc(100% - 28px));
  max-height: min(780px, calc(100vh - 28px));
  overflow: auto;
}
#link-dialog [hidden] { display: none !important; }
.guide-shell {
  position: relative;
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr);
}
.guide-visual {
  min-width: 0;
  padding: 30px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, #f1f5fb, #e6edf7);
  border-right: 1px solid #dce3ed;
}
.guide-entry {
  min-width: 0;
  padding: 36px 34px 28px;
  display: flex;
  flex-direction: column;
}
.guide-entry .eyebrow { margin-bottom: 7px; }
.guide-step {
  margin: 0;
  color: var(--faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}
.guide-entry h2 {
  margin-top: 8px;
  padding-right: 36px;
  font-size: 26px;
}
.guide-entry > p:not(.eyebrow):not(.guide-step):not(.security-note) {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}
.guide-visual-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.guide-path { display: flex; gap: 8px; }
.guide-language-switch {
  flex: 0 0 auto;
  padding: 3px;
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,.76);
  border: 1px solid #cad5e4;
  border-radius: 10px;
}
.guide-language-switch button {
  min-height: 24px;
  padding: 0 8px;
  color: #64748b;
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
}
.guide-language-switch button.active { color: #fff; background: var(--blue); }
.guide-path span {
  position: relative;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: #7d8999;
  background: rgba(255,255,255,.72);
  border: 1px solid #cad5e4;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
}
.guide-path span + span::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 9px;
  height: 1px;
  background: #cad5e4;
}
.guide-path span.active {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(56,104,188,.1);
}
.guide-path span.done { color: #fff; background: #2f8a68; border-color: #2f8a68; }
.guide-image {
  min-height: 360px;
  margin: auto 0 0;
  display: grid;
  place-items: center;
}
.guide-caption {
  min-height: 34px;
  margin: 16px 0 0;
  color: #65758d;
  font-size: 10px;
  line-height: 1.55;
  text-align: center;
}
.guide-content { margin-top: 18px; }
.guide-notes {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  counter-reset: guide-note;
  list-style: none;
}
.guide-notes li {
  position: relative;
  min-height: 26px;
  padding: 4px 0 4px 34px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}
.guide-notes li::before {
  counter-increment: guide-note;
  content: counter(guide-note);
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: #315a9f;
  background: var(--blue-soft);
  border-radius: 7px;
  font-size: 8px;
  font-weight: 700;
}
.guide-entry .security-note {
  margin: auto 0 0;
  padding: 12px 13px;
  color: #36715a;
  background: #edf8f3;
  border: 1px solid #d2eadf;
  border-radius: 9px;
}
.guide-actions { margin-top: 12px; }
.guide-server-list {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}
.guide-mini-button {
  padding: 10px 11px;
  color: #315a9f;
  background: var(--blue-soft);
  border: 1px solid #cbdaf0;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
}
.client-download-heading {
  margin-bottom: 9px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.client-download-heading strong { color: var(--ink); font-size: 11px; }
.client-download-heading span { color: var(--faint); font-size: 8px; }
.client-download-grid {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}
.client-download-button {
  min-width: 0;
  min-height: 58px;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  color: #315a9f;
  background: var(--blue-soft);
  border: 1px solid #cbdaf0;
  border-radius: 9px;
  text-decoration: none;
}
.client-download-button strong { font-size: 10px; }
.client-download-button small { overflow-wrap: anywhere; color: var(--muted); font-size: 8px; line-height: 1.4; }
.platform-install-grid {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}
.platform-install {
  min-width: 0;
  padding: 10px 11px;
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.platform-install summary { color: #315a9f; cursor: pointer; font-size: 9px; font-weight: 700; }
.platform-install ol { margin: 9px 0 0; padding-left: 17px; color: var(--muted); font-size: 8px; line-height: 1.55; }
.platform-install li + li { margin-top: 5px; }
.guide-help-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}
.guide-help-grid section { padding: 10px 11px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 9px; }
.guide-help-grid strong,.guide-help-grid span { display: block; }
.guide-help-grid strong { color: var(--ink); font-size: 9px; }
.guide-help-grid span { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.credential-card {
  margin-bottom: 13px;
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.credential-card span { color: var(--faint); font-size: 8px; }
.credential-card strong { grid-column: 1/2; font: 12px ui-monospace,SFMono-Regular,Menlo,monospace; }
.credential-card small { grid-column: 1/-1; color: var(--muted); font-size: 9px; }
.ios-device {
  width: 238px;
  height: 438px;
  padding: 10px;
  color: #1f2937;
  background: #151c27;
  border: 5px solid #273140;
  border-radius: 34px;
  box-shadow: 0 24px 45px rgba(38,54,79,.2);
}
.ios-device-status { height: 22px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; color: #dce5f2; font-size: 7px; }
.ios-operation-screen { height: 376px; overflow: hidden; background: #f7f8fb; border-radius: 23px; }
.ios-operation-screen header { height: 38px; padding: 0 12px; display: grid; grid-template-columns: 22px 1fr 22px; align-items: center; color: #4c596b; background: #fff; border-bottom: 1px solid #e4e8ee; font-size: 8px; text-align: center; }
.ios-operation-screen header strong { color: #202a38; font-size: 10px; }
.ios-operation-app { margin: 12px; padding: 11px; display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #e3e7ed; border-radius: 12px; }
.ios-operation-app i { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: #426fae; border-radius: 10px; font-size: 13px; font-style: normal; font-weight: 750; }
.ios-operation-app div { min-width: 0; }
.ios-operation-app strong,.ios-operation-app small { display: block; }
.ios-operation-app strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.ios-operation-app small { margin-top: 3px; color: #8a94a3; font-size: 6px; }
.ios-operation-rows { margin: 0 12px; overflow: hidden; background: #fff; border: 1px solid #e3e7ed; border-radius: 12px; }
.ios-operation-row { position: relative; min-height: 42px; padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #edf0f4; }
.ios-operation-row:last-child { border-bottom: 0; }
.ios-operation-row span { color: #657184; font-size: 7px; }
.ios-operation-row strong { max-width: 58%; color: #2d3b50; font-size: 7px; line-height: 1.35; text-align: right; }
.ios-operation-row.focus { z-index: 1; background: #fff9df; box-shadow: inset 0 0 0 2px #ffca3a; }
.ios-operation-row.focus::before { content: "看这里"; position: absolute; right: 6px; top: -8px; padding: 2px 5px; color: #1b2533; background: #ffca3a; border-radius: 4px; font-size: 6px; font-weight: 700; }
.ios-operation-screen > p { margin: 12px; padding: 8px 9px; color: #315a9f; background: #edf3fd; border-radius: 8px; font-size: 7px; line-height: 1.45; text-align: center; }
.desktop-layout { min-height: 238px; display: grid; grid-template-columns: 92px 1fr; }
.desktop-layout nav { padding: 18px 11px; display: grid; align-content: start; gap: 12px; color: #9aa8bb; background: #1e2a3b; font-size: 7px; }
.desktop-layout nav b { margin-bottom: 6px; color: #fff; font-size: 9px; }
.desktop-layout nav .active { padding: 6px; color: #fff; background: #315a9f; border-radius: 5px; }
.desktop-layout main { padding: 26px 22px; }
.desktop-layout main small { color: #7d8aa0; font-size: 6px; letter-spacing: .09em; }
.desktop-layout main strong { display: block; margin-top: 5px; font-size: 14px; }
.desktop-card { height: 51px; margin-top: 20px; background: #f5f7fa; border: 1px solid #dce3ed; border-radius: 8px; }
.desktop-card.secondary { height: 37px; margin-top: 9px; }
.desktop-layout.profiles .desktop-card::before { content: "https://panel.morrowward.com/device/…"; height: 100%; padding: 0 10px; display: flex; align-items: center; color: #7b8799; font: 6px ui-monospace,SFMono-Regular,Menlo,monospace; }
.desktop-layout.route .desktop-card::before { content: "Morrowward   →   Singapore"; height: 100%; padding: 0 10px; display: flex; align-items: center; color: #315a9f; font-size: 7px; font-weight: 700; }
.desktop-layout.connected .desktop-card::before { content: "System Proxy   ON"; height: 100%; padding: 0 10px; display: flex; align-items: center; color: #2f8a68; font-size: 8px; font-weight: 700; }

.clash-real-shot {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #c5d1e1;
  border-radius: 12px;
  box-shadow: 0 22px 42px rgba(45,63,91,.16);
}
.clash-shot-link { position: relative; display: block; color: inherit; }
.clash-real-shot img { width: 100%; height: auto; display: block; }
.clash-focus {
  position: absolute;
  z-index: 2;
  display: block;
  border: 3px solid #ffca3a;
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(255,202,58,.2),0 8px 24px rgba(0,0,0,.25);
  pointer-events: none;
}
.clash-focus b {
  position: absolute;
  right: -3px;
  bottom: calc(100% + 5px);
  padding: 3px 6px;
  color: #1b2533;
  background: #ffca3a;
  border-radius: 5px;
  font-size: 7px;
  font-style: normal;
  white-space: nowrap;
}
.focus-language .clash-focus { left: 62%; top: 21%; width: 35%; height: 10%; }
.focus-service-mode .clash-focus { left: 24%; top: 29%; width: 36%; height: 10%; }
.focus-import .clash-focus { left: 22%; top: 14%; width: 70%; height: 7%; }
.focus-regions .clash-focus { left: 23%; top: 22%; width: 73%; height: 27%; }
.focus-system-proxy .clash-focus { left: 24%; top: 39%; width: 34%; height: 15%; }
.clash-result {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  max-width: calc(100% - 24px);
  padding: 7px 10px;
  color: #226649;
  background: rgba(237,248,243,.96);
  border: 1px solid #9ed4bc;
  border-radius: 7px;
  box-shadow: 0 8px 20px rgba(18,48,35,.18);
  font-size: 8px;
  font-weight: 700;
}
.clash-real-shot figcaption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 9px 11px;
  color: #20324e;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(49,90,159,.24);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(28,45,70,.14);
  font-size: 8px;
  line-height: 1.45;
  backdrop-filter: blur(8px);
}
.clash-real-shot figcaption span {
  margin-right: 7px;
  padding: 2px 5px;
  color: #fff;
  background: #315a9f;
  border-radius: 4px;
  font-size: 7px;
  font-weight: 700;
}
.cisco-real-shot { width: min(100%, 315px); margin-inline: auto; }
.cisco-real-shot figcaption { font-size: 7px; }
.tv-screen { padding: 12px; background: #151c27; border: 7px solid #273140; border-radius: 16px; }
.tv-top { height: 22px; padding: 0 4px; display: flex; align-items: flex-start; justify-content: space-between; color: #aeb9c8; font-size: 6px; }
.tv-content { min-height: 222px; padding: 26px 28px 22px; color: #e9eef6; background: linear-gradient(145deg,#334258,#1b2637); border-radius: 8px; }
.tv-app-badge { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: #5d7fae; border-radius: 10px; font-size: 16px; font-weight: 750; }
.tv-content small { display: block; margin-top: 13px; color: #9eabc0; font-size: 6px; letter-spacing: .1em; }
.tv-content strong { display: block; margin-top: 5px; font-size: 15px; }
.tv-card { position: relative; height: 38px; margin-top: 20px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.13); border-radius: 7px; }
.tv-card.secondary { height: 29px; margin-top: 8px; }
.tv-keyboard .tv-card::before { content: "Apple TV Keyboard 已连接"; height: 100%; padding: 0 10px; display: flex; align-items: center; color: #dfe9f7; font-size: 7px; }
.tv-import .tv-card::before { content: "URL   https://panel.morrowward.com/device/…"; height: 100%; padding: 0 10px; display: flex; align-items: center; color: #dfe9f7; font: 6px ui-monospace,SFMono-Regular,Menlo,monospace; }
.tv-route .tv-card::before { content: "Morrowward   →   Region"; height: 100%; padding: 0 10px; display: flex; align-items: center; color: #dfe9f7; font-size: 7px; font-weight: 700; }
.tv-connected .tv-card::before { content: "CONNECTED"; height: 100%; display: grid; place-items: center; color: #82d3ae; background: rgba(47,138,104,.14); font-size: 8px; font-weight: 750; }
.tv-stand { position: relative; width: 30%; height: 18px; margin: 0 auto; background: linear-gradient(#758294,#424d5d); clip-path: polygon(38% 0,62% 0,70% 70%,100% 100%,0 100%,30% 70%); }

@media (hover:hover) and (pointer:fine) { .guide-mini-button:hover,.client-download-button:hover { background: #dfeafb; } }
@media (max-width:760px) {
  .guide-shell { grid-template-columns: 1fr; }
  .guide-visual { padding: 22px; border-right: 0; border-bottom: 1px solid #dce3ed; }
  .guide-image { min-height: 300px; margin-top: 14px; }
  .guide-entry { padding: 27px 22px 22px; }
}
@media (max-width:430px) {
  .guide-visual-heading { align-items: stretch; flex-direction: column; }
  .guide-language-switch { align-self: flex-start; }
  .guide-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .guide-actions .primary-button { grid-column: 1/-1; }
  .guide-server-list { grid-template-columns: 1fr; }
  .client-download-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .client-download-grid { grid-template-columns: 1fr; }
  .platform-install-grid,.guide-help-grid { grid-template-columns: 1fr; }
  .ios-device { transform: scale(.94); margin: -13px 0; }
  .clash-real-shot { max-width: 100%; }
  .clash-real-shot figcaption { left: 8px; right: 8px; bottom: 8px; }
  .clash-focus { border-width: 2px; box-shadow: 0 0 0 3px rgba(255,202,58,.18); }
  .guide-image { min-height: 340px; }
}

/* Phone: one action per row. A half-width cell wrapped long labels onto two
   lines beside a full-width primary, which read as two different controls. */
@media(max-width:520px){
  .guide-actions{grid-template-columns:1fr;gap:8px}
  .guide-actions .secondary-button,.guide-actions .primary-button{width:100%;grid-column:1/-1}
}

/* The numbered steps repeat what the paragraph above already says, so they
   start folded: the card is then a title, a line of copy, and the buttons. */
.guide-notes-wrap{margin:14px 0 0}
.guide-notes-wrap>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-size:11px;font-weight:650}
.guide-notes-wrap>summary::-webkit-details-marker{display:none}
.guide-notes-wrap>summary::after{content:"▾";font-size:10px;transition:transform 160ms ease}
.guide-notes-wrap[open]>summary::after{transform:rotate(180deg)}
.guide-notes-wrap>summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.guide-notes-wrap .guide-notes{margin-top:10px}