.effects-builder { position: relative; margin-top: 10px; padding: 8px; border: 1px solid #314057; border-radius: 6px; background: #0b111a; }
.effects-builder label { margin-top: 6px; }
.effects-head { justify-content: flex-start; gap: 8px; }
.effects-head > span:last-child { margin-left: 0; }
.buff-preset-buttons { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.buff-preset-buttons[hidden] { display: none !important; }
.buff-preset-button { width: 28px; height: 28px; display: grid; place-items: center; padding: 1px; border: 1px solid #48634f; border-radius: 4px; background: #17231b; box-shadow: none; }
.buff-preset-button:hover:not(:disabled), .buff-preset-button:focus-visible { border-color: #34eca0; background: #20372b; box-shadow: 0 0 8px rgba(52, 236, 160, .2); }
.buff-preset-button:disabled { cursor: not-allowed; opacity: .38; }
.buff-preset-button[aria-busy="true"] { opacity: .65; }
.buff-preset-button .effect-skill-icon { width: 24px; height: 24px; flex-basis: 24px; border: none; border-radius: 2px; }
.effects-heading { margin-top: 12px; }
.effect-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 18px; }
.effect-chip { max-width: 100%; display: inline-flex; align-items: center; gap: 4px; border: 1px solid #3d355d; border-radius: 4px; padding: 2px 3px 2px 6px; background: #201a32; color: #ddcdf8; font: 11px "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; }
.effect-chip span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.effect-chip select { width: 55px; height: 22px; padding: 0 3px; font-size: 11px; }
.effect-chip button { width: 18px; height: 20px; padding: 0; background: transparent; box-shadow: none; color: #ffabb9; }
.effect-skill-icon { width: 22px; height: 22px; display: inline-grid; flex: 0 0 22px; place-items: center; overflow: hidden; border: 1px solid #425568; border-radius: 3px; background: #101827; color: #b7c9df; font-size: 13px; }
.effect-skill-icon img { width: 100%; height: 100%; display: block; object-fit: cover; }
.effect-chip .effect-skill-icon { max-width: none; }
.effect-catalog-result { justify-content: flex-start; }
.effect-catalog-result .catalog-result-identity { flex: 1; }
.effects-builder .catalog-results { top: auto; bottom: 46px; left: 8px; right: 8px; }
.effects-builder .catalog-status { min-height: 15px; }
.compact-select { width: 76px; height: 25px; padding: 0 4px; font-size: 11px; }
.effects-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #283324; }
.effects-tab { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid #3d4a38; border-radius: 4px; background: rgba(20, 26, 22, .7); color: #9da98e; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; transition: all .15s ease; box-shadow: none; }
.effects-tab:hover:not(:disabled) { border-color: #556750; color: #dce6d8; }
.effects-tab.active { border-color: rgba(48, 248, 160, .56); background: rgba(48, 248, 160, .12); color: #30f8a0; font-weight: 500; box-shadow: inset 0 0 10px rgba(48, 248, 160, .08); }
.effects-tab b { display: inline-block; min-width: 16px; padding: 1px 5px; border-radius: 999px; background: rgba(0, 0, 0, .4); color: inherit; font-size: 10px; font-weight: 600; line-height: 12px; text-align: center; }
.effects-tab-panel[hidden] { display: none !important; }
.effect-chips, .passive-skill-list { display: flex; flex-wrap: wrap; gap: 8px; min-height: 48px; padding: 4px 2px 8px; }
.passive-skill-entry, .buff-skill-entry, .clan-buff-entry { position: relative; width: 44px; height: 44px; flex: 0 0 44px; }
.passive-skill-entry .passive-skill-button, .buff-skill-entry .buff-skill-button, .clan-buff-entry .clan-buff-button { width: 100%; height: 100%; }
.passive-skill-level-select, .buff-skill-level-select, .clan-buff-level-select { position: absolute; right: 2px; bottom: 2px; height: 15px; min-width: 22px; max-width: 38px; padding: 0 2px; border: 1px solid rgba(241, 209, 123, .5); border-radius: 2px; background: rgba(10, 14, 11, .94); color: #f1d17b; font: 700 9px/13px "JetBrains Mono", ui-monospace, monospace; text-shadow: 0 1px 2px #000; cursor: pointer; z-index: 2; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.passive-skill-level-select:hover, .passive-skill-level-select:focus, .buff-skill-level-select:hover, .buff-skill-level-select:focus, .clan-buff-level-select:hover, .clan-buff-level-select:focus { border-color: #30f8a0; color: #fff; outline: none; }
.passive-skill-remove, .buff-skill-remove, .clan-buff-remove { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid #6b353d; border-radius: 50%; background: #2a1215; color: #ff99a8; font: bold 12px/1 "JetBrains Mono", monospace; cursor: pointer; z-index: 3; opacity: .75; transition: all .15s ease; }
.passive-skill-entry:hover .passive-skill-remove, .buff-skill-entry:hover .buff-skill-remove, .clan-buff-entry:hover .clan-buff-remove,
.passive-skill-remove:hover, .buff-skill-remove:hover, .clan-buff-remove:hover,
.passive-skill-remove:focus, .buff-skill-remove:focus, .clan-buff-remove:focus { opacity: 1; background: #541922; border-color: #ff4d6d; color: #fff; transform: scale(1.1); outline: none; }