/* ==========================================================================
   pwa-header.css · 新皮肤（new-skin-symbol）PWA 顶部安装栏样式
   对应源码：ptgame/app/src/pwa/HeaderBar/PwaHeader.vue <style scoped lang="less">
   （#pwa-header-bar-new-index.style() mixin → CSS 变量参数展开；
     new-skin-symbol / theme-* 挂在 html 上，见 themes.css 头部注释；
     layoutXX class 由主题配置透传到组件根元素自身，见 PwaHeader.js 注释；
     :deep(.btn-default) 展开为后代选择器）
   注：源码 mixin 参数 @closeIconColor/@btnBg/@btnTextColor/@downloadIconColor 在 mixin 体中
       未被使用（.close-icon 的 color 硬编码 var(--ep-color-icon-default)），照原样保留该行为。
   ========================================================================== */

/* ---- .new-skin-symbol { #pwa-header-bar-new-index.style() }（默认参数展开） ---- */

.new-skin-symbol .pwa-header-wrap {
  width: 100%;
  height: 3.125rem;
  background: var(--ep-color-background-fill-surface-lowered);
  position: relative;
  display: flex;
  align-items: center;
}

.new-skin-symbol .pwa-header-wrap .close-btn-bg {
  position: absolute;
  height: 3.875rem;
  width: 3.875rem;
  border-radius: 50%;
  background: var(--ep-neutral-white-white-10);
  transform: translate(-50%, -50%);
}

.new-skin-symbol .pwa-header-wrap .close-icon {
  position: absolute;
  left: 0.25rem;
  top: 0.25rem;
  font-size: var(--ep-font-size-m);
  color: var(--ep-color-icon-default);
}

.new-skin-symbol .pwa-header-wrap .left-area {
  display: flex;
  align-items: center;
  margin-left: 2.3125rem;
}

.new-skin-symbol .pwa-header-wrap .left-area .pwa-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: var(--ep-border-radius-l);
  overflow: hidden;
}

.new-skin-symbol .pwa-header-wrap .left-area .pwa-icon-wrap .pwa-icon {
  width: 100%;
  height: 100%;
}

.new-skin-symbol .pwa-header-wrap .left-area .pwa-name {
  width: 8.25rem;
  font-size: var(--ep-font-size-s);
  line-height: 1.125rem;
  color: var(--ep-color-text-default);
  margin: 0 0.4375rem;
}

.new-skin-symbol .pwa-header-wrap .left-area .pwa-money {
  width: 2rem;
  height: 2rem;
}

/* ---- 源码 .theme-24, .theme-34 { .style(@bg: --ep-color-background-fill-active-primary) } ---- */
.theme-24 .pwa-header-wrap,
.theme-34 .pwa-header-wrap {
  background: var(--ep-color-background-fill-active-primary);
}

/* ---- 源码 .theme-28 ---- */
.theme-28 .pwa-header-wrap .close-btn-bg {
  top: 0;
  left: 0;
  height: 4rem;
  width: 4rem;
}

.theme-28 .pwa-header-wrap .close-icon {
  top: 0.125rem;
  left: 0.125rem;
  font-size: 1.25rem;
}

/* ---- 源码 .malt-green ---- */
.malt-green .pwa-header-wrap {
  background: var(--ep-color-background-fill-active-disabled);
}

.malt-green .pwa-header-wrap .close-btn-bg {
  top: 0;
  left: 0;
  height: 3.875rem;
  width: 3.875rem;
  transform: translate(-45%, -45%);
}

.malt-green .pwa-header-wrap .close-icon {
  font-size: 1.375rem;
  top: 0.125rem;
  left: 0.125rem;
}

/* 源码 :deep(.btn-default) */
.malt-green .pwa-header-wrap .btn-default .download-svg {
  color: var(--ep-color-icon-default);
}

.malt-green .pwa-header-wrap .btn-default .btn-text {
  color: var(--ep-color-text-default);
}

/* ---- 源码 .layout38.pwa-header-wrap（layout38 在根元素自身） ---- */
.layout38.pwa-header-wrap .left-area {
  flex: 1;
}

.layout38.pwa-header-wrap .left-area .pwa-name {
  flex: 1;
}

.layout38.pwa-header-wrap .left-area .pwa-money {
  display: none;
}

/* ---- 源码 .theme-42 ---- */
.theme-42 .pwa-header-wrap {
  background: var(--ep-color-background-fill-glow-secondary-opacity-40);
  justify-content: flex-end;
  padding: 0 0.75rem;
}

.theme-42 .pwa-header-wrap .left-area {
  margin-left: 0;
}

.theme-42 .pwa-header-wrap .close-btn-bg {
  top: 0;
  left: 0;
  height: 3.875rem;
  width: 3.875rem;
  transform: translate(-45%, -45%);
}

.theme-42 .pwa-header-wrap .close-icon {
  font-size: 1rem;
  top: 0.25rem;
  left: 0.25rem;
  color: #fff;
}

/* 源码 :deep(.btn-default) */
.theme-42 .pwa-header-wrap .btn-default {
  background: linear-gradient(90deg, var(--ep-color-background-fill-gradients-tertiary-a, #2FDA90) -27.5%, var(--ep-color-background-fill-gradients-tertiary-b, #79AF0A) 127.5%);
  margin-left: 0.375rem;
}

.theme-42 .pwa-header-wrap .btn-default .download-svg {
  color: var(--ep-color-icon-inverse);
}

.theme-42 .pwa-header-wrap .btn-default .btn-text {
  color: var(--ep-color-text-inverse);
}

/* ---- 源码 .theme-37, .theme-41 ---- */
.theme-37 .pwa-header-wrap .left-area,
.theme-41 .pwa-header-wrap .left-area {
  margin-left: 1.375rem;
}

.theme-37 .pwa-header-wrap .close-btn-bg,
.theme-41 .pwa-header-wrap .close-btn-bg {
  top: 0;
  left: 0;
  width: 3.875rem;
  height: 3.875rem;
  transform: translate(-50%, -50%);
}

.theme-37 .pwa-header-wrap .close-icon,
.theme-41 .pwa-header-wrap .close-icon {
  font-size: var(--ep-font-size-l);
  color: var(--ep-color-icon-default);
}

/* ---- 源码 .theme-37 ---- */
.theme-37 .pwa-header-wrap .pwa-name {
  color: #000;
}

.theme-37 .pwa-header-wrap .close-btn-bg {
  background: var(--ep-neutral-black-black-10);
}

/* ---- 源码 .theme-41 ---- */
.theme-41 .pwa-header-wrap .left-area .pwa-name {
  color: #fff;
}

.theme-41 .pwa-header-wrap .close-btn-bg {
  background: var(--ep-neutral-white-white-10);
}

/* ---- 源码 .layout44, .layout45 { &.pwa-header-wrap { ... } } ---- */
.layout44.pwa-header-wrap .close-btn-bg,
.layout45.pwa-header-wrap .close-btn-bg {
  background: var(--ep-neutral-black-black-10);
}

/* ---- 源码 .theme-46 ---- */
.theme-46 .pwa-header-wrap .left-area {
  margin-left: 1.375rem;
}

.theme-46 .pwa-header-wrap .close-btn-bg {
  top: 0;
  left: 0;
  width: 3.875rem;
  height: 3.875rem;
  transform: translate(-50%, -50%);
}

.theme-46 .pwa-header-wrap .close-icon {
  font-size: var(--ep-font-size-l);
  color: var(--ep-color-icon-default);
}

.theme-46 .pwa-header-wrap .pwa-name {
  color: #000;
}

.theme-46 .pwa-header-wrap .close-btn-bg {
  background: var(--ep-neutral-black-black-10);
}

/* ---- 源码 .layout49.pwa-header-wrap ---- */
.layout49.pwa-header-wrap {
  padding-right: 0.75rem;
  justify-content: space-between;
}

.layout49.pwa-header-wrap .left-area {
  flex: 1;
}

.layout49.pwa-header-wrap .left-area .pwa-name {
  flex: 1;
}

.layout49.pwa-header-wrap .left-area .pwa-money {
  display: none;
}

/* ---- 以下为源码中重复出现的块（.theme-41 / .layout44,.layout45 / .theme-46 / .layout49 各写了两遍），
   照原样保留（复刻源码行为，后者覆盖前者，值相同） ---- */

/* 源码 .theme-41 .pwa-header-wrap（第二遍） */
.theme-41 .pwa-header-wrap .close-btn-bg {
  top: 0;
  left: 0;
  width: 3.875rem;
  height: 3.875rem;
  background: var(--ep-neutral-white-white-10);
}

.theme-41 .pwa-header-wrap .left-area .pwa-name {
  color: #fff;
}

/* 源码 .layout44, .layout45（第二遍） */
.layout44.pwa-header-wrap .close-btn-bg,
.layout45.pwa-header-wrap .close-btn-bg {
  background: var(--ep-neutral-black-black-10);
}

/* 源码 .theme-46（第二遍） */
.theme-46 .pwa-header-wrap .left-area {
  margin-left: 1.375rem;
}

.theme-46 .pwa-header-wrap .close-btn-bg {
  top: 0;
  left: 0;
  width: 3.875rem;
  height: 3.875rem;
  transform: translate(-50%, -50%);
}

.theme-46 .pwa-header-wrap .close-icon {
  font-size: var(--ep-font-size-l);
  color: var(--ep-color-icon-default);
}

.theme-46 .pwa-header-wrap .pwa-name {
  color: #000;
}

.theme-46 .pwa-header-wrap .close-btn-bg {
  background: var(--ep-neutral-black-black-10);
}

/* 源码 .layout49.pwa-header-wrap（第二遍） */
.layout49.pwa-header-wrap {
  padding-right: 0.75rem;
  justify-content: space-between;
}

.layout49.pwa-header-wrap .left-area {
  flex: 1;
}

.layout49.pwa-header-wrap .left-area .pwa-name {
  flex: 1;
}

.layout49.pwa-header-wrap .left-area .pwa-money {
  display: none;
}

/* ---- 源码 .theme-54 ---- */
.theme-54 .pwa-header-wrap {
  background: var(--ep-color-background-fill-surface-raised-L2);
  justify-content: flex-end;
  padding: 0 0.75rem;
}

.theme-54 .pwa-header-wrap .left-area {
  margin-left: 0;
}

.theme-54 .pwa-header-wrap .close-btn-bg {
  top: 0;
  left: 0;
  height: 3.875rem;
  width: 3.875rem;
  transform: translate(-45%, -45%);
}

.theme-54 .pwa-header-wrap .close-icon {
  font-size: 1rem;
  top: 0.375rem;
  left: 0.4375rem;
  color: #fff;
}

/* 源码 :deep(.btn-default) */
.theme-54 .pwa-header-wrap .btn-default {
  background: linear-gradient(90deg, var(--color-background-fill-gradients-primary-a, #45F880) -27.5%, var(--color-background-fill-gradients-primary-b, #FFBD1C) 127.5%);
  margin-left: 0.375rem;
}

.theme-54 .pwa-header-wrap .btn-default .download-svg {
  color: var(--ep-color-icon-inverse);
}

.theme-54 .pwa-header-wrap .btn-default .btn-text {
  color: var(--ep-color-text-inverse);
}