/* 技能编辑器：复用物体编辑器的布局（objects.css），以下为技能专属样式 */
#detail { flex: 1; min-width: 0; overflow-y: auto; }
.kinds { grid-template-columns: repeat(3, 1fr); }
.kinds button i { font-style: normal; font-size: 16px; }
.sico { flex: none; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-size: 14px; border: 1.5px solid #5a4a2a; text-shadow: 0 0 4px #000; color: #fff; }
.sico.pas { border-style: dashed; border-color: #8a8a8a; } .sico.aura { border-radius: 50%; border-color: #c8a03a; }
.sico.big { width: 64px; height: 64px; font-size: 34px; border-width: 3px; border-radius: 12px; }
.it small { color: var(--dim); font-size: 10.5px; margin-left: 4px; }
.ctl input[type=text], .ctl input[type=number], .ctl select, .ctl textarea { background: rgba(0,0,0,.45); border: 1px solid var(--soft); color: #eee; border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 13px; outline: none; }
.ctl input:focus, .ctl select:focus, .ctl textarea:focus { border-color: var(--line); }
.ctl textarea { width: 100%; min-height: 64px; resize: vertical; line-height: 1.6; }
.ctl input[type=text] { width: 100%; }
.ctl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lvs { display: grid; gap: 4px; width: 100%; }
.lvs input { width: 100%; text-align: center; padding: 5px 2px !important; }
.lvh { display: grid; gap: 4px; padding: 6px 16px 2px calc(34% + 28px); font-size: 11px; color: var(--gold); text-align: center; }
.lvh span small { display: block; color: var(--dim); font-size: 10px; }
.rst { background: none; border: 0; color: #6a8aaa; cursor: pointer; font-size: 13px; padding: 0 2px; } .rst:hover { color: #9ad4ff; }
.del { background: none; border: 0; color: #a86a5a; cursor: pointer; font-size: 13px; }
.units { display: flex; flex-wrap: wrap; gap: 5px; }
.units .u { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 4px 3px 9px; border-radius: 12px; background: rgba(227,185,85,.14); color: var(--gold2); border: 1px solid var(--line); }
.units .u button { background: none; border: 0; color: #aaa; cursor: pointer; font-size: 12px; }
.units select { max-width: 220px; }
.addRow { display: flex; gap: 6px; padding: 10px 16px; border-top: 1px dashed var(--soft); flex-wrap: wrap; }
.addRow input { background: rgba(0,0,0,.45); border: 1px solid var(--soft); color: #eee; border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 12.5px; width: 120px; }
.tl { padding: 8px 16px 12px; display: grid; gap: 4px; }
.tl div { font-size: 12px; color: #ccc; line-height: 1.6; } .tl b { color: var(--gold2); margin-right: 6px; }
.color { width: 34px; height: 28px; border: 1px solid var(--soft); border-radius: 6px; background: none; padding: 0; }
.hdacts { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
  #main { flex-direction: column; } .side { width: auto; height: 42%; border-right: 0; border-bottom: 1px solid var(--soft); }
  .row { grid-template-columns: 1fr; gap: 4px; } .lvh { padding-left: 16px; }
}