/* Original purchased UI frames, stretched by nine-slice borders rather than flattened gradients. */
:root{--legend-panel:url('../art/legend-ui-v1/tongyongmianbanbg.png');--legend-frame:url('../art/legend-ui-v1/wupingkuangNB.png');--legend-head:url('../art/legend-ui-v1/tongyongkuang3tou.png');--legend-red:url('../art/legend-ui-v1/btn2.png');--legend-button:url('../art/legend-ui-v1/btn2_2.png');--legend-line:#786245;--legend-text:#e6d2ac}
.iw-panel{width:min(1540px,calc(100vw - 28px))!important;height:calc(100dvh - 28px);max-height:960px!important;display:flex;flex-direction:column;overflow:hidden!important;border:12px solid transparent!important;border-image:var(--legend-panel) 16 fill / 12px / 0 stretch!important;border-radius:0!important;background:#181413!important;box-shadow:0 0 0 1px #a58a56,0 18px 70px #000e!important;color:var(--legend-text)}
.iw-panel>header{flex:none;padding:8px 16px 10px!important;min-height:43px;border-bottom:1px solid #94744b!important;background:var(--legend-head) center/100% 100% no-repeat!important}
.iw-panel>header h2{font-family:'KaiTi','Microsoft YaHei',serif;font-size:26px!important;letter-spacing:5px;color:#f1db9e;text-shadow:0 2px #000,0 -1px #ffe7ac22}
.iw-panel #panel-sub{font-size:10px;color:#a58d67;letter-spacing:1.5px}.iw-panel #closePanel{width:30px;height:30px;padding:0;color:#e5c184;background:#361611;border:1px solid #806444;box-shadow:inset 0 0 8px #000;font-size:23px}
.iw-panel #panel-content{display:flex;flex-direction:column;flex:1;min-height:0;padding:10px 12px 6px!important;gap:8px;overflow:hidden}
.iw-panel button{color:#dfc99c;border:1px solid #675542;border-radius:0;background:#2c2523 url('../art/legend-ui-v1/btn2_2.png') center/100% 100% no-repeat;text-shadow:0 1px 2px #000;box-shadow:inset 0 1px #d6b27522}
.iw-panel button:hover:not(:disabled){filter:brightness(1.2);color:#ffe9af}.iw-panel button.active,.iw-panel .iw-primary{background:#5a2017 var(--legend-red) center/100% 100% no-repeat!important;border-color:#a78345!important;color:#ffe4a3!important}
.iw-nav{margin:0;flex:none;min-height:32px;gap:5px}.iw-nav>div{gap:5px}.iw-nav button{padding:6px 12px;font-size:12px}
.iw-toolbar{margin:0;flex:none;padding:7px 9px;background:#100e0d;border:1px solid #564434;box-shadow:inset 0 2px 6px #000;gap:7px}
.iw-toolbar select,.iw-toolbar input:not([type=checkbox]){background:#191513;border-color:#62513c;color:#d6c19c;height:29px}.iw-toolbar input[type=checkbox]{accent-color:#8b3c22}
.iw-layout,.iw-layout.iw-character-layout{flex:1;min-height:0;grid-template-columns:minmax(325px,1.17fr) minmax(355px,1.2fr) minmax(280px,.94fr);gap:12px;align-items:stretch;overflow:hidden}
.iw-layout.iw-warehouse{grid-template-columns:minmax(320px,1fr) minmax(320px,1fr) minmax(280px,.9fr)}
.iw-character,.iw-container,.iw-details{display:flex;flex-direction:column;min-height:0;max-height:none!important;overflow:hidden!important;border:1px solid #796046;background:#171311 url('../art/legend-ui-v1/tongyongditu.png') center/400px auto;box-shadow:inset 0 0 0 2px #070605,0 0 0 1px #090806;border-radius:0}
.iw-section-heading{flex:none;min-height:32px;padding:6px 12px;border-bottom:1px solid #72543a;background:var(--legend-head) center/100% 100% no-repeat;color:#c4ad7d}.iw-section-heading h3{font-size:15px;color:#ecd2a0;font-weight:500;text-shadow:0 2px #000}
.iw-dressing,.iw-character-layout .iw-dressing{flex:1;min-height:240px;height:auto;background:radial-gradient(ellipse at 50% 48%,#14121500 35%,#080609b0 100%),url('../art/legend-ui-v1/role_13.jpg') center/cover no-repeat}
.iw-dressing #iw-portrait,.iw-character-layout .iw-dressing #iw-portrait{width:100%!important;height:100%!important;cursor:default!important;touch-action:pan-y}
.iw-slots{top:5%;bottom:7%;display:flex;flex-direction:column;justify-content:space-between;gap:0}.iw-slots.left{left:10px}.iw-slots.right{right:10px}.iw-equip-slot{width:58px}.iw-equip-slot .iw-item{width:58px;height:60px;min-height:60px}.iw-equip-slot>small{font-size:10px;line-height:16px;color:#c3aa76;text-shadow:0 1px #000}
.iw-preview-label{bottom:5px;padding:3px 10px;background:#130c09d9;border:1px solid #786244;color:#d5bb82;font-size:10px}
.iw-rotation{flex:none;padding:5px 4px;border-color:#5a4430;background:#18110f;font-size:10px}.iw-rotation button{padding:3px 9px;font-size:10px}.iw-view-controls{flex:none;padding:0 6px 5px;gap:4px;background:#18110f}.iw-view-controls button{font-size:10px;padding:4px 7px;background:#302522 var(--legend-button) center/100% 100% no-repeat;border-color:#6b5137}
.iw-preview-note{flex:none;font-size:9px;line-height:16px;margin:0;padding:0 8px 3px;color:#a8997c}.iw-stats{flex:none;padding:5px 4px;border-color:#5b422b;background:#130e0b;font-size:10px;color:#ae9974}.iw-stats strong{font-size:19px;margin-top:0;color:#e9ca87;text-shadow:0 2px #000}.iw-set{flex:none;padding:3px;font-size:9px;background:#130e0b;color:#ad956e}
.iw-grid{flex:1;min-height:0;grid-template-rows:repeat(5,minmax(0,1fr));grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;padding:8px}
.iw-item{height:100%!important;min-height:0;max-height:none;box-sizing:border-box;padding:5px 3px 1px!important;border:5px solid transparent!important;border-image:var(--legend-frame) 14 fill / 5px / 0 stretch!important;border-radius:0!important;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--rarity,#776241) 14%,#1b1511),#090706)!important;box-shadow:inset 0 0 10px #0007;justify-content:center;overflow:hidden}
.iw-equip-slot .iw-item{height:60px!important}.iw-item .art-icon{width:clamp(34px,4.3vh,57px)!important;height:clamp(34px,4.3vh,57px)!important;max-width:95%;max-height:calc(100% - 17px);flex-shrink:1;filter:drop-shadow(0 3px 2px #000b)}
.iw-equip-slot .iw-item .art-icon{width:46px!important;height:46px!important;max-height:95%}.iw-item-name{flex:none;font-size:10px;line-height:15px;height:15px;color:var(--rarity,#d0b780);text-shadow:0 1px #000;padding:0}.iw-lock,.iw-plus{background:#100c09d9;font-size:9px;top:0;z-index:2}.iw-plus{right:0;color:#f8dc8e}.iw-lock{left:0;color:#b7a57f}.iw-item.is-selected{outline:1px solid #f7df8c;outline-offset:0;box-shadow:inset 0 0 17px #c68c3355,0 0 7px #b7833460}.iw-item.is-restricted:after{bottom:14px}
.iw-paging{flex:none;min-height:29px;padding:4px;border-top-color:#5e472f;background:#19120f;font-size:11px}.iw-paging button{padding:1px 10px}.iw-footer{flex:none;margin:0;padding:5px 0 0;min-height:27px;border-color:#62482e;font-size:10px;gap:7px}.iw-footer button{font-size:10px;padding:5px 9px}.iw-footer b{color:#e2c080}
.iw-detail-icon{flex:none;min-height:52px;padding:7px 12px;border-bottom-color:#59432d;background:radial-gradient(ellipse at 45% 0%,#80633426,transparent)}.iw-detail-icon .art-icon{width:54px!important;height:54px!important}.iw-detail-icon span{font-size:14px}
.legend-detail-tabs{display:flex;flex:none;padding:7px 10px 5px;gap:5px}.legend-detail-tabs button{flex:1;padding:5px;font-size:11px}.legend-detail-viewport{flex:1;min-height:66px;overflow:hidden;margin:0 12px;position:relative}.legend-detail-content{width:100%;will-change:transform}.legend-detail-content section{display:flow-root}.legend-detail-content section[hidden]{display:none!important}
.legend-detail-content p,.legend-detail-content .panel-note,.legend-detail-content .fineprint,.legend-detail-content .equipment-source{font-size:12px!important;line-height:22px!important;margin:0!important;padding:0!important;border:0!important;background:none!important;color:#bcb098}.legend-detail-content h3{font-size:17px;color:#e6c582;margin:0 0 8px;line-height:24px}.legend-detail-content b{color:#cbb086}.legend-detail-content .equipment-source{margin-bottom:12px!important}.legend-detail-content button{font-size:11px;padding:3px 8px}
.legend-detail-pager{display:flex;flex:none;justify-content:center;align-items:center;gap:12px;padding:4px}.legend-detail-pager button{padding:0 9px;height:22px}.legend-detail-page{font-size:10px;color:#aa946e}
.legend-item-actions{display:grid;flex:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:8px 10px;border-top:1px solid #58432d;background:#15100d}.legend-item-actions button{padding:6px 3px!important;font-size:11px!important;line-height:18px;margin:0!important;width:auto!important}.legend-item-actions .iw-primary{grid-column:1/-1}.iw-help{font-size:10px;color:#a7977b;border-color:#58432d}.iw-detail-empty{color:#baa882;line-height:2}.iw-details .panel-note{background:#211811;border-color:#5e4931;color:#baa882}.iw-records{margin:0;padding:3px 0;border-color:#58432d;font-size:10px;flex:none}.iw-records[open]{max-height:150px;overflow:auto}.iw-requirement{flex:none;margin:0;font-size:10px}
/* The action bar shares the same carved bronze and red leather material. */
.bottom{width:min(1080px,calc(100vw - 32px));bottom:10px}.bottom-meta{padding:5px 17px;color:#d6bf91;font-size:10px;background:linear-gradient(90deg,transparent,#19120db8 20%,#19120db8 80%,transparent)}
.actionbar.glass{position:relative;padding:12px 24px 10px;gap:8px;background:#1c1411!important;border:10px solid transparent!important;border-image:var(--legend-panel) 16 fill / 10px / 0 stretch!important;border-radius:0;box-shadow:0 0 0 1px #a2834d,0 9px 28px #000a;backdrop-filter:none}
.actionbar:before,.actionbar:after{content:'';position:absolute;top:50%;width:11px;height:65px;transform:translateY(-50%);background:url('../art/legend-ui-v1/wupingkuangnb3.png') center/100% 100% no-repeat;pointer-events:none}.actionbar:before{left:3px}.actionbar:after{right:3px}
.actionbar .skill{width:67px;height:73px;flex:none;padding:5px 1px 3px;border:5px solid transparent;border-image:var(--legend-frame) 14 fill / 5px / 0 stretch;border-radius:0;background:linear-gradient(#352218,#100b08);box-shadow:0 2px 4px #0008;overflow:hidden}
.actionbar .skill:hover{filter:brightness(1.18)}.actionbar .skill strong{display:flex;align-items:center;justify-content:center;width:44px;height:44px;line-height:44px;font-size:0;flex:none}.legend-skill-art{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 1px 3px #0008)}
.actionbar .skill small{font-size:10px;line-height:16px;color:#dfc69a;text-shadow:0 1px 3px #000}.actionbar .skill kbd{z-index:2;top:0;left:0;padding:0 4px;color:#e1c595;font-size:9px;line-height:14px;background:#140e0ed9;border-right:1px solid #5c4430;border-bottom:1px solid #5c4430}
.actionbar #skills{gap:7px}.actionbar .divider{background:linear-gradient(transparent,#a17e43,transparent);height:57px}.actionbar .skill .cooldown{z-index:3;background:#090504b8;text-shadow:0 2px #000;color:#fff0c6}.actionbar .menu-buttons{gap:5px;margin-left:1px;grid-template-columns:repeat(2,1fr)}
.actionbar .menu-buttons button{padding:7px 9px;border:1px solid #78603c;border-radius:0;background:#492116 var(--legend-red) center/100% 100% no-repeat;color:#e5ca8e;text-shadow:0 2px #000;font-size:11px}.actionbar .menu-buttons kbd{margin-left:5px;color:#b39661}.actionbar .menu-buttons button:last-child{grid-column:1/-1}
.bottom .xp{height:10px;border:1px solid #a2814b;background:#140c09;margin:6px 5px 0;box-shadow:inset 0 0 3px #000}.bottom .xp i{background:linear-gradient(#edc475,#97611f 45%,#c59644);box-shadow:0 0 6px #cba55933}.bottom .xp span{font-size:8px;color:#f3ddae}.bottom .control-hint{color:#cab18a}
@media(max-width:1250px){.iw-panel{width:calc(100vw - 20px)!important}.iw-layout,.iw-layout.iw-character-layout{grid-template-columns:minmax(280px,1fr) minmax(290px,1.06fr) minmax(250px,.9fr);gap:8px}.iw-nav button{padding:5px 8px;font-size:11px}.iw-toolbar{gap:5px}.iw-toolbar input:not([type=checkbox]){width:180px}.iw-section-heading{padding:5px 9px}.iw-grid{gap:3px;padding:5px}.iw-slots.left{left:6px}.iw-slots.right{right:6px}.iw-equip-slot,.iw-equip-slot .iw-item{width:50px}.iw-equip-slot .iw-item{height:52px!important;min-height:52px}.iw-equip-slot .iw-item .art-icon{width:40px!important;height:40px!important}}
@media(max-height:800px){.iw-panel>header{padding:4px 12px!important;min-height:36px}.iw-panel>header h2{font-size:22px!important}.iw-panel #panel-content{padding:6px 8px 3px!important;gap:5px}.iw-nav{min-height:28px}.iw-toolbar{padding:4px 7px}.iw-toolbar input:not([type=checkbox]),.iw-toolbar select{height:27px}.iw-dressing{min-height:200px}.iw-equip-slot,.iw-equip-slot .iw-item{width:46px}.iw-equip-slot .iw-item{height:47px!important;min-height:47px}.iw-equip-slot .iw-item .art-icon{width:36px!important;height:36px!important}.iw-section-heading{min-height:26px;padding:4px 9px}.iw-section-heading h3{font-size:13px}.iw-view-controls button{padding:3px 5px}.iw-stats{padding:3px}.iw-stats strong{font-size:16px}.iw-set{padding:1px}.iw-preview-note{font-size:9px;line-height:14px}.iw-detail-icon{min-height:40px;padding:4px 8px}.iw-detail-icon .art-icon{width:43px!important;height:43px!important}.legend-item-actions{padding:5px 8px;gap:4px}.legend-item-actions button{padding:3px!important;font-size:10px!important}.iw-footer{min-height:23px}.iw-footer button{padding:4px 6px}}
@media(max-width:1000px){.iw-panel{overflow:auto!important;height:auto;max-height:calc(100dvh - 16px)!important}.iw-panel #panel-content{overflow:visible;display:block}.iw-nav,.iw-toolbar{margin-bottom:7px}.iw-layout,.iw-layout.iw-character-layout{grid-template-columns:1fr 1fr;overflow:visible;min-height:580px}.iw-dressing{min-height:360px}.iw-details{grid-column:1/-1;min-height:430px}.iw-grid{min-height:460px}.iw-footer{margin-top:8px}.bottom{width:calc(100vw - 16px)}.actionbar.glass{padding:8px 16px;gap:4px}.actionbar .skill{width:54px;height:65px}.actionbar #skills{gap:4px}.actionbar .skill strong{width:36px;height:36px}.actionbar .menu-buttons button{padding:6px 5px;font-size:10px}}
@media(max-width:640px){.iw-layout,.iw-layout.iw-character-layout,.iw-layout.iw-warehouse{display:flex}.iw-details{min-height:430px}.actionbar.glass{overflow-x:auto;justify-content:flex-start}.bottom .control-hint{display:none}}

/* Ten fixed positions: five on each side, fitted to the existing portrait area. */
.iw-dressing[data-equipment-slots="10"] .iw-slots{top:3%;bottom:10%;display:grid;grid-template-rows:repeat(5,minmax(0,1fr));gap:4px;width:54px}
.iw-dressing[data-equipment-slots="10"] .iw-equip-slot{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.iw-dressing[data-equipment-slots="10"] .iw-equip-slot .iw-item{width:100%;height:calc(100% - 16px)!important;max-height:60px;min-height:0!important;flex-shrink:1}
.iw-dressing[data-equipment-slots="10"] .iw-equip-slot .iw-item .art-icon{max-width:90%;max-height:95%;flex-shrink:1}
.iw-dressing[data-equipment-slots="10"] .iw-equip-slot>small{flex:none;line-height:16px;font-size:10px;white-space:nowrap}
.iw-character .iw-view-controls{padding:7px 6px;gap:9px}
@media(max-height:800px){.iw-dressing[data-equipment-slots="10"] .iw-slots{width:44px;gap:2px}.iw-dressing[data-equipment-slots="10"] .iw-equip-slot>small{font-size:9px;line-height:13px}.iw-dressing[data-equipment-slots="10"] .iw-equip-slot .iw-item{height:calc(100% - 13px)!important}}