:root { --bg: #11151d; --panel: #171d29; --panel2: #1e2636; --line: #2c3548; --text: #e6ebf5; --dim: #8a95ab; --accent: #4aa3ff; --good: #46c36b; --bad: #e5534b; --warn: #e9b43a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13px/1.4 "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", system-ui, sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
.dim { color: var(--dim); font-weight: 400; }
[hidden] { display: none !important; }

#adminApp { height: 100%; display: flex; flex-direction: column; }
#top { flex: 0 0 auto; padding: 8px 10px 0; background: var(--panel); border-bottom: 1px solid var(--line); }
#top .title { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
#tabs { display: flex; gap: 4px; flex-wrap: wrap; }
#tabs button { border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--bg); color: var(--dim); padding: 5px 10px; cursor: pointer; }
#tabs button.on { background: var(--panel2); color: #fff; border-color: var(--accent); }
#content { flex: 1 1 0; min-height: 0; overflow: auto; padding: 10px; }

h3 { margin: 14px 0 6px; font-size: 14px; color: #9fd0ff; border-left: 3px solid var(--accent); padding-left: 6px; }
h3:first-child { margin-top: 0; }
.note { color: var(--dim); font-size: 12px; margin: 4px 0 8px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 10px; }
.f { display: flex; flex-direction: column; gap: 2px; padding: 4px 6px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); }
.f .l { color: var(--dim); font-size: 12px; }
.f .u { color: var(--dim); font-size: 11px; }
.f input[type=number], .f input[type=text], .f select, textarea { width: 100%; background: #0c1018; border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
.f.check { flex-direction: row; align-items: center; gap: 6px; }
.f.wide { grid-column: 1 / -1; }
.pv { font-size: 12px; color: #9fd0ff; }
.pv.err { color: var(--bad); }
.colorrow { display: flex; gap: 4px; align-items: center; }
.colorrow input[type=color] { width: 38px; height: 26px; padding: 0; border: 1px solid var(--line); background: none; }
.colorrow input[type=number] { width: 52px !important; padding: 2px 3px; }
.chk { display: inline-flex; align-items: center; gap: 3px; margin-right: 8px; white-space: nowrap; }

.btn { border: 1px solid var(--line); background: var(--panel2); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: #2563b0; border-color: var(--accent); }
.btn.danger { border-color: #8a3a35; color: #ffb3ae; }
.btn.sm { padding: 1px 6px; font-size: 12px; }
.btn.on { background: #4a3a14; border-color: var(--warn); }
.btn:disabled { opacity: .4; }

.lw { height: 100%; display: flex; flex-direction: column; }
.lw > .row { flex: 0 0 auto; }
.split { display: flex; gap: 10px; align-items: stretch; flex: 1 1 0; min-height: 0; }
.list { flex: 0 0 150px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; }
.list .item { flex: 0 0 auto; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 5px 8px; cursor: pointer; display: flex; gap: 6px; align-items: center; }
.list .item.on { border-color: var(--accent); background: #1d3350; }
.list .item i { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.editor { flex: 1 1 0; min-width: 0; min-height: 0; overflow-y: auto; padding-right: 4px; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0; }

table.t { width: 100%; border-collapse: collapse; font-size: 12px; }
table.t th, table.t td { border-bottom: 1px solid var(--line); padding: 2px 4px; text-align: center; white-space: nowrap; }
table.t th { color: var(--dim); position: sticky; top: 0; background: var(--bg); }
table.t input { width: 64px; background: #0c1018; border: 1px solid var(--line); border-radius: 4px; padding: 1px 3px; text-align: right; }
table.t tr.on td { background: #1d3350; }
table.t td.sum { text-align: left; color: #cfd8ea; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.tablewrap { max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }

.skill { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px; padding: 6px; border: 1px dashed var(--line); border-radius: 6px; margin: 4px 0; align-items: end; }
.skill label { display: flex; flex-direction: column; font-size: 11px; color: var(--dim); }
.skill input, .skill select { background: #0c1018; border: 1px solid var(--line); border-radius: 4px; padding: 2px 4px; width: 100%; }

/* 造型編輯器 */
.shapeed { display: flex; gap: 12px; flex-wrap: wrap; }
.shapeed .col { flex: 1 1 260px; min-width: 240px; }
#shapeCanvas { width: 256px; height: 256px; border: 1px solid var(--line); border-radius: 6px; background: #0c1018; touch-action: none; cursor: move; }
.layer { display: flex; gap: 3px; align-items: center; padding: 3px 4px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 3px; background: var(--panel); cursor: pointer; }
.layer.on { border-color: var(--accent); background: #1d3350; }
.layer .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer.hid .nm { opacity: .4; text-decoration: line-through; }
.shapegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 3px; }
.shapegrid button { padding: 2px; border: 1px solid var(--line); background: var(--panel); border-radius: 5px; cursor: pointer; }
.shapegrid button.on { border-color: var(--warn); background: #4a3a14; }
.shapegrid canvas { width: 100%; display: block; }
.previews { display: flex; gap: 8px; margin: 6px 0; }
.previews div { text-align: center; font-size: 11px; color: var(--dim); }
.previews canvas { width: 64px; height: 64px; background: #0c1018; border: 1px dashed var(--line); display: block; }
.saved { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.saved .s { border: 1px solid var(--line); border-radius: 8px; padding: 5px; background: var(--panel); text-align: center; font-size: 12px; }
.saved canvas { width: 56px; height: 56px; }
textarea { min-height: 220px; font-family: Consolas, monospace; font-size: 12px; }