/* Visible guide/material advice for exact reference entrances 19 and 70.
   These rules are scoped so the existing chat/model guides keep their layout. */
.refmotion-material-note {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.375rem;
  padding: .4375rem .75rem .4375rem .625rem;
  border: 1px solid rgba(255, 215, 0, .26);
  border-left: 3px solid rgba(255, 215, 0, .7);
  border-radius: .75rem;
  background: rgba(28, 26, 16, .88);
  color: rgba(255, 232, 160, .92);
  font: .75rem/1.125rem system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "HarmonyOS Sans", "Microsoft YaHei", sans-serif;
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .18);
}
.refmotion-note-icon { display: block; width: 14px; height: 14px; flex: 0 0 auto; color: #ffd76a; }
.refmotion-note-text { flex: 1 1 auto; }
.refmotion-material-note .refmotion-note-link {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: .125rem;
  padding: .125rem .375rem .125rem .5rem;
  border: 1px solid rgba(255, 215, 0, .3);
  border-radius: 62.4375rem;
  background: rgba(255, 215, 0, .1);
  color: #ffe9a3;
  font: 600 .75rem system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "HarmonyOS Sans", "Microsoft YaHei", sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.refmotion-note-link svg { display: block; flex: 0 0 auto; }
.modal.refep.refmotion-guide {
  width: 92vw;
  max-width: 960px;
  height: auto;
  max-height: 88vh;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1.25rem;
  background: linear-gradient(rgba(25, 28, 40, .98), rgba(18, 20, 30, .99));
  box-shadow: 0 0 0 1px rgba(0, 202, 224, .1), 0 2rem 5rem rgba(0, 0, 0, .5), 0 0 100px rgba(0, 202, 224, .1), inset 0 1px 0 rgba(255, 255, 255, .05);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "HarmonyOS Sans", "Microsoft YaHei", sans-serif;
}
body:has(#reference-model-guide.refmotion-guide:not([hidden])) #modal-backdrop { background: rgba(5, 5, 15, .92); backdrop-filter: blur(20px) saturate(1.8); }
.modal.refmotion-guide, .modal.refmotion-guide *, body:has(#reference-model-guide.refmotion-guide:not([hidden])) #modal-backdrop { transition: background-color .25s, color .2s, border-color .25s, box-shadow .25s; }
.refmotion-guide-top-line { position: absolute; top: 0; left: 1.5rem; right: 1.5rem; height: 2px; border-radius: 1px; background: linear-gradient(90deg, transparent 0%, rgba(0, 202, 224, .6) 20%, rgba(120, 80, 255, .4) 50%, rgba(0, 202, 224, .6) 80%, transparent 100%); }
.modal.refmotion-guide > .refep-close { width: 2.5rem; height: 2.5rem; top: 1.25rem; right: 1.25rem; padding: 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: .75rem; background: rgba(255, 255, 255, .03); color: rgba(255, 255, 255, .5) !important; }
.modal.refmotion-guide > .refep-close svg { width: 20px; height: 20px; stroke-width: 2; stroke-linecap: butt; stroke-linejoin: miter; }
.refmotion-guide .refep-guide-head { height: auto; min-height: 0; flex: 0 0 auto; gap: 1rem; padding: 2rem 2.5rem 1.5rem; }
.refmotion-guide .refep-guide-info { position: relative; display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border: 0; border-radius: 0; background: none; box-shadow: none; }
.refmotion-guide-icon-ring { position: absolute; inset: 0; border: 1px solid rgba(0, 202, 224, .3); border-radius: 1rem; background: linear-gradient(135deg, rgba(0, 202, 224, .2), rgba(120, 80, 255, .1)); }
.refmotion-guide-info-icon { position: relative; display: block; width: 2rem; height: 2rem; color: #00cae0; }
.refmotion-guide .refep-guide-header-text { display: flex; flex-direction: column; gap: .25rem; }
.refmotion-guide .refep-guide-head h2 { margin: 0; padding: 0; color: #fff; font-size: 1.5rem; font-weight: 700; line-height: 1.5; }
.refmotion-guide .refep-guide-head p { margin: 0; color: rgba(0, 202, 224, .8); font-size: .875rem; font-weight: 500; line-height: 1.5; }
.refmotion-guide .refep-guide-body { min-height: 0; padding: 0 2.5rem 2rem; }
.refmotion-guide .refep-guide-body::-webkit-scrollbar { width: 6px; }
.refmotion-guide .refmotion-guide-article { color: rgba(255, 255, 255, .85); font-size: .9375rem; line-height: 1.85; }
.refmotion-guide-article h1, .refmotion-guide-article h2 { margin: 2rem 0 1rem; padding: 0 0 .5rem; border-bottom: 1px solid rgba(255, 255, 255, .06); color: #fff; font-weight: 700; line-height: inherit; }
.refmotion-guide-article h1 { font-size: 1.75rem; }
.refmotion-guide .refmotion-guide-article h2 { display: flex; align-items: center; gap: .75rem; margin: 2rem 0 1rem; font-size: 1.375rem; }
.refmotion-guide .refmotion-guide-article p { margin: 1rem 0; font-size: inherit; line-height: inherit; color: inherit; }
.refmotion-guide-article li { position: relative; margin: .625rem 0; }
.refmotion-guide-article :is(ol, ul) { margin: 1rem 0; padding: 0 0 0 1.5rem; list-style-position: outside; }
.refmotion-guide-article ol { list-style-type: decimal; }
.refmotion-guide-article ul { list-style-type: disc; }
.refmotion-guide-article .refmotion-cyan { color: #00cae0; }
.refmotion-guide-article .refmotion-orange { color: #ffa500; }
.refmotion-guide-article :is(.refmotion-tip, .refmotion-warning) { padding: .5rem .75rem; border-radius: .5rem; border-left: 3px solid #00cae0; background: rgba(0, 202, 224, .1); }
.refmotion-guide-article .refmotion-warning { border-left-color: #ffa500; background: rgba(255, 165, 0, .1); }
.refmotion-guide-article table { width: 100%; margin: 1.5rem 0; padding: 0; border: 1px solid rgba(255, 255, 255, .08); border-radius: .75rem; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.refmotion-guide-article th, .refmotion-guide-article td { padding: .875rem 1rem; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .06); text-align: left; }
.refmotion-guide-article th { background: linear-gradient(rgba(0, 202, 224, .15), rgba(0, 202, 224, .08)); color: #fff; font-size: .8125rem; font-weight: 600; }
.refmotion-guide-article tbody tr:last-child td { border-bottom: 0; }
.refmotion-guide .refep-guide-footer { padding: 1.5rem 2.5rem 2rem; border-top: 1px solid rgba(255, 255, 255, .04); background: linear-gradient(transparent, rgba(0, 0, 0, .2)); }
.modal.refmotion-guide .refep-guide-footer .refep-primary { position: relative; display: block; width: auto; height: auto; min-height: 0; padding: .875rem 3rem; border: 0; border-radius: 2rem; background: linear-gradient(135deg, #00cae0, #0095a8); box-shadow: none; color: #000 !important; font: 400 13.3333px Arial; font-size: 13.3333px !important; font-weight: 400 !important; overflow: hidden; filter: none; }
.refmotion-guide-footer-text { position: relative; color: #fff; font: 600 .9375rem Arial; }
.modal.refmotion-guide .refmotion-guide-footer-shine { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent); transition: left .5s; }
@media (max-width: 840px) {
  .refmotion-material-note { flex-wrap: wrap; row-gap: .25rem; column-gap: .5rem; margin-bottom: 1.25rem; }
  .refmotion-note-text { flex: 1 1 0; }
  .refmotion-material-note .refmotion-note-link { margin-left: auto; }
}