/* =========================================================
   KokuuSkin 后台 · 提瓦特元素装饰
   由 kokuu-ui 插件注入。融合七元素与地区意象到 Apple 扁平后台，
   克制点缀：不喧宾夺主，只在细节处呼应。
   ========================================================= */

/* =========================================================
   一、七元素符号（CSS 方块像素风，与首页 MC 像素语言一致）
   通过 data-el 属性切换颜色，可放在任意元素上作为徽标。
   ========================================================= */
.tw-el {
  display: inline-block;
  width: 9px; height: 9px;
  vertical-align: -1px;
  background: var(--tw-el-c, #8B7FD4);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tw-el-c, #8B7FD4) 22%, transparent);
  image-rendering: pixelated;
}
.tw-el[data-el="风"] { --tw-el-c: #7FB2E5; }
.tw-el[data-el="岩"] { --tw-el-c: #C8A96A; }
.tw-el[data-el="雷"] { --tw-el-c: #A98BE0; }
.tw-el[data-el="水"] { --tw-el-c: #5FC6D9; }
.tw-el[data-el="火"] { --tw-el-c: #E8794A; }
.tw-el[data-el="草"] { --tw-el-c: #7FB069; }
.tw-el[data-el="冰"] { --tw-el-c: #8FD4E0; }

/* =========================================================
   二、内容区顶部「提瓦特」水印（超淡，不干扰阅读）
   ========================================================= */
body.kokuu-apple .content-wrapper::before {
  content: "";
  position: fixed;
  right: 40px;
  top: 120px;
  width: 220px; height: 220px;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* 简化：七元素同心环（风纹） */
  background:
    radial-gradient(circle at 50% 50%, transparent 62%, rgba(139,127,212,.10) 63%, transparent 65%),
    radial-gradient(circle at 50% 50%, transparent 50%, rgba(15,163,163,.09) 51%, transparent 53%),
    radial-gradient(circle at 50% 50%, transparent 38%, rgba(139,127,212,.07) 39%, transparent 41%);
}
body.kokuu-apple .content-wrapper > * { position: relative; z-index: 1; }

/* =========================================================
   三、内容区标题旁的元素小徽标
   ========================================================= */
body.kokuu-apple .content-header h1::after {
  content: "✦";
  display: inline-block;
  margin-left: 10px;
  font-size: .55em;
  vertical-align: super;
  color: var(--k-rain, #0FA3A3);
  opacity: .55;
}

/* =========================================================
   四、侧边栏：地区分组标签（提瓦特七国）
   AdminLTE 的 .nav-header 用作分节，改为更含蓄的提瓦特风格。
   ========================================================= */
body.kokuu-apple .nav-header {
  font-size: 11px !important;
  letter-spacing: 1px;
  text-transform: none;
  color: var(--a-text-3) !important;
  opacity: .8;
}
body.kokuu-apple .nav-header::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 7px;
  vertical-align: 1px;
  background: var(--k-rain, #0FA3A3);
  opacity: .55;
  image-rendering: pixelated;
}

/* =========================================================
   五、皮肤库侧栏：地区氛围（用极淡的色调分层）
   不同导航分节给一点点提瓦特色温，替代纯灰。
   ========================================================= */
body.kokuu-apple .nav-sidebar .nav-item:nth-child(3n+1) > .nav-link { --tw-tint: rgba(15,163,163,.10); }
body.kokuu-apple .nav-sidebar .nav-item:nth-child(3n+2) > .nav-link { --tw-tint: rgba(139,127,212,.10); }
body.kokuu-apple .nav-sidebar .nav-item:nth-child(3n+3) > .nav-link { --tw-tint: rgba(232,196,120,.10); }

/* =========================================================
   六、页脚提瓦特署名
   ========================================================= */
body.kokuu-apple .main-footer::before {
  content: "提瓦特大陆 · KokuuSkin";
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--a-text-3);
  margin-bottom: 4px;
}
body.kokuu-apple .main-footer::after {
  content: "";
  display: block;
  width: 34px; height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--k-rain, #0FA3A3), var(--k-lilac, #8B7FD4));
  opacity: .5;
}

/* =========================================================
   七、夜间态微调
   ========================================================= */
body.kokuu-apple.dark-mode .content-wrapper::before { opacity: .35; }
body.kokuu-apple.dark-mode .content-header h1::after { color: #4FE3D0; }

@media (prefers-reduced-motion: reduce) {
  body.kokuu-apple .content-wrapper::before { display: none; }
}