/* Component workshop. CSS only: every affix, level, cost and action stays native. */
#pa-components {
  --cmp-ink:#0b1521;
  --cmp-panel:#101b28;
  --cmp-text:#e9edf1;
  --cmp-muted:#8fa4b7;
  --cmp-gold:#e8c578;
  --cmp-cyan:#73cabb;
  --cmp-purple:#ad95d3;
  padding:32px;
  background:rgba(3,9,16,.86);
  backdrop-filter:blur(8px);
  color:var(--cmp-text);
  font:15px/1.6 "Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
  -webkit-font-smoothing:antialiased;
}
#pa-components .pa-cmp-panel,
#pa-components .pa-cmp-panel :is(p,span,strong,b,small,em,button,select,option,footer) {
  font-family:"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif!important;
}
#pa-components .pa-cmp-panel {
  width:min(1200px,100%);
  max-height:calc(100dvh - 64px);
  padding:0;
  border:1px solid #31414b;
  background:linear-gradient(140deg,#13202d 0%,#0c1723 72%);
  box-shadow:0 28px 90px #0009;
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
}
#pa-components .pa-cmp-panel:has(.pa-cmp-slots) {height:calc(100dvh - 64px)}
#pa-components .pa-cmp-panel header {
  flex-shrink:0;
  padding:24px 30px 20px;
  gap:20px;
  border:0;
  border-bottom:1px solid #ffffff0c;
  background:linear-gradient(90deg,#e8c57808,transparent 70%);
}
#pa-components .pa-cmp-panel header small {
  color:var(--cmp-gold);
  font:600 11px/1.5 "Segoe UI",sans-serif;
  letter-spacing:.2em;
}
#pa-components .pa-cmp-panel h2 {
  margin:7px 0 0;
  color:var(--cmp-text);
  font:600 25px/1.3 "Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
  letter-spacing:.025em;
}
#pa-components .pa-cmp-panel button,
#pa-components .pa-cmp-panel select {
  font-family:inherit;
  color:var(--cmp-text);
  min-height:44px;
  border-radius:0;
  transition:background .15s,border-color .15s,color .15s;
}
#pa-components .pa-cmp-panel header button {
  flex:0 0 44px;
  width:44px;
  height:44px;
  border:1px solid #ffffff18;
  background:#09131e;
  color:var(--cmp-muted);
  font-size:21px;
}
#pa-components .pa-cmp-panel header button:hover {background:#24323b;color:#fff;border-color:var(--cmp-gold)}
#pa-components .pa-cmp-panel button:focus-visible,
#pa-components .pa-cmp-panel select:focus-visible {outline:2px solid var(--cmp-cyan);outline-offset:3px}
#pa-components .pa-cmp-content {
  padding:22px 30px 26px;
  scrollbar-width:thin;
  scrollbar-color:#4a626b #101b28;
  scrollbar-gutter:stable;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
#pa-components .pa-cmp-intro {
  margin:0 0 22px;
  max-width:88ch;
  font-size:13px;
  line-height:1.8;
  color:#a4b4c3;
}
#pa-components .pa-cmp-slots {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
#pa-components .pa-cmp-slot {
  position:relative;
  display:flex;
  flex-direction:column;
  padding:20px;
  border:0;
  border-bottom:1px solid #ffffff16;
  background:#16243180;
  min-width:0;
}
#pa-components .pa-cmp-slot:first-child {
  grid-column:span 2;
  background:linear-gradient(115deg,#e8c57812,#192b3980);
  border-bottom-color:#e8c57850;
}
#pa-components .pa-cmp-slot:first-child::after {
  content:"";
  position:absolute;
  pointer-events:none;
  width:94px;height:94px;
  right:40px;top:26px;
  border:1px solid #e8c57818;
  box-shadow:0 0 0 14px #e8c57804,inset 0 0 0 12px #e8c57804;
  transform:rotate(45deg);
}
#pa-components .pa-cmp-panel .pa-cmp-card {
  position:relative;
  border:0;
  border-radius:0;
  color:var(--cmp-text);
  box-shadow:none;
  text-align:left;
  min-width:0;
  background:transparent;
  font-family:inherit;
  line-height:1.65;
}
#pa-components .pa-cmp-slot .pa-cmp-card {
  flex:1;
  min-height:126px;
  padding:0;
  gap:9px;
}
#pa-components .pa-cmp-card small {
  color:var(--cmp-muted);
  font-size:11px;
  line-height:1.45;
  letter-spacing:.06em;
}
#pa-components .pa-cmp-card small::before {
  content:"";
  display:inline-block;
  width:5px;height:5px;
  margin:0 8px 2px 0;
  background:var(--cmp-accent,var(--cmp-gold));
  box-shadow:0 0 8px color-mix(in srgb,var(--cmp-accent,var(--cmp-gold)) 24%,transparent);
}
#pa-components .pa-cmp-card strong {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px 12px;
  width:100%;
  color:var(--cmp-text);
  font-size:18px;
  font-weight:600;
  line-height:1.5;
}
#pa-components .pa-cmp-slot:first-child strong {font-size:25px;color:var(--cmp-gold)}
#pa-components .pa-cmp-card em {
  padding:2px 8px;
  background:#08152180;
  border:1px solid #ffffff13;
  color:var(--cmp-cyan);
  font:600 12px/1.4 "Segoe UI",sans-serif;
  letter-spacing:.02em;
}
#pa-components .pa-cmp-card span {
  display:block;
  position:relative;
  z-index:1;
  color:#acbdca;
  font-size:14px;
  line-height:1.8;
  overflow-wrap:anywhere;
}
#pa-components .pa-cmp-reforge {
  gap:8px;
  margin:16px 0 7px;
  padding-top:12px;
  border-top:1px solid #ffffff0b;
}
#pa-components .pa-cmp-reforge select {
  padding:0 10px;
  min-height:44px;
  color:#b4c4d0;
  background:#0a162180;
  border:1px solid #ffffff0e;
  font-size:13px;
}
#pa-components .pa-cmp-reforge select:hover {border-color:#758c9766}
#pa-components .pa-cmp-reforge option {background:#12202e;color:var(--cmp-text)}
#pa-components .pa-cmp-reforge button {
  flex:0 0 64px;
  padding:0 12px;
  background:#e8c5780d;
  border:1px solid #e8c57838;
  color:var(--cmp-gold);
  font-size:13px;
  font-weight:600;
}
#pa-components .pa-cmp-reforge button:hover {background:var(--cmp-gold);color:var(--cmp-ink)}
#pa-components .pa-cmp-slot>small {font-size:11px;line-height:1.5;color:#8299aa}
#pa-components .pa-cmp-empty {
  min-height:150px;
  padding:20px;
  gap:10px;
  border:1px dashed #8fa4b724;
  background:#08131d50;
  color:#728b9d;
}
#pa-components .pa-cmp-empty b {font-size:15px;font-weight:500}
#pa-components .pa-cmp-empty span {font-size:12px}
#pa-components .pa-cmp-panel footer {
  flex-shrink:0;
  padding:14px 30px;
  border-top:1px solid #ffffff10;
  background:#07111b80;
  color:var(--cmp-muted);
  font-size:12px;
  line-height:1.65;
}
#pa-components .pa-cmp-panel #pa-component-notice:not(:empty) {margin-top:8px;padding:8px 12px;border-left:2px solid #e8c578;color:#e8c578;background:#e8c57809}
#pa-components .pa-cmp-choices {gap:20px;align-items:stretch}
#pa-components .pa-cmp-choices .pa-cmp-card {
  min-height:270px;
  padding:24px;
  gap:18px;
  border:1px solid #ffffff15;
  border-top:2px solid color-mix(in srgb,var(--cmp-accent,var(--cmp-gold)) 60%,#152433);
  background:linear-gradient(160deg,#22303a,#11202d);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
}
#pa-components .pa-cmp-choices .pa-cmp-card:hover {background:linear-gradient(155deg,#384036,#192a35);border-color:#e8c57880}
#pa-components .pa-cmp-choices .pa-cmp-card strong {font-size:21px}
#pa-components .pa-cmp-choices .pa-cmp-card b,
#pa-components .pa-cmp-choices [data-cmp="resolve"]::after {
  display:block;
  width:100%;
  box-sizing:border-box;
  min-height:44px;
  margin-top:auto;
  padding:11px 14px;
  background:var(--cmp-gold);
  color:var(--cmp-ink);
  font-size:13px;
  font-weight:600;
  line-height:22px;
  text-align:center;
  letter-spacing:.02em;
}
#pa-components .pa-cmp-choices [data-cmp="resolve"]::after {content:"选择此结果"}
#pa-components .pa-cmp-keep {
  min-height:44px;
  margin-top:22px;
  padding:10px 22px;
  color:var(--cmp-text);
  border:1px solid #728c9a55;
  background:transparent;
  font-size:13px;
}
#pa-components .pa-cmp-keep:hover {background:#ffffff0b;border-color:#9db5c0}
@media(max-width:1100px) {
  #pa-components{padding:20px}
  #pa-components .pa-cmp-panel{max-height:calc(100dvh - 40px)}
  #pa-components .pa-cmp-panel:has(.pa-cmp-slots){height:calc(100dvh - 40px)}
  #pa-components .pa-cmp-slots{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  #pa-components .pa-cmp-slot:first-child{grid-column:auto}
  #pa-components .pa-cmp-slot:first-child strong{font-size:21px}
  #pa-components .pa-cmp-choices{gap:14px}
  #pa-components .pa-cmp-choices .pa-cmp-card{padding:20px}
}
@media(max-height:500px) and (min-width:601px) {
  #pa-components{padding:10px;backdrop-filter:blur(4px)}
  #pa-components .pa-cmp-panel{max-height:calc(100dvh - 20px)}
  #pa-components .pa-cmp-panel:has(.pa-cmp-slots){height:calc(100dvh - 20px)}
  #pa-components .pa-cmp-panel header{padding:12px 20px;gap:12px}
  #pa-components .pa-cmp-panel h2{font-size:20px;margin-top:2px}
  #pa-components .pa-cmp-panel header small{font-size:9px;letter-spacing:.15em}
  #pa-components .pa-cmp-content{padding:14px 20px 18px}
  #pa-components .pa-cmp-intro{margin-bottom:14px;font-size:12px;line-height:1.7}
  #pa-components .pa-cmp-slot{padding:16px}
  #pa-components .pa-cmp-card strong{font-size:17px}
  #pa-components .pa-cmp-card span{font-size:13px;line-height:1.75}
  #pa-components .pa-cmp-panel footer{padding:9px 20px;font-size:11px}
  #pa-components .pa-cmp-choices .pa-cmp-card{min-height:220px;padding:16px;gap:12px}
  #pa-components .pa-cmp-choices .pa-cmp-card strong{font-size:18px}
  #pa-components .pa-cmp-keep{margin-top:14px}
}
@media(max-width:600px) {
  #pa-components{padding:10px;align-items:center;backdrop-filter:blur(4px)}
  #pa-components .pa-cmp-panel{max-height:calc(100dvh - 20px)}
  #pa-components .pa-cmp-panel:has(.pa-cmp-slots){height:calc(100dvh - 20px)}
  #pa-components .pa-cmp-panel header{padding:19px 17px 17px;gap:12px}
  #pa-components .pa-cmp-panel header small{font-size:9px;letter-spacing:.13em}
  #pa-components .pa-cmp-panel h2{font-size:20px;line-height:1.35;margin-top:5px}
  #pa-components .pa-cmp-panel header button{align-self:flex-start}
  #pa-components .pa-cmp-content{padding:18px 17px 20px}
  #pa-components .pa-cmp-intro{font-size:12px;line-height:1.85;margin-bottom:18px}
  #pa-components .pa-cmp-slots,#pa-components .pa-cmp-choices{grid-template-columns:1fr;gap:14px}
  #pa-components .pa-cmp-slot{padding:18px}
  #pa-components .pa-cmp-slot .pa-cmp-card{min-height:0;gap:10px}
  #pa-components .pa-cmp-slot:first-child strong{font-size:23px}
  #pa-components .pa-cmp-slot:first-child::after{width:72px;height:72px;right:28px}
  #pa-components .pa-cmp-card strong{font-size:18px}
  #pa-components .pa-cmp-card span{font-size:14px;line-height:1.85}
  #pa-components .pa-cmp-panel footer{padding:12px 17px;font-size:11px;line-height:1.8}
  #pa-components .pa-cmp-choices .pa-cmp-card{padding:20px;gap:14px;min-height:230px}
  #pa-components .pa-cmp-choices .pa-cmp-card strong{font-size:20px}
  #pa-components .pa-cmp-keep{width:100%;margin-top:18px}
}
@media(prefers-reduced-motion:reduce){#pa-components .pa-cmp-panel{animation:none}#pa-components button,#pa-components select{transition:none}}