/* 灰港苏醒：霓虹装甲主题。作为最终覆盖层，不改变业务布局与交互。 */
:root {
  --bg-top: #070513;
  --bg-bottom: #030711;
  --bg: #050814;
  --primary: #9a45ff;
  --primary-dark: #5a21c9;
  --accent: #20d9ff;
  --gold: #ffd65a;
  --panel: #0a1020;
  --panel-grad: linear-gradient(145deg, rgba(17, 20, 47, .98), rgba(5, 11, 24, .98));
  --card: rgba(11, 17, 35, .92);
  --card-border: rgba(85, 190, 255, .22);
  --input-bg: rgba(2, 8, 20, .82);
  --muted: rgba(216, 227, 255, .62);
  --surface-0: rgba(10, 17, 35, .46);
  --surface-1: rgba(16, 24, 48, .72);
  --surface-2: rgba(31, 40, 72, .78);
  --surface-3: rgba(52, 49, 92, .86);
  --line-1: rgba(93, 187, 255, .14);
  --line-2: rgba(116, 183, 255, .28);
  --line-focus: rgba(149, 69, 255, .88);
  --text: #f5f7ff;
  --text-2: rgba(230, 236, 255, .76);
  --text-3: rgba(215, 226, 255, .51);
  --rar-rare: #25cfff;
  --rar-epic: #ba55ff;
  --rar-special: #ffd24e;
  --rar-legendary: #ffc83d;
  --glow-primary: 0 0 0 1px rgba(155, 70, 255, .32), 0 0 24px rgba(106, 45, 255, .28);
  --hud-cyan: #24d9ff;
  --hud-violet: #a13cff;
  --hud-gold: #ffd55a;
  --hud-line: rgba(57, 204, 255, .34);
  --hud-dark: rgba(4, 8, 20, .94);
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 16px;
}

html,
body {
  background:
    radial-gradient(circle at 50% -10%, rgba(87, 31, 176, .28), transparent 38%),
    radial-gradient(circle at 110% 65%, rgba(0, 174, 255, .13), transparent 32%),
    #03060e;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(59, 150, 255, .024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 150, 255, .024) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, #000, transparent 86%);
}

.home-page {
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(9, 6, 25, .94), rgba(3, 8, 17, .98)),
    url("../art/ui/gray-harbor-promo-wide.webp") 62% 14% / auto 42% no-repeat;
  border-inline: 1px solid rgba(74, 176, 255, .10);
  box-shadow: 0 0 80px rgba(0, 0, 0, .8), inset 0 0 48px rgba(24, 64, 154, .08);
}

.home-page::before {
  content: "";
  position: fixed;
  inset: 0 max(0px, calc((100vw - var(--app-w)) / 2));
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(75, 181, 255, .016) 4px),
    linear-gradient(115deg, transparent 38%, rgba(33, 188, 255, .045) 50%, transparent 62%);
}

.bg-glow { opacity: .42; filter: blur(90px); }
.bg-glow-1 { background: rgba(129, 39, 255, .48); }
.bg-glow-2 { background: rgba(0, 196, 255, .28); }

/* 登录、注册和密码页 */
.brand { position: relative; z-index: 1; }
.brand-badge {
  border: 1px solid rgba(135, 67, 255, .72) !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, rgba(29, 20, 66, .96), rgba(4, 11, 25, .98)) !important;
  box-shadow: inset 0 0 20px rgba(103, 64, 255, .20), 0 0 24px rgba(93, 42, 255, .20) !important;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.brand h1 { letter-spacing: 2px; text-shadow: 0 0 18px rgba(151, 61, 255, .42); }
.brand p { color: rgba(164, 205, 255, .60); letter-spacing: .5px; }
.brand + .card {
  position: relative;
  border: 1px solid rgba(64, 192, 255, .28) !important;
  border-top-color: rgba(157, 65, 255, .68) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(117, 41, 218, .08), transparent 34%), linear-gradient(180deg, rgba(13, 19, 40, .97), rgba(4, 10, 22, .98)) !important;
  box-shadow: inset 0 0 26px rgba(22, 78, 168, .07), 0 20px 48px rgba(0, 0, 0, .38) !important;
}
.brand + .card::before {
  content: "IDENTITY // ACCESS";
  position: absolute;
  right: 12px;
  top: 7px;
  color: rgba(68, 206, 255, .20);
  font-size: 7px;
  letter-spacing: 1.4px;
}
.field label { color: rgba(218, 229, 255, .76); letter-spacing: .6px; }
.links a { color: #6ddfff !important; }

/* 公共装甲面板与按钮 */
.prep-top,
.prep-bottom,
.layout-status,
.layout-board-wrap,
.craft-anvil,
.craft-card,
.sortie-panel,
.chapter-accordion,
.modal-card,
.sheet-panel,
.drawer-panel {
  border-color: var(--hud-line) !important;
  background:
    linear-gradient(135deg, rgba(157, 52, 255, .08), transparent 30%),
    linear-gradient(180deg, rgba(12, 18, 39, .98), rgba(4, 10, 23, .98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(191, 222, 255, .08),
    inset 0 0 25px rgba(22, 78, 168, .06),
    0 12px 32px rgba(0, 0, 0, .32) !important;
}

.btn-primary,
.deploy-btn,
.primary {
  border: 1px solid rgba(63, 224, 255, .68) !important;
  color: #fff !important;
  background: linear-gradient(135deg, #5523b5 0%, #8a35ee 48%, #087fae 100%) !important;
  box-shadow: inset 0 0 12px rgba(255,255,255,.08), 0 0 18px rgba(118, 55, 255, .3) !important;
  text-shadow: 0 1px 3px #000;
}

.btn-ghost,
.chip,
.prep-toolbar button,
.craft-anvil-actions button {
  border-color: rgba(84, 174, 255, .30) !important;
  background: linear-gradient(180deg, rgba(26, 32, 62, .94), rgba(7, 13, 28, .96)) !important;
}

.chip.active,
.home-tabbar button.active {
  color: #fff !important;
  border-color: rgba(75, 220, 255, .72) !important;
  background: linear-gradient(135deg, rgba(115, 41, 225, .88), rgba(20, 92, 146, .78)) !important;
  box-shadow: inset 0 0 16px rgba(90, 214, 255, .12), 0 0 18px rgba(91, 54, 255, .22);
}

input,
select,
textarea,
.craft-filter-input {
  border-color: rgba(63, 168, 233, .28) !important;
  background: rgba(3, 9, 22, .86) !important;
  color: var(--text) !important;
  box-shadow: inset 0 0 14px rgba(39, 106, 217, .07);
}

/* 顶部 HUD */
.home-hud,
.home-header {
  border-bottom: 1px solid rgba(57, 198, 255, .30);
  background: linear-gradient(180deg, rgba(13, 8, 34, .98), rgba(6, 10, 24, .96));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .30), 0 1px 18px rgba(112, 42, 255, .12);
}

.home-hud::after,
.home-header::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -1px;
  width: 72px;
  height: 2px;
  background: linear-gradient(90deg, var(--hud-violet), var(--hud-cyan), transparent);
  box-shadow: 0 0 10px var(--hud-cyan);
}

.home-hud-avatar {
  border: 1px solid rgba(187, 81, 255, .84) !important;
  border-radius: 6px !important;
  background-color: #070b18 !important;
  box-shadow: inset 0 0 12px rgba(93, 49, 255, .26), 0 0 10px rgba(157, 48, 255, .2);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.home-hud-meta strong { letter-spacing: .5px; }
.home-hud-meta span { color: #8dcfff; }
.home-hud-chip,
.home-hud-settings {
  border-color: rgba(99, 155, 238, .28) !important;
  background: linear-gradient(180deg, rgba(31, 25, 62, .9), rgba(9, 13, 29, .96)) !important;
  box-shadow: inset 0 0 12px rgba(102, 67, 221, .11);
}
.home-hud-stamina-bolt,
.home-hud-stamina .num { color: var(--hud-gold) !important; text-shadow: 0 0 10px rgba(255, 201, 48, .5); }

/* 首页战役场景 */
.home-scene.stage {
  border: 1px solid rgba(76, 194, 255, .42);
  border-radius: 12px;
  background: #030711;
  box-shadow: inset 0 0 48px rgba(7, 5, 24, .9), 0 0 0 1px rgba(135, 55, 255, .12), 0 14px 36px rgba(0,0,0,.42);
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
}

.home-scene .stage-bg {
  opacity: .58;
  filter: saturate(1.24) contrast(1.12) brightness(.64);
}

.home-scene .stage-mid {
  background:
    linear-gradient(180deg, rgba(4, 5, 15, .04) 20%, rgba(2, 5, 12, .72) 83%, rgba(2, 5, 12, .96)),
    radial-gradient(circle at 50% 44%, rgba(98, 28, 255, .14), transparent 46%);
}

.home-campaign-mark {
  position: absolute;
  z-index: 3;
  left: 16px;
  top: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
  text-shadow: 0 2px 8px #000, 0 0 16px rgba(153, 59, 255, .54);
}
.home-campaign-mark small { color: #7ccfff; font-size: 9px; letter-spacing: 1.6px; }
.home-campaign-mark strong { color: #fff; font-size: 24px; font-weight: 900; font-style: italic; letter-spacing: 3px; }
.home-campaign-mark strong::after { content: ""; display: block; width: 112%; height: 2px; margin-top: 3px; background: linear-gradient(90deg, #8e35ff, #34dfff, transparent); box-shadow: 0 0 10px #8e35ff; }
.home-campaign-mark span { margin-top: 5px; color: rgba(226, 233, 255, .58); font-size: 10px; letter-spacing: .8px; }

.hero-body.art-ready {
  filter: drop-shadow(0 0 15px rgba(72, 190, 255, .22)) drop-shadow(0 12px 10px rgba(0,0,0,.9));
}
.home-scene .stage-char { margin-bottom: 18px; }
.hero-label {
  border: 1px solid rgba(81, 202, 255, .35);
  background: rgba(3, 9, 24, .82);
  box-shadow: 0 0 15px rgba(58, 90, 255, .16);
  letter-spacing: 1px;
}

/* 备战、仓库、格子 */
.prep-section-head,
.warehouse-section-head {
  position: relative;
  border-bottom-color: rgba(66, 188, 255, .18) !important;
  background:
    linear-gradient(90deg, rgba(130, 44, 255, .13), transparent 42%),
    linear-gradient(180deg, rgba(18, 24, 50, .72), rgba(5, 11, 25, .18));
}
.prep-section-head::after,
.warehouse-section-head::after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: -1px;
  width: 88px;
  height: 2px;
  background: linear-gradient(90deg, #a443ff, #31dfff 65%, transparent);
  box-shadow: 0 0 9px rgba(55, 216, 255, .62);
}
.prep-section-head.is-drag-hint {
  padding: 0 10px;
  border-color: rgba(91, 109, 255, .42) !important;
  background: linear-gradient(90deg, rgba(32, 199, 255, .10), rgba(125, 54, 255, .16), rgba(32, 199, 255, .10));
}
.prep-drag-hint-inline {
  width: 100%;
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #9defff;
  text-shadow: 0 0 8px rgba(83, 221, 255, .50), 0 0 12px rgba(142, 62, 255, .32);
}
.prep-section-head h3,
.warehouse-section-head h3,
.craft-anvil-copy strong { letter-spacing: 1px; text-shadow: 0 0 12px rgba(131, 58, 255, .38); }

.prep-skill-col {
  flex: 0 0 58px;
  align-self: stretch;
  justify-content: space-between;
  gap: 0;
  padding-block: 0;
}
.prep-skill-slot {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
}

.prep-skill-slot:not(.filled) .prep-skill-slot-label,
.equip-slot:not(.filled) .equip-slot-label { display: none; }
.prep-skill-slot-empty,
.equip-slot-empty-plus {
  position: absolute !important;
  inset: 0;
  z-index: 4;
  margin: 0;
  pointer-events: none;
}
.prep-skill-slot-empty::before,
.prep-skill-slot-empty::after,
.equip-slot-empty-plus::before,
.equip-slot-empty-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 2px;
  background: linear-gradient(90deg, #75efff, #5aa7ff);
  box-shadow: 0 0 4px rgba(76, 220, 255, .72), 0 0 9px rgba(73, 109, 255, .42);
  transform: translate(-50%, -50%);
}
.prep-skill-slot-empty::before,
.equip-slot-empty-plus::before { width: 17px; height: 3px; }
.prep-skill-slot-empty::after,
.equip-slot-empty-plus::after { width: 3px; height: 17px; }

.equip-slot,
.skill-slot,
.bag-slot,
.warehouse-item,
.warehouse-slot,
.role-item,
.item-slot,
.roster-card,
.craft-row-icon,
.craft-row-emoji {
  border-radius: 7px !important;
  border-color: color-mix(in srgb, var(--rar, #62bfff) 56%, transparent) !important;
  background:
    linear-gradient(135deg, rgba(90, 46, 167, .12), transparent 44%),
    linear-gradient(180deg, rgba(18, 28, 52, .96), rgba(5, 12, 26, .98)) !important;
  box-shadow: inset 0 0 15px color-mix(in srgb, var(--rar, #42bfff) 10%, transparent), 0 5px 12px rgba(0,0,0,.25) !important;
}

/* 宣传片同款装备边框：稀有度决定主色，四角使用高亮装甲角标。 */
.equip-slot.filled {
  --rar: #75cfff;
  border: 1px solid color-mix(in srgb, var(--rar) 86%, white 14%) !important;
  border-radius: 7px !important;
  background:
    linear-gradient(var(--rar), var(--rar)) left 3px top 3px / 9px 1px no-repeat,
    linear-gradient(var(--rar), var(--rar)) left 3px top 3px / 1px 9px no-repeat,
    linear-gradient(var(--rar), var(--rar)) right 3px top 3px / 9px 1px no-repeat,
    linear-gradient(var(--rar), var(--rar)) right 3px top 3px / 1px 9px no-repeat,
    linear-gradient(var(--rar), var(--rar)) left 3px bottom 3px / 9px 1px no-repeat,
    linear-gradient(var(--rar), var(--rar)) left 3px bottom 3px / 1px 9px no-repeat,
    linear-gradient(var(--rar), var(--rar)) right 3px bottom 3px / 9px 1px no-repeat,
    linear-gradient(var(--rar), var(--rar)) right 3px bottom 3px / 1px 9px no-repeat,
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rar) 25%, transparent), transparent 64%),
    linear-gradient(145deg, rgba(11, 16, 34, .98), rgba(2, 6, 16, .99)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(2, 5, 14, .90),
    inset 0 0 0 3px color-mix(in srgb, var(--rar) 42%, transparent),
    inset 0 -3px 0 color-mix(in srgb, var(--rar) 58%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--rar) 17%, transparent),
    0 0 0 1px rgba(4, 7, 17, .96),
    0 0 12px color-mix(in srgb, var(--rar) 42%, transparent) !important;
}
.equip-slot.filled::before,
.equip-slot.filled::after {
  content: "✦";
  position: absolute;
  z-index: 3;
  color: color-mix(in srgb, var(--rar) 84%, white 16%);
  font-size: 7px;
  line-height: 1;
  text-shadow: 0 0 5px var(--rar);
  pointer-events: none;
}
.equip-slot.filled::before { left: 3px; bottom: 3px; }
.equip-slot.filled::after { right: 3px; top: 3px; }
.equip-slot.filled.rarity-normal { --rar: #75cfff; }
.equip-slot.filled.rarity-normal::before,
.equip-slot.filled.rarity-normal::after { content: "◆"; opacity: .72; font-size: 5px; }
.equip-slot.filled.rarity-rare { --rar: #29cfff; }
.equip-slot.filled.rarity-epic { --rar: #ad49ff; }
.equip-slot.filled.rarity-legendary { --rar: #ffca3d; }

.prep-item[class*="rarity-"] {
  --frame-color: var(--rar, #94a3b8);
  border: 1px solid color-mix(in srgb, var(--frame-color) 80%, white 12%) !important;
  background:
    linear-gradient(var(--frame-color), var(--frame-color)) left 3px top 3px / 8px 1px no-repeat,
    linear-gradient(var(--frame-color), var(--frame-color)) left 3px top 3px / 1px 8px no-repeat,
    linear-gradient(var(--frame-color), var(--frame-color)) right 3px bottom 3px / 8px 1px no-repeat,
    linear-gradient(var(--frame-color), var(--frame-color)) right 3px bottom 3px / 1px 8px no-repeat,
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--frame-color) 20%, transparent), transparent 65%),
    linear-gradient(145deg, #11172c, #040918) !important;
  box-shadow: inset 0 0 0 2px rgba(2, 6, 16, .86), inset 0 0 12px color-mix(in srgb, var(--frame-color) 14%, transparent), 0 0 8px color-mix(in srgb, var(--frame-color) 24%, transparent) !important;
}
.prep-item[class*="rarity-"]::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 18%;
  right: 18%;
  bottom: 2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--frame-color), transparent);
  box-shadow: 0 0 7px var(--frame-color);
  pointer-events: none;
}
.prep-item.rarity-normal { --rar: #75cfff; }
.prep-item.rarity-legendary { --rar: #ffca3d; }

/* 用户提供的 Hex Neon Frame：暗核 + 紫环 + 虚线环 + 六角蓝银外框。 */
.skill-frame-defs { position: fixed; width: 0; height: 0; overflow: hidden; }
.prep-skill-slot {
  --hex-frame: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible;
  clip-path: none;
  background: transparent !important;
  padding: 8px 7px !important;
  filter: none;
}
.prep-skill-slot::before,
.prep-skill-slot::after { content: none; }
.skill-hex-frame {
  position: absolute;
  inset: -4px -2px;
  z-index: 0;
  pointer-events: none;
  filter:
    drop-shadow(0 0 3px rgba(90, 216, 255, .90))
    drop-shadow(0 0 9px rgba(58, 168, 216, .45))
    drop-shadow(0 0 13px rgba(123, 45, 255, .30));
}
.skill-hex-core,
.skill-hex-inner {
  position: absolute;
  display: block;
  clip-path: var(--hex-frame);
}
.skill-hex-core {
  inset: 10.5%;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 45%, #101028 0%, #070712 70%);
}
.skill-hex-inner {
  inset: 8%;
  z-index: 1;
  padding: 2px;
  background: #389dff;
  filter:
    drop-shadow(0 0 2px #82ecff)
    drop-shadow(0 0 6px #389dff)
    drop-shadow(0 0 12px rgba(49, 151, 255, .52));
}
.skill-hex-inner::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  clip-path: var(--hex-frame);
  background: #070712;
}
.skill-hex-frame > svg {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.skill-hex-dash {
  fill: none;
  stroke: rgba(120, 190, 255, .43);
  stroke-width: 1.15;
  stroke-dasharray: 5 6;
  stroke-linejoin: miter;
  filter: drop-shadow(0 0 3px rgba(120, 190, 255, .34));
}
.skill-hex-corners {
  fill: none;
  stroke: url(#skill-frame-metal);
  stroke-width: 3.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.skill-hex-corners .edge {
  stroke: url(#skill-frame-soft);
  stroke-width: 1.15;
  opacity: .72;
}
.prep-skill-slot.filled .skill-hex-frame {
  filter:
    drop-shadow(0 0 3px rgba(90, 216, 255, .96))
    drop-shadow(0 0 10px rgba(58, 168, 216, .55))
    drop-shadow(0 0 15px rgba(174, 52, 255, .38));
}
.prep-skill-slot.drop-compatible .skill-hex-frame { opacity: .34; }
.prep-skill-slot.drag-over .skill-hex-frame { opacity: .22; }
.prep-skill-slot .prep-skill-slot-img,
.prep-skill-slot .prep-skill-slot-emoji,
.prep-skill-slot .prep-skill-slot-name,
.prep-skill-slot .prep-skill-slot-label { position: relative; z-index: 2; }

/* 装备框：黑色装甲底、稀有度双线框、对角稀有度角标。 */
.equip-slot.filled {
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  border: 2px solid #58e7ff !important;
  background:
    linear-gradient(var(--rar), var(--rar)) 5px 5px / 11px 1px no-repeat,
    linear-gradient(var(--rar), var(--rar)) 5px 5px / 1px 11px no-repeat,
    linear-gradient(var(--rar), var(--rar)) calc(100% - 5px) calc(100% - 5px) / 11px 1px no-repeat,
    linear-gradient(var(--rar), var(--rar)) calc(100% - 5px) calc(100% - 5px) / 1px 11px no-repeat,
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rar) 17%, transparent), transparent 60%),
    linear-gradient(145deg, rgba(9, 12, 28, .995), rgba(1, 4, 13, .995)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(2, 4, 13, .96),
    inset 0 0 0 3px color-mix(in srgb, var(--rar) 45%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--rar) 15%, transparent),
    0 0 3px rgba(88, 231, 255, .92),
    0 0 10px rgba(49, 207, 255, .58),
    0 0 16px rgba(54, 117, 255, .24) !important;
}
.equip-slot:not(.filled) {
  background: linear-gradient(145deg, rgba(6, 25, 45, .82), rgba(2, 8, 19, .94)) !important;
  box-shadow: inset 0 0 12px rgba(49, 207, 255, .12), 0 0 7px rgba(56, 214, 255, .30) !important;
}
.equip-slot.filled .equip-slot-img,
.equip-slot.filled .equip-slot-emoji { position: relative; z-index: 2; }
.equip-slot.filled::before,
.equip-slot.filled::after {
  width: 9px;
  height: 9px;
  display: grid;
  place-items: center;
  font-size: 7px;
  color: color-mix(in srgb, var(--rar) 74%, white 26%);
  text-shadow: 0 0 5px var(--rar);
}
.equip-slot.filled::before { content: "⌞"; left: 2px; bottom: 2px; }
.equip-slot.filled::after { content: "⌝"; right: 2px; top: 2px; }

/* 拖拽兼容槽：模拟战术锁定，空槽与已装备槽都显示。 */
.prep-skill-slot.drop-compatible,
.equip-slot.drop-compatible,
.prep-skill-slot.filled.drop-compatible,
.equip-slot.filled.drop-compatible {
  position: relative;
  z-index: 20 !important;
  isolation: isolate;
  border-color: #8c70ff !important;
  background-color: rgba(67, 45, 163, .24) !important;
  box-shadow:
    inset 0 0 18px rgba(95, 94, 255, .30),
    0 0 0 1px rgba(74, 216, 255, .76),
    0 0 10px rgba(55, 210, 255, .58),
    0 0 19px rgba(142, 55, 255, .62) !important;
  filter: brightness(1.22) drop-shadow(0 0 7px rgba(111, 73, 255, .66));
  animation: targetLockPulse .72s steps(2, end) infinite !important;
}
.prep-skill-slot.drop-compatible::after,
.equip-slot.drop-compatible::after,
.prep-skill-slot.filled.drop-compatible::after,
.equip-slot.filled.drop-compatible::after {
  content: "⌖" !important;
  position: absolute;
  inset: 4px !important;
  z-index: 30;
  width: auto;
  height: auto;
  display: grid;
  place-items: center;
  clip-path: none;
  border: 1px solid rgba(119, 112, 255, .82) !important;
  border-radius: 3px;
  color: #d9f8ff;
  font-size: 19px;
  line-height: 1;
  background:
    linear-gradient(#55ddff, #55ddff) left top / 8px 2px no-repeat,
    linear-gradient(#55ddff, #55ddff) left top / 2px 8px no-repeat,
    linear-gradient(#a449ff, #a449ff) right top / 8px 2px no-repeat,
    linear-gradient(#a449ff, #a449ff) right top / 2px 8px no-repeat,
    linear-gradient(#a449ff, #a449ff) left bottom / 8px 2px no-repeat,
    linear-gradient(#a449ff, #a449ff) left bottom / 2px 8px no-repeat,
    linear-gradient(#55ddff, #55ddff) right bottom / 8px 2px no-repeat,
    linear-gradient(#55ddff, #55ddff) right bottom / 2px 8px no-repeat,
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(112, 78, 255, .18) 8px 9px),
    linear-gradient(145deg, rgba(3, 19, 42, .97), rgba(39, 10, 78, .96)) !important;
  text-shadow: 0 0 5px #4ee5ff, 0 0 10px #9b46ff;
  box-shadow: inset 0 0 12px rgba(91, 93, 255, .24), 0 0 7px rgba(50, 215, 255, .38), 0 0 12px rgba(153, 55, 255, .34);
  pointer-events: none;
}
.prep-skill-slot.drag-over,
.equip-slot.drag-over,
.prep-skill-slot.filled.drag-over,
.equip-slot.filled.drag-over {
  position: relative;
  z-index: 22 !important;
  isolation: isolate;
  border-color: #8dffb0 !important;
  box-shadow: inset 0 0 18px rgba(74, 222, 128, .34), 0 0 20px rgba(74, 222, 128, .82) !important;
  filter: brightness(1.26) drop-shadow(0 0 8px rgba(74, 222, 128, .70));
  animation: none !important;
}
.prep-skill-slot.drag-over::after,
.equip-slot.drag-over::after,
.prep-skill-slot.filled.drag-over::after,
.equip-slot.filled.drag-over::after {
  content: "✓" !important;
  z-index: 30;
  border-color: rgba(141, 255, 176, .90) !important;
  color: #d8ffe5;
  background: linear-gradient(145deg, rgba(5, 46, 28, .97), rgba(4, 26, 19, .97)) !important;
  text-shadow: 0 0 8px #63f394;
}

@keyframes targetLockPulse {
  0%, 100% { opacity: .88; }
  50% { opacity: 1; }
}

/* 人偶装备区增加扫描底盘、连接网格和上下能量节点。 */
.equip-doll {
  position: relative;
  isolation: isolate;
}
.equip-doll::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 17px 20px 9px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(54, 213, 255, .22) 50%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(154, 65, 255, .16) 50%, transparent 50.5%),
    radial-gradient(ellipse at center, transparent 42%, rgba(51, 211, 255, .16) 42.7%, transparent 44.2%),
    radial-gradient(ellipse at center, rgba(103, 48, 218, .11), transparent 63%);
  filter: drop-shadow(0 0 9px rgba(64, 177, 255, .14));
}
.equip-doll::after {
  content: "LOADOUT // LINKED";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  color: rgba(83, 216, 255, .30);
  font-size: 6px;
  letter-spacing: 1.3px;
  white-space: nowrap;
  text-shadow: 0 0 7px rgba(48, 207, 255, .5);
}
.equip-doll-body {
  position: relative;
  border-width: 1px !important;
  border-color: rgba(93, 207, 255, .58) !important;
  background-color: rgba(7, 19, 38, .94) !important;
  box-shadow:
    inset 0 0 0 2px rgba(5, 9, 23, .84),
    inset 0 0 28px rgba(52, 166, 255, .20),
    0 0 16px rgba(58, 178, 255, .20) !important;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

.prep-stat-chip {
  position: relative;
  overflow: hidden;
  border-color: rgba(72, 161, 239, .28) !important;
  background:
    linear-gradient(145deg, rgba(43, 29, 83, .42), transparent 44%),
    linear-gradient(180deg, rgba(20, 27, 53, .97), rgba(6, 12, 26, .98)) !important;
}
.prep-stat-chip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 42%;
  height: 1px;
  background: linear-gradient(90deg, #9d42ff, #33dfff, transparent);
  box-shadow: 0 0 7px rgba(65, 210, 255, .55);
}

.equip-slot::after,
.skill-slot::after,
.bag-slot::after,
.warehouse-item::after,
.warehouse-slot::after,
.item-slot::after {
  border-radius: 6px !important;
}

.equip-slot.selected,
.skill-slot.selected,
.bag-slot.selected,
.warehouse-item.selected,
.drop-active,
[data-drop].drop-active {
  border-color: var(--hud-cyan) !important;
  box-shadow: inset 0 0 18px rgba(40, 210, 255, .22), 0 0 16px rgba(43, 203, 255, .34) !important;
}

.prep-stats > div,
.stat-chip,
.detail-stat {
  border: 1px solid rgba(78, 148, 224, .20) !important;
  background: linear-gradient(180deg, rgba(24, 27, 52, .92), rgba(7, 13, 29, .96)) !important;
}
.prep-stats strong,
.stat-chip strong,
.detail-stat strong { color: var(--hud-gold) !important; text-shadow: 0 0 8px rgba(255, 207, 57, .26); }

/* 布阵 */
.layout-status { border-left: 2px solid var(--hud-violet) !important; }
.layout-board-wrap { position: relative; overflow: hidden; }
.layout-board-wrap::before {
  content: "TACTICAL MATRIX";
  position: absolute;
  right: 10px;
  top: 7px;
  color: rgba(74, 206, 255, .18);
  font-size: 7px;
  letter-spacing: 1.6px;
}
.battle-cell {
  border-color: rgba(50, 161, 224, .27) !important;
  border-radius: 4px !important;
  background: linear-gradient(135deg, rgba(25, 55, 98, .20), rgba(8, 13, 29, .58)) !important;
  box-shadow: inset 0 0 12px rgba(47, 178, 255, .035) !important;
}
.battle-cell.melee,
.battle-cell.ranged {
  border-color: rgba(48, 192, 255, .34) !important;
  background: linear-gradient(135deg, rgba(22, 51, 91, .20), rgba(8, 13, 29, .58)) !important;
  box-shadow: inset 0 0 12px rgba(47, 178, 255, .035) !important;
}
.battle-cell.valid,
.battle-cell.hover {
  border-color: rgba(54, 224, 255, .86) !important;
  background: rgba(30, 187, 255, .16) !important;
  box-shadow: inset 0 0 14px rgba(42, 211, 255, .18), 0 0 8px rgba(43, 200, 255, .2) !important;
}
.battle-cell.invalid {
  border-color: rgba(255, 90, 130, .78) !important;
  background: rgba(255, 67, 115, .10) !important;
}
.layout-enemy-dir {
  min-height: 20px;
  color: rgba(207, 218, 244, .46);
}
.layout-enemy-dir span {
  border-bottom-color: rgba(255, 100, 142, .78);
  filter: drop-shadow(0 0 4px rgba(255, 74, 128, .48));
}

/* 合成 */
.craft-anvil { overflow: hidden; position: relative; }
.craft-anvil::after {
  content: "FORGE // SYNTHESIS";
  position: absolute;
  right: 10px;
  bottom: 5px;
  color: rgba(71, 210, 255, .23);
  font-size: 7px;
  letter-spacing: 1.3px;
}
.craft-card { border-left: 2px solid rgba(155, 65, 255, .68) !important; }
.craft-card.can-craft { border-left-color: var(--hud-cyan) !important; box-shadow: inset 3px 0 14px rgba(32, 217, 255, .08), 0 10px 24px rgba(0,0,0,.28) !important; }

/* 出击 */
.sortie-panel { border-top: 2px solid rgba(133, 55, 255, .58) !important; }
.chapter-list {
  /* 列表自身滚动，章节卡片不得参与纵向压缩，否则章节多时会碎成细条。 */
  align-items: stretch;
  overflow-x: hidden;
}
.chapter-accordion {
  flex: 0 0 auto;
  min-height: max-content;
  overflow: visible;
}
.chapter-row {
  flex: 0 0 auto;
  min-height: 90px;
  border-bottom-color: rgba(69, 168, 255, .14) !important;
  background: linear-gradient(90deg, rgba(91, 29, 171, .13), transparent 50%) !important;
}
.chapter-levels {
  flex: 0 0 auto;
  overflow: visible;
}
.level-row {
  flex: 0 0 auto;
  min-height: 68px;
  border-color: rgba(74, 170, 255, .21) !important;
  background: linear-gradient(100deg, rgba(15, 24, 49, .95), rgba(5, 10, 23, .98)) !important;
}
.level-row:not(.locked):active { border-color: var(--hud-cyan) !important; box-shadow: 0 0 16px rgba(32, 214, 255, .18) !important; }
.level-row.locked { opacity: .46; filter: grayscale(.35) saturate(.55); }
.stamina-cost,
.sortie-stamina { color: var(--hud-gold) !important; text-shadow: 0 0 8px rgba(255, 202, 45, .4); }

/* 弹窗与底部导航 */
.modal-backdrop,
.sheet-mask { background: rgba(0, 3, 11, .78) !important; backdrop-filter: blur(7px); }
.modal-card,
.sheet-panel { border-top-color: rgba(158, 65, 255, .66) !important; }
.modal-title,
.sheet-title { letter-spacing: 1px; }

.home-tabbar {
  border-top: 1px solid rgba(69, 197, 255, .31);
  background: linear-gradient(180deg, rgba(12, 14, 34, .98), rgba(3, 7, 17, .995));
  box-shadow: 0 -12px 30px rgba(0,0,0,.42), 0 -1px 16px rgba(112, 48, 255, .10);
}
.home-tabbar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  width: 84px;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--hud-violet), var(--hud-cyan), transparent);
  box-shadow: 0 0 10px rgba(65, 204, 255, .65);
}
.home-tabbar button {
  border: 1px solid rgba(75, 130, 207, .17) !important;
  border-radius: 7px !important;
  background: rgba(11, 16, 33, .84) !important;
  color: rgba(219, 228, 255, .64) !important;
}
.home-tabbar button.active::after { background: linear-gradient(90deg, var(--hud-violet), var(--hud-cyan)) !important; box-shadow: 0 0 8px var(--hud-cyan); }

.skeleton-block {
  background: linear-gradient(90deg, rgba(34, 32, 67, .60), rgba(70, 82, 134, .54), rgba(25, 42, 73, .60));
  background-size: 200% 100%;
}

@media (max-width: 360px) {
  .home-campaign-mark strong { font-size: 20px; }
  .home-campaign-mark small { font-size: 9px; }
  .home-quick .chip { min-width: 62px; padding-inline: 9px; }
  .prep-skill-col { flex-basis: 50px; }
  .prep-skill-slot { width: 50px; height: 50px; flex-basis: 50px; }
}

.prep-skill-slot.filled .prep-skill-slot-img {
  width: 44px;
  height: 44px;
  filter: brightness(1.12) saturate(1.08) drop-shadow(0 0 4px rgba(70, 211, 255, .30));
}

@media (max-height: 680px) {
  .home-campaign-mark { top: 11px; }
  .home-campaign-mark strong { font-size: 20px; }
  .home-campaign-mark span { display: none; }
  .home-scene .stage-char { margin-bottom: 12px; }
  .prep-skill-col { gap: 0; }
  .prep-skill-slot.filled .prep-skill-slot-img { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: no-preference) {
  .home-campaign-mark strong::after { animation: harborPulse 2.8s ease-in-out infinite; }
  .home-tabbar button.active { animation: harborTabPulse 3s ease-in-out infinite; }
}

@keyframes harborPulse {
  50% { opacity: .55; filter: brightness(1.5); }
}
@keyframes harborTabPulse {
  50% { box-shadow: inset 0 0 18px rgba(90, 214, 255, .16), 0 0 12px rgba(91, 54, 255, .14); }
}

/* 仓库、战斗背包与装备槽共用的稀有度装甲框。 */
.prep-item[class*="rarity-"],
.equip-slot.filled[class*="rarity-"] {
  --rar: #7f96b8;
  --rar-light: #d9e5f5;
  --rar-glow: 10%;
  isolation: isolate;
  border-color: color-mix(in srgb, var(--rar) 82%, var(--rar-light) 18%) !important;
  background:
    linear-gradient(135deg, var(--rar-light), var(--rar)) left 3px top 3px / 12px 2px no-repeat,
    linear-gradient(135deg, var(--rar-light), var(--rar)) left 3px top 3px / 2px 12px no-repeat,
    linear-gradient(315deg, var(--rar-light), var(--rar)) right 3px top 3px / 12px 2px no-repeat,
    linear-gradient(315deg, var(--rar-light), var(--rar)) right 3px top 3px / 2px 12px no-repeat,
    linear-gradient(45deg, var(--rar-light), var(--rar)) left 3px bottom 3px / 12px 2px no-repeat,
    linear-gradient(45deg, var(--rar-light), var(--rar)) left 3px bottom 3px / 2px 12px no-repeat,
    linear-gradient(225deg, var(--rar-light), var(--rar)) right 3px bottom 3px / 12px 2px no-repeat,
    linear-gradient(225deg, var(--rar-light), var(--rar)) right 3px bottom 3px / 2px 12px no-repeat,
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rar) 24%, transparent), transparent 63%),
    linear-gradient(145deg, rgba(12, 18, 38, .99), rgba(2, 6, 17, .995)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(2, 5, 15, .94),
    inset 0 0 0 3px color-mix(in srgb, var(--rar) 44%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--rar) var(--rar-glow), transparent),
    0 0 3px color-mix(in srgb, var(--rar) 72%, transparent),
    0 0 11px color-mix(in srgb, var(--rar) var(--rar-glow), transparent) !important;
}

.prep-item[class*="rarity-"]::before,
.equip-slot.filled[class*="rarity-"]::before,
.equip-slot.filled[class*="rarity-"]::after {
  content: "◆";
  position: absolute;
  z-index: 4;
  width: auto;
  height: auto;
  border: 0;
  color: var(--rar-light);
  font-size: 6px;
  line-height: 1;
  opacity: .9;
  text-shadow: 0 0 4px var(--rar), 0 0 8px var(--rar);
  pointer-events: none;
}
.prep-item[class*="rarity-"]::before { left: 4px; top: 4px; }
.equip-slot.filled[class*="rarity-"]::before { left: 4px; bottom: 4px; }
.equip-slot.filled[class*="rarity-"]::after { right: 4px; top: 4px; }
.prep-item[class*="rarity-"]::after {
  left: 15%;
  right: 15%;
  bottom: 2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rar-light), var(--rar), var(--rar-light), transparent);
  box-shadow: 0 0 7px var(--rar);
}

.prep-item.rarity-normal,
.equip-slot.filled.rarity-normal { --rar: #6588a8; --rar-light: #b9d2e6; --rar-glow: 7%; }
.prep-item.rarity-excellent,
.equip-slot.filled.rarity-excellent { --rar: #42d77d; --rar-light: #c3ffda; --rar-glow: 14%; }
.prep-item.rarity-rare,
.equip-slot.filled.rarity-rare { --rar: #21bfff; --rar-light: #baf4ff; --rar-glow: 18%; }
.prep-item.rarity-epic,
.equip-slot.filled.rarity-epic { --rar: #a94cff; --rar-light: #f0c5ff; --rar-glow: 22%; }
.prep-item.rarity-legendary,
.equip-slot.filled.rarity-legendary { --rar: #ffb928; --rar-light: #fff0a6; --rar-glow: 25%; }
.prep-item.rarity-limited,
.equip-slot.filled.rarity-limited { --rar: #ff50c8; --rar-light: #ffe1f7; --rar-glow: 27%; }
.prep-item.rarity-silver,
.equip-slot.filled.rarity-silver { --rar: #d9efff; --rar-light: #ffffff; --rar-glow: 24%; }
.prep-item.rarity-boss,
.equip-slot.filled.rarity-boss { --rar: #ff4f45; --rar-light: #ffd18a; --rar-glow: 27%; }
.prep-item.rarity-special,
.equip-slot.filled.rarity-special { --rar: #ff4fd8; --rar-light: #ffe1f8; --rar-glow: 25%; }

.prep-item.rarity-epic,
.prep-item.rarity-legendary,
.prep-item.rarity-limited,
.prep-item.rarity-silver,
.prep-item.rarity-boss,
.prep-item.rarity-special,
.equip-slot.filled.rarity-epic,
.equip-slot.filled.rarity-legendary,
.equip-slot.filled.rarity-limited,
.equip-slot.filled.rarity-silver,
.equip-slot.filled.rarity-boss,
.equip-slot.filled.rarity-special {
  outline: 1px solid color-mix(in srgb, var(--rar) 48%, transparent);
  outline-offset: -4px;
}
.prep-item.rarity-legendary::before,
.prep-item.rarity-boss::before,
.equip-slot.filled.rarity-legendary::before,
.equip-slot.filled.rarity-legendary::after,
.equip-slot.filled.rarity-boss::before,
.equip-slot.filled.rarity-boss::after {
  content: "✦";
  font-size: 8px;
}

@media (prefers-reduced-motion: no-preference) {
  .prep-item.rarity-legendary,
  .prep-item.rarity-limited,
  .prep-item.rarity-silver,
  .prep-item.rarity-boss,
  .prep-item.rarity-special,
  .equip-slot.filled.rarity-legendary,
  .equip-slot.filled.rarity-limited,
  .equip-slot.filled.rarity-silver,
  .equip-slot.filled.rarity-boss,
  .equip-slot.filled.rarity-special {
    animation: rarityFramePulse 2.6s ease-in-out infinite;
  }
}
@keyframes rarityFramePulse {
  50% { filter: brightness(1.1) saturate(1.12); }
}