/* ==========================================================================
   safari-guide-modal.css · Safari 引导弹窗内容
   对应源码：ptgame/app/src/pwa/comp/SafariGuideModal.vue <style scoped lang="less">（mixin 全参数分支展开）

   说明：源码 `#pwa-safari-guide-modal-index { .style(...) {...} }` 是 LESS mixin 命名空间定义，
   调用处 `html { #pwa-safari-guide-modal-index.style(); }` 输出的选择器是 `html .guide-safari-wrap`
   （命名空间本身不出现在输出中，线上实测样式命中），此处按展开后的真实选择器复刻。
   ========================================================================== */

/* ---- 基础分支（源码 html {.style(); }，默认参数） ---- */

html .guide-safari-wrap {
  width: 17.5rem;
  margin: 1rem auto;
}

html .guide-safari-wrap .text {
  font-size: 14px;
  color: var(--color-text-40);
  text-align: left;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}

html .guide-safari-wrap .rectangle {
  width: 100%;
  height: 2.5rem;
  background: var(--color-bg-100);
  border-radius: 6px;
  color: #110000;
  padding: .4375rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-bg-100);
}

html .guide-safari-wrap .rectangle .copy-text {
  width: 14.25rem;
  font-size: .875rem;
  line-height: 1.625rem;
  color: var(--color-text-40);
}

html .guide-safari-wrap .rectangle .safari-icon {
  font-size: 30px;
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- new-skin-symbol（@color: --ep-color-text-default, @rectangleColor: --ep-color-text-weak） ---- */

.new-skin-symbol .guide-safari-wrap {
  width: 17.5rem;
  margin: 1rem auto;
}

.new-skin-symbol .guide-safari-wrap .text {
  font-size: 14px;
  color: var(--ep-color-text-default);
  text-align: left;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}

.new-skin-symbol .guide-safari-wrap .rectangle {
  width: 100%;
  height: 2.5rem;
  background: var(--color-bg-100);
  border-radius: 6px;
  color: #110000;
  padding: .4375rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-bg-100);
}

.new-skin-symbol .guide-safari-wrap .rectangle .copy-text {
  width: 14.25rem;
  font-size: .875rem;
  line-height: 1.625rem;
  color: var(--ep-color-text-weak);
}

.new-skin-symbol .guide-safari-wrap .rectangle .safari-icon {
  font-size: 30px;
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- purple-light（@bg: --color-bg-300） ---- */

.purple-light .guide-safari-wrap {
  width: 17.5rem;
  margin: 1rem auto;
}

.purple-light .guide-safari-wrap .text {
  font-size: 14px;
  color: var(--color-text-40);
  text-align: left;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}

.purple-light .guide-safari-wrap .rectangle {
  width: 100%;
  height: 2.5rem;
  background: var(--color-bg-300);
  border-radius: 6px;
  color: #110000;
  padding: .4375rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-bg-100);
}

.purple-light .guide-safari-wrap .rectangle .copy-text {
  width: 14.25rem;
  font-size: .875rem;
  line-height: 1.625rem;
  color: var(--color-text-40);
}

.purple-light .guide-safari-wrap .rectangle .safari-icon {
  font-size: 30px;
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- green-default（@bg: --text-color-white-100, @color/@rectangleColor: --color-text-gray-300, @borderColor: --theme-color-800） ---- */

.green-default .guide-safari-wrap {
  width: 17.5rem;
  margin: 1rem auto;
}

.green-default .guide-safari-wrap .text {
  font-size: 14px;
  color: var(--color-text-gray-300);
  text-align: left;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}

.green-default .guide-safari-wrap .rectangle {
  width: 100%;
  height: 2.5rem;
  background: var(--text-color-white-100);
  border-radius: 6px;
  color: #110000;
  padding: .4375rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--theme-color-800);
}

.green-default .guide-safari-wrap .rectangle .copy-text {
  width: 14.25rem;
  font-size: .875rem;
  line-height: 1.625rem;
  color: var(--color-text-gray-300);
}

.green-default .guide-safari-wrap .rectangle .safari-icon {
  font-size: 30px;
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- blue-default（@bg: --text-color-white-100, @color/@rectangleColor: --color-text-gray-800, @borderColor: --accent-color-yellow） ---- */

.blue-default .guide-safari-wrap {
  width: 17.5rem;
  margin: 1rem auto;
}

.blue-default .guide-safari-wrap .text {
  font-size: 14px;
  color: var(--color-text-gray-800);
  text-align: left;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}

.blue-default .guide-safari-wrap .rectangle {
  width: 100%;
  height: 2.5rem;
  background: var(--text-color-white-100);
  border-radius: 6px;
  color: #110000;
  padding: .4375rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--accent-color-yellow);
}

.blue-default .guide-safari-wrap .rectangle .copy-text {
  width: 14.25rem;
  font-size: .875rem;
  line-height: 1.625rem;
  color: var(--color-text-gray-800);
}

.blue-default .guide-safari-wrap .rectangle .safari-icon {
  font-size: 30px;
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- forest-green（同 green-default 参数） ---- */

.forest-green .guide-safari-wrap {
  width: 17.5rem;
  margin: 1rem auto;
}

.forest-green .guide-safari-wrap .text {
  font-size: 14px;
  color: var(--color-text-gray-300);
  text-align: left;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}

.forest-green .guide-safari-wrap .rectangle {
  width: 100%;
  height: 2.5rem;
  background: var(--text-color-white-100);
  border-radius: 6px;
  color: #110000;
  padding: .4375rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--theme-color-800);
}

.forest-green .guide-safari-wrap .rectangle .copy-text {
  width: 14.25rem;
  font-size: .875rem;
  line-height: 1.625rem;
  color: var(--color-text-gray-300);
}

.forest-green .guide-safari-wrap .rectangle .safari-icon {
  font-size: 30px;
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- auroral-yellow（@bg: --text-color-white-100, @color/@rectangleColor: --color-text-black-100, @borderColor: --accent-color-yellow） ---- */

.auroral-yellow .guide-safari-wrap {
  width: 17.5rem;
  margin: 1rem auto;
}

.auroral-yellow .guide-safari-wrap .text {
  font-size: 14px;
  color: var(--color-text-black-100);
  text-align: left;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}

.auroral-yellow .guide-safari-wrap .rectangle {
  width: 100%;
  height: 2.5rem;
  background: var(--text-color-white-100);
  border-radius: 6px;
  color: #110000;
  padding: .4375rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--accent-color-yellow);
}

.auroral-yellow .guide-safari-wrap .rectangle .copy-text {
  width: 14.25rem;
  font-size: .875rem;
  line-height: 1.625rem;
  color: var(--color-text-black-100);
}

.auroral-yellow .guide-safari-wrap .rectangle .safari-icon {
  font-size: 30px;
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- amber-purple .default（@bg: --text-color-white-100, @color/@rectangleColor: --text-color-black-100, @borderColor: --theme-color-800） ---- */

.amber-purple .default .guide-safari-wrap {
  width: 17.5rem;
  margin: 1rem auto;
}

.amber-purple .default .guide-safari-wrap .text {
  font-size: 14px;
  color: var(--text-color-black-100);
  text-align: left;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}

.amber-purple .default .guide-safari-wrap .rectangle {
  width: 100%;
  height: 2.5rem;
  background: var(--text-color-white-100);
  border-radius: 6px;
  color: #110000;
  padding: .4375rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--theme-color-800);
}

.amber-purple .default .guide-safari-wrap .rectangle .copy-text {
  width: 14.25rem;
  font-size: .875rem;
  line-height: 1.625rem;
  color: var(--text-color-black-100);
}

.amber-purple .default .guide-safari-wrap .rectangle .safari-icon {
  font-size: 30px;
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- Tailwind 工具类等价规则（源码由全局 Tailwind 提供） ---- */

.guide-safari-wrap .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}