:root {
  color-scheme: dark;
  font-family: Inter, "Microsoft YaHei", system-ui, sans-serif;
  color: #e9edff;
  background: #101522;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #1b2744, #101522 42rem); }
button, input, select { font: inherit; }
button { border: 0; border-radius: 8px; padding: .65rem 1rem; background: #6e76f8; color: white; cursor: pointer; }
button:hover { background: #8389ff; }
button.secondary { background: #2a344c; }
.button-link { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; padding: .65rem 1rem; background: #6e76f8; color: white; text-decoration: none; white-space: nowrap; }
.button-link:hover { background: #8389ff; }
.button-link.secondary { background: #2a344c; }
button:disabled { cursor: not-allowed; opacity: .58; }
.topbar, main { width: min(1800px, calc(100% - 2rem)); margin: 0 auto; }
.topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 2.2rem 0 1.2rem; }
.topbar > div:first-child { flex: 1 1 20rem; min-width: min(100%, 18rem); }
.topbar h1 { white-space: nowrap; }
.topbar-actions { display: flex; flex: 1 1 38rem; gap: .6rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; min-width: 0; }
.search-input { width: min(25rem, 45vw); min-width: 12rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .35rem; font-size: clamp(1.5rem, 4vw, 2.1rem); }
.topbar p, .hint { color: #aeb9d4; margin-bottom: 0; }
.config-panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; padding: 1rem; border: 1px solid #34415f; border-radius: 12px; background: rgba(18, 26, 45, .8); }
#configPanel { display: none; }
.config-panel h2, .config-panel .hint, .config-actions { grid-column: 1 / -1; margin-bottom: 0; }
label { display: grid; gap: .35rem; color: #c6cfeb; font-size: .9rem; }
input { width: 100%; border: 1px solid #455273; border-radius: 7px; padding: .62rem .7rem; background: #11192b; color: white; }
.config-actions { display: flex; gap: .7rem; }
.status { min-height: 1.4rem; margin: 1.2rem 0; color: #b9c8eb; }
.status.error { color: #ff9b9b; }
.board { display: grid; gap: 1.2rem; padding-bottom: 3rem; }
.trial-group { border: 1px solid #33405c; border-radius: 12px; overflow: visible; background: rgba(12, 19, 34, .8); }
.trial-header { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 1rem 1.1rem; background: #1c2740; border-radius: 11px 11px 0 0; box-shadow: 0 1px 0 #33405c, 0 8px 15px rgba(10, 16, 30, .22); }
.trial-header h2 { margin: 0; font-size: 1.1rem; }
.trial-header span { color: #aab7d3; }
.trial-header .role-count { font-weight: 600; }
.role-summary { margin-left: .15rem; color: #aab7d3; font-size: .78rem; white-space: nowrap; }
.trial-tools { display: flex; align-items: center; gap: .5rem; min-width: min(31rem, 58vw); justify-content: flex-end; flex-wrap: wrap; }
.trial-search { width: min(22rem, 42vw); padding: .42rem .6rem; background: #131d31; }
.trial-sort { width: auto; min-width: 6.4rem; border: 1px solid #455273; border-radius: 7px; padding: .42rem .55rem; background: #131d31; color: white; cursor: pointer; }
.trial-action { padding: .42rem .62rem; font-size: .78rem; white-space: nowrap; }
.member-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .75rem; padding: .8rem; align-items: start; overflow: hidden; opacity: 1; transition: max-height .32s ease, opacity .2s ease, padding .32s ease; }
.trial-group.is-collapsed .member-list { max-height: 0 !important; padding-top: 0; padding-bottom: 0; opacity: 0; pointer-events: none; }
.member-card { border: 1px solid #2f3e5e; border-radius: 9px; padding: .85rem; background: #151e32; min-width: 0; cursor: pointer; }
.member-heading { display: flex; justify-content: space-between; gap: .6rem; align-items: center; }
.member-actions { display: flex; align-items: center; gap: .4rem; }
.member-capture { padding: .22rem .48rem; font-size: .7rem; white-space: nowrap; }
.member-level { color: #9ba9c7; margin-left: .35rem; font-size: .9rem; }
.role-badge { display: inline-block; width: .55rem; height: .55rem; margin-right: .35rem; border-radius: 50%; background: #7a849e; }
.sync-state { border-radius: 999px; padding: .18rem .55rem; font-size: .75rem; white-space: nowrap; }
.sync-state.green { color: #91f2bd; background: #133c2b; }
.sync-state.yellow { color: #ffd58d; background: #4a3817; }
.sync-state.gray { color: #b1bbcf; background: #293249; }
.snapshot-content { margin-top: .75rem; color: #cad3ea; font-size: .88rem; }
.loadout-summary { display: grid; gap: .3rem; padding: .65rem .7rem; border-radius: 7px; background: #1b2843; }
.loadout-summary strong { color: #f0f4ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loadout-summary span { color: #aebcda; font-size: .78rem; }
.loadout-details { margin-top: .55rem; border: 1px solid #2c3a59; border-radius: 7px; background: #121b2e; }
.loadout-details summary { cursor: pointer; padding: .55rem .7rem; color: #b9c8ed; user-select: none; }
.loadout-details-body { overflow: hidden; }
.loadout-details section { padding: .1rem .7rem .75rem; }
.loadout-details h3 { margin: .65rem 0 .35rem; font-size: .76rem; font-weight: 600; color: #91a3c7; }
.equipment-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.equipment-chip { border-radius: 5px; padding: .22rem .42rem; background: #263351; color: #dae3fc; font-size: .78rem; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, 46px); gap: .42rem; align-items: start; }
.equipment-layout { display: grid; grid-template-columns: repeat(5, 46px); grid-template-rows: repeat(7, 46px); gap: .42rem; justify-content: center; }
.equipment-layout.combat-equipment-layout { grid-template-rows: repeat(4, 46px); }
.game-icon { position: relative; display: grid; place-items: center; padding:5px;width: 50px; height: 50px; border: 1px solid #c6cfdf; border-radius: 4px;  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); cursor: help; }
.game-icon:hover { border-color: #91aee5; }
.game-icon svg { width: 88%; height: 88%; overflow: visible; }
.game-icon-missing i { position: absolute; color: #98a8ca; font-style: normal; font-size: 1rem; }
.game-icon b { position: absolute; right: 1px; bottom: 0; padding: 0 2px; border-radius: 3px;  color: #ffd25f; font-size: .64rem; line-height: 1.1rem; }
.game-icon em { position: absolute; left: 1px; top: 0; padding: 0 2px; border-radius: 3px;  color: #eaf0ff; font-size: .6rem; font-style: normal; line-height: 1rem; }
.slot-empty { width: 50px; height: 50px; border: 1px dashed #4c5b7c; border-radius: 4px; background: rgba(28, 39, 64, .35); }
.empty { color: #95a2bf; padding: .3rem 0; }
.capture-stage { position: fixed; left: -100000px; top: 0; z-index: -1; overflow: visible; background: #101522; pointer-events: none; }
.capture-render summary { list-style: none; }
.capture-render summary::marker, .capture-render summary::-webkit-details-marker { display: none; content: ''; }
.capture-render summary::before { content: '▼'; display: inline-block; margin-right: .35rem; font-size: .72em; transform: translateY(-.05em); }
.capture-render details:not([open]) summary::before { content: '▶'; }
.capture-render .trial-header { position: static; }
@media (max-width: 900px) { .topbar { align-items: flex-start; flex-direction: column; padding-top: 1.2rem; } .topbar > div:first-child, .topbar-actions { width: 100%; flex-basis: auto; } .topbar-actions { justify-content: flex-start; } .search-input { flex: 1 1 15rem; width: auto; min-width: 0; } }
@media (max-width: 850px) { .config-panel { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .trial-header { align-items: flex-start; flex-direction: column; } .trial-tools { width: 100%; min-width: 0; flex-wrap: wrap; } .trial-search { flex: 1 1 14rem; width: auto; } .role-summary { margin-left: 0; white-space: normal; } }
@media (max-width: 560px) { .topbar h1 { white-space: normal; } .topbar-actions > * { min-height: 2.55rem; } .search-input { flex-basis: 100%; } .config-panel { grid-template-columns: 1fr; } .member-list { grid-template-columns: 1fr; padding: .55rem; } .trial-header { padding: .75rem; } .trial-header h2 { font-size: 1rem; } .trial-action { padding: .4rem .5rem; } .member-heading { align-items: flex-start; } .member-actions { flex-direction: column-reverse; align-items: flex-end; } .equipment-layout { transform: scale(.9); transform-origin: top left; margin-bottom: -2.2rem; justify-content: start; } }
@media (hover: none) and (pointer: coarse) { .member-capture, .trial-capture { display: none !important; } }