/* GENERATED by tools/build_mana_css.py from the CSS of Mana's game page mod list, scoped under .mapp-list. Never hand-edit. */
.mapp-list { --glass-btn: rgba(255,255,255,0.045); --border: rgba(242,232,210,0.18); --icon: ; --dim: rgba(230,237,243,0.55); --glass-lip: inset 0 1px 0 rgba(255,255,255,0.07); --panel: rgba(8,11,16,0.72); --hair: rgba(242,232,210,0.18); --faint: rgba(230,237,243,0.34); --mono: ui-monospace,"SF Mono",Menlo,Consolas,monospace; --accent-dim: rgba(242,232,210,0.4); --text: #E6EDF3; }
.mapp-list * { box-sizing: border-box; }
.mapp-list button { font-family: inherit; color: inherit; cursor: pointer; }
.mapp-list .icon-btn { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; background: var(--glass-btn); border: 1px solid var(--border); border-radius: 12px; color: var(--icon,var(--dim)); box-shadow: var(--glass-lip); }
.mapp-list .modlist { display: flex; flex-direction: column; gap: 6px; }
.mapp-list .mod { display: grid; grid-template-columns: 26px 44px 34px 1fr auto; align-items: center; gap: 14px; padding: 7px 16px; background: var(--panel); border: 1px solid var(--hair); border-radius: 14px; box-shadow: var(--glass-lip); transition: border-color 0.15s, transform 0.06s, background 0.18s; }
.mapp-list .mod__grip { cursor: grab; color: var(--faint); font-size: 16px; text-align: center; user-select: none; }
.mapp-list .mod__order { font: 600 13px/1 var(--mono); color: var(--accent-dim); text-align: center; }
.mapp-list .mod__main { min-width: 0px; }
.mapp-list .mod__name { display: block; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapp-list .mod__sub { max-height: 0px; overflow: hidden; opacity: 0; margin-top: 0px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--dim); font-size: 12px; transition: max-height 0.18s, opacity 0.14s, margin-top 0.18s; }
.mapp-list .chip { font: 500 11px/1 var(--mono); padding: 4px 8px; border-radius: 7px; border: 1px solid var(--border); color: var(--dim); background: var(--glass-btn); white-space: nowrap; }
.mapp-list .mod__right { display: flex; align-items: center; gap: 16px; }
.mapp-list .toggle { position: relative; width: 44px; height: 26px; flex: 0 0 auto; }
.mapp-list .toggle input { opacity: 0; width: 100%; height: 100%; margin: 0px; cursor: pointer; }
.mapp-list .toggle .track { position: absolute; inset: 0px; border-radius: 13px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border); transition: background 0.18s; }
.mapp-list .toggle .knob { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--faint); transition: transform 0.18s, background 0.18s; box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 3px; }
.mapp-list .toggle input:checked ~ .track { background: rgba(84, 209, 121, 0.32); border-color: rgba(120, 240, 150, 0.55); }
.mapp-list .toggle input:checked ~ .knob { transform: translateX(18px); background: rgb(84, 209, 121); box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 3px, rgba(120, 240, 150, 0.5) 0px 0px 8px; }