html,body,#root{width:100%;min-height:100%}*{box-sizing:border-box}body{background:#f5f5f5;margin:0;font-family:sans-serif}button,input{font-family:inherit}.app{min-height:100vh}.header{background:#fff;border-bottom:1px solid #ddd;justify-content:space-between;align-items:center;height:60px;padding:0 20px;display:flex}.header h1{margin:0;font-size:24px}.settings-button{background:#fff;border:1px solid #ccc;border-radius:6px;padding:8px 16px;font-size:14px}.main{flex-direction:column;align-items:center;width:100%;padding:20px 0 40px;display:flex}.tier-list{grid-template-columns:35px minmax(0,760px);width:min(795px,100%);display:grid}.tier-row{display:contents}.tier-name{overflow-wrap:anywhere;border:1px solid #ccc;border-radius:5px;justify-content:center;align-items:center;width:100%;min-height:60px;padding:5px;font-size:20px;font-weight:700;display:flex}.tier-images{background:#fff;border-top:1px solid #ccc;border-bottom:1px solid #ccc;border-right:1px solid #ccc;flex-wrap:wrap;align-content:flex-start;align-items:center;min-width:0;min-height:60px;display:flex}.tier-image-item{flex:none;align-items:center;height:70px;padding:5px 0;display:flex}.tier-image-item img{object-fit:contain;cursor:grab;border:1px solid #000;width:auto;max-width:60px;height:auto;max-height:60px;display:block}.tier-image-item img:active{cursor:grabbing}.drop-zone,.last-drop-zone{flex:0 0 10px;width:10px;height:70px}.image-list{background:#fff;border:1px solid #ddd;border-radius:8px;width:760px;max-width:100%;margin-top:20px;padding:15px}.image-list-header{justify-content:space-between;align-items:center;margin-bottom:15px;display:flex}.image-list h2{margin:0;font-size:18px}.upload-button{cursor:pointer;background:#f8f8f8;border:1px solid #ccc;border-radius:6px;justify-content:center;align-items:center;padding:8px 14px;font-size:14px;display:inline-flex}.upload-button input{display:none}.image-list-images{flex-wrap:wrap;gap:10px;display:flex}.image-list img{object-fit:contain;cursor:grab;background:#fafafa;border:1px solid #ccc;width:auto;max-width:60px;height:auto;max-height:60px;display:block}.image-list img:active{cursor:grabbing}.trash-area{width:760px;margin-top:20px}.trash-zone{text-align:center;color:#666;background:#fff;border:2px dashed #ccc;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:120px;display:flex}.trash-icon{font-size:28px}.trash-zone span{font-size:14px}.settings{width:min(860px,100%);margin:0 auto;padding:20px}.settings h2{margin-top:0}.settings-list{flex-direction:column;gap:10px;display:flex}.settings-row{background:#fff;border:1px solid #ddd;border-radius:6px;align-items:center;gap:6px;padding:10px;display:flex}.tier-name-input{border:1px solid #ccc;border-radius:4px;width:120px;min-width:0;padding:8px}.color-input{border:1px solid #ccc;border-radius:4px;width:45px;height:38px;padding:2px}.settings-row button{background:#fff;border:1px solid #ccc;border-radius:4px;padding:8px 10px}.settings-actions{gap:10px;margin-top:20px;display:flex}.settings-actions button{background:#fff;border:1px solid #ccc;border-radius:6px;padding:10px 16px}.change-mark{text-align:center;flex:0 0 12px;width:12px;font-size:20px;font-weight:700}.change-mark:not(:empty){color:red}@media (width<=600px){.header{height:55px;padding:0 12px}.header h1{font-size:20px}.settings-button{padding:7px 12px}.main{padding-top:10px}.tier-list{grid-template-columns:35px minmax(0,1fr);width:100%}.tier-name{min-height:60px;font-size:20px}.tier-images{min-height:60px}.tier-image-item{height:70px;padding:5px 0}.tier-image-item img{object-fit:contain;width:auto;max-width:60px;height:auto;max-height:60px;display:block}.drop-zone,.last-drop-zone{width:10px;height:70px}.image-list{width:340px;margin-top:15px;padding:12px}.image-list-header{margin-bottom:12px}.image-list h2{font-size:16px}.upload-button{padding:8px 10px}.image-list img{object-fit:contain;width:auto;max-width:60px;height:auto;max-height:60px}.trash-area{width:340px}.settings{width:100%;padding:15px 10px}.settings-row{flex-wrap:wrap}.tier-name-input{flex:1;width:auto}.tier-image-item img,.image-list-images img{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}body.touch-dragging{overflow:hidden}.touch-drag-image{object-fit:contain;opacity:.5;pointer-events:none;z-index:9999;width:auto;max-width:60px;height:auto;max-height:60px;position:fixed;transform:translate(-50%,-50%)}}@media (width<=360px){.tier-list{grid-template-columns:35px minmax(0,1fr)}.tier-name{font-size:18px}.tier-image-item{height:70px;padding:5px 0}.tier-image-item img{object-fit:contain;width:auto;max-width:60px;height:auto;max-height:60px}.drop-zone,.last-drop-zone{width:8px;height:70px}.image-list,.trash-area{width:320px}}