.login-page{min-height:100vh;background:#1a1a1a center / cover no-repeat;display:flex;justify-content:center;align-items:center;position:relative}.login-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0006;z-index:0}.login-main{position:relative;z-index:1;width:380px;text-align:center}.login-header{margin-bottom:16px}.login-logo-img{height:56px;margin-bottom:10px}.login-subtitle{color:#fffc;font-size:16px;font-weight:400;letter-spacing:3px;margin:0}.login-panel{background:#000000a6;border-radius:6px;padding:28px 24px 16px}.login-panel-title{color:#fff;font-size:17px;font-weight:600;margin:0 0 22px}.login-input{border-radius:0!important;padding:10px 12px!important;background-color:#000000b3!important;color:#fff!important;border:none!important;border-bottom:1px solid #555!important;height:44px!important}.login-input:hover,.login-input:focus,.login-input:focus-within{border-bottom-color:#999!important;box-shadow:none!important}.login-input input{background:transparent!important;color:#fff!important}.login-input input::placeholder{color:#888!important}.login-input .ant-input-suffix{color:#888}.login-btn{border-radius:20px!important;height:42px!important;font-size:15px!important;font-weight:500!important;border:none!important;background:linear-gradient(to right,#fc3f44,#b8197a)!important;margin-top:4px}.login-btn:hover{opacity:.92;background:linear-gradient(to right,#fc3f44,#b8197a)!important}.page-design{height:calc(100vh - 120px);display:flex;flex-direction:column}.page-design-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #f0f0f0}.page-design-header h3{margin:0}.page-design-body{flex:1;display:flex;overflow:hidden}.panel-left{width:180px;border-right:1px solid #f0f0f0;padding:12px;overflow-y:auto}.panel-left h4{margin:0 0 12px;color:#666;font-size:13px}.component-btn{padding:8px 12px;margin-bottom:6px;border:1px solid #e8e8e8;border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s}.component-btn:hover{border-color:#1677ff;color:#1677ff;background:#f0f5ff}.panel-center{flex:1;display:flex;justify-content:center;padding:20px;background:#f5f5f5;overflow-y:auto}.phone-frame{width:375px;min-height:600px;background:#fff;border-radius:12px;box-shadow:0 2px 12px #0000001a;padding:12px}.canvas-item{display:flex;align-items:center;gap:8px;padding:10px 12px;margin-bottom:6px;border:1px solid #e8e8e8;border-radius:6px;cursor:pointer;transition:all .15s;font-size:13px}.canvas-item:hover{border-color:#1677ff}.canvas-item-selected{border-color:#1677ff;background:#f0f5ff;box-shadow:0 0 0 2px #1677ff26}.drag-handle{cursor:grab;color:#999}.item-icon{font-size:16px}.item-label{font-weight:500;white-space:nowrap}.item-summary{flex:1;color:#999;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.panel-right{width:320px;border-left:1px solid #f0f0f0;padding:12px 16px;overflow-y:auto}.panel-right h4{margin:0 0 16px}.props-form{display:flex;flex-direction:column;gap:8px}.props-form>label{font-size:12px;color:#666;margin-top:4px}.sub-items{display:flex;flex-direction:column;gap:6px}.sub-items .ant-card{margin-bottom:0}.sub-items .ant-card-head{min-height:32px;padding:0 8px}.sub-items .ant-card-head-title{font-size:12px;padding:4px 0}.sub-items .ant-card-body{padding:8px}